Con questo tutorial vedremo come costruire un layout a 3 colonne più header e footer completo.
Vedremo successivamente come utilizzare questo template in un sistema di blogging molto diffuso quale WordPress.
Diamo per scontato che abbiate già letto il tutorial su come costruire un semplice layout a due colonne e quindi che abbiate compreso cos’è il box model, come aggirare le limitazioni di IE, cosa significhi elemento inline e blocco e come utilizzare le proprietà float e clear.
Supponiamo che il nostro grafico ci abbia inviato questo layout (spero per voi che abbia fatto anche di meglio 🙂 )
[clicca sulle immagini per ingrandirle]
Per prima cosa dovremmo decidere come dividere gli spazi *tipografici*: nell’immagine successiva noterete una mia personalissima suddivisione. Ovviamente voi potrete sceglierne un’altra se vi fosse più comoda o se non vi trovaste a vostro agio con quella da me scelta.
Iniziamo dunque a dividere la pagina con lo stesso metodo già utilizzato in questo tutorial:
Avremo a questo punto tale codice html:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>Prova layout 3 colonne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" title="Style" media="all" />
</head>
<body>
<div id="contenitore">
<div id="header"> </div>
<div id="colsx"> </div>
<div id="coldx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
<div id="footer"> </div>
</div>
</body>
</html>
Ed il css sarà invece:
body {background:#333; text-align:center; font-family:Helvetica, arial, sans-serif; font-size:12px;}
div#contenitore {background:#180000; width:915px; margin:0 auto; text-align:left; }
div#header {background:#F30; height:170px;}
div#colsx {background:#FFF; width:766px; \width:767px; w\idth:766px; float:left; border-right:1px solid #CCC;}
div#coldx {background:#180000; color:#FFF; width:127px; \width: 148px; w\idth:127px; float:left; padding:10px; border-top:1px solid #333;}
div#footer {background:#333; clear:left; border-top:6px solid #CCC; text-align:center; }
Noterete come assomigli terribilmente al codice del tutorial a 2 colonne già linkato sopra. Le uniche differenze pratiche sono l’aggiunta di un paio di bordi, in particolare il bordo di 6 pixel del footer.
Siamo arrivati a questo punto: (non preoccupatevi dello sfondo completamente marrone; quella parte sarà occupata dalla colonna sinistra. L’ho messo poiché suppongo che la parte sinistra sarà più alta della colonna destra e per tal motivo lo sfondo marrone servirà a compensare la mancanza di altezza di quest’ultima, come noterete tra poco).
Ci occuperemo ora della colonna sinistra. Dall’immagine noterete sicuramente che la parte in verde potrebbe esser divisa in 3 blocchi principali:
- il menu in alto alla stregua di un header classico;
- una colonna sinistra;
- ed una destra.
Seguendo la solita procedura aggiungeremo:
xhtml (solo body):
<body>
<div id="contenitore">
<div id="header"> </div>
<div id="colsx">
<div id="menu">Qui verrà inserito il menu</div>
<div id="subcolsx"> </div>
<div id="subcoldx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div>
<div id="coldx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
<div class="clearlft"></div>
<div id="footer" class="clearlft"> </div>
</div>
</body>
css:
body {background:#333; text-align:center; font-family:Helvetica, arial, sans-serif; font-size:12px;}
div#contenitore {background:#180000; width:915px; margin:0 auto; text-align:left; }
div#header {background:#F30; height:170px;}
div#colsx {background:#FFF; width:766px; \width:767px; w\idth:766px; float:left; border-right:1px solid #CCC;}
div#menu {background:#999;}
div#subcolsx { background:#FFF; float:left; width:598px; \width: 619px; w\idth:598px; padding:10px; border-right:1px solid #000;}
div#subcoldx {background:#F60; color:#FFF; width:127px; \width: 147px; w\idth:127px; float:left; padding:10px;}
div#coldx {background:#180000; color:#FFF; width:127px; \width: 148px; w\idth:127px; float:left; padding:10px; border-top:1px solid #333;}
div#footer {background:#333; border-top:6px solid #CCC; text-align:center; }
.clearlft {clear:left; }
Le parti in rosso son quelle appena aggiunte; ciò è quello che abbiamo ottenuto finora:
Iniziamo a "riempire" i blocchi dal menu. In giro son presenti moltissimi menu già pronti; in questo tutorial proveremo a farli da soli.
Sostituiamo il div del menu con una lista non ordinata, che riempiremo di elementi ai quali daremo la proprietà di essere elementi inline i quali conterranno i veri collegamenti.
Il css che scriveremo sarà:
ul#menu {background:#999; padding:0; margin:0; list-style:none; height:2.75em; border-width:0.1em 0; border-color:#333; border-style:solid;}
ul#menu li {float:left;}
ul#menu li a {display:block; color:#FFF; background:#999; font-size:1.1em; line-height:2.5em; padding:0 1.5em; text-decoration:none; border-right:0.08em solid #333; font-family:Verdana, sans-serif; font-weight:bold;}
ul#menu li a.current {background:#300000;}
ul#menu li a:hover {background:#F60;}
a cui corrisponderà questo codice xhtml:
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Contatti</a></li>
</ul>
Provo a spiegare cosa abbiamo fatto; abbiamo:
- indicato i vari elementi della lista (li) come inline, per affiancarli uno all’altro;
- indicato gli elementi a come blocchi per poter sfruttare la possibilità di cliccare su tutto il blocco e non solo sulla scritta;
- assegnato un colore alla barra del menu (#999) ed allo sfondo dei vari collegamenti;
- dato ai blocchi a un’altezza di 1.1 em cioè il 110% della grandezza standard dei caratteri e un’altezza delle linee di 2.5em (250%) del testo;
- assegnato al blocco menu un’altezza di 2.75em (cioè 2.5 di line-height*1.1); Approfondiremo questo aspetto in un’altra sezione appena possibile.
- messo il bordino a tutto il blocco menu in alto ed in basso, di dimensioni 0.1em, colore #333, solido;
- dato il bordo ai blocchi a solo a destra per evitare sovrapposizioni. (0.08, cioè 0.1/1.2); come sopra
- tolto il padding ed il margine al menu per evitare spazi bianchi e tolto lo stile delle liste (il classico puntino tipo quello di questa lista);
- tolto la sottolineatura ai link ed assegnato il colore bianco;
- assegnato il colore per l’effetto hover e per la pagina corrente a cui abbiamo dato una classe apposita
Questo è il risultato:
Prossimo step è quello di lavorare sull’header. Ciò che ci serve è assegnare l’immagine di sfondo e posizionare il titolo con h1 ed il sottotitolo con h2. Vista la dimensione fissa della testata potremmo semplicemente ritagliare l’immagine ed assegnarla come sfondo. Se fosse stato un layout liquido avremmo dovuto preoccuparci di creare un’immagine di sfondo di una larghezza molto ampia per coprire tutte le possibili risoluzioni; avremmo dovuto creare due immagini: una del fiore che avremo posizionato come immagine fissa a sinistra ed un pattern dello sfondo da ripetere lungo l’asse X. Assegnamo poi le proprietà ai blocchi h1 ed h2, assegnando ad entrambi le stesse proprietà: famiglia di caratteri Georgia, margine sinistro di 510 px, dato che vogliamo centrare gli stessi rispetto al fiore, largo appunto 510 pixels. Non ci resta che definire i colori ed il gioco è quasi fatto. Attenzione: dato che in h1 inseriremo un collegamento, dobbiamo dare il colore all’elemento a e non solo ad h1.
Le modifiche fatte per questo step saranno evidenziate nel codice con il colore azzurro.
Screenshot a questo punto:
Ci restano le ultime modifiche da fare:
- assegnare la grandezza e lo stile ai vari elementi h1, h2, h3… hx;
- cambiare il colore del testo al box arancio;
- dare l’effetto con le linee dello sfondo (prendendo un’immagine 4×4 e ripetendola);
- dare il colore al testo del footer ;
- togliere il padding al body;
- impostare la grandezza iniziale ai caratteri;
ed abbiamo finito. Le modifiche fatte per questo step saranno evidenziate nel codice con il colore verde.
xhtml finale:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>Prova layout 3 colonne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" title="Style" media="all" />
</head>
<body>
<div id="contenitore">
<div id="header">
<h1><a href="./index.html">Titolo del sito</a></h1>
<h2>Sottotitolo</h2>
</div>
<div id="colsx">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Contatti</a></li>
</ul>
<div id="subcolsx">
<h3>Titolo articolo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<h3>Altro titolo</h3>
<h4>Titolo sezione a</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<h4>Titolo sezione b</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<h4>Titolo sezione c</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="subcoldx">
<h5>Titolo sezione</h5>
<img src="./img1.gif" alt="immagine 1" />
<p>Descrizione dell’immagine 1</p>
<img src="./img2.gif" alt="immagine 2" />
<p>Descrizione dell’immagine 2</p>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>
</div>
</div>
<div id="coldx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
<div class="clearlft"></div>
<div id="footer" class="clearlft">Lorut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation</div>
</div>
</body>
</html>
css finale:
body {background:#333 url("./linee.gif"); text-align:center; font-family:Helvetica, arial, sans-serif; font-size:12px; margin:0;}
a img {border:0;}
div#contenitore {background:#180000; width:915px; margin:0 auto; text-align:justify;}
div#header {background:#F30 url("./header.jpg") no-repeat; height:170px;}
div#header h1, div#header h2 {text-align:center; margin-left:510px;}
div#header h1 { margin-top:0; padding-top:1em; color:#FFF;}
div#header h1 a {color:#FFF;}
div#header h2 {color:#F60;}
div#colsx {background:#F60; width:766px; \width:767px; w\idth:766px; float:left; border-right:1px solid #CCC; }
ul#menu {background:#999; padding:0; margin:0; list-style:none; height:2.75em; border-width:0.1em 0; border-color:#333; border-style:solid;}
ul#menu li {float:left;}
ul#menu li a {display:block; color:#FFF; background:#999; font-size:1.1em; line-height:2.5em; padding:0 1.5em; text-decoration:none; border-right:0.08em solid #333; font-family:Verdana, sans-serif; font-weight:bold;}
ul#menu li a.current {background:#300000;}
ul#menu li a:hover {background:#F60;}
div#subcolsx { background:#FFF; float:left; width:598px; \width: 619px; w\idth:598px; padding:10px; border-right:1px solid #000;}
div#subcoldx {background:#F60; color:#180000; width:127px; \width: 147px; w\idth:127px; float:left; padding:10px; text-align:center; margin-top:1em;}
div#subcoldx {margin-top:0;}
div#subcoldx img {border:2px outset #180000;}
div#coldx {background:#180000; color:#FFF; width:127px; \width: 148px; w\idth:127px; float:left; padding:10px; border-top:1px solid #333; }
div#footer {background:#333; text-align:center; border-top:6px solid #CCC; color:#F60; font-style:italic;}
h1, h2, h3, h4, h5, h6 {font-family:Georgia, serif; }
h1 {font-size:2.5em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;}
h4 {font-size:1.4em; font-style:italic;}
h5 {font-size:1.2em; font-style:italic;}
h6 {font-size:1.1em; font-style:italic;}
.clearlft {clear:left; }
Ed ecco il risultato finale:
Esempio e codici.
