Tag

, , ,

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”&gt;

<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”&gt;

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

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 ciò 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 ciò 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 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à è oramai entrato nell’uso utilizzare anche name=”primoRiquadro”.