1. 1. Introduzione

   Perchè questa guida

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

1. 2. L' importanza dell' impaginazione

   Un modo nuovo di creare il layout: vantaggi dei CSS rispetto alle tabelle

2. 3. Dalle tabelle al layout table-less

   Come passare ai CSS in modo indolore. La fondamentale distinzione tra contenuto, struttura e presentazione

3. 4. Le sezioni logiche di una pagina web

   Pianificare i contenuti e la loro organizzazione sulla pagina: testata, navigazione, contenuti e footer

4. 5. I più comuni layout table-less

   Breve panoramica delle principali tipologie di layout realizzabili con i CSS

5. 6. Layout fluido

   Layout che si adattano alla larghezza della finestra del browser

6. 7. Layout fisso

   Layout a dimensione fissa impostata in pixel

7. 8. Layout elastico

   Layout con le dimensioni impostate in em

8. 9. Come realizzare un sito table-less

   I passi da seguire per affrontare la costruzione del layout con i soli CSS

9. 10. La fase di test di un layout

   Difendersi dal rischio principale: le incompatibilità tra i vari browser

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 della finestra del browser

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.