Come creare un frame
I frame (“riquadri”) comparvero per la prima volta con Netscape Navigator 2: si tratta della possibilità di suddividere una medesima finestra del browser in vari riquadri indipendenti.
Questa soluzione all’epoca si rivelò un successo, dal momento che permetteva notevoli vantaggi:
- Fino a qualche tempo fa la velocità di navigazione era ben poca cosa, e si navigava con modem analogici molto lenti (anche da 14.4 kbs): i frame hanno l’indubbio vantaggio di non costringere a ricaricare tutta quanta la pagina, accelerando così la navigazione dell’utente all’interno di un sito web. D’altro canto il fatto che solo una parte del contenuto sia ricaricata fa risparmiare banda anche dal punto di vista del server che deve erogare le pagine
- Per quel che riguarda i webmaster, i frame hanno la caratteristica di utilizzare una struttura che consente di non ripetere le parti comuni nelle varie pagine di un sito, dal momento che il contenuto della pagina (per sua natura) è organizzato “a zone”
- Il fatto di poter mantenere fisso su un lato del monitor il menu di navigazione e far scorrere sull’altro lato il contenuto piace a molti utenti, soprattutto quando la risoluzione del monitor è bassa (800 x 600 o 640x480, magari su un monitor da 15’’)
Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames, tanto che subito dopo l’invenzione della Netscape, anche Microsoft si trovò a “copiare” la possibilità di strutturare le pagine in questo modo; in seguito (con l’HTML 4) i frames divennero una specifica ufficiale del W3C.
Struttura di un frameset
Per utilizzare i frame, è necessario creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>
<frameset rows="50%,50%" cols="50%, 50%">
<frame src="prima.html">
<frame src="seconda.html">
<frame src="terza.html">
<frame src="quarta.html">
<noframes>
<p>Qui può essere indicato il link a
<a href="senzaFrame.html"> una versione del sito</a>
che non utilizzi un layout a frame
</p>
</noframes>
</frameset>
</html>
L’esempio completo si trova qui.
Come vi sarete accorti, rispetto alle pagine che abbiamo studiato finora cambiano alcune cose. In primo luogo cambia il doctype, cioè il tipo di documento di riferimento.
All’inizio del documento al posto di questa riga:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
compare ora infatti questa dicitura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">
stiamo indicando semplicemente al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame.
Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag <frameset> (“set di riquadri”), che ci permette di indicare come devono essere indicati i frames all’interno della pagina
Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:
- rows permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne . Ad esempio:
<frameset cols="33%, 33%,*">
- cols permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe
<frameset rows="33%, 33%,*">
Nell’indicare la grandezza di ciascuna riga (o colonna) possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco (“wild card”); normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura (da scegliere a nostra discrezione):
|
Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame. Possiamo farlo con la sintassi:
<frame src="prima.html">
come si può vedere l’origine di ciascun frame è un documento HTML standard (come quelli che abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la sua <head> e il suo <body>.
Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi (che vedremo tra breve).
Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:
- Con Internet Explorer:
selezionare HTML - Con Mozilla:
selezionare this frame > view frame source
È possibile anche individuare un frame in modo più preciso, assegnandogli un nome:
<frame id=”primoRiquadro” name=”primoRiquadro” src="prima.html">
la sintassi corretta per dare un nome a un frame dovrebbe essere:
id=”primoRiquadro”
tuttavia per questioni di retro-compatibilità (con Netscape 4) è oramai entrato nell’uso utilizzare anche name=”primoRiquadro”.
Frameset annidati
È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset. Così:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML.it</title>
</head>
<frameset rows="15%,70%,15%">
<frame src="11.html">
<frameset cols="25%,50%,25%">
<frame src="21.html">
<frame src="22.html">
<frame src="23.html">
</frameset>
<frame src="12.html">
<noframes>
<p>Qui può essere indicato il link a <a href="senzaFrame.html"> una versione del sito</a> che non
utilizzi un layout a frame</p>
</noframes>
</frameset>
</html>
L’esempio completo si trova qui.