Layout monolitico
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.
