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.