HTML/Frames

A cosa servono i frame?

I frames che si possono rendere in italiano con il termine riquadri sono dei porzioni di pagina indipendenti l'una dell'altra. Ad esempio si può dividere la pagina in 3 frame: uno a sinistra, per il menù; una a destra, per i links; e infine la parte centrale per il contenuto della pagina. L'obiettivo dei frame è quello di evitare di dover riscrivere interamente ogni pagina in tutte le sue componenti ma ad esempio, suddividendo la pagina come suggerito prima, per lasciare intatti i frame menù e links, si potrà ricaricare solamente il contenuto del frame centrale, permettendo così di gestire una mole di codice nettamente minore. L'uso dei frame per quanto possa sembrare vantaggioso, è sconsigliabile per i seguenti motivi:

Per mantenere una parte di pagina invariata si può usare un linguaggio lato server come PHP, e con veramente poco codice avrete lo stesso risultato dei frame.
Inoltre le diverse pagine che compongono il frame sono analizzate singolarmente dai motori di ricerca e quindi c'è il rischio che come risultato un motore di ricerca dia ad esempio solo un menu che dovrebbe fare parte del frameset
Per riuscire a disegnare dei frame graficamente accattivanti è necessario saper utilizzare i fogli di stile.

Creare una pagina

Per poter creare una pagina con i frame utilizzeremo il tag <frameset> che inizializza la struttura di una pagina con i frame. All' interno del tag <frameset> useremo il tag <frame> i cui attributi principali sono id, per dare un nome al frame; e src, per indicare la pagina che verrà caricata all'interno del frame stesso. Gli attributi del tag <frameset> ci permettono invece di dare delle dimensioni ai frame essi sono due:

cols: specifica la dimensione delle colonne di ogni frame. Se viene omesso la struttura della pagina sarà a righe.
rows: specifica la dimensione delle righe di ogni frame. Se viene omesso la struttura della pagina sarà a colonne.

Il codice dei seguenti esempio e in generale la struttura dei frame non necessita di trovarsi all'interno del tag <body>. Lo si deve inserire dopo il tag di chiusura </head>

Ecco un esempio con la struttura a colonne:

  <frameset cols="20%,60%,20%">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
   <frame src="pagina3.htm">
  </frameset>

Ecco un esempio con la struttura a righe:

  <frameset rows="20%,60%,20%">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
   <frame src="pagina3.htm">
  </frameset>

I valori di questi due attributi possono essere espressi in percentuale (rispetto alla pagina) o in pixel. C'è un elemento complementare * (asterisco) che si può usare ad esempio per riempire tutta la porzione di pagina non compresa dagli altri frame.

Ecco un esempio:

  <frameset cols="30%,50%,*">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
   <frame src="pagina3.htm">
  </frameset>

Il terzo frame sarà equivalente al 20% della pagina, ossia la porzione restante di pagina non occupata dagli altri due frame.

Fuori dai frame

Per poter scrivere al di fuori della struttura dei frame è necessario servirsi del tag <noframes> seguito da tutta la formattazione html necessaria ai vostri scopi </noframes>

Ecco un esempio di uso del tag <noframes>:

<frameset cols="30%,50%,*">
   <frame src="pagina.htm">
   <frame src="pagina2.htm">
    <noframes>
    Se non ti piacciono i frame usa questo menù: 
      <a href="pagina.htm">Pagina 1</a>
      

      <a href="pagina2.htm">Pagina 2</a>
      

       <a href="pagina3.htm">Pagina 3</a>
    </noframes>
   <frame src="pagina3.htm">
  </frameset>

Attributi del frameset

Ecco una tabella riassuntiva degli attributi del tag <frameset>

Attributo	Significato
`framespacing`	Specifica lo spazio tra un frame e un altro (solo IE)
`bordercolor`	Specifica il colore dei bordi del frameset
`border`	Specifica lo spazio tra un frame e un altro, espresso in pixel

Attributi dei frame

Ecco una tabella riassuntiva degli attributi del tag <frame>

Attributo	Significato
`scrolling`	Specifica se si desiderano i bordi, yes (opzione di default), o meno no
`noresize`	Impedisce il ridimensionamento di un frame (no necessita di valori)
`marginheight`	Specifica la distanza in verticale tra il bordo del frame e il suo contenuto
`marginwidth`	Specifica la distanza in orizzontale tra il bordo del frame e il suo contenuto
`frameborder`	Specifica se i bordi sono visibili o meno, rispettivamente i valori 1 e 0

Caricare una pagina

Attraverso l'attributo target del tag <a> è possibile caricare i contenuti di un link in un frame specifico o in nuova finestra. Questa è la sintassi: <a href="url alla pagina da inserire nel frame" target="nome del frame">Testo del link</a>

Ecco un esempio:

<body>
 <a href="pagina.htm" target="centro">Il link verrà caricato all'interno del frame 'centro'</a>
</body>

L'attributo target può avere, oltre al nome del frame dichiarato negli attributi name o id, i seguenti valori:

_blank: carica il contenuto in una nuova finestra.
_top: carica il contenuto sovrastando la struttura del frameset.
_self: carica il contenuto nello stesso frame del link.
_parent: carica il contenuto nel frameset genitore.

Ecco un esempio:

<body>
 <a href="pagina.htm" target="_blank">Il link verrà caricato in una nuova finestra</a>
</body>

È possibile anche dare un valore di default all'attributo target mediante il tag <base>.

Ecco un esempio:

<head>
 <base target=”nomeframe”>
</head>

Questo farà si che i link si aprano all'interno del frame che si è indicato, a meno che nell'attributo target di un link non sia specificato un altro valore.

Iframe

Iframe sta per Inline frame e permette di inserire un frame anche in una pagina non strutturata in frame. È sufficiente servirsi del tag <iframe> i cui attributi sono width, che ne specifica la larghezza; height, che ne specifica l'altezza; e src che specifica il documento da caricare al suo interno (anche un url esterno se necessario). Per la sua comodità questo tag è stato subito incluso nelle specifiche dal W3C.

Ecco un esempio di iframe:

 <body>
  <iframe width="50%" height="30%" src="http://it.wikipedia.org">
  Se il vostro browser non supporta i frame verrà mostrato questo testo
  </iframe>
 </body>

Il tag <iframe> supporta inoltre tutti gli attributi del tag <frame>.
Con un adeguato script JavaScript, inoltre, è possibile creare un testo scorrevole in verticale.