Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » Html » Cosa sono i Frame: Tag FRAMESET

Tag FRAMESET

di GDesign, 10 Maggio 2002

Versione StampabileDownload in pdf


I frame sono un particolare tipo di struttura HTML, che consente di suddividere la finestra del browser in diversi riquadri distinti. Un'insieme di frame non è un'unica pagina, ma in ogni riquadro appare una pagina HTML a sé stante. Grazie all'uso dei frame la navigazione di un sito può risultare comoda e molto rapida per il visitatore perché solo una parte dello schermo viene ricaricata o aggiornata mentre uno o più frame restano fissi. L'applicazione più tipica consiste nel creare un frame (di solito a sinistra), che occupi circa il 20/30% dell'intera larghezza della pagina, contenente il menù del sito. Questa parte della finestra resta fissa in ogni pagina del sito e cliccando su una voce del menù appare il contenuto della pagina corrispondente.

Se decidete di usare i frame nelle vostre pagine HTML dovete sapere che questi presentano alcuni svantaggi. Il più significativo è un problema di compatibilità; infatti essendo i frame un'innovazione abbastanza "recente", le versioni più datate dei browser non sono in grado di visualizzarli correttamente. Inoltre alcuni motori di ricerca non riescono a catalogare in modo efficace i siti basati su frame, quindi si corre il rischio di diminuire la popolarità delle proprie pagine web. Aldilà delle possibili controindicazioni, vediamo come si costruiscono le pagine HTML basate sui frame.

Innanzitutto bisogna costruire una pagina contenitore che indica al browser la presenza e la disposizione dei vari frame. Questa pagina differisce dalla normale sintassi HTML perché al posto del tag <BODY> si utilizza il tag <FRAMESET>. Mediante attributi del tag <FRAMESET> si deve specificare se i frame devono essere disposti in orizzontale oppure in verticale. L'attributo da aggiungere al tag <FRAMESET> è ROWS (righe) per una disposizione orizzontale oppure COLS (colonne) per una disposizione verticale. Inoltre bisogna specificare un gruppo di valori che definisca le dimensioni di ogni frame. La sintassi è:

<FRAMESET ROWS="altezza riga 1, altezza riga 2">...</FRAMESET>
oppure
<FRAMESET COLS="larghezza colonna 1, larghezza colonna 2">...</FRAMESET>

Il numero di valori indicati determina automaticamente il numero di frame.

Le dimensioni dei frame possono essere indicate in percentuale (rispetto le dimensioni della finestra) , in pixel o in senso relativo. Per indicarle in percentuale scriveremo:

<FRAMESET COLS="30%,70%">...</FRAMESET>
oppure:
<FRAMESET ROWS="10%,90%">...</FRAMESET>

In pixel scriveremo:

<FRAMESET COLS="80,400">...</FRAMESET>
oppure:
<FRAMESET ROWS="40,600%">...</FRAMESET>

Per indicare le dimensioni in senso relativo si usa il simbolo asterisco *, ad esempio l'attributo ROWS="10%,*" produce due frame di cui il primo occupa il 10% dell'altezza della finestra e l'altro tutta la parte restante.

A questo punto bisogna definire il contenuto dei frame attraverso il tag <FRAME SRC="nome file.html">. Evidentemente le pagine che andranno collocate in ciascun frame devono essere preparate prima. Ad esempio se vogliamo ottenere una struttura contenente due frame affiancati, di cui quello a sinistra occupi il 30% della larghezza della finestra e l'altro il restante spazio dobbiamo:

  1. preparare un file HTML con il testo da inserire nel frame sinistro che possiamo salvare con un nome del tipo paginasinistra.html;
  2. preparare un file HTML con il testo da inserire nel frame destro che possiamo salvare con un nome del tipo paginadestra.html;
  3. preparare la pagina contenitore dove inserire il seguente codice:

<FRAMESET COLS="30%,*">
<FRAME SRC="paginasinistra.html">
<FRAME SRC="paginadestra.html">
</FRAMESET>

e salvarla con un nome qualsiasi. Ricordate che se si tratta della pagina iniziale del sito, opportuno chiamarla index.html o home.html.

Fin'ora abbiamo visto come creare strutture con frame affiancati orizzontalmente o verticalmente. Il linguaggio HTML ci permette di creare anche strutture con un numero irregolare di frame (frame annidati); ad esempio un frame orizzontale superiore e due affiancati inferiori oppure un frame verticale sinistro e due frame sovrapposti a destra e così via. Per costruire questo tipo di strutture si devono impostare nella pagina contenitore molteplici tag <FRAMESET>...</FRAMESET>. Riprendendo l'esempio precedente, se vogliamo dividere il frame di destra in due frame orizzontali scriveremo:

<FRAMESET COLS="30%,*">
<FRAME SRC="paginasinistra.html">
<FRAMESET ROWS="30%,70%">
<FRAME SRC="paginadestrasopra.html">
<FRAME SRC="paginadestrasotto.html">
</FRAMESET>

Modificando liberamente questi parametri è possibile ottenere diverse strutture basate su frame annidati.

Vediamo adesso come personalizzare l'aspetto dei frame inserendo degli attributi ai tag <FRAMESET> e <FRAME> nella pagina contenitore.

Si può regolare la spaziatura tra i frame inserendo nel tag di apertura <FRAMESET> l'attributo FRAMESPACING="numero". Il valore di FRAMESPACING è lo spazio vuoto in pixel tra un frame e l'altro.

Per regolare invece, lo spazio vuoto intorno ai contenuti di un frame si hanno a disposizione due attributi del tag <FRAME>:
MARGINHEIGHT="numero", ci consente di definire lo spazio vuoto in pixel da lasciare sopra e sotto i contenuti del frame;
MARGINWIDTH="numero", ci consente di definire lo spazio vuoto in pixel da lasciare a destra e sinistra dei contenuti del frame.

Possiamo scegliere se visualizzare o meno il bordo dei frame con l'attributo FRAMEBORDER da inserire nel tag <FRAMESET>. FRAMEBORDER può assumere il valore "yes" oppure "no".

Si può anche regolare lo spessore in pixel del bordo con l'attributo BORDER="numero", ed il colore del bordo con l'attributo BORDER="#colore". Però questi ultimi due attributi non sono standard, quindi non tutti i browser possono interpretarli correttamente.

^Top

Dai un voto a questo articolo:   HITS: 135 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 2