FRAMECOME CREARE I FRAME

Creare FrameDal pannello File fai doppio clic sul file default.html per aprire la pagina (figura 1.1).

Figura 1.1Il file default.html

Nella finestra del documento viene visualizzata la pagina (figura 1.2).

Figura 1.2La pagina default.html nella finestra del documento

Seleziona nel pannello Inserisci la categoria Layout e fai clic sul triangolino presente alla sinistra del pulsante Frame per aprire il relativo menu.All’apertura del menu seleziona la voce Frame sinistro per inserire nella pagina un frame a sinistra .

(figura 1.3).

Figura 1.3Il pulsante Frame

All’apertura della finestra Attributi di accessibilità tag Frame, lascia inalterato il titolo proposto e fai clic sul pulsante OK (figura 1.4)

Figura 1.4La finestra Attributi di

accessibilità tag Frame

Nella finestra del documento la pagina viene divisa in due frame, il primo situato a sinistra occupa una stretta colonna, il secondo a destra occupa buona parte dell’intera pagina (figura 1.5)

Figura 1.5La pagina divisa in due freme

La pagina appena realizzata viene definita Set di frame ed è un documento che indica al browser come visualizzare le pagine alle quali il Set di frame fa riferimento.

Come puoi notare la finestra di ispezione Proprietà visualizza ora gli strumenti relativi al Set di frame (figura 1.6).

Figura 1.6Strumenti relativi alla pagina Set di frame

Inserimento delle pagine nei frameVediamo come inserire nel frame sinistro la pagine del menu di navigazione e nel frame destro la pagina della home page.Fai clic all’interno del primo frame per posizionare il cursore di inserimento (figura 1.7)

Figura 1.7Inserimento del cursore nel frame sinistro

Seleziona il menu File e fai clic sul comando Apri in frame.

All’apertura della finestra Seleziona file HTML seleziona nella cartella principale del sito il file barra e fai clic sul pulsante OK (figura 1.8).

Figura 1.8Il file barra

Se appare un messaggio di avviso relativo al salvataggio del documento, fai clic sul pulsante OK per continuare l’operazione (figura 1.9).

Figura 1.9Messaggio di avviso

Nella finestra del documento compare ora, nel primo frame, parte della pagina contenente la barra di navigazione precedentemente realizzata (figura 1.10).

Figura 1.10Inserimento della pagina di navigazione

Per visualizzare interamente la parte interessata (la barra di navigazione) posiziona il puntatore del mouse sul bordo destro del primo frame e quando il puntatore assume la forma di una freccia a due punte, fai clic e trascina il bordo verso destra per aumentare la larghezza del frame.Al rilascio del mouse potrai visualizzare la parte di pagina nascosta (figura 1.11)

Figura 1.11

Ridimensionamento

del frame

Ridimensionato il primo frame, fai clic sul frame destro per inserire il cursore di inserimento (figura 1.12).

Figura 1.12Selezione del frame destro

Dal menu File seleziona ancora una volta la voce Apri in frame.

All’apertura della finestra Seleziona file HTML, seleziona nella cartella principale del sito il file homepage.html e fai clic sul pulsante OK.

Se appare un messaggio di avviso relativo al salvataggio del documento, fai clic sul pulsante OK per continuare l’operazione.

Nel secondo frame viene inserita la home page, mentre nel primo frame è presente il menu di navigazione. Ciò permette di visualizzare contemporaneamente le due pagine presenti nei frame su di un’unica pagina (figura 1.13).

Figura 1.13Pagina con due frame

Se necessario puoi effettuare delle piccole modifiche per sistemare l’estetica delle due pagine in qualsiasi memento selezionandone gli elementi da modificare.

Posiziona il puntatore sul bordo che separa il frame sinistro dal frame destro e quando lo stesso assume la forma di una freccia a due punte, fai clic per selezionare il Set di frame.

Per salvare la pagina seleziona il menu File e fai clic sulla voce Salva set di frame con nome.

Nella finestra Salva con nome dovrai dare un nome alla sola pagina di Set di frame in quanto le altre due pagine inserite nei frame sono già presenti; per usare la pagina di Set di frame come pagina di apertura, seleziona il file default per mantenere lo stesso nome e fai clic sul pulsante Salva (figura 1.14).

Figura 1.14Salvataggio dei file default

All’apertura della finestra di avviso che il file selezionato esiste già, fai clic sul pulsante OK per sovrascrivere e aggiornare il file precedente (figura 1.15).

Salvata la pagina premi il tasto F12 sulla tastiera per visualizzare l’anteprima del browser (figura 1.16)

Figura 1.16 Anteprima del browser

Link tra FramePosiziona il puntatore sull’angolo superiore sinistro della barra di navigazione e quando appare la miniatura di tabelle fai clic per selezionare la barra.Una finestra ti avvisa che è possibile inserire una sola barra di navigazione oppure modificare quella già inserita, fai clic sul pulsante OK per confermare la modifica della barra e proseguire(figura 1.17).

Figura 1.17Messaggio di avviso

Viene aperta la finestra Modifica barra di navigazione del tutto uguale alla finestra utilizzata precedentemente per realizzare i pulsanti della barra. Devi ora impostare per ogni elemento della barra di navigazione il collegamento alla pagina corrispondente e il frame di visualizzazione.Con il primo elemento selezionato di default, home, fai clic sul pulsante Sfoglia a destra del campo Dopo un clic, accedi all’URL (figura 1.18).

Figura 1.18Selezione dei file

home

Nella finestra Seleziona file HTML seleziona il file homepage di seguito fai clic sul pulsante OK per confermare.Il nome del file selezionato viene inserito nel campo Dopo un clic, accedi all’URL Fai clic sul triangolo di apertura del campo in seleziona la voce mainFrame per visualizzare la pagina nel frame destro.Imposta i collegamenti degli altri pulsanti, fai quindi clic sulla voce chi presente nel campo Elemeneti barra di navigazione per selezionarla(figura 1.20).

Ripeti le operazioni viste sopra per collegarsi questo pulsante e i successivi alle relative pagine e visualizzarti nel frame destro (main Frame) .

A lavoro completo fai clic sul pulsante OK.Salva la pagina dal menu File facendo clic sulla voce salva tutto.Premi il tasto F12 per viusalizzare l’anteprima (figura 1.21).

Con la pagina visualizzata nel browser fai clic sui pulsanti della barra di navigazione presenti nel frame sinistro e se hai effettuato i collegamenti in maniera corretta vedrai apparire nel frame destro le relative pagine.

Verifica che tutti i collegamenti siamo ben funzionanti, controlla le immagini rollover, i punti di vista, i link interni al funzionamento dei livelli nascosti e quelli animati (figura 1.22).