Nelle lezioni precedenti abbiamo imparato a creare il nostro sito facendo uso di testo, immagini, links e meta comandi. Pochi e semplici ingredienti per realizzare fin da subito qualcosa di concreto, i più impazienti potranno saltare alla lezione 10 dedicata alla pubblicazione in rete del lavoro svolto fino a questo momento.

Gli altri proseguiranno con questa lezione soltanto se interessati a strutturare il proprio sito in due parti ben distinte: menù laterale (sopra, sotto, destra o sinistra) e pagina principale. Se il sito che avete intenzione di creare dovesse trattare decine di argomenti e di conseguenza decine di pagine, molto probabilmente si renderebbe necessario fare uso di un menù, il quale dovrà essere riportato su tutte le pagine per dare modo al visitatore di scegliere ogni volta comodamente l'argomento. Per evitare di ripetere questo menù su tutte le pagine è possibile usare una struttura a frames. Così facendo si userà il menù una sola volta su una sola pagina che resterà fissa al variare di tutte le altre pagine degli argomenti. Detto così sembra molto complesso ma vi assicuro che è più semplice di quello che potete immaginare.

I Frames (o cornici) altro non sono che una suddivisione della pagina principale in due o più pagine all'interno della stessa finestra del browser. Quante e come disporle dipende soltanto da noi, dal nostro progetto e dalla sua organizzazione. Non esistono limiti anche se si raccomanda di non esagerare per non compromettere la semplicità di gestione da parte del suo stesso ideatore.

In molti casi sono sufficienti due soli frames (cornici), uno laterale dove inserire il menù e l'altro la vera e propria finestra di navigazione. Per dare meglio l'idea di struttura vediamo un paio di esempi:

Con menù laterale:

Frame laterale sinistro per le voci del menù Frame laterale destro per la pagina principale.

Con menù superiore.

Frame superiore per le voci del menù o per un banner sponsor
Frame inferiore per la pagina principale.

Quale dei due schemi adottare dipende soltanto da noi, in qualsiasi caso bisognerà creare una nuova pagina html che dovrà contenere al suo interno soltanto il codice per la struttura dei frames.

Questa nuova pagina così creata richiamerà all'interno di se stessa le altre pagine (in questo esempio due) che si disporranno affiancate verticalmente (oppure orizzontalmente). Di solito essendo questa la pagina iniziale del sito viene chiamata index.html, come spiegato nelle lezioni precedenti.

Per prima cosa si preparano le altre due pagine: menu.html e principale.html, potete assegnare loro qualsiasi altro nome, l'importante è ricordarsi di cambiare i riferimenti laddove io ho adoperato questi due nomi per gli esempi di questa spiegazione.

A questo punto, se avete chiamato index.html il lavoro svolto fino ad ora, rinominatelo in principale.html e creiamo una nuova pagina dal nome index.html. Riprendete la struttura base e portatevi col cursore del mouse subito sotto il tag </head>, inserite il nuovo elemento (tag) che serve per dichiarare una struttura a frames: <frameset>

Si avete capito bene, nessun errore da parte mia, i frames non vanno inseriti ne dentro alla testa <head> ne dentro al corpo <body> ma in mezzo, esattamente dove finisce la testa ed inizia il suo corpo. Questo è l'unico tag di html a comportarsi così.

L'elemento <frameset> è uno di quei tags che da soli non dicono niente, necessita di almeno uno dei suoi due attributirows o cols che servono rispettivamente per suddividere la finestra in righe o in colonne. Da non dimenticare la chiusura </frameset>. Al suo interno possono essere contenuti altri elementi <frameset> nel caso di suddivisioni multiple e complesse, oppure <frame> e/o <noframe>.

Supponendo di dover dividere la finestra in modo verticale adopereremo:

<frameset cols="25%,75%">

Assegnando in questo caso il 25% dello spazio totale al frame piccolo per il menù ed il restante 75% alla finestra principale. Potremo adoperare anche valori fissi espressi in pixel nel caso in cui si debbano rispettare delle misure ben precise, senza cioè mantenere le proporzioni dovute a risoluzioni video e dimensioni diverse impostate dal visitatore. Per esperienza suggerisco di impostare il frame menù con una misura fissa, magari 220 pixel ed il frame principale variabile a seconda di quanto spazio rimane, per fare questo si usa il carattere * asterisco, una specie di jolly:

<frameset cols="220,*">

Una volta stabilite nel frameset le dimensioni della suddivisione, si dovranno richiamare i due files preparati precedentemente e cioè: menu.html e principale.html in questo modo:

<frame name="menu" src="menu.html">
<frame name="principale" src="principale.html">

L'elemento o tag "frame" ha diversi attributi, due sono indispensabili: name che identifica il nome del frame così da poter richiamare su quel frame un link proveniente da un frame diverso, e src(source) che invece richiama la pagina html vera e propria.

Dal momento che i frames impartiscono una divisione della finestra del browser, dovremo decidere se la cornice divisoria deve essere ben visibile oppure no. Nel caso in cui il contenuto del frame menù fosse piuttosto ricco di voci, quindi abbastanza lungo, dovremo prevedere anche un'eventuale barra di scorrimento verticale. Tutti questi parametri sono opzionali e dipendono soltanto dalle nostre intenzioni. A questo proposito vi rimando alla mia guida html che tratta dei frames in maniera più approfondita. Per il momento quello che ci serve è una struttura di questo tipo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Struttura per frames da Web-Link </title>
</head>
<frameset cols="220,*">
         <frame name="menu" src="menu.html" scrolling="auto">
         <frame name="principale" src="principale.html" scrolling="auto">
<noframes>

<body>
<p>spiacente il tuo browser non supporta i frames</p>
</body>

</noframes>
</frameset>

</html>

 

Prima di proseguire nella spiegazione si noti il doctype che è diverso, in questo caso viene usato Frameset e non Transitional come nelle normali pagine senza frame. Questo doctype serve solo per la pagina che ha la struttura a frames mentre per tutte le altre si dovrà continuare ad usare Transitional.

Si noti anche il tag noframes che serve a visualizzare un eventuale messaggio o eseguire altro codice html ma solo nel caso in cui il browser non supportasse i frames.

Salvate la pagina col nome index.html. Vorrei sottolineare che il frameset non è all'interno del tag body e nemmeno all'interno del tag head ma è stato scritto dopo la chiusura di head, praticamente questo dei frames è l'unico tag che non viene inserito in nessuna delle due sezioni (head o body) come spiegato fin dall'inizio di questa rubrica

Se avete salvato il file come index.html non resta che provare a vedere cosa succede: richiamatelo come avete fatto fino ad ora, se avevate preparato precedentemente i due files: menu.html e principale.html questi saranno visualizzati contemporaneamente, uno di fianco all'altro nella stessa finestra come se si trattasse di una sola ed unica pagina.

Ricordatevi i nomi che avete assegnato ai vostri frames con l'attributo name, saranno questi nomi che richiamati all'interno dell'attributo target che si applica ai links e decideranno su quale dei due frames aprire il link stesso.

Difficile?
Per un principiante penso di si, ma un esempio chiarirà sicuramente meglio.
Se avete deciso di usare due frames è molto probabile che uno di questi due debba ospitare un menù, i links di questo menù dovranno però aprire la pagine nella finestra principale e non certo nel piccolo frame del menù stesso sul quale si trovano. Per fare questo si dovrà aggiungere al link l'attributo target (bersaglio o destinazione) specificando il nome del frame usato con (name), quindi:

<a href="nome_pagina.html" target="principale">

Questo link ha in più, rispetto a quelli visti nella lezione sui links, l'attributo target che soltanto adesso ha ragione di esistere dal momento che abbiamo una struttura con più di una sola finestra, possiamo adesso decidere su quale di queste due finestre aprire il link, per farlo basta semplicemente specificare il nome del frame assegnato precedentemente con name che diventa il valore dell'attributo target.

Su questo link è possibile vedere 18 schemi di frames combinati in modo diverso e selezionare il codice html già  pronto, voglio sperare che lo facciate soltanto per apprendere e confrontare il codice adoperato e non per copiarlo spudoratamente 🙂

Con questa lezione avete imparato a gestire il vostro sito adoperando più di una sola pagina web contemporaneamente. Molte persone manifestano una certa diffidenza alla gestione del sito con i frames, alcuni hanno validi motivi, forse, altri ne parlano male soltanto perchè hanno incontrato problemi e difficoltà dovuti ad una errata pianificazione degli stessi. Personalmente li trovo molto utili e per niente complicati da gestire, in alcuni casi sono addirittura l'unica soluzione possibile. Il fatto stesso che il W3C ne continui ad approvare l'uso è di per se una garanzia.

Nella prossima lezione vedremo le tabelle che a differenza di quanto potrebbe sembrare dal nome non servono soltanto per ordinare ed incolonnare dati, anzi, molto spesso sono adoperate per scopi completamente diversi, come per esempio il posizionamento degli elementi di html quali testo ed immagini, così da poterli facilmente disporre secondo precisi schemi di impaginazione.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

NON seguire questo link o sarai bannato dal sito!