FRAME

1. FRAME Come creare i frame

2. Creare 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

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

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

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 dell’intera 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. Inserimento delle pagine nei 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

9. 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). Seleziona il menu File e fai clic sul comando Apri in frame. 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 l’operazione (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 Ridimensionamento 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. All’apertura della finestra Seleziona file HTML, seleziona nella cartella principale del sito il file homepage.htmle 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).

15. Figura 1.13 Pagina con due frame

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

17. Figura 1.14 Salvataggio dei file default

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

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

20. Link tra Frame 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

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 all’URL (figura 1.18). Figura1.18 Selezione dei file home

22. Imposta i collegamenti degli altri pulsanti, fai quindi clic sulla voce chi presente nel campo Elemeneti barra di navigazione per selezionarla (figura 1.20). 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.

23. 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). Ripeti le operazioni viste sopra per collegarsi questo pulsante e i successivi alle relative pagine e visualizzarti nel frame destro (main Frame) .

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