Corso di HTML. Prerequisiti. Modulo L2. B5-I frame. Percentuali Fattore di scala. M. Malatesta B5-I frame-07 09/01/ /01/2014

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Corso di HTML. Prerequisiti. Modulo L2. B5-I frame. Percentuali Fattore di scala. M. Malatesta B5-I frame-07 09/01/ /01/2014"

Bianca Manzoni
5 anni fa
Visualizzazioni

1 Corso di HTML Modulo L2 B5-I frame 1 Prerequisiti Percentuali Fattore di scala 2 1

2 Introduzione In questa Unità illustriamo la possibilità di dividere la pagina in aree indipendenti chiamate frame. I frame dalla versione HTML 5.0 sono caduti in disuso (tecnicamente si dice deprecati), ma i browser li accettano comunque; pertanto, a scopo didattico e di conoscenza, riteniamo opportuno presentarli ugualmente. In HTML 5.0 sono invece presenti gli iframe, strumenti che consentono di inserire una pagina web in un altra pagina web e che sono oggetto di un unità successiva. 3 Cosa scegliere I frame vengono generalmente utilizzati perché facilitano la navigazione in un sito internet, a patto di non abusarne. Ad esempio, in una pagina Web un frame può contenere il menu di navigazione sulla sinistra, mentre un altro frame può essere riservato al contenuto. Durante la navigazione, l utente ha sempre sott occhio il menu di navigazione e quindi si orienta più facilmente. Tuttavia, gestire un sito con i frames può risultare complesso; come alternativa, è possibile inserire in tutte la pagine Web del sito la struttura di navigazione sul lato sinistro. 4 2

3 Le cornici Una cornice (frame) è un elemento di formattazione avanzata, che consente di dividere l area utente in un numero variabile di regioni. Ogni regione: possiede un nome univoco che permetta di individuarla; consente il caricamento di un URL (documento, immagine, etc.) indipendentemente dalle altre cornici; si ridimensiona automaticamente in funzione delle dimensioni dell area utente visibile, permettendo o meno all utente di variarne le dimensioni 5 Il tag <frameset> I frame si creano con il tag: <frameset> che: definisce un insieme di cornici che suddividono l area utente, ciascuna individuata dal tag <frame>. può contenere altri <frameset> o elementi <frame> può contenere una singola sezione <noframes>, che contiene codice HTML alternativo da visualizzare in browser non abilitati alle cornici Il tag <frameset> va posto subito dopo </head> e non contiene <body>. Il tag <body>, se c è, va posto nel tag <noframe> e serve a contenere messaggi e codice HTML che verranno visualizzati dai browser che non supportano i frames. 6 3

4 Il tag <frameset> Crea due cornici verticali Cornice sinistra <!- Index.html --> <html><head><title>esempio di frame</title></head> <frameset cols="20%,80%" border=10 bordercolor=cyano> <frame name="sinistra" src="sinistra.html" bordercolor=red> <frameset rows="30%,*"> <frame name="destra alto" src="destraalto.html"> <frame name="destrabasso" src="destrabasso.html"> </head> </html> Crea a destra due cornici orizzontsli Crea due cornici orizzontali 7 Il tag <frameset> - cornici orizzontali e verticali <frameset cols = > divide l area in cornici verticali <frameset rows = > divide l area in cornici orizzontali I valori indicati per rows e cols indicano l ampiezza e possono essere: valori assoluti in pixel scelta sconsigliabile poiché un valore numerico assoluto è difficile da gestire, per la possibilità da parte dell utente di ridimensionare drasticamente la finestra e per le differenze nella visualizzazione da parte dei vari browser percentuali del totale fattore di scala relativo (simbolo * ) 8 4

5 Il tag <frameset> - cornici orizzontali e verticali Ogni frameset può a sua volta contenere altri frameset o altri frame. Nell esempio, le due cornici verticali sono: <frame name="sinistra" src="sinistra.html" bordercolor=red> che definisce la cornice di sinistra e <frameset rows="30%,*"> che suddivide la cornice di destra in due cornici orizzontali <frame name="destra alto" src="destraalto.html"> <frame name="destrabasso" src="destrabasso.html"> 9 Il tag <frameset> - esempi Esempi: <frameset rows= 20%,60%,20%> definisce tre cornici orizzontali, di cui quella centrale è tre volte più alta di quelle agli estremi; <frameset rows= 100,*,100 > definisce due cornici orizzontali di altezza 100 pixel ed assegna tutto lo spazio restante alla cornice centrale; <frameset rows= 50,*,2* > definisce una cornice di altezza fissa e due cornici che si dividono lo spazio restante, nella misura di 1/3 a quella centrale e 2/3 a quella in basso. 10 5

6 Il tag <frameset> - attributi Alcuni attributi di frameset sono: border = n specifica lo spessore del bordo in pixel per ogni cornice dell insieme. Supportato da Internet Explorer e Netscape. bordercolor = colore permette di indicare il colore del bordo delle cornici dell insieme. frameborder =Yes No definisce per l intero insieme di cornici se debbano o meno essere presenti i bordi (per default è Yes) Minimizzare o nascondere i bordi dei frame è un buon modo per evitare di rubare spazio al contenuto del sito, anche perché non tutti gli utenti hanno monitor da 17 pollici o più! 11 Il tag <frame> - attributi Ogni singola cornice è specificata da un elemento <frame> che non richiede clausola di chiusura. Gli attributi del tag <frame> sono: src= URL specifica l URL dell oggetto (documento, immagine o altro) che deve essere visualizzato nella cornice. name = nomecornice assegna un nome alla cornice in modo da poter aprire in essa un documento mediante l attributo target del tag <a>. In questo caso il documento viene aperto nel frame indicato. 12 6

7 Il tag <frame> - nomi dei frame Sono definiti diversi nomi riservati (che iniziano tutti con il carattere _ ), che possono essere utilizzati come target: _blank apre il collegamento in una nuova finestra; _self apre il collegamento nella finestra o cornice corrente; _parent apre il collegamento nella finestra padre; _top apre il collegamento nella finestra in cima alla gerarchia da cui sono state create le altre finestre. 13 Il tag <frame> - altri attributi marginwidth = n specifica i margini interni sinistro e destro della cornice. marginheight = n specifica i margini interni superiore e inferiore della cornice. scrolling = Yes No Auto specifica se la cornice debba avere o meno barre di scorrimento. Con Yes le barre sono sempre presenti, con No sempre assenti e con Auto sono presenti solo se il contenuto eccede le dimensioni della finestra. noresize se specificato, impedisce il ridimensionamento della cornice da parte dell utente. 14 7

8 Il tag <frame> - altri attributi frameborder = 0 Yes No controlla la visualizzazione dei bordi. In Internet Explorer Frameborder=0 indica che il bordo della cornice specificata non è disegnato. framespacing = n specifico di Internet Explorer, definisce lo spazio in pixel da lasciare attorno alla cornice per dare l apparenza di cornice galleggiante. bordercolor = colore definisce il colore del bordo per la cornice corrente. Per creare una pagina divisa in frame è necessario creare più file html richiamati da un file principale che è quello che ne permette la gestione. 15 Esempi Creazione di due frame verticali <frameset cols="100,*"> <frame name="sx" src="sx.html" scrolling="auto" noresize> <frame name="centrale" src="central.htm" scrolling="auto" noresize> 16 8

9 Esempi Creazione di 1 frame verticale e 2 frame orizzontali <frameset cols="120,*" > <frame name="sx" src="sx.html"> <frameset rows="100,*"> <frame name="alto" src="top.htm"> <frame name="centrale" src="central.htm"> 17 Frame con link In una cornice possiamo anche inserire i link. Ad esempio: Nella pagina index.html si ha: <frameset cols="20%,60%"> <frame name="sx" src="sx.html"> <frame name="centrale" src="central.html"> Nella pagina sx.html è stato aggiunto il collegamento che permette di visualizzare nel frame centrale il file sotto riportato. <a href="cinema.htm" target="centrale">guarda il film</a> 18 9

Frame con link 19 Frame con link È possibile che un link apra una pagina a tutto schermo nel seguente modo: Nella pagina index.html abbiamo: <frameset cols="20%,60%"> <frame name="sx" src="sx.

10 Frame con link 19 Frame con link È possibile che un link apra una pagina a tutto schermo nel seguente modo: Nella pagina index.html abbiamo: <frameset cols="20%,60%"> <frame name="sx" src="sx.html"> <frame name="centrale" src="central.html"> Nella pagina sx.html è stato aggiunto il collegamento che permette di visualizzare a tutto schermo la pagina collegata (eliminando tutti i frame preesistenti) mediante l attributo _top. <a href="cinema.htm" target= _top">clicca</a> 20 10

Frame con link 21 Il tag <noframes> Il tag <noframes> </noframes> indica un testo alternativo che è visualizzato dai browser senza le funzionalità di gestione delle cornici.

11 Frame con link 21 Il tag <noframes> Il tag <noframes> </noframes> indica un testo alternativo che è visualizzato dai browser senza le funzionalità di gestione delle cornici. Può servire per: avvisare l utente che si trova in una pagina visualizzabile con un browser più aggiornato; fornire un collegamento ad una pagina priva di cornici; realizzare una navigazione alternativa trasparente per l utente

12 Argomenti Cosa scegliere Le cornici Il tag <frameset> cornici orizzontali e verticali esempi attributi nomi dei frame altri attributi Esempi Frame con link Il tag <noframes> 23 Altri testi di riferimento P. Asioli, HTML 4.0 G. Gigliotti, HTML 4.01, Apogeo / 24 12

Documenti analoghi

Frames. Come organizzare le pagine web usando i frames. Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice

Frames. Come organizzare le pagine web usando i frames. Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice Frames Come organizzare le pagine web usando i frames Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice Usare i frame Per poter usare i frame è necessario comunicare