C OME 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.

Presentazione sul tema: "C OME 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."— Transcript della presentazione:

1 C OME CREARE I FRAME

2 Dal pannello File fai doppio clic sul file default.html per aprire la pagina (figura 1.1). Figura 1.1 Il file default.html

3 Nella finestra del documento viene visualizzata la pagina (figura 1.2). Figura 1.2 La pagina default.html nella finestra del documento

4 Seleziona nel pannello Inserisci la categoria Layout e fai clic sul triangolino presente alla sinistra del pulsante Frame per aprire il relativo menu. Allapertura del menu seleziona la voce Frame sinistro per inserire nella pagina un frame a sinistra. (figura 1.3). Figura 1.3 Il pulsante Frame

5 Allapertura 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

6 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 dellintera pagina (figura 1.5) Figura 1.5 La pagina divisa in due freme

7 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

8 Vediamo come inserire nel frame sinistro la pagine del menu di navigazione e nel frame destro la pagina della home page. Fai clic allinterno del primo frame per posizionare il cursore di inserimento (figura 1.7) Figura 1.7 Inserimento del cursore nel frame sinistro

9 Seleziona il menu File e fai clic sul comando Apri in frame. Allapertura 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

10 Se appare un messaggio di avviso relativo al salvataggio del documento, fai clic sul pulsante OK per continuare loperazione (figura 1.9). Figura 1.9 Messaggio di avviso

11 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

12 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

13 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

14 Dal menu File seleziona ancora una volta la voce Apri in frame. Allapertura 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 loperazione. 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 ununica pagina (figura 1.13).

15 Figura 1.13 Pagina con due frame

16 Se necessario puoi effettuare delle piccole modifiche per sistemare lestetica 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).

17 Figura 1.14 Salvataggio dei file default

18 Allapertura 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).

19 Salvata la pagina premi il tasto F12 sulla tastiera per visualizzare lanteprima del browser (figura 1.16) Figura 1.16 Anteprima del browser

20 Posiziona il puntatore sullangolo 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

21 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 allURL (figura 1.18). Figura 1.18 Selezione dei file home

22 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 allURL 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).

23 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 lanteprima (figura 1.21).

24 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).