HTML » Capire i frame
Quello a frame è un metodo alternativo di strutturare le pagine HTML, con il quale si va a suddividere la finestra del browser in più riquadri indipendenti tra loro. Tale struttura viene a prendere il nome di frameset ed è costituita non più da un’unica pagina, ma da più pagine HTML ognuna nel rispettivo riquadro.
L’utilizzo dei frame è spesso utilizzato per la costruzione di sofisticate interfacce di navigazione, in cui parti della finestra rimangono fisse e conterranno il più delle volte un menu, il logo e altre componenti comuni del sito, mentre i contenuti vengono ogni volta ricaricati o aggiornati nel frame principale. Il tutto si traduce in un notevole risparmio in termini di velocità di navigazione e in sede di realizzazione.
Svantaggi
Esistono sostanzialmente due rovesci della medaglia. Uno di ordine funzionale: non tutti i browser, soprattutto quelli testuali, sono in grado di gestirli correttamente e, anche se lo fanno, spesso non supportano alla stessa maniera i parametri dei tag <frame> e <frameset>.
Un altro svantaggio riguarda il modo in cui i motori di ricerca trattano i siti che utilizzano i frame. Spesso infatti si corre il rischio di far sparire letteralmente le proprie pagine dal motore di ricerca o penalizzarne fortemente il posizionamento e quindi la visibilità in rete.
Realizzare un frameset
Dobbiamo senz’altro partire dalla pagina che farà da contenitore, all’interno della quale stabiliremo la struttura del nostro sito. Per disporre i frame nella finestra, al posto del tag <body> si utilizza
il tag <frameset>con cui andremo a specificare come andranno dimensionati e posizionati i frame.
Vediamo con un semplice esempio come suddividere una pagina a metà in due riquadri orizzontali di uguale altezza:
<frameset rows="50%,50%"> <frame name="superiore" src="sopra.html"> <frame name="inferiore" src="sotto.html"> </frameset>
Semplice no? Con l’attributo rows determiniamo il numero di frame e la loro dimensione (in percentuale, in pixel o digitando un * per dichiarare tutta la parte rimanente). Elencando 2 valori abbiamo ottenuto 2 frame.
I tag <frame> che indicano quale contenuto avrà ognuno dei frame dovranno essere collocati all’interno dei tag frameset nell’ordine in cui saranno caricati dal browser, cioè dall’alto al basso e da sinistra a destra. Avremo così un contenitore che ospita due pagine distinte e indipendenti denominate superiore e inferiore grazie agli attributi name che abbiamo usato.
A questo punto non ci resta che dare un nome alla pagina principale e crearne altre due che si chiamano sopra.html e sotto.html. Caricando la pagina principale vedremo il contenuto di sopra.html nella parte superiore e di sotto.htmlin quella inferiore.
Voglio di più!
Spingiamoci oltre, visto che due frame appoggiati uno sull'altro forse ci servono a poco... Supponiamo invece di voler strutturare la nostra pagina disponendo un frame orizzontale fisso nella parte superiore di 120 pixel per il logo e l’intestazione del sito, uno in basso per mostrare un messaggio di copyright, un altro verticale per il menu a sinistra e la parte rimanente a disposizione del contenuto.
Per realizzare questa struttura a 4 frame dovremo annidare più tag <frameset> e andare per suddivisioni successive. Nel nostro caso la pagina principale potrà essere così strutturata:
<frameset rows="120,*,60"> <frame name="logo+titolo" src="titolo.html"> <frameset cols="90,*"> <frame name="menu" src="menu.html"> <frame name="contenuti" src="home.html"> </frameset> <frame name="footer" src="copyright.html"> </frameset>
Un consiglio per concludere: disegnate prima su carta la struttura, date un nome a ogni frame, stimatene le dimensioni in base al contenuto e alla funzione che dovranno avere; guadagnerete molto più tempo in seguito...
Per un riferimento completo degli attributi supportati andate alla fonte: i testi sacri del W3C.
