I frame

Ultimo aggiornamento venerdì 22 dicembre 2017 à 14:27 da Antonello Ciccarello.

Grazie alla tecnologia dei frames, è ormai possibile visualizzare più pagine HTML in differenti zone (altrimenti dette quadranti). I frames non fanno parte della specifica dell'HTML 3.x, quindi bisogna dichiarare la propria pagina come scritta in HTML 4.0.

Creare dei frames
Gli attributi del tag <FRAMESET>
Gli attributi del tag <FRAME>
Come evitare gli errori con i navigatori non compatibili?
Designare un frame con un legame ipertestuale

Creare dei frames

Per creare un sito con dei frames, basta creare un file contenente il layout degli stessi: questo file HTML ha come particolarità il fatto di avere un contenitore <FRAMESET> al posto del tag <BODY>. È questo tag che definisce i frames per dimensione, pixel o in percentuale (%). Vediamo 3 esempi concreti:

2 frames verticali;

2 frames orizzontali;

2 frames orizzontali e uno verticale.

Esempio n° 1</b>

<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="sinistra">
<FRAME SRC="frame2.htm" NAME="destra">
</FRAMESET>

Ecco come si presenta:

Esempio n° 2</b>

<FRAMESET ROWS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="alto">
<FRAME SRC="frame2.htm" NAME="basso">
</FRAMESET>

Ecco un esempio:

Esempio n° 3</b>

<FRAMESET COLS="20%,
80%"> 
<FRAME SRC="frame1.htm" NAME="sinistra">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm"
   NAME="destra alto">
<FRAME SRC="frame3.htm"
   NAME="destra basso">
</FRAMESET>

Ecco come si presenta:

Gli attributi del tag <FRAMESET>

Attributo	Valore	Azione
Rows	percentuale (tra 1 e 100) valore in pixels Fissando uno solo dei valori e dando all'altro il valore *, il valore si sistema automaticamente	Frame orizzontale
Cols	percentuale (tra 1 e 100) valore in pixels Fissando uno solo dei valori e dando all'altro il valore *, il valore si sistema automaticamente	Frame verticale
Frameborder	YES NO	Indica se il frame ha un bordo o meno
Border=n	n è un valore che definisce la dimensione del bordo	Indica la dimensione del bordo
Bordercolor	Nome del colore Valore del colore in esadecimale	Indica il colore del bordo
Framespacing=n	n è un valore che definisce lo spazio tra i frames	Indica lo spazio tra i frames

Gli attributi del tag <FRAME>

Il tag <FRAME> permette di definire uno o più frames all'interno del tag <FRAMESET>:

Attributo	Valore	Azione
Src	URL	Definisce la posizione della pagina da visualizzare nel frame
Name	"nome"	Definisce un nome che permetterà di visualizzare un altro documento nel frame grazie all'attributo Target
Marginwidth=n	n è un intero che specifica il numero di pixel	Dimensione dei margini laterali
Marginheight=n	n è un intero che specifica il numero di pixel	Dimensione dei margini superiori e inferiori
Frameborder	YES NO	Determina se i frame avranno o meno un bordo
Border=n	n è un intero che specifica il numero di pixel	Dimensione dello spazio tra i frames (solo per Netscape)
Noresize	(Nessuna)	Impedisce all'utente di ridimensionare i frame (Non è il valore di default)
Scrolling	YES NO AUTO	Permette o meno la visualizzazione di una barra di scorrimento (Auto lascia al navigatore la decisione della sua utilità)

Come evitare gli errori con i navigatori non compatibili?

Si useranno i tag <NOFRAMES> e </NOFRAMES> che permettono di specificare un testo HTML da visualizzare nel caso in cui un navigatore non permetta di visualizzare i frame. Il testo tra i tag <NOFRAMES> e </NOFRAMES> deve dunque contenere i tag <BODY> ... </BODY>.

Esempio:

<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="sinistra">
<FRAME SRC="frame2.htm" NAME="destra">
</FRAMESET>

<NOFRAMES>
<BODY>
Questa pagina HTML necessita di un navigatore che supporti i frame,
ci scusiamo per l'inconveniente.
</BODY>
</NOFRAMES>

Designare un frame con un legame ipertestuale

Per visualizzare dei link in uno dei frame, basta usare l'attributo target nel tag <A HREF ..> per specificare il nome del frame che è stato specificato nel tag <FRAME> dall'attributo NAME. Ad esempio:

<A HREF="page.htm" TARGET="sinistra">

Valore	Azione
_self	Visualizza il target nello stesso frame del link
_parent	Visualizza il target nel frame di livello superiore
_blank	Visualizza il target in una nuova finestra
_top	Visualizza il target nella finestra intera del navigatore