Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

frameset e frame

4 maggio 2011, Scritto da , category HTML

Il frameset è un particolare tipo di pagina HTML che prevede un layout basato sull’inclusione di altri file html, detti frame, e disposti secondo righe e colonne.

Solitamente si utilizzano i frameset per creare layout più o meno complessi dove è importante che una o più sezioni della pagina siano sempre visibili mentre altre siano navigabili nella maniera tradizionale (ovvero con la comparsa di maniglie di scorrimento laterali o inferiori nel caso in cui il contenuto della pagina sia maggiore della dimensione della finestra del browser).

Un esempio di frameset molto comune, che prevede una sezione fissa contenente le voci di menu a sinistra ed una fissa contenente l’intestazione del sito (con logo e nome del progetto) è il seguente:

html frameset

In questo esempio Frame1 sarà la sezione di sinistra, fissa, sempre visibile, contenente il menu di navigazione del sito. Frame 2 sarà la sezione contenente logo e nome del sito mentre Frame 3 rappresenta la sezione in cui inseriremo i contenuti veri e propri della pagina. La sezione Frame 3 farà comparire le barre di scorrimento orizzontali e verticali nel caso in cui, come scritto prima, il contenuto superi la dimensione della finestra del browser.

Per creare un frameset si utilizza la stessa sintassi necessaria per creare una pagina web con la differenza che, al posto del tag <body> si utilizza il tag <frameset>.
I file HTML che vogliamo includere nei vari frame, invece, vengono caricati grazie all’apposito tag <frame>

Esiste anche il tag <noframe> che serve per riportare un messaggio di avviso per tutti gli utenti che stanno navigando il sito con browser datati o che non supportano i frame.

Attributi per il tag frameset

  • cols | rows: servono per dividere il frameset in righe o colonne. Il valore determina l’ampiezza delle righe/colonne e può essere espresso in pixel o percentuale e può essere espresso anche tramite l’utilizzo del carattere carattere jolly “*“. In questo caso la dimensione della riga/colonna sarà data dalla dimensione totale della finestra del browser meno la dimensione delle righe/colonne per cui è già stata specificata la altezza/larghezza.
  • border:  specifica se il frameset deve avere il bordo o meno. Il valore predefinito è true e si può omettere. Si utilizza false per nascondere il bordo.
  • frameborder: specifica la dimensione del bordo nel caso in cui sia visibile.
  • framespacing: specifica la distanza tra i frame

Attributi per il tag frame

  • src: serve per specificare il file html da includere nel frameset
  • name: serve per specificare il nome del frame, informazione utile per far sì che i collegamenti ipertestuali aprano il contenuto in un target specifico.
  • scrolling: indica se mostrare o meno le barre di scorrimento per far scorrere la pagina al fine di mostrare una parte o tutto il contenuto in essa presente. Può assumere valori yes (predefinito) e no
  • noresize: serve per evitare che il frame sia ridimensionabile con il mouse
  • marginwidth: serve per specificare la larghezza del margine del frame
  • marginheight: serve per specificare l’altezza del margine

Vediamo come creare un frameset composto da due colonne e due righe, così come da figura sopra riportata.

<html>
<head>
<title>Il mio frameset</title>
</head>
<frameset cols="200,*"><!-- creo una colonna larga 200px ed una seconda ampia quanto tutto lo spazio rimanente -->
<frame src="left.htm" name="menu"><!-- inserisco una pagina HTML all'interno di un frame, chiamato menu e contenente la pagina left.html -->
<!-- creo un frameset all'interno della colonna destra (quella ampia *, cioè quanto lo spazio disponibile rimanente ) e la divido in due sezioni la prima delle quali alta 100 e la seconda alta quanto il rimanente spazio disponibile -->
<frameset rows="100,*">
<!-- inserisco la pagina chiamata top.htm contenente l'intestazione del sito -->
<frame src="top.htm" name="main">
<!-- inserisco la sezione dinamica destinata a contenere il contenuto delle mie pagine web -->
<frame src="main.htm" name="bottom">
</frameset> <!-- chiudo il frameset interno, dedicato alle righe -->
</frameset><!-- chiudo il frameset esterno, dedicato alle colonne -->
</html>