CSS  »  Guide  »  Guida Layout dei siti con i CSS 

In questa lezione vedremo tutti i layout presentati, con i loro pro e contro. I layout sono facilmente riadattabili alle proprie esigenze. Sarà possibile renderli fluidi, elastici o fissi; con colonne elastiche o fisse; con carattere fisso o relativo. Attraverso questa pagina è possibile consultare e/o scaricare il codice HTML e CSS di ogni layout.

Layout Monolitico

Questa è la forma più elementare di layout, e 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). Per la sua semplicità non necessita di posizionamenti o float nella versione elementare.

Layout monolitico fluido

Pro:

• Estrema facilità di codifica, adatto a tutte le risoluzioni.

Contro:

• All'apparenza risulta molto scarno, e i contenuti sono di difficile lettura ad alte risoluzioni

Layout monolitico fisso

Pro:

• Facilità di codifica, i contenuti risultano maggiormente consultabili

Contro:

• Richiede un foglio di stile per la stampa

Layout monolitico elastico

Pro:

• Consente una proporzionalità tra larghezza della pagina e dimensione del font

Contro:

• Richiede il dimensionamento relativo del font

Layout monolitico con altezza minima

Pro:

• La finestra risulta totalmente impegnata anche con pochi contenuti

Contro:

• Aggiungere i contenuti è una soluzione migliore piuttosto che avere troppo spazio bianco

Layout a due colonne

Adatto per siti di dimensioni medie, consente una migliore organizzazione dei contenuti. Il layout a due colonne con i float presenta un indubbio vantaggio rispetto ad un layout a due colonne con posizionamenti assoluti: non impone vincoli sulla lunghezza relativa delle colonne in presenza di footer. D'altra parte obbliga, nella maggior parte dei casi, ad avere la navigazione prima dei contenuti, cosa che può avere influenze negative su tematiche quali l'accessibilità e il posizionamento sui motori di ricerca.

Layout a due colonne con float - versione base

Pro:

• Nessun vincolo sulla lunghezza relativa delle due colonne

Contro:

• La navigazione precede in ordine di codice HTML i contenuti

Layout a due colonne di colore diverso con float

Pro:

• Le due colonne vengono separate cromaticamente ed è più facile focalizzare i contenuti

Contro:

• I contenuti devono essere più lunghi della colonna secondaria
• La navigazione precede in ordine di codice html i contenuti

Layout a due colonne con float e background

Pro:

• Le due colonne vengono separate cromaticamente ed è più facile focalizzare i contenuti
• Nessun vincolo sulla lunghezza relativa delle due colonne

Contro:

• La navigazione precede i contenuti
• La colonna di navigazione deve essere dimensionata in pixels

Layout a due colonne con posizionamenti assoluti - versione base

Pro:

• Ordine di codifica migliore per accessibilità e motori di ricerca
• Possibilità di usare float e clear senza interferenze con il layout

Contro:

• I contenuti devono essere più lunghi della colonna secondaria in presenza del footer

Layout a due colonne cromatiche con posizionamenti assoluti

Pro:

• Le due colonne vengono separate cromaticamente ed è più facile focalizzare i contenuti
• Ordine di codifica migliore per l' accessibilità e motori di ricerca
• Possibilità di usare float e clear senza interferenze con il layout

Contro:

• I contenuti devono essere più lunghi della colonna secondaria in presenza del footer

Layout a due colonne con posizionamenti assoluti e immagine di background

Pro:

• Le due colonne vengono separate cromaticamente ed è più facile focalizzare i contenuti
• Ordine di codifica migliore per accessibilità e motori di ricerca
• Possibilità di usare float e clear senza interferenze con il layout

Contro:

• I contenuti devono essere più lunghi della colonna secondaria in presenza del footer
• La colonna di navigazione deve essere dimensionata in pixels

Layout a tre colonne

Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte, fino ad arrivare ai portali. La colonna aggiuntiva può contenere svariate funzionalità del sito: news, sondaggi, banner, navigazione supplementare e quant'altro.

Layout a tre colonne con float versione base

Pro:

• Nessun vincolo sulla lunghezza relativa delle due colonne

Contro:

• La colonna centrale è l'ultima in ordine nel codice HTML

Layout a tre colonne con float e bordi

Pro:

• Le colonne vengono separate visivamente

Contro:

• La colonna centrale è l'ultima in ordine nel codice HTML
• La colonna centrale deve essere la più lunga

Layout a tre colonne con float e colore

Pro:

• Le colonne vengono separate visivamente

Contro:

• La colonna centrale è l'ultima in ordine nel codice HTML
• La colonna centrale deve essere la più lunga
• Le due colonne laterali sono dello stesso colore

Layout a tre colonne con float e background

Pro:

• Le colonne vengono separate visivamente
• Nessun vincolo sulla lunghezza relativa delle tre colonne

Contro:

• La colonna centrale è l'ultima in ordine del codice HTML
• Le due colonne laterali devono essere dimensionate in pixel

Layout a tre colonne con posizionamenti - Versione base

Pro:

• La colonna centrale è la prima in ordine nel codice HTML
• Possibilità di usare float e clear senza interferenze con il layout

Contro:

• La colonna centrale deve essere la più lunga

Layout a tre colonne separate da bordi fini e posizionamenti

Pro:

• Le colonne vengono separate visivamente
• La colonna centrale è la prima in ordine nel codice HTML
• Possibilità di usare float e clear senza interferenze con il layout

Contro:

• La colonna centrale deve essere la più lunga

Layout a tre colonne con colore e posizionamenti assoluti

Pro:

• Le colonne vengono separate visivamente
• La colonna centrale è la prima in ordine nel codice HTML
• Possibilità di usare float e clear senza interferenze con il layout.

Contro:

• La colonna centrale deve essere la più lunga

Layout a tre colonne con bordi spessi e posizionamenti assoluti

Pro:

• Le colonne vengono separate visivamente
• Le colonne laterali possono avere due colori diversi
• La colonna centrale è la prima in ordine nel codice HTML
• Possibilità di usare float e clear senza interferenze con il layout

Contro:

• La colonna centrale deve essere la più lunga
• Il colore delle due colonne verrà stampato se non si utilizza un foglio di stile per la stampa
• Le due colonne laterali devono avere la stessa larghezza

Layout a tre colonne con posizionamenti assoluti e immagini di background

Pro:

• Le colonne vengono separate visivamente
• Le colonne laterali possono avere due colori diversi
• La colonna centrale è la prima in ordine nel codice HTML
• Possibilità di usare float e clear senza interferenze con il layout

Contro:

• La colonna centrale deve essere la più lunga
• Le due colonne laterali devono essere dimensionate in pixel

Layout a tre colonne asimmetrico ed elastico con background e colonne fisse

Le due colonne sono dimensionate in pixels e per una migliore disposizione dei contenuti hanno larghezza differente. La larghezza dell' intero layout cambia intervenendo sulla dimensione del carattere attraverso le opzioni del browser

Layout con contenuti impaginati

In questo esempio si usano i posizionamenti assoluti per il layout, e i contenuti nella colonna centrale vengono impaginati su mini-colonne attraverso float e clear

Gli esempi completi

Scarica gli esempi completi presentati nella guida. Il codice CSS è incorporato nei vari documenti HTML.

Altri articoli

Altre guide

Altre newsletter