CSS  »  Guide  »  Guida Layout dei siti con i CSS 

Uno degli aspetti più difficili per i webdesigner è il passaggio a layout senza l'uso di tabelle. Questo passaggio implica sovente un cambiamento radicale nell'approccio di stesura di una pagina html. In questa guida vedremo come rendere questo passaggio il più naturale possibile.

Chi si è avvicinato da poco ai fogli di stile, e più in generale alla creazione dei siti web, troverà facile e logico l'uso dei css per la creazione dei layout in questa guida, a tal punto che le tabelle serviranno solo per dati tabellari e, in fase di creazione di un layout, queste saranno l' ultima alternativa da considerare.

Contenuto, struttura e presentazione

La definizione più conosciuta e diffusa dei fogli di stile è: sono la separazione tra contenuto e presentazione. Il contenuto è nella pagina html, mentre la presentazione è riservata ai fogli di stile. Ma c'è una terza variabile che non compare in questa definizione, una variabile di cui molti appassionati ed esperti di webdesign devono tenere conto: la struttura. La struttura è inseparabile dal contenuto, ed è l'unico modo per consentirne la presentazione. Per esempio, si immagini una guida di programmi tv in cui le pagine non siano divise per giorni e le programmazioni non suddivide per canale e orario. Una guida ai programmi televisivi con le stesse informazioni testuali, ma presentate in ordine sparso e senza forma. La potreste consultare?

Div, questo misterioso

Un layout table-less si realizza attraverso l'uso dei div. La sua definizione è generic block-level element ossia contenitore generico block level. Il fatto che sia un elemento block-level ci garantisce il fatto che possa contenere qualsiasi tipo di elemento html. Inoltre, la sua presentazione naturale (quindi senza fogli di stile) è totalmente neutra: infatti questo elemento si presenta di default senza margini, bordi o padding. È quindi il contenitore per eccellenza per realizzare layout senza l'uso di tabelle: ad ogni div portante verrà associata una sezione della pagina.

Altri articoli

Altre guide

Altre newsletter