Frames o Cornici

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 il proprio sito, 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 leggermente più complessa delle altre e dedicata ai frames. Se il sito è formato da diversi argomenti, presto si avvertirà la necessità di usare un menù, questo sia per agevolarne la navigazione che per dare subito l'idea di quali siano i contenuti trattati. Per fare questo si ricorre alla tecnica dei frames.

I Frames o cornici altro non sono che una suddivisione della finestra principale del browser in modo tale che nella stessa ci siano due o più finestre. Quante e come disporle dipende soltanto da noi, dal nostro progetto e dalla sua organizzazione. Non esistono limiti se non quelli del buon gusto e della praticità d'uso che tradotta in termini pratici significa semplicità di navigazione.

In molti casi sono sufficienti due sole cornici (frames), una laterale (o superiore) dove inserire il menù e l'altra la vera e propria finestra di navigazione, quella principale. Per dare meglio l'idea vediamo un paio di esempi possibili:



varie
voci
del
Menù		 Finestra Principale

Con menù laterale, oppure:

varie voci del Menù
Finestra Principale

Con menù superiore.

Quale dei due schemi adottare dipende soltanto da noi, da come si è deciso di organizzare il sito, in tutti i casi bisognerà creare una nuova pagina html che contenga al suo interno il solo codice per la struttura dei frames. Questa nuova pagina richiamerà all'interno di se stessa tutte le altre pagine (in questo caso due) che si disporranno affiancate verticalmente oppure orizzontalmente. Di solito questa pagina si chiama index.html, la pagina iniziale del sito.

Per prima cosa si preparano le due pagine che servono: menu.html e principale.html, potete adoperare qualsiasi altro nome, l'importante è ricordarsi di cambiare poi i riferimenti laddove io ho adoperato questi due nomi.

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

<frameset>

Si avete capito bene, i frames non vanno inseriti  dentro alla testa <head>  ne dentro al corpo <body> della pagina ma in mezzo, esattamente dove finisce la testa ed inizia il suo corpo.

L'elemento <FRAMESET> è uno di quei tags che da soli non dicono niente, necessita di almeno uno dei suoi due attributi: ROWS o COLS che servono rispettivamente per suddividere la finestra in righe o in colonne. Al suo interno possono essere contenuti  annidati altri elementi, quali eventuali altri <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%">


</frameset>

Assegnando in questo caso il 25% dello spazio 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 mantenere le proporzioni dovute alla risoluzione video del visitatore.

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  più o meno utili e necessari, due sono indispensabili: name che identifica il nome del frame  in modo da poter visualizzare 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 presuppongono una divisione, dovremo decidere se la cornice divisoria deve essere visibile oppure no, se poi il contenuto del frame menù fosse piuttosto ricco di voci, 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 alla voce frames. Per il momento quello che ci serve è una struttura di questo tipo:

<html>
<head>
<title>Struttura per frames</title>
</head>
<frameset cols="25%, 75%">

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

</frameset>
<body>
<noframes>
Spiacente, il tuo browser non supporta i frames.
</noframes>
</body> </html>


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

Se avete salvato come index.html non resta che provare a vedere cosa succede: richiamate il file appena memorizzato dall'interno del browser, se avete preparato precedentemente i due files: menu.html e principale.html questi saranno visualizzati contemporaneamente, uno di fianco all'altro ma  nella stessa finestra. Ricordatevi i nomi che avete assegnato ai vostri frames, e per nomi intendo quelli specificati nell'attributo name, saranno questi nomi che se dichiarati all'interno dell'attributo target di un link, decideranno su quale dei due frames aprire il link stesso.

Difficile? Un esempio chiarirà sicuramente meglio.
Se avete deciso di avere due frames è molto probabile che uno di questi due debba fare funzioni di menù, i links di questo menù dovranno però aprire la pagina ad essi associata nella finestra principale e non certo nel piccolo frame del menù stesso sul quale si trovano. Per fare si che questo avvenga si dovrà aggiungere al link  l'attributo target (bersaglio o destinazione) specificando il nome del frame (name) sul quale aprire il link richiamato, quindi:

<A HREF="nomepagina.html" target="principale">



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

C'è anche la possibilità di aggiornare contemporaneamente due frames cliccando su un solo link, oppure aprire il link su una nuova finestra del browser. Lasciate da parte per il momento queste possibilità, è sufficiente sapere che esistono, una volta acquisita una certa dimestichezza, alla voce F.A.Q di questo mio sito troverete ulteriori informazioni per una gestione ottimizzata dei frames.

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, non ho mai capito il motivo, forse hanno incontrato problemi o difficoltà dovuti ad una certa pianificazione degli stessi, personalmente li trovo molto utili e per niente complicati da gestire, in alcuni casi sono addirittura l'unica soluzione possibile.

Per esperienza consiglio di usare una dichiarazione fissa del tipo: <frameset cols="150,*"> al posto di quella riportata nell'esempio ed espressa in percentuale,  è decisamente migliore e garantisce una buona visone a qualsiasi risoluzione grafica, evitando così che a risoluzioni diverse si vedano frames di dimensioni esagerate o sacrificati oltremisura.


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

 
Lezione Precedente   Lezione Successiva