Impaginazione: contenuti e layout

Fabio Giovanetti

Liceo di Luino

Impaginazione e layout

• Qunado si definisce la struttura di una pagina occorre distinguere tra la struttura logica e la disposizione grafica (layout)
• La struttura è definita tramite la marcatura (html)
• Il layout si può definire con i CSS

Struttura tipica di una pagina

• Un'intestazione (header)
• L'area principale
• Un piè di pagina (footer)

Relizzare la struttura

• Conviene usare i div con la proprietà id, ad esempio
  • <div id="intestazione"> ... </div>
  • <div id="principale"> ... </div>
  • <div id="pie"> ... </div>

Intestazione

• Contiene tipicamente il titolo principale ...
• un logo
• eventualmente uno slogan
• e altre informazioni in evidenza
• In genere nell'intestazione trova posto un menu principale, che conviene organizzare come lista

Area principale

• Contiene tipicamente i contenuti veri e proprio della pagina ...
• eventualmente suddivisi in sezioni con sottotitoli (h2,...)
• Può contenere un menu secondario o dei link specifici per quella pagina
• È in genere la parte più consistente della pagina

Piè di pagina

• Contiene altre informazioni sul sito o sulla pagina: ad esempio
  • notizie sull'autore;
  • notizie su software o template utilizzati;
  • informazioni su eventuali licenze che coprono i contenuti;
  • eventuali ringraziamenti.

Layout

• Per disporre i vari elementi possiamo usare i css
• Ricordiamo che per definire le regole che si riferiscono a un div con id="nome" usiamo il selettore div#nome (o anche solo #nome)
• Invece definire le regole che si riferiscono a un div con class="nome" usiamo il selettore div.nome (o anche solo .nome)

Un esempio

• Partiamo da un esempio che analizzeremo durante l'incontro, prima di studiare in dettaglio un po' di metodi di disposizione
• Ecco l'esempio (solo abbozzato, avremo modo di raffinarlo in seguito)
• La stessa pagina senza CSS

Alcune caratteristiche

• Si tratta di un cosiddetto layout liquido che si adatta alla risoluzione dello schermo
• Intestazione e piè di pagina sono disposti sopra e sotto
• L'area principale è divisa in due colonne affiancate

Alcune soluzioni

• Per ottenere le due colonne si imposta la larghezza della prima e si usa la proprietà float per far disporre a sinistra l'altra colonna ( width:70%; float:left;)
• Per la seconda colonna usiamo un margine sinistro pari alla larghezza della prima colonna (è solo uno dei tanti metodi possibili)
• Per far disporre la lista del menu principale in orizzontale usiamo la proprietà display:inline
• Notiamo la sintassi .menu_navigazione li che permette di definire il comportamento di un elemento li solo se contenuto nel div con classe menu_navigazione

Credits e licenza

• Questa presentazione (nella versione proiettata) è realizzata con S5 di Eric Meyer
• Si tratta di uno strumento per realizzare presentazioni scrivendo semplicemente un file html, quindi con strumenti standard e non proprietari
• Eccetto dove diversamente specificato, i contenuti di questa presentazione sono rilasciati sotto Licenza Creative Commons