Se avete deciso di utilizzare i frame invece delle pagine singole per il vostro sito, dobbiamo aggiungere altre istruzioni ai collegamenti ipertestuali indicati nella lezione 9 (Creare collegamenti ipertestuali) .
Il principale problema e che se noi inseriamo un normale collegamento come abbiamo visto nella lezione 9, il collegamento riesce ma nella stessa finestra del frame, ovvero se noi nel frame sinistro del menu inseriamo un collegamento con l'intenzione di far aprire una pagina nel frame di destra, la pagina compare nella stessa finestra del menu e non in quella articolo. Serve quindi un istruzione aggiuntiva che dica al collegamento in quale frame andare ad aprire la pagina interessata.
Per spiegare questa procedura ci riferiremo all'esempio3 che é la più completa di finestre, le istruzioni potranno poi essere adattate anche alle altre senza problemi.
Oltre ai collegamenti facciamo anche un po' di pratica con i frame, anzi con questo articolo iniziamo a realizzare il nostro vero sito web.
Primo passo - descrizione frame
Dalla lezione 25 scarichiamo (se non lo avete ancora fatto) il file esempiframe.zip e depositiamolo sul desktop di windows.
Clicchiamo sul file esempiframe.zip per decomprimerlo, sia che utilizzate WinRar che WinZip, basterà prendere con la freccia del mouse la cartella esempiframe e spostarla sul desktop per decomprimerlo.
Chiudete il programma di decompressione e cliccate sulla cartella esempiframe, qui prendete la cartella esempio3, e spostatela sul desktop di windows, chiudete la cartella esempiframe e eliminatela in quanto non vi serve più, mettete da parte il file scaricato casomai volete utilizzare qualche altra struttura in futuro.
Entriamo nella cartella esempio3, qui troviamo 5 file:
index.htm
barra.htm
menu.htm
home.htm
barrasotto.htm
che compongono la seguente struttura
memorizziamo la posizione delle varie pagine e i loro nomi.
Abbiamo già detto nella precedente lezione che FrontPage Express non può aprire la pagina INDEX.HTM se questa e la pagina guida dei frame, per apportare modifiche a questa pagina o anche solo per osservarla, dovremmo aprire la pagina index.htm con un editor di testo, va bene il Blocco note di windows.
Apriamo il Blocco Note di windows, andiamo al menu File, selezioniamo Apri, portiamoci nella cartella esempio3 dove risiede il file index.htm che vogliamo aprire, qui nella finestra di apertura, in basso alla voce Tipo file: selezioniamo l'opzione Tutti i file (*.*) quindi diamo doppio clic sul file index.htm per aprirlo.
Ecco qui sotto il codice che compare, vi ho fatto aprire questo file per farvi prendere nota di alcuni nomi che ci serviranno per i collegamenti.
Visto che ci siamo apportiamo anche una piccola modifica, al posto della scritta Nuova pagina 1 inserite il titolo che volete dare al sito, ad esempio RICETTE DI CUCINA, voi inserite il nome che volete, questo comparirà nella finestra in alto a sinistra di internet explorer. Salvate la modifica dal menu File - Salva.
<html>
<head>
<title>Nuova pagina 1</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<frameset framespacing="0" border="0" rows="64,*,30" frameborder="0">
<frame name="superiore" scrolling="no" noresize target="sommario" src="barra.htm">
<frameset cols="150,*">
<frame name="sommario" target="principale" src="menu.htm">
<frame name="principale" src="home.htm" target="_self" scrolling="auto">
</frameset>
<frame name="inferiore" scrolling="no" noresize target="sommario" src="barrasotto.htm">
<noframes>
<body>
Ma andiamo al vero motivo, nel codice qui sopra ho colorato in modo differente le quattro pagine dei frame e le rispettive chiavi di ricerca.
Escludendo la pagina index.htm che non ha nulla a che vedere con i collegamenti ipertestuali, possiamo dire che
la pagina barra.htm si trova nel frame superiore
la pagina menu.htm si trova nel frame sommario
la pagina home.htm si trova nel frame principale
la pagina barrasotto.htm si trova nel frame inferiore
nei collegamenti ipertestuali saranno utilizzate queste voci di posizione, lo vediamo in seguito, per il momento possiamo chiudere il Blocco note con la pagina index.htm
Inseriamo un collegamento nel frame
Prima di tutto nella cartella esempio3 clicchiamo sul file index.htm in modo che questa venga aperta con tutti i suoi frame da Internet Explorer, la utilizzeremo come anteprima sulle modifiche apportate. Dopo aver dato un occhiata al progetto iniziale, riduciamo la finestra di Internet Explorer senza chiuderla.
NOTA: Quando nel computer si ha più finestre aperte, si può passare velocemente da una finestra ad un altra con ALT + TAB
Il tasto ALT e il terzo in basso a sinistra della tastiera
Il tasto TAB e il terzo dall'alto a sinistra nella tastiera di fianco alla lettera Q
Premete il tasto ALT e tenendolo sempre premuto, cliccate una o più volte sul tasto TAB, cliccando più volte il cursore si sposta sulle varie icone aperte, posizionandoci sull'icona che ci interessa lasciamo il tasto ALT e si passa a quella finestra, più complicato a dire che a fare, vi sarà molto utile nel lavoro.
Adesso apriamo FrontPage Express, nella pagina bianca scriviamo capitolo1 e salviamo la pagina nella cartella esempio3 con il nome capitolo1.htm questa ci servirà come esempio per i collegamenti ipertestuali che andremmo ad inserire.
Sempre da FrontPage Express, apriamo adesso la pagina menu.htm, ci comparirà la pagina azzurra con l'indice provvisorio e la tabella celestina al centro, come ho detto in precedenza, essendo questa pagina menu ristretta, dovremmo inserire i dati solo nella tabella, altrimenti non comparirebbe nella finestra come in origine e si presenterebbe la barra laterale e inferiore.
Sostituiamo le voci: Indice, Capitolo 1, Capitolo 2, Capitolo 3, con i nomi Superiore, Sommario, Principale, Inferiore, come vedi qui sotto in figura
Selezioniamo quindi la prima voce e apriamo il collegamento ipertestuale, come abbiamo già visto nella lezione 9
inseriamo alla finestra URL il nome della pagina da caricare, cioé capitolo1.htm, e nella finestra Frame di destinazione inseriamo la voce superiore, diamo OK
Salviamo le modifiche cliccando sull'icona dischetto, e premendo ALT+TAB spostiamoci nella finestra di Internet Explorer, qui troveremo ancora le vecchie voci capitolo1,2,3, aggiorniamo la pagina con le ultime modifiche cliccando sull'icona Aggiorna.
Comparirà nella pagina il nuovo menu appena modificato, clicchiamo sulla voce superiore, e nella barra in alto vedrete comparire la pagina capitolo1,
La prova e riuscita perfettamente, abbiamo detto al collegamento in quale finestra doveva aprire la pagina interessata. Facciamo la stessa cosa con tutte le altre voci cosi da fare un po' di pratica.
A tutte diamo il collegamento capitolo1.htm diversificando invece il Frame di destinazione con le voci superiore, sommario, principale, inferiore, e la prova finale deve essere che in ogni finestra compaia la pagina indicata.
Come possiamo notare i collegamenti compariranno in azzurro, che sul celeste quasi non si vede, per cambiare colore ai collegamenti riferitevi alla lezione 23, ma per il momento lasciate cosi, nelle prossime lezioni andremmo a completare il sito con i frame fino a impostare il sito completo.
|