Il Manuale di HTML di Gabriele Gigliotti

Lezione 8: i frames

I frames (in italiano, riquadri): croce e delizia dei navigatori o più spesso croce dei navigatori e delizia dei progettisti. Non è che gli utenti Internet ce l'abbiano con i frames, per partito preso, quanto perchè spesso non vengono gestiti bene dal browser o sono male implementati con il rischio di incorrere nel fastidioso effetto specchio, difficile da spiegare ma sin troppo noto alla maggior parte di chi viaggia in rete.
Attraverso i frames è possibile suddividere la finestra del browser in più parti e far caricare un documento diverso in ciascuna di essi. Si tratta di una soluzione a volte davvero utile, soprattutto se si ha a che fare con siti enormi. si pensi alla creazione di due frames uno più piccolo in cui si inserisce l'indice e uno più grande in cui visualizzare di volta in volta il contenuto richiamato dall'indice. In questo modo si avrebbe sempre il sommario sotto gli occhi, aiutando così il navigatore nell'esplorazione del sito.
Impariamo a suddividere la finestra del browser in due colonne di pari dimensione...
...ma prima di ananlizzare i tag necessari per fare ciò diamo subito un'occhiata al risultato finito schiacciando questo bottone.

Per ottenere questo risultato bisogna creare tre documenti HTML, e precisamente con uno si istruisce il browser in modo che sia in grado suddividere la finestra del browser in due e caricare in ciascuna delle due parti un diverso documento; gli altri due documenti daranno il contenuto alle due parti in cui la finestra è stata suddivisa.
Come al solito, quando c'è d mezzo l'HTML si tratta di qualcosa più facile a farsi che non a dirsi.
Costruiamo la pagina che spiega al browser come operare per suddividere la finestra e dove prelevare i documenti che si vuole far visualizzare in ciascuno dei due riquadri.

<HTML>
<HEAD>
<TITLE>due frames di pari dimensione</TITLE>
</HEAD>

Fin quì niente di nuovo...
...ora tuttavia ci si aspetta il tag <BODY>, è quì sta la prima sorpresa, perchè invece al suo posto troviamo un nuovo tag: <FRAMESET>

<FRAMESET cols="50%,50%">

Con questo comando si comunica al browser che si intende suddividere la finestra in due colonne (cols) di pari dimensione ("50%,50%")

<FRAME src="sinistro.htm">
<FRAME src="destro.htm">

Con questi due tag si indicano i documenti che dovranno essere caricati in ciascuna delle due colonne.

</FRAMESET>
</HTML>

Salva questo file con il nome index.htm

Eccoti ora il listato del file sinistro.htm

<HTML>
<HEAD>
<TITLE>file di sinistra</TITLE>
</HEAD>
<BODY>
<P>Questo file appare nella colonna di sinistra della finestra
</BODY>
</HTML>

In modo analogo e con le opportune modifiche al testo si digiterà il listato di destro.htm
N.B.: avendo specificato percorsi relativi per i file, è bene che gli stessi si trovino nella stessa directory.
Se ora apriamo il file index.htm vedremo il risultato visualizzato in precedenza schiacciando il bottone.
Annidando tag <FRAMESET> è possibile spezzettare la finestra del browser come solo la tua fantasia sa fare.
Schiaccia il bottone per avere un'idea di cosa si può fare se ci si sbizzarrisce con i frame.

Per vedere come ho ottenuto questo risultato dai un'occhiata al listato HTML che ha generato quei frames. Dal Netscape è sufficiente portarsi sulla pagina di cui si vuole leggere il listato e premere contemporaneamente il tasto Ctrl con il tasto U

Alcuni attributi del tag <FRAME>

src="percorso/nome_file"
Questo attributo lo abbiamo già incontrato, serve per specificare la posizione del file che dovrà essere visualizzato in un dato riquadro.
name="nome_del_frame"
Assegnando un nome ad ogni frame sarà poi possibile padroneggiarlo meglio.
frameborder="numero"
Dove al posto di numero si inserisce 1 se si vuole che il frame abbia un bordo oppure 0 se si vuole invece che il bordo non appaia
scrolling="opzione"
Le opzioni previste sono tre
- yes
  Se si vuole inserire una barra di scorrimento
- no
  Se non si vuole inserire una barra di scorrimento
- auto
  Se si vuole lasciare la decisione dell'eventuale inserimento di una barra di scorrimento al browser: il quale ovviamente deciderà sulla base del contenuto da visualizzare ed in base alla dimensione del monitor.
noresize
In presenza di questo attributo si toglie all'utente la possibilità di intervenire sulla dimensione dei frames.

In chiusura della lezione lezione 6, relativa ai link si è appena accennato all'attributo target. Lo riprendiamo più approfonditamente in questa lezione poichè grazie a questo attributo è possibile porre un link in un frame che punti ad un documento di un altro frame.
Per spiegarmi meglio riprendo il primo esempio di questa lezione, ecco il listato del file che da al browser le istruzioni su come suddividere la finestra, e quali file caricare in ogni riquadro.

<HTML>
<HEAD>
<TITLE>due frames di pari dimensione</TITLE>
</HEAD>

<FRAMESET cols="50%,50%">

<FRAME src="sinistro.htm" name="sinistro">
<FRAME src="destro.htm" name="destro">

</FRAMESET>
</HTML>

In rosso ho introdotto l'attributo name. In questo modo specifico un nome per ciascuno dei due documenti che il browser andrà a caricare nelle due colonne in cui sarà suddivisa la finestra.
A questo punto riprendo il listato del file che apparirà nella colonna di sinistra ed inserisco un link che punta ad un documento che verrà caricato nella colonna di destra:

<HTML>
<HEAD>
<TITLE>file di sinistra</TITLE>
</HEAD>
<BODY>
<P>Questo file appare nella colonna di sinistra della finestra
<A href="esempio81.htm" target="destro">breve racconto</A>

Ancora in rosso riporto l'attributo target. Dopo aver attribuito un nome a ciascun file (con l'attributo name), posso usare tale nome per istruire il browser sul frame in cui voglio venga caricato il documento che mi interessa.

</BODY>
</HTML>

Per apprezzare il risultato cui siamo giunti schiaccia il pulsante e attiva il link che troverai nella colonna di sinistra.

lezione 7

indice

lezione 9

Nella lezione nove studierai le mappe sensibili, capirai cosa sono e come possono essere usate per agevolare la navigazione.