Corso di HTML

I Frames - esempi

 

Dopo aver visto, nella puntata precedente, come implementare i frame, vediamo alcuni modelli che serviranno sicuramente in futuro quando ci troveremo ad implementare il layout del nostro sito web ( o dei nostri clienti! ).

Facciamo un semplice esempio di come implementare una pagina con due frame verticali: uno da usare come indice per delle voci linkate ( quello sinistro ) ed un altro come destinazione dei link.

<html>
<head>
<title> prova con frame </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="100,*">
<frame src="indice.htm" name="indice">
<frame src="default.htm" name="destinazione">
</frameset>
<noframes><body bgcolor="#FFFFFF">

Testo per i browser che non supportano i frames :-(

</body></noframes>
</html>

 

Come vedete l'uso è molto semplice e intuitivo ( come le tabelle ), si complica solo leggermente quando si utilizzano frameset annidati per creare layout ancora più sofisticati.

Nel caso in esame abbiamo creato un frameset composto da due colonne: una di larghezza fissa di 100 pixel e l'altra in proporzione allo spazio restante nella finestra.

Le due pagine ( frame ) si chiameranno rispettivamente indice e destinazione e sono riferite agli URL indice.htm e default.htm. Come già detto i loro nomi potranno essere utilizzati come target dei link nella pagina.

È stata aggiunta anche una sezione ( tra i tag <noframes> e </noframes> ) per i browser che non supportano questo utile meccanismo. A dire la verità questo oggi è abbastanza raro, ma potrebbe accadere per piattaforme hardware particolari che non accedono ad Internet nel modo standard: palmari, cellulari, console...

Vediamo un altro esempio con un frame laterale a sinistra e due a destra con uno da usare come barra del titolo in alto:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="*" cols="80,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="left.htm">
<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" noresize scrolling="NO" src="top.htm">
<frame name="mainFrame" src="main.htm">
</frameset>
</frameset>

<noframes><body bgcolor="#FFFFFF">

Testo per i browser che non supportano i frames :-(

</body></noframes>
</html>

Qui sembra tutto molto più complicato, ma in effetti non lo è ( una corretta indentazione del testo facilita molto la lettura e la comprensione del codice ).

Quello che abbiamo fatto è creare prima un frameset con due colonne ( frame ) e poi successivamente creare un frameset con due righe ( frame ) nella colonna di destra ( usando quindi frames annidati ).

Nel caso in esame abbiamo utilizzato anche degli attributi che ci permettono di nascondere i bordi in modo da far apparire il risultato finale molto più organico e professionale. Abbiamo inoltre disabilitato lo scrolling nella barra a sinistra e in quella in alto.

Il modello qui visto è molto utilizzato nella pratica comune per inserire dei link sulla sinistra e la barra del titolo del sito in alto; i link vengono poi solitamente caricati nel frame centrale grazie alla direttiva TARGET vista nella puntata precedente.

Solitamente gli esempi che vediamo sopra sono l'unico contenuto della pagina contenente il frameset principale, volendo però è possibile aggiungere del testo o dei tag per migliorare l'efficacia dei motori di ricerca. Per tale scopo sono molto utilizzati i tag META che abbiamo visto nei primi articoli del corso.

Nella prossima puntata vedremo un altro strumento molto utilizzato per creare effetti grafici molto carini e professionali: i layers ( livelli ).

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet