Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 41 di 41
  • livello principiante
Indice lezioni

Indice dei layout presentati nella guida

Pro e contro degli esempi presentati. Codice da scaricare.
Pro e contro degli esempi presentati. Codice da scaricare.
Link copiato negli appunti

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.


Ti consigliamo anche