Guida Layout dei siti con i CSS

17 marzo 2006

La guida ai layout con i CSS è uno strumento ideale per chi intende avvicinarsi alla realizzazione di pagine web aderenti agli standard e le più moderne tendenze del web-design

Introduzione: vantaggi dei layout con i CSS e della corretta strutturazione dei contenuti

  1. 1. Introduzione
    Perchè questa guida
  2. 2. L' importanza dell' impaginazione
    Un modo nuovo di creare il layout: vantaggi dei CSS rispetto alle...
  3. 3. Dalle tabelle al layout table-less
    Come passare ai CSS in modo indolore. La fondamentale distinzione tra...
  4. 4. Le sezioni logiche di una pagina web
    Pianificare i contenuti e la loro organizzazione sulla pagina:...
  5. 5. I più comuni layout table-less
    Breve panoramica delle principali tipologie di layout realizzabili...
  6. 6. Layout fluido
    Layout che si adattano alla larghezza della finestra del browser
  7. 7. Layout fisso
    Layout a dimensione fissa impostata in pixel
  8. 8. Layout elastico
    Layout con le dimensioni impostate in em
  9. 9. Come realizzare un sito table-less
    I passi da seguire per affrontare la costruzione del layout con i...
  10. 10. La fase di test di un layout
    Difendersi dal rischio principale: le incompatibilità tra i vari...

Layout monolitico o a colonna singola

  1. 11. Layout monolitico
    Impostiamo la realizzazione di un layout a colonna singola
  2. 12. Layout monolitico
    Le regole CSS per layout a una colonna che si adattino alla larghezza...
  3. 13. Layout monolitico fisso
    Le regole CSS per layout a una colonna a larghezza fissa
  4. 14. Layout monolitico elastico
    Le regole CSS per layout a una colonna con dimensioni espresse in em
  5. 15. Il problema del footer
    Fare in modo che il pie' di pagina sia sempre posizionato sul fondo

Layout a due colonne

  1. 16. Layout a due e tre colonne: introduzione
    Tecniche di base, codifica, accessibilità.
  2. 17. Lunghezza e larghezza delle colonne
    Impostare al meglio dimensioni e unità di misura
  3. 18. Layout a due colonne: elementi di base
    Sezioni principali e posizionamento della navigazione
  4. 19. Layout a due colonne con il float
    Tecniche principali e risoluzione del problema del footer
  5. 20. Layout a due colonne con il float
    Usare colori o bordi per suddividere le sezioni della pagina
  6. 21. Layout a due colonne con posizionamento assoluto
    Tecnica, vantaggi e problemi noti dell'approccio alternativo ai float
  7. 22. Layout a due colonne fluidi
    Usare il dimensionamento in em

Layout a tre colonne

  1. 23. Layout a tre colonne: introduzione
    Sezioni e schemi di base
  2. 24. Lunghezza relativa e larghezza delle colonne
    Impostare al meglio dimensioni e unità di misura
  3. 25. Dettagli da non trascurare
    Note propedeutiche su font, margini e padding
  4. 26. Layout a tre colonne con float
    Tecniche di base, codice, esempi
  5. 27. Layout a tre colonne con float: separare le colonne
    Usare colori o bordi per suddividere le sezioni della pagina
  6. 28. Layout a tre colonne con float e background
    Una soluzione al problema della lunghezza delle colonne
  7. 29. Layout a tre colonne con i posizionamenti assoluti
    La principale alternativa ai float
  8. 30. Una variante del layout con posizionamenti assoluti
    Usare un bordo spesso per separare le colonne
  9. 31. Layout a tre colonne con immagine di background
    Doppio container e sfondo
  10. 32. Rompere la simmetria
    Layout con una colonna laterale più larga dell'altra

Microlayout

  1. 33. L'impaginazione dei contenuti centrali
    Gestire gli elementi all'interno delle sezioni: float e clear
  2. 34. Testo e immagini
    Usare float e clear per disporre immagini all'interno del testo
  3. 35. Dividere una sezione in due colonne
    Un'impaginazione di tipo giornalistico - I
  4. 36. Dividere una sezione in tre colonne
    Un'impaginazione di tipo giornalistico - II
  5. 37. Esempio finale di microlayout
    Riassunto e schema complessivo

CSS per la stampa

  1. 38. Definire il layout solo per lo schermo
    Un primo metodo per ottenere buone stampe
  2. 39. Specificare un CSS ad hoc per la stampa
    Secondo metodo: un foglio di stile dedicato solo alla fase di stampa
  3. 40. Ridefinire il foglio di stile per lo schermo
    Una soluzione 'mista'. Stampa di sfondi e bordi

Indice ed esempi completi

  1. 41. Indice dei layout presentati nella guida
    Pro e contro degli esempi presentati. Codice da scaricare.
Se vuoi aggiornamenti su Guida Layout dei siti con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Guida Layout dei siti con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy