HTML - Frames




I frame vengono usati per dividere la finestra in più sezioni, in cui in ogni sezione può essere caricato un documento HTML diverso. Un gruppo di frame all' interno di una finestra vengono chiamati frameset. La finestra viene separata in frame in modo similare alle tabelle, ossia in: righe e colonne.

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:

HTML Horizontal Frames

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:

HTML Vertical Frames

Attributi del Tag <frameset>

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

AttributoDescrizione
colsindica 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.

rowsQuesto 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.
borderQuesto attributo specifica la larghezza del bordo di ogni frame in pixel. Ad esempio border = "5". Un valore di border="0" significa nessun bordo.
frameborderQuesto 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.
framespacingQuesto 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:

AttributoDescrizione
srcQuest' 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.
nameQuest' 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.
frameborderQuesto 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).
marginwidthPermette 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".
marginheightQuesto 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".
noresizeDi 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".
scrollingQuesto 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.
longdescQuest'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:

Frame Target Attribute

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

OpzioneDescrizione
_blankApre il collegamento indicato in una nuova pagina o finestra.
_selfApre il link nello stesso frame.
_parentApre il link in un frame collegato.
_topApre il link nell'intera finestra.
targetframeApre il link in un frame di riferimento targetframe.
Advertisements