Salta il menu

[xhtml] Impostare un layout

Notizia del 01/12/2006

Quanti layout si basano sulla struttura intestazione - due colonne - pié di pagina? Molti, cambia solo la grafica usata per decorarli.

Vediamo quindi come costruirne uno in modo che sia poi facile stravolgerne l'aspetto in un secondo tempo qualora se ne dovesse avere l'esigenza, sfruttando al meglio le potenzialità dei div e dei fogli di stile (CSS).

Nota: per alcuni degli elementi (importanza della DTD, impostazione della lingua principale etc.) sono date per scontate spiegazioni già fatte nel tutorial sul posizionamento e la conoscenza delle basi di xhtml e CSS.

***

Quel che andrò a creare è una pagina campione - o template - che contenga tutti gli elementi comuni alle varie pagine e che userò poi a creare le stesse salvandola di volta in volta con un nuovo nome e modificando la parte relativa al contenuto.

Apro un editor di testo e salvo il file come template.html; per prima cosa indico quale sarà il linguaggio che utilizzerò nella pagina inserendo la relativa Document Type Definition (DTD) e aggiungo le due sezioni pricipali della pagina head (che conterrà le informazioni per il browser) e body (i contenuti visualizzati al navigatore) all'interno del tag <html></html> nel quale dichiaro anche la lingua principale del testo (in questo caso l'italiano):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head></head> <body></body> </html>

Nell'head inserisco il titolo della pagina e i meta relativi al set di caratteri usato, alla descrizione, le chiavi di ricerca ed eventualmente il nome dell'autore:

<head> <title>ACME Ferramenta</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="utensili, attrezzature officina, macchinari tornitore" /> <meta name="description" content="Vasto assortimento di attrezzatura per officina, utensili delle migliori marche e macchinari da tornitore - Aperti anche la domenica" /> <meta name="author" content="rebelia.it" /> </head>

Il layout sarà composto da:

  • intestazione
  • colonna di sinistra con il menu di navigazione principale
  • colonna di destra con i contenuti
  • chiusura

quindi creo un div esterno e uno per ognuno degli elementi:

<body> <div id="esterno"><a id="top"></a> <div id="intestazione"></div> <hr /> <div id="corpo"> <div id="menu"></div> <hr /> <div id="contenuto"></div> </div> <hr /> <div id="chiusura"></div> </div> </body>

Ho aggiunto anche:

  • un tag <a id="top"></a> che servirà per tornare a inizio pagina in caso di pagine lunghe
  • un identificativo (ID) per ogni div: gli identificativi devono essere univoci: non possono esserci in una stessa pagina due elementi con lo stesso id!
  • un div a racchiudere i div menu e contenuto, al fine di facilitare la creazione delle colonne più avanti
  • un tag <hr /> tra le sezioni: serve a suddividerle visivamente nel caso in cui la pagina sia caricata senza la formattazione dei fogli di stile

La struttura principale del layout è pronta. Vediamo come aggiungere dei contenuti sezione per sezione, prima di passare alla formattazione; nell'intestazione aggiungo il titolo del sito e l'indirizzo dell'azienda:

<div id="intestazione"> <h1>ACME Ferramenta, attrezzi per lavoro e per hobby</h1> <p>Via dei Gigli, 41 - 00100 Roma</p> </div>

Nel div #menu inserisco l'elenco dei link alle pagine che formeranno il sito e per farlo uso <ul><li></li></ul> cioè il tag per l'elenco puntato e quello per i punti elenco:

<div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Chi siamo</a></li> <li><a href="#">Prodotti</a></li> <li><a href="#">Servizi</a></li> <li><a href="#">Contatti</a></li> </ul> </div>

Nel div #contenuto inserisco un titolo con un tag <hn></hn> (n sta per numero: i titoli vanno da 1 - il più importante - a 6 a seconda dell'importanza di ciò a cui si riferiscono, come succede per un libro)e del testo a caso che serve semplicemente per vedere l'effetto finale; per ottenere un risultato verosimile, normalmente si usa un testo appositamente creato spesso noto come lorem ipsum e generabile attraverso strumenti automatici come questo (basta premere il pulsante "Generate Lorem Ipsum" in basso a destra, selezionare col mouse uno o più paragrafi tra quelli generati e copiarli all'interno della pagina, usando il tag <p></p>:

<div id="contenuto">

<h2>Home</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci. Suspendisse nec risus. Suspendisse felis odio, consequat ac, malesuada id, tincidunt ac, purus. Suspendisse a sapien vel ante rhoncus eleifend. Etiam eu neque at tellus hendrerit rutrum. Vestibulum egestas, nisl ut volutpat convallis, lectus velit accumsan ante, sed molestie sem nisi vitae lectus. Nullam aliquam, odio eget ullamcorper aliquet, turpis mauris lobortis neque, vel eleifend elit elit non velit. Maecenas fermentum nunc eget nibh. Donec a lorem nec quam bibendum malesuada. Nullam posuere. Sed non mauris. Quisque id dolor in ante congue malesuada. Vestibulum quam ante, posuere sit amet, tristique ac, aliquam ut, mauris. Cras pharetra, elit ac dapibus molestie, velit neque molestie mauris, feugiat convallis justo nulla lacinia leo. Etiam purus libero, mollis a, vehicula at, iaculis nec, nisi.</p>

</div>

Subito dopo la chiusura del div #contenuto, ma prima della chiusura del div #corpo inserisco un altro div che mi servirà poi in fase di formattazione; stavolta non uso un ID, ma una classe: la classe è un tipo di contrassegno particolare che può essere ripetuto più volte in una pagina; a una classe possono corrispondere una o più caratteristiche che sono assegnate all'elemento a cui la classe è applicata. Esempio: se a una classe "rosso imposto un bordo rosso, sia che si tratti di un paragrafo - <p class="rosso">bla bla bla</p> - che di un'immagine - <img src="immagine.gif" class="rosso /> - avranno il bordo rosso; per tornare al template che stiamo costruendo, il div che inserisco è questo:

<div class="chiudifloat"></div>

Nel div di chiusura o footer si inserisce generalmente il nome e l'e-mail del webmaster, l'indirizzo dell'azienda (in questo caso però è stato già inserito nell'intestazione) o qualcosa del genere:

<div id="chiusura"> <p>Creato da <a href="mailto:info@agenzia.it">reb's webagency</a></p> </div>

Il risultato completo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <title>ACME Ferramenta</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="utensili, attrezzature officina, macchinari tornitore" /> <meta name="description" content="Vasto assortimento di attrezzatura per officina, utensili delle migliori marche e macchinari da tornitore - Aperti anche la domenica" /> <meta name="author" content="rebelia.it" /> </head> <body> <div id="esterno"><a id="top"></a> <div id="intestazione"> <h1>ACME Ferramenta, attrezzi per lavoro e per hobby</h1> <p>Via dei Gigli, 41 - 00100 Roma</p> </div> <hr /> <div id="corpo"> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Chi siamo</a></li> <li><a href="#">Prodotti</a></li> <li><a href="#">Servizi</a></li> <li><a href="#">Contatti</a></li> </ul> </div> <hr /> <div id="contenuto"> <h2>Home</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci. Suspendisse nec risus. Suspendisse felis odio, consequat ac, malesuada id, tincidunt ac, purus. Suspendisse a sapien vel ante rhoncus eleifend. Etiam eu neque at tellus hendrerit rutrum. Vestibulum egestas, nisl ut volutpat convallis, lectus velit accumsan ante, sed molestie sem nisi vitae lectus. Nullam aliquam, odio eget ullamcorper aliquet, turpis mauris lobortis neque, vel eleifend elit elit non velit. Maecenas fermentum nunc eget nibh. Donec a lorem nec quam bibendum malesuada. Nullam posuere. Sed non mauris. Quisque id dolor in ante congue malesuada. Vestibulum quam ante, posuere sit amet, tristique ac, aliquam ut, mauris. Cras pharetra, elit ac dapibus molestie, velit neque molestie mauris, feugiat convallis justo nulla lacinia leo. Etiam purus libero, mollis a, vehicula at, iaculis nec, nisi.</p> </div> <div class="chiudifloat"></div> </div> <hr /> <div id="chiusura"> <p>Creato da <a href="mailto:info@agenzia.it">reb's webagency</a></p> </div> </div> </body> </html>

Come si può vedere qui sotto, la pagina è già completa in tutte le sue parti e - benché scarna - è navigabile e i suoi contenuti fruibili:

La schermata del browser col risultato finale

Nota: come per la scrittura di codice di qualsiasi tipo, anche per l'xhtml è importante l'indentazione al fine di rendere più agevole la lettura nel caso si debbano apportare delle modifiche o trovare velocemente una particolare sezione.

Ora non resta che pensare alla formattazione con i CSS.

Scarica il codice xhtml del tutorial (zip - 2kb)

Torna a inizio pagina

Commenti

Non ci sono ancora commenti a questa news!

Aggiungi il tuo commento

I campi con * sono obbligatori.

Torna a inizio pagina

Torna a inizio pagina