Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
I Frames Fabrizio Sacco
2
Progetto di un menù con frame
Immaginiamo di realizzare, tramite Frames, un menù in cui sulla parte di sinistra dellla pagina web compaiono i titoli delle pagine, mentre sulla parte di destra comparira, per ogni clic sul menù, la pagina corrispondente, esempio:
3
Impostazione della Pagina
<html> <head> <title>Menu con due frames di dimensione 10 e 90 %</title> </head> <frameset cols="30%,70%"> <frame src="titoli.html" name="titoli"> <frame src="vuoto.html" name="destro"> </frameset> </html> Per ottenere l'effetto voluto comincio a progettare “menu.html” , per definire la divisione in 2 frame, in colonne, 30 % la colonna di sinistra (quella con il menù) e 70% quella di destra (che conterrà le pagine scelte cliccando sul menù di sinistra). Il primo file .html sarà “menu.html”:
4
Nota E' importante dare un nome alla parte di sinistra del frame (titoli) e alla parte destra (destro). Nota che nel menu (menu.html) NON compare il tag <body>, ma al suo posto <frameset>. <frame src="titoli.html" name="titoli"> <frame src="vuoto.html" name="destro">
5
Codifica pagina vuota a destra del frame
Scrivo la pagina iniziale che comparirà subito nel riquadro di destra (Pagina vuota): Listato di “vuoto.html”: <HTML> <BODY> <h1>PAGINA VUOTA (pagina iniziale) </BODY> </HTML>
6
Poi progetto il file “titoli
Poi progetto il file “titoli.html”, che comparirà nella colonna di sinistra <HTML> <BODY> Menu:<br> <a href="1.html" target="destro">Pagina 1</a> <hr> <a href="2.html" target="destro">Pagina 2</a> <a href="3.html" target="destro">Pagina 3</a> </BODY> </HTML> Si noti l'uso del costrutto “target” in aggiunta dentro il tag <href> già conosciuto.
7
Creazione delle pagine visualizzate dal menù
Ed infine progetto ciascun file di pagina (“1.html”, “2.html”, “3.html”) nel seguente modo: <HTML> <BODY> <h1> Pagina HTML 1 </BODY> </HTML> Le tre pagine sono identiche, tranne che nella riga “Pagina HTML 1” / “Pagina HTML 2”, etc.
Presentazioni simili
