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 semplice 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):
dimensione
fissa |
Questa sintassi crea
un frameset
di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri:
<frameset rows="150,*" cols="100,200,*">
L’altezza della 1a riga è di 150 pixel, mentre la seconda
si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente:
100 pixel, 200 pixel, e la terza colonna si adatta al resto della
pagina |
percentuale |
Questa sintassi crea
un frameset
che si adatta alla risoluzione. La grandezza dei riquadri è
espressa in percentuale:
<frameset rows="20%,80%" cols="25%,25%,50%">
come si può vedere la prima riga occupa il 20% dell’altezza,
la seconda il rimanente 80%.
Le 3 colonne si dividono la larghezza: la prima colonna occupa il
25%, la seconda nuovamente il 25%, la terza il 50% dello spazio |
proporzionale |
In
questo caso la ripartizione è proporzionale:
<frameset rows="1*,3*" cols="3*,2*,1*">
- per quel che riguarda le righe: l’altezza viene suddivisa
in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda
riga ne occupa 3
- per quel che riguarda le colonne: l’altezza viene suddivisa
in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda
riga ne occupa 2 e la terza 1
|
|
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 poco).
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.