HTML - Frames

Svantaggi dei Frames

L' utilizzo dei frame porta qualche svantaggio, perci� se ne sconsiglia l'utilizzo:

Alcuni dispositivi pi� piccoli non possono utilizzare i frame poich� spesso il loro schermo non � abbastanza grande per essere diviso
A volte la tua pagina verr� visualizzata in modo diverso dai diversi computer a causa della diversa risoluzione dello schermo.
Il pulsante indietro presente nei browser, potrebbe non funzionare correttamente.
Ancora qualche browser non supporta i frame.

Creazione di un Frame

Per usare i frame in una pagina baster� utilizzare il tag <frameset>, anzich� il tag <body>. Il tag <frameset> definisce come dividere la finestra in frame. L' attributo rows del tag <frameset> definisce un frame orizzontale, mentre cols definisce un frame verticale. Ogni frame � indicato dal tag <frame> e definisce quale documento HTML dovr� contenere.

Esempio

A seguire un esempio per creare tre frame orizzontali:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
   <frame name="top" src="/html/top_frame.htm" />
   <frame name="main" src="/html/main_frame.htm" />
   <frame name="bottom" src="/html/bottom_frame.htm" />
   <noframes>
   <body>
      Your browser does not support frames.
   </body>
   </noframes>
</frameset>
</html>

Produrrà il seguente risultato:

Esempio

Mettiamo insieme gli esempi, adesso sostituire le righe da colonne e cambieremo loro la larghezza. Ci� permetter� di avere i tre frame in verticale:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
   <frame name="left" src="/html/top_frame.htm" />
   <frame name="center" src="/html/main_frame.htm" />
   <frame name="right" src="/html/bottom_frame.htm" />
   <noframes>
   <body>
      Your browser does not support frames.
   </body>
   </noframes>
</frameset>
</html>

Produrrà il seguente risultato:

Attributi del Tag <frameset>

A seguire alcuni attributi importantei per il tag <frameset>:

Attributo	Descrizione
cols	indica quante colonne sono contenute in un frameset e la dimensione di ogni colonna. La dimensione pu� essere indicata in vari modi: Valore in pixel assoluto. Ad esempio per creare tre frame useremo cols="100, 500,100". Una percentuale della finestra del browser.Per esempio cols="10%, 80%,10%". Utilizzando un asterisco. Per esempio per creare tre frame verticali useremo: cols="10%, ,10%". In questo l' asterisco tiene conto della finestra. Come larghezza relativa. Per esempio usando cols="3,2,1". Questa � un'alternativa alle percentuali. � possibile utilizzare le larghezze relative della finestra del browser. Qui la finestra � divisa in sei parti: la prima colonna occupa la met� della finestra, Il secondo occupa un terzo, e il terzo occupa un sesto.
rows	Questo attributo funziona proprio come l'attributo cols e prende gli stessi valori, ma viene utilizzato per specificare le righe nel frameset. Ad esempio per creare due frame orizzontali, utilizzare rows="10%, 90%". � possibile specificare l'altezza di ogni riga come descritto sopra per le colonne.
border	Questo attributo specifica la larghezza del bordo di ogni frame in pixel. Ad esempio border = "5". Un valore di border="0" significa nessun bordo.
frameborder	Questo attributo specifica se � necessario visualizzare un bordo tridimensionale tra i fotogrammi. Questo attributo pu� avere valore 1 (s�) o 0 (no). Ad esempio frameborder = "0" non specifica alcun bordo.
framespacing	Questo attributo specifica la quantit� di spazio tra i fotogrammi in un frame-set. Questo pu� assumere qualsiasi valore intero. Ad esempio framespacing = "10" significa che ci dovrebbe essere una distanza di 10 pixel tra ogni fotogramma.

Attributi del Tag <frame>

A seguire degli attriburi <frame> tag:

Attributo	Descrizione
src	Quest' attributo definisce il nome del file che dovr� essere contenuto nel frame. Il suo valore pu� essere un qualsiasi URL. Per esempio, src="/html/top_frame.htm" caricherà un file HTML disponibile nella cartella html.
name	Quest' attributo permette di dare un nome al frame. È usato per indicare quale frame un documento deve caricare. È particolarmente importante quando vuoi creare link in un frame, che carica in un altro frame, in questo caso il secondo frame ha bisogno di un nomer per identificarsi all' interno del link di destinazione.
frameborder	Questo attributo specifica se vengono visualizzati i bordi di quel frame; Sovrascrive il valore specificato nell'attributo frameborder nel tag <frameset> e pu� assumere come valori 1 (s�) o 0 (no).
marginwidth	Permette di definire uno spazio alla sinistra e destra fra il bordo del frame ed il suo contenuto. Il valore � indicato in pixel. Per esempio marginwidth="10".
marginheight	Questo attributo consente di specificare l'altezza dello spazio tra la parte superiore e inferiore dei bordi del frame e il suo contenuto. Il valore � dato in pixel. Ad esempio marginheight = "10".
noresize	Di default � possibile ridimensionare qualsiasi frame facendo clic e trascinando i bordi. L'attributo noresize impedisce ad un utente di ridimensionare il frame. Ad esempio noresize = "noresize".
scrolling	Questo attributo controlla l'aspetto delle barre di scorrimento che appaiono sul frame. Richiede come valori "yes", "no" o "auto". Ad esempio scrolling= "no" significa che non dovrebbe avere barre di scorrimento.
longdesc	Quest'attributo permette di definire una pagina in cui vi � una descrizione del frame. Per esempio longdesc="framedescription.htm"

Compatibilit� dei Browser per i Frame

Se un utente utilizza un vecchio browser o un browser che non supporta i frame, l'elemento <noframes> permette di mostrargli un avviso.

Perci� bisogna inserire un elemento <body> all'interno dell'elemento <noframes>. Dato che l' elemento <frameset> sostituisce il <body>, cos� dato che il browser non capisce il frameset, capir� il body.

Puoi inserire un messaggio del tipo Ci dispiace!! Il tuo browser non supporta i frame. come mostrato nell'esempio sopra.

Frame's name and target attributes

Uno degli usi pi� diffusi dei frame � quello di utilizzarli per tenere il menu di navigazione in un unico frame e quindi caricare il contenuto in un frame separato.

A seguire un esempio in cui il file test.htm ha il seguente codice:

<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
   <frame src="/html/menu.htm" name="menu_page" />
   <frame src="/html/main.htm" name="main_page" />
   <noframes>
   <body>
      Your browser does not support frames.
   </body>
   </noframes>
</frameset>
</html>

Adesso avremo creato due colonne all' interno di due frame. Il primo frame � largo 200px e conterr� il menu di navigazione implementato nel file menu.htm. La seconda colonna occupa lo spazio rimanente e conterr� la parte principale della pagina contenuta nel file main.htm. Per tutti i tre link disponibili nel menu abbiamo utilizzato come target il main_page, quindi qualsiasi link clickato si aprir� nel main_page.

A seguire il contenuto del file menu.htm:

<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="https://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="https://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="https://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
</html>

A seguire il contenuto del file main.htm:

<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>

Quando caricheremo il file test.htm, otterremo il seguente risultato:

Adesso puoi provare a clickare un link nel pannello di sinistra per vederne il risultato. L' attributo target pu� inoltre avere i seguenti valori:

Opzione	Descrizione
_blank	Apre il collegamento indicato in una nuova pagina o finestra.
_self	Apre il link nello stesso frame.
_parent	Apre il link in un frame collegato.
_top	Apre il link nell'intera finestra.
targetframe	Apre il link in un frame di riferimento targetframe.

Previous Page Print Page