10. Operare sulla marcatura
Poichè nel nostro layout di partenza i contenuti venivano all'ultimo posto, nel layout che vogliamo ottenere
sposteremo i contenuti in avanti. Per fare questo, creeremo un layout a due colonne, inserendo il menu di navigazione
ed il motore di ricerca nella colonna laterale, che verrà dopo i contenuti nel sorgente. Alla fine della pagina
inseriremo un piè di pagina a chiusura del nostro layout.
Come abbiamo visto nel precedente seminario, per
abituarci ad una migliore correttezza formale, useremo la DTD
XHTML 1.1 e serviremo il nostro documento come application/xhtml+xml
. Parallelamente, osserveremo
i nostri progressi in un secondo documento servito come text/html
e avente lo stesso DOCTYPE del documento
originale di partenza. Si ricorda che per i file statici l'estensione dovrà essere .xht
o .xhtml
per il primo tipo ed .html
(e simili) per il secondo.
Quindi inizieremo il nostro nuovo documento scrivendo:
- <?xml version="1.0" encoding="utf-8"?>
- <!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>Layout a due colonne</title>
- <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
- ...omissis
- </head>
Usiamo la codifica UTF-8 per sfruttare al massimo la gamma di caratteri esistenti sul Web, avendo così a disposizione
un insieme molto più vasto della tradizionale codifica ISO-8859-1. Questo ci permette di affrontare una futura internazionalizzazione delle nostre pagine con minore ansia.
La marcatura per il contenuto effettivo del nostro documento sarà quindi:
- <div id="wrapper">
- <div id="header"><h1>CSS Zibaldone</h1></div>
- <div id="top">
- <ul id="breadcrumbs">
- <li><strong>Sei qui:</strong></li>
- <li><a href="#">Home</a></li>
- <li><a href="#">Articoli</a></li>
- <li><strong>Post con stile</strong></li>
- </ul>
- <p id="change-style"><a href="#">Layout accessibile</a>
- <a href="#">Normale</a></p>
- </div>
- <div id="content">
- <div id="gutter">
- <h2>Post con stile</h2>
- <p>...</p>
- ...omissis...
- <ol class="code">
- <li><code>.post {</code></li>
- <li class="indent1"><code>width: 65%;</code></li>
- <li class="indent1"><code>margin: 0;</code></li>
- <li class="indent1"><code>font-size: 80%;</code></li>
- <li class="vspace"><code>}</code></li>
- ...omissis
- </ol>
- </div>
- </div>
- <div id="sidebar">
- <div id="navcontainer">
- <ul id="nav">
- <li><a href="#">Home</a></li>
- <li><strong>Articoli</strong></li>
- <li><a href="#">Traduzioni</a></li>
- <li><a href="#">Altro</a></li>
- <li><a href="#">Appunti sui CSS</a></li>
- <li><a href="#">L'autore</a></li>
- </ul>
- </div>
- <form action="http://www.google.com/custom" method="get">
- <p><input value="css-zibaldone.com" name="as_sitesearch" type="hidden" />
- <input value="it" name="hl" id="hl" type="hidden" />
- <input type="text" name="q" id="q" size="31" maxlength="255" value="" />
- <input type="submit" name="cmdcerca" id="cmdcerca" value="Cerca" /></p>
- </form>
- </div>
- <address>Gabriele Romanato</address>
- </div>
Possiamo verificare il lavoro svolto sinora nella versione XHTML e nella
versione HTML del nostro documento.