*Linux Guide

Web Design - CSS Parte 6

L'applicazione pratica

Passiamo all'atto pratico con la realizzazione di un layout a due colonne.
Noterete, una volta completato, come ci sia una testata con il logo, una barra di navigazione (gialla), una barra del percorso, una colonna centrale e una laterale destra con i sottomenù.
Partiamo dalla testata con l'analisi del codice XHTML.
Per mantenere una certa rigidità e solidità ho usato il tag <h1> quindi nell'editor HTML ho scritto il seguente codice:


<html>
<head>
<title>Linux Guide</title>
</head>
<body>
<h1><img class="logo" src="Newbar3.png" width="80" height="50" border="0" alt="Il logo di Linux Guide" /> Linux Guide</h1>

Poi con CSSEd ho realizzato il CSS che ho chiamato "linuxguide.css". Ho così prodotto attributi e valori da applicare al <body> che è il progenitore diciamo ancestrale:


body { margin:0;
padding : 0;
background : #ccc url(sfondino.gif);
font : 90% verdana,arial,sans-serif;
color : #333;
/*Non avendo stabilito la larghezza del 'body', il valore di default è 100% e verrà ad occupare l'intera schermata.*/ }

Quindi ho prodotto attributi e valori per <h1>

h1{padding : 10px;
margin : 0;
background : #666 url(sfondogray.gif);
font : 200% verdana,arial,sans-serif;
font-weight : bold;
color : #ccc;
text-align : left;
border : 1px solid #009;
}

Potrete notare come la larghezza dell'elemento <h1> (width) non sia definita in modo tale che si estenda a tutta la pagina e che si adatti a qualsiasi risoluzione.
Si nota anche che malgrado sia stata definita l'immagine di fondo (sfondogray.gif), sia stato anche definito il colore dello stesso (#666), questo in caso che l'immagine non sia disponibile o che l'utente abbia disabilitato le immagini.

Poi sono passato a realizzare la barra di navigazione impiegando l'elemento <h2>. Ecco il codice XHTML sprovvisto dei collegamenti per non confondere la lettura.


<h2>Menù : Chi siamo | Pensieri | Utilità | Links | Contattaci | Segnala un sito | Aiuto! | Bugs
<br />
Informazione | Informatica | Il WWWeb | WebMasters</h2>

Ed ora attributi e valori di questa barra da inserire nel foglio di stile.


h2{padding : 3px;
margin : 0;
text-align : center;
background : #fc0 url(sfondorange.gif);
font : 90% Verdana,Arial,Sans-serif;
border : 2px solid #00f;
}

anche in questo caso non ho stabilito una misura per la larghezza dell'elemento.
Stesso procedimento è stato affrontato per la barra del percorso che è stata realizzata con l'elemento <h3> ed il cui codice è quello sotto esposto.


<h3>Home >> Utilità >> Tutorials > CSS for Dummies [6]</h3>

mentre il codice per il CSS è quello sotto riportato.


h3{background : url(sfondo.gif);
text-align : center;
padding : 2px;
font : 80% Verdana, Arial, Sans-serif;
font-weight : bold;
color : #333;
margin : 0;
border : 1px solid #000;
}

dove si vede che anche qui manca il valore della larghezza.

E' venuta perciò la volta della colonna principale e più grande che deve alloggiare i contenuti veri e propri della pagina, dove voi state leggendo questo breve tutorial. La colonna si chiama "colonna-sx" e contiene al suo interno altri due contenitori dove si alloggia il testo chiamati "box" e "box2". Ecco il codice XHTML della colonna-sx.


<div id="colonna-sx">
<div class="box">
<div class="box2">
. . : : Contenuto della pagina : : . .
</div>
</div>
</div>

I due contenitori hanno funzioni prettamente legate all'estetica della pagina per creare quella doppia sottile cornice che contorna il testo. Il CSS adeguato a queste tre strutture concentriche, complica un pochino le cose ed ecco il listato con commenti in rosso.

#colonna-sx {float:left; /*che provvede a collocare forzatamente la colonna a sinistra*/
background : #fff url(sfondino.gif);
width: 80%; /*che provvede a dare una dimensione orizzontale all'elemento*/
text-align : center; /*che provvede a collocare centralmente tutti gli altri elementi*/
}
#colonna-sx .box{background : #fff url(sfondogray.gif);
margin-left : 5px;/*che provvede a distaccare l'elemento dal bordo sinistro del body*/
margin-right : 5px;/*che provvede a distaccare l'elemento dal bordo destro della colonna destra*/
border : 1px solid #000;
padding : 5px;
font : 90% verdana,arial,sans-serif;
text-align : center;/*che provvede a collocare centralmente tutti gli altri elementi*/
color : #000;
}
#colonna-sx .box .box2{background : #fff url(sfondo.gif);
text-align : left;/*che provvede a collocare a sinistra tutti gli altri elementi*/
padding : 5px;/*che provvede a distaccare i contenuti dai bordi dell'elemento contenitore*/
font:100% verdana,Arial,sans-serif;
color : #000;
border : 1px solid #009;
}

Quindi passiamo a vedere la colonna di destra che ha funzioni legate alla navigazione ed al raggiungimento delle sottosezioni di una sezione principale. Ecco il codice XHTML.


<div id="principale">
<div class="box">
<div class="box2">
<ul>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
</ul>
</div>
</div>
</div>

Come si nota è presente una lista che uso per creare il menù con simpatici effetti rollover.
Il codice per il CSS è semplice come quello adottato per la colonna sinistra.


#principale{float: left; /*che obbliga l'elemento a collocarsi a sinistra*/
width: 20%; /*che definisce la larghezza dell'elemento, in questo caso la parte restante dello spazio disponibile nell'elemento progenitore che è 'body'*/
}
#principale .box{background : #fff url(sfondino.gif);
padding: 5px; /*che applica una distanza tra questo elemento e il suo progenitore (principale)*/
font : 95% verdana,Arial,sans-serif;
color : #009;
}
#principale .box .box2{font : 95% verdana,Arial,sans-serif;
text-align : left;
background : #fff url(sfondo.gif);
color : #000;
margin-top : 5px;
border :2px solid #333;
padding: 2px;
width : 95%; /*che definisce l'effettiva larghezza in rapport al suo progenitore (principale .box2)*/
}

Passiamo quindi a vedere i dettagli della pagina e la realizzazione di effetti rollover con il solo uso dei CSS.

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto