CSS  »  Articoli  »  CSS Template e layout 

In questo articolo affronteremo un argomento complesso e affascinante: la realizzazione del layout di un sito solo con i CSS. La sfida è sempre la stessa: arrivare alla separazione tra stile, layout e struttura dei contenuti per ottenere pagine più semplici da gestire, più veloci da caricare, più accessibili, aderenti agli standard del W3C.

Si tratta, allo stesso tempo, di fare i conti con un ambito di applicazione dei CSS ancora poco sfruttato ma molto promettente. Se nella gestione della tipografia e delle proprietà dei blocchi di testo l'adozione dei fogli di stile è ormai cosa stabile e accettata, per la costruzione del layout generale di un pagina siamo ancora lontani da una diffusione che esca dai limiti, a volte davvero pregevoli, di siti personali e/o sperimentali. Eppure il mercato dei browser è oggi propizio e ci sono davvero le condizioni per fare il salto. In verità il cambiamento richiede un cambio di approccio notevole e la ridefinizione di metodi di lavoro ormai consolidati: tempo al tempo dunque.

Ancora una riflessione: l'adozione dei CCS per il layout ha visto spesso come unico slogan di accompagnamento "Morte alle tabelle!". Che è giusto, ma che mette in secondo piano altri e più importanti vantaggi: codice più pulito, facilità di gestione, migliore accessibilità, portabilità dei documenti. Ma volete mettere? Se io dico: "Questa pagina è fatta senza tabelle", troverò sempre qualcuno disposto a dirmi: "Davvero?! E come si fa?". Facciamo una prova.

Ecco il piccolo esperimento che vi propongo. Seguite questo link. È la pagina principale (incompleta, ma rende l'idea) della sezione PRO HTML.it.

È fatta senza usare tabelle, solo con i CSS. Anche i rollover e gli pseudopulsanti della barra sinistra sono fatti con i CSS (niente Javascript, niente immagini). Funziona in tutti i browser con un supporto decente degli standard (diciamo dalla versione 5 in su). Ora provate a visualizzare e confrontare il markup di questa pagina e dell'originale. Le conclusioni le lascio a voi.

Il modo in cui la pagina è stata convertita sarà l'argomento conclusivo di questa serie di lezioni. Prima analizzeremo con un approccio molto concreto altri tipi classici di layout: a due e tre colonne. Vedremo inoltre come sia possibile ottenere layout "appoggiati a sinistra", centrati o "liquidi" (quelli che occupano l'intera area della finestra a qualunque risoluzione). Un utile confronto sarà quello con Come impostare un sito ridimensionabile di questa sezione, dove vengono spiegate le tecniche per ottenere gli stessi risultati con le tabelle.

Altri articoli

Altre guide

Altre newsletter