Questa è la forma più elementare di layout. Può andare bene per siti di piccole
dimensioni (generalmente con un ordine di pagine sotto la decina), per siti con
menu dropdown o per siti con macrosezioni (sottositi). Come anticipato, per la
sua semplicità non necessita di posizionamenti o float nella versione elementare.
Il laoyout monolitico si compone di quattro sezioni fondamentali:
- header
- navigazione
- contenuti
- footer
Generalmente la navigazione è disposta orizzontalmente sotto l'header, ma può
anche essere disposta a fianco dei contenuti, ma senza estendersi verticalmente
come o più di quest' ultima (si otterebbe in questo caso un layout a due colonne).
Una nota importante: in un layout monolitico si dovrebbe sempre
specificare e dichiarare esplicitamente la larghezza dell'area principale. Non
dichiarando la larghezza esplicitamente, il layout si adatta alla larghezza della
finestra del browser. Questo potrebbe costringere un utente con monitor ad alte
o altissime risoluzioni a stringere la finestra del browser per aumentare la leggibilità
del sito. Come detto in precedenza, infatti, linee di testo troppo lunghe causano
difficoltà di lettura.
Vedremo comunque le tre varianti di questo layout (fisso, fluido ed elastico)
più una quarta decisamente particolare. Iniziamo a costruire il nostro layout
passo passo, partendo dal codice HTML. Nell'immagine un esempio tipo di un layout
monolitico:
Il codice HTML
Ecco il codice HTML di base, per ora senza contenuti:
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
Come si può notare, la struttura della nostra pagina rispecchia le sezioni
logiche di cui abbiamo parlato in apertura. Per contenere le sezioni principali,
ho dichiarato un div con id container. È fondamentale:
il suo scopo è infatti modificare l'estensione orizzontale in maniera facile attraverso
poche e semplici regole CSS, come spiegato nella parte introduttiva della guida.
Aggiungiamo ora un po' di contenuto: un semplice header testuale, alcuni elementi per la navigazione tramite
una lista, un h2 per il titolo della pagina, due paragrafi nel corpo centrale e due righe nel footer: ecco
la versione senza stile che andremo a trasformare con i CSS.