COME CREARE I FRAME
Dal pannello File fai doppio clic
sul file default.html per aprire la
pagina (figura 1.1).
Figura 1.1
Il file default.html
Nella finestra del documento viene visualizzata la pagina (figura 1.2).
Figura 1.2
La 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.3
Il 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.4
La 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.5
La 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.6
Strumenti relativi alla pagina Set di frame
Vediamo 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.7
Inserimento 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.8
Il 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.9
Messaggio 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.10
Inserimento 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
Ridimension
amento del
frame
Ridimensionato il primo frame, fai clic sul frame destro per
inserire il cursore di inserimento (figura 1.12).
Figura 1.12
Selezione 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.13
Pagina 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.14
Salvataggio 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
Posiziona 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.17
Messaggio 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.18
Selezione 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).