Progettazione e realizzazione di siti web

In un documento HTML, ogni elemento è figlio di un altro elemento, fino a risalire all’elemento radice. Questa struttura ad albero può essere utilizzata nei fogli di stile per selezionare un particolare elemento figlio di un altro particolare elemento.

Data questa struttura:

<div id="content">
<p>Paragrafo</p>
</div>
<div>
<p>Altro paragrafo</p>
</div>

posso scrivere una regola di stile che utilizzi come normale selettore un paragrafo e una regola che utilizzi un selettore discendente, valida solo per l’elemento p che discende dall’elemento div con un attributo id uguale a content:

p {color: black;}
#content p {color: red;}

In questa maniera, tutti i paragrafi avranno un colore nero, ma i paragrafi contenuti all’interno dell’elemento di divisione identificato nella struttura come content avranno un colore rosso.

Un post di Livio Mondini mi ha ispirato hAtomGrid (file ZIP, 40KB), un tema o meglio un wireframe framework per WordPress che, oltre a ridurre al minimo indispensabile i div, integra il microformat hAtom per la struttura XHTML dei post e 960 Grid System per l’impaginazione.

I file integrali delle esercitazioni:

• Il mio sito (Archivio ZIP)

Da una semplice struttura di una lista non ordinata è possibile creare barre di navigazione stilisticamente eleganti e complesse. L’aggiunta di id semantici agli elementi della lista e al corpo della pagina permette inoltre di attivare, grazie ai selettori discendenti, una segnaletica visuale tu sei qui utile a orientare il visitatore nella sua navigazione.

La struttura

<div id="navigazione">
<h2>Navigazione</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="chi-siamo.html">Chi siamo</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>

Lo stile per una barra verticale

div#navigazione h2 {  
display: none;  
}
div#navigazione ul {  
list-style-type: none;  
}
div#navigazione a {  
padding: 10px 0 10px 35px;  
display: block;  
border-bottom: 1px solid #c30;  
text-decoration: none;  
color: #c30;  
background: white;  
}
div#navigazione a:hover {  
color: white;  
background: #c30;
}

Lo stile per una barra orizzontale

div#navigazione h2 {  
display: none;  
}
div#navigazione ul {  
list-style-type: none;  
}
div#navigazione li {
float: left;
}
div#navigazione a {
line-height: 1.6em;
padding: 0 65px 0 35px;
display: block;
border-right: 1px solid #c30;
text-decoration: none;
color: #c30;
background: white;}
div#navigazione a:hover {
color: white;
background: #c30;
}

Lo stile per l’effetto tu sei qui

body#home li#nav-home a {  
color: black;  
background-color: #c50;
}

Le proprietà delle immagini di sfondo e la sostituzione del testo con un’immagine di sfondo per il logo identificativo del sito: file della lezione del 12 maggio 2008 (archivio ZIP).

In questo esempio, un semplice layout a due colonne con testata contenente il nome del sito. La posizione del menu può essere facilmente spostata a destra del corpo centrale della pagina, sostituendo la proprietà left con la proprietà right del blocco del menu e azzerando la proprietà left per il blocco del contenuto.

La struttura

<h1>Il mio sito</h1>

<div id="contenuto">

<h2>Titolo della pagina</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>

<h3>Titolo del paragrafo</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>

<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>
  </div>

<div id="navigazione">
  <h2>Navigazione</h2>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Chi siamo</a></li>
  <li><a href="#">Blog</a></li>
  </ul>
  </div>

Lo stile

body, div, h1,h2,h3,h4,h5,h6,p,ul,li,table, tr, td, dl,dt,dd {
margin: 0;
padding: 0;
}
body {
font-family: "Lucida Grande", "Lucida sans", Verdana, sans-serif;
font-size: 14px;
}
h1 {
background: black;
color: red;
text-align: center;
padding: 10px;
height:60px;
}
div#contenuto {
position: relative;
left: 30%;
width: 70%;
}
div#navigazione {
position: absolute;
top: 80px;
background: green;
width: 30%;
left: 0;
}

Versione definitiva (Archivio ZIP)

Titoli, paragrafi, liste, tabelle e collegamenti: Esercitazione del 13 marzo 2008

Dove sono? Scrivere un menu di navigazione (PDF, 904 KB) è un articolo che ho scritto per il numero 25 di Scrivere di De Agostini, corso coordinato dalla Scuola Holden fondata da Alessandro Baricco.
La pubblicazione su questo sito avviene per gentile concessione dell’Editore: tutti i diritti riservati.