Html 2

Creare e gestire pagine con Frame (elemento FRAME)

Amati e odiati, utili o inutili, benfatti o pessimi i frames sono strumenti entrati ormai nella consuetudine del web, e perfettamente gestiti da tutti i browser. I detrattori dei frames affermano l'inutilita' di suddividere ulteriormente le pagine web; pagine che in ultima analisi possono risultare poco leggibili. Altri, pensano che i frames possano rendersi utilissimi evitando di caricare le stesse immagini e mantenendo ordinata la struttura e i contenuti del sito. Naturalmente abusare dei frames puo' portare a traguardi di pessima impostazione grafica, giungendo ad un risultato opposto rispetto a quello preventivato.
Un punto certamente a sfavore dei frames e' la loro incompatibilita' con i programmi di navigazione dei non vedenti che davanti a tali strumenti si bloccano, non permettendo la lettura delle pagine.
Una buona soluzione e' quella di creare una versione frame ed una versione senza frame
Come si creano i frames?
Prima di tutto diamo uno sguardo ai comandi HTML per la gestione dei frame.
N2.0 Documento Frame <FRAMESET></FRAMESET> (al posto di <BODY>)
N2.0 altezza in righe <FRAMESET ROWS=,,,></FRAMESET> (pixel o %)
N2.0 altezza in righe <FRAMESET ROWS=*></FRAMESET> (* = misura relativa)
N2.0 larghezza in colonne <FRAMESET COLS=,,,></FRAMESET> (pixel o %)
N2.0 larghezza in colonne <FRAMESET COLS=*></FRAMESET> (* = misura relativa)
N3.0b larghezza della cornice <FRAMESET BORDER=?>
N3.0b cornice <FRAMESET FRAMEBORDER="yes|no">
N3.0b colore della cornice <FRAMESET BORDERCOLOR="#$$$$$$">
N2.0 Definizione del Frame <FRAME> (contenuto di ogni singolo riquadro)
N2.0 documento da visualizzare <FRAME SRC="URL">
N2.0 denominazione del frame <FRAME NAME="***"|_blank|_self|_parent|_top>
N2.0 larghezza dei margini <FRAME MARGINWIDTH=?> (margine destro e sinistro)
N2.0 altezza dei margini <FRAME MARGINHEIGHT=?> (margine alto e basso)
N2.0 barra di scorrimento? <FRAME SCROLLING="YES|NO|AUTO">
N2.0 dimensione non modificabile <FRAME NORESIZE>
N3.0b cornice <FRAME FRAMEBORDER="yes|no">
N3.0b colore della cornice <FRAME BORDERCOLOR="#$$$$$$">
N2.0 contenuto in assenza di frame <NOFRAMES></NOFRAMES> (per i vecchi browsers)

Per creare una pagina divisa in frame e' necessario creare piu' files HTML richiamati da un file principale che e' poi quello che ne permette la gestione. Prima di tutto quindi bisogna impostare questo file "sorgente", e poi successivamente gli altri files che compongono il frame.

Consideriamo di dover creare una finestra divisa in frame come da figura, con un frame in alto fisso (nel quale caricheremo il file "top.htm" da creare a parte)e un frame centrale (nel quale caricheremo il file "central.htm" da creare a parte) il quale cambi a seconda della pagina che si dovra' visualizzare. Come scritto sopra questi due frames devono essere gestiti da un terzo files il quale dovra' richiamarli assegnando loro una parte della pagina. Ecco il codice di questa pagina:

GUARDARE: esempioFRAME1.htm

Come si vede il codice del frame e' racchiuso tra i comandi <FRAMESET></FRAMESET> che si comportano come gli usuali comandi <HTML></HTML>.
La grandezza dei frame (o meglio lo spazio che ognuno di essi deve occupare della pagina) e' stabilita dal comando rows="80,*, che sta a significare che il frame alto (che in questo caso e' una riga, "rows") deve essere di 80 pixels, mentre quel "*" sta a significare che tutto il resto deve essere assegnato al frame centrale. Avremmo potuto esprimere anche in percentuali le grandezze dei frames, in questo modo:
<FRAMESET rows="20%,*">

Impostati i due parametri <FRAMESET></FRAMESET> all'interno di essi si definiscono i nomi e i files da richiamare nei due frames creati. E' necessario dare un nome al frames (name="alto") e indicare il file HTML che dentro al frame dovra' essere caricato (SRC="top.htm"). Si devono quindi previamente creare due files di nome "top.htm" e "central.htm".

Nota come sia importante la posizione all'interno del codice per la corretta interpretazione da parte del browser. Se infatti si invertono gli ordini in questo modo:
<FRAMESET rows="80,*">
<frame name="centrale" src="central.htm">
<frame name="alto" src="top.htm">
</FRAMESET>

Il browser invertira' l'ordine di assegnazione e carichera' il file "central.htm" nel frame superiore e il file "top.htm" nel frame centrale.

GUARDARE: esempioFRAME1inverso.htm

Per creare due frame verticali e' sufficiente sostituire a "rows" il termine "cols":

</FRAMESET>

GUARDARE: esempioFRAME2.htm

I vecchi browsers non supportavano i frames per cui, nella prospettiva che le pagine vengano visualizzate da uno di questi "vecchi" software, e' utile inserire del codice che avverta della presenza di frames e della impossibilita' da parte del browser di visualizzarle. Ecco il codice da inserire:
<noframe>

Attenzione. Il tuo browser non supporta l'opzione dei frame. Per visualizzare queste pagine e' necessario scaricare un borwser che supporti tali opzioni. Ti consiglio Netscape 3.0 o superiore.

</body>
</html>

</noframe>

E' possibile adottare contemporaneamente una divisione sia in colonne (cols) che in righe (rows), in modo tale da creare una finestra divisa in piu' frames. Vediamo come si deve operare sul codice HTML del documento a seconda del numero e della posizione dei frames che si intendono creare.
<frameset rows="100,*"> <frame name="alto" src="top.htm"><frameset cols="150,*"> <frame name="sx" src="sx.htm.htm"><frame name="centrale" src="central.htm"> </frameset> </frameset>
GUARDARE: esempioFRAME3.htm

GUARDARE: esempioFRAME4.htm

Per eliminare il bordo grigio dei frames si deve inserire il seguente codice:
<frameset cols="20%,60%,20%" border=0>

Per impedire che i frames vengano ridimensionati dal visitatore:
<frame name="alto" src="top.htm" noresize>

Per eliminare sempre le barre di scorrimento (scrollbars):
<frame name="alto" src="top.htm" scrolling="no">

Per renderle sempre visibili:
<frame name="alto" src="top.htm" scrolling="yes">

Per renderle visibili solo quando servono:
<frame name="alto" src="top.htm" scrolling="auto">

Per regolare la distanza dal contenuto del frame dal margine alto (manginheight) e sinistro e destro (marginwidth):
<frame name="alto" src="top.htm" marginheight=2 marginwidth=5>

Per quanto riguarda i links all'interno dei frames (cioe' come caricare una pagina in una frame diverso da quello in cui si trova il link) si deve far riferimento al nome che in fase di realizzazione abbiamo assegnato ai vari frames. Nome che non si riferisce al file ma a quanto scritto dopo "name=". In questo caso, per esempio:

il nome assegnato e' "alto".

Consideriamo la seguente pagina divisa in frames:
<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="centrale" src="central.htm"></frameset>

Consideriamo che da un link presente su "SX", dobbiamo caricare un'altra pagina sul frame "Centrale".

Se il link, presente sul frame "SX", fosse semplicemente:

<A HREF="nuova.htm">Clicca</A>

la pagina verrebbe caricata all'interno dello stesso frame (cioe' "SX"), perche' in assenza di comandi adatti il browser capisce di dover caricare la nuova pagina nello stesso frame in cui e' presente il link.

L'esatto codice e':

<A HREF="nuova.htm" TARGET="centrale">Clicca</A>

Altro uso fondamentale del comando <TARGET> e' quello di richiamare un link ad un'altra pagina la quale verra' visualizzata a pieno schermo, eliminando tutti i frame preesistenti.
Ecco il codice:

<A HREF="nuova.htm" TARGET="_parent">Clicca</A>

Se inserisci il codice:

in testa al documento HTML tutti i link presenti nella pagine elimineranno i frame esistenti, senza necessita' di inserirli in ogni link.

Un'altra necessita' puo' essere quella di caricare, con un solo click, due o piu' frames (naturalmente la finestra deve essere divisa in almeno tre frames).
Consideriamo una pagina suddivisa come nella figura:
<frameset cols="120,*"> <frame name="sx" src="sx.htm"><frameset rows="100,*"> <frame name="alto2" src="top.htm"> <frame name="centrale3" src="central.htm"> </frameset> </frameset>

La nostra necessita' e' di inserire un solo link nel frame di "SX" che carichi contemporaneamente due pagine diverse nei due frames di destra: "alto" e "centrale". Per fare questo e' necessario inserire qualche riga di codice javascript. La prima parte del codice va inserita tra <HEAD></HEAD>:

Mentre la seconda parte va inserita tra <BODY></BODY> dove si vuole inserire il link: