Frame -prima parte-

Il frame semplice

Una pagina composta da frame e' un insieme di due o piu' file HTML visualizzati contemporaneamente all'interno della stessa finestra del browser (in realta' i file sono un minimo di tre, ma uno non sara' mai visibile). L'utilita' e la praticita' di questo metodo e' tuttora fonte di discussioni, ma se ben utilizzato presenta indubbi vantaggi. Permette ad esempio di caricare toolbar complesse composte da parecchie immagini (e quindi lunghi tempi di visulizzazione) una volta per tutte, mentre la navigazione del sito avverra' all'interno di questa intelaiatura (frame, appunto). Chiariremo meglio più avanti questo concetto. Un punto a sfavore e' l'incapacita' di certi browser di visualizzare correttamente questo tipo di pagine, ma la colpa di cio' ricade esclusivamente sull'utente che li utilizza. Vengono infatti distribuiti gratuitamente browser abilitati a questo e ad altri tipi di contenuti (java e linguaggi interpretati come javascript, oltre che ai css).

Passiamo ora alla realizzazione pratica dei frame. Dovremo creare tre file HTML separati:

questo è il file che il browser non visualizzera', ma che avra' il compito fondamentale di delineare le proprieta' dei frame ad esso affidati. Lo nomineremo corpo.html e scriveremo al suo interno le seguenti righe di codice:


<HTML>

<FRAMESET COLS=100,*>

<FRAME NAME=sinistra SRC=sx.html>

<FRAME NAME=destra SRC=dx.html>

</FRAMESET>

</HTML>

il secondo lo nomineremo sx.html
editandovi questo codice:


<HTML>
<BODY BGCOLOR=yellow>

frame a sinistra

</BODY>
</HTML>

mentre il terzo lo nomineremo dx.html


<HTML>
<BODY BGCOLOR=gold>

frame a destra

</BODY>
</HTML>

Clicchiamo su corpo.html e se non avremo commesso errori il risultato sara' questo.

Passiamo ad un rapido esame di corpo.html, che e' l'unico file che presenta differenze rispetto ad un normale file HTML:

COLS stabilisce che il frame dovrà essere verticale

100 e' la larghezza in pixel del frame a sinistra (sx.html)

* stabilisce che lo spazio rimanente sara' occupato dal secondo frame (dx.html)

Nell'esempio precedente abbiamo ottenuto una pagina suddivisa dai due frame in senso verticale. Proviamo a sostituire COLS (colonne) con ROWS (righe) all'interno del tag <FRAMESET>.


<HTML>

<FRAMESET ROWS=100,*>

<FRAME NAME=alto SRC=superiore.html>

<FRAME NAME=basso SRC=inferiore.html>

</FRAMESET>

</HTML>

Per completare l'esempio creiamo gli altri due file che andranno a costituire la pagina.

Primo file:


<HTML>
<BODY BGCOLOR=yellow>

frame in alto

</BODY>
</HTML>

Secondo file:


<HTML>
<BODY BGCOLOR=gold>

frame in basso

</BODY>
</HTML>

e otterremo questo risultato

Come si e' appena visto, la realizzazione di una pagina suddivisa in frame non e' particolarmente impegnativa ed i limiti imposti da questa tecnica lasciano ampio spazio alla fantasia del webmaster.
I prossimi esempi mostreranno via via soluzioni piu' raffinate, per ora limitiamoci alla realizzazione di una pagina divisa in tre frame.


<HTML>

<FRAMESET ROWS=15%,70%,15%>

<FRAME NAME=alto SRC=superiore.html>

<FRAME NAME=centro SRC=centrale.html>

<FRAME NAME=basso SRC=inferiore.html>

</FRAMESET>

</HTML>

Per evitare inutili ripetizioni non illustreremo il codice dei tre frame che, come si puo' evincere dal codice sopra, si nomineranno superiore.html, centrale.html e inferiore.html. Si noti che per dimensionare i suddetti frame questa volta si e' adottata la suddivisione in percentuali. Ecco il risultato.

Questo esempio utilizza la suddivisione in tre frame, ma in modo leggermente piu' complesso del precedente. Spicca infatti la presenza di un secondo <FRAMESET>. Come al solito creeremo i tre frame necessari: superiore.html, sinistro.html e destro.html

Segue il codice per la creazione del FRAMESET:


<HTML>

<FRAMESET rows=100,*>

<FRAME NAME=alto SRC=superiore.html>

<FRAMESET cols=100,*> 

<FRAME NAME=sinistra SRC=sinistro.html>

<FRAME NAME=destra SRC=destro.html>

</FRAMESET>

</FRAMESET>

</HTML>

Controlliamo il risultato

Gli attributi

Come per altri elementi, HTML riserva alcuni attributi atti a governare specifiche proprieta'. Eccone alcuni.

Questi riguardano il bordo e andranno inseriti all'interno del tag <FRAMESET>.

FRAMEBORDER ci permette di decidere se rendere visibili o meno i bordi dei vari frame, i suoi valori sono yes e no.

Per eliminare la sottile linea lasciata dall' attributo FRAMEBORDER conviene adottare anche BORDER=0.

BORDERCOLOR=colore ci permette di scegliere il colore di un eventuale bordo.

Questo attributo andra' invece posto all'interno del tag <FRAME>

NORESIZE impedisce lo spostamento del bordo del frame (cosa possibile anche se quest'ultimo viene reso invisibile).

I seguenti riguardano i margini e le eventuali barre di scorrimento e vanno inseriti in <FRAME>

MARGINWIDTH indica quanto spazio riservare tra il bordo destro e sinistro del frame e il suo contenuto. Il valore va definito in pixel.

MARGINHEIGHT indica quanto spazio riservare in alto e in basso.

SCROLLING permette di decidere se visualizzare o meno una eventuale barra di scorrimento. I suoi valori sono yes, no e auto.

Prossimo capitolo