Nelle lezioni precedenti avete imparato la struttura base di un documento html. Abbiamo spiegato come inserire testo, immagini, links e metatags, adesso vedremo come creare una struttura per impaginare il tutto nel caso in cui il vostro sito sarà formato da molte pagine web. Diversamente passate pure alla prossima lezione dove vedremo i moduli.
Spiegheremo due possibili metodi: un layout liquido ed una struttura a frames, entrambi validi dal punto di vista del codice adoperato.
Il layout al momento potrebbe risultare di difficile comprensione per un principiante visto che si basa tutto sui fogli di style che in questa guida sono stati solo accennati, chi fosse interessato dovrebbe leggere la guida CSS dalla quale riuscirà a capire meglio come arrivare a definire le istruzioni che creano una impaginazione come quella che useremo nell’esempio sotto.
I frames invece non necessitano di alcun css ma da alcuni vengono definiti obsoleti, io credo invece che fino a quando il W3C, organo che determina le regole del web, li considera validi, possiamo tranquillamente considerarli validi anche noi, non vanno adoperati soltanto nel caso in cui il sito deve rispettare altre regole, come quelle di accessibilità per le quali i frames sono stati banditi perchè potrebbero creare “confusione”.
Layout liquido.
Un layout altro non è che una struttura per contenere i dati. Si tratta in pratica di usare box fissi e/o box flottanti per impaginare tutto quello che può far parte di una pagina web.
Facendo uso dei CSS è possibile creare strutture molto versatile, in questo esempio avremo: due colonne, una per il menù a sinistra e l’altra per la pagina principale. Una testata con titolo ed un margine inferiore. Possiamo vederlo meglio su questo link di esempio.
Questo il codice per la dichiarazione di style CSS da mettere in head:
<head>
<style type=”text/css”>
body {
text-align: center; /* IE5.x */
padding: 0;
margin: 0;
}
#telaio {
width:100%;
margin: 0px;
border:1px solid gray;
line-height:150%;
color: black;
background-color: #ffffcc;
text-align: left; /* IE5.x */
}
#testata {
font-size: 130%;
}
#fondo {
font-size: 85%;
text-align: center;
}
#testata, #fondo {
padding:0.5em;
color:white;
background-color: #cc9900;
clear:left;
}
#sinistro {
float:left;
width:160px;
margin: 0px;
padding: 5px;
}
#centrale {
margin-left: 170px;
border-left:1px solid gray;
padding:10px;
}
</style>
<head>
Questo il codice HTML:
<body>
<div id="telaio">
<div id="testata">... Testata ...</div>
<div id="sinistro">... Sinistro...</div>
<div id="centrale">... Centrale ...</div>
<div id="fondo">... Fondo ...</div>
</div>
</body>
Questo il risultato della struttura:
Se decidete per una struttura tipo questa, il codice riportato sopra dovrà essere presente in tutte le pagine del sito, dovrete cambiare intestazione, piede pagina, parte sinistra e parte centrale senza modificare la struttura, quindi scrivere le voste informazioni solo nello spazio ad esse dedicate e cioè nel riquadro giallo del codice html: … Testata … … Sinistro … … Centrale … … Fondo …senza toccare i div e /div che fanno parte della struttura stessa.
Su questo link il risultato a piena finestra del browser
Su questo link è possibile vedere altri schemi di layout e selezionare il codice html e css già pronto, voglio sperare che lo facciate soltanto per apprendere meglio e non per copiarlo spudoratamente 🙂
I frames.
E’ possibile 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 avere 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. Praticamente quello che viene fatto con il layout visto sopra. 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 che contengono gli 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 voi, dal vostro progetto e dalla sua organizzazione. Non esistono limiti anche se si raccomanda di non esagerare per non compromettere la semplicità di gestione da parte di chi deve fare modifiche.
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 voi, 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 in una lezione precedente.
Per prima cosa si preparano le altre due pagine ad esempio: 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 riportati sotto.
A questo punto, se avete chiamato index.html il lavoro svolto fino ad ora, rinominatelo in principale.html e create 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 né dentro alla testa <head> né 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 attributi: rows 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 o 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> </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 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) decideranno su quale dei due frames aprire il link stesso.
Difficile?
Per un principiante forse 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 targetche 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.
Con questa lezione avete imparato ad impaginare il vostro sito. Siete finalmente pronti per trasferire il tutto sul server, cioè on-line. C’è ancora molto da imparare ma già così le vostre pagine possono avere tutto il necessario per essere gradevoli e soprattutto leggibili: testo, immagini, links e tabelle.
Nella prossima lezione vedremo i moduli, meglio conosciuti come: “forms” che servono a creare questionari o semplici mezzi per poter interagire direttamente col visitatore del nostro sito.
Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.