Le sezioni logiche di una pagina web
L' header (testata)
Generalmente l'header si estende orizzontalmente per tutto lo spazio a disposizione del layout. In verticale l'header si dovrebbe estendere per circa 80, 100 o massimo 150 pixels. È fondamentale anche in questa sezione il contenuto: che sia grafico o testuale, l'header dovrebbe riportare il nome del sito e una sorta di descrizione o sottotitolo.
È poi diffusa la buona pratica che l'header, oltre che a essere un titolo, sia anche un link che punti alla home page, cosicché da qualsiasi pagina interna del sito, oltre che dal menu di navigazione, sia possibile con un solo click ritornare alla pagina iniziale.
La navigazione
La navigazione, anche detta menu è una sezione indispensabile di ogni sito, in quanto permette di accedere ai contenuti. La navigazione principale dovrebbe essere ben visibile, leggibile e distinguibile dai contenuti, e un buon sito internet dovrebbe poter consentire di accedere da ogni pagina a tutte le altre pagine senza troppi click e soprattutto senza l' uso dei tasti "indietro" e "avanti" del browsers. È importante ricordare all' utente dove si trova, evidenziando in qualche modo la pagina o sezione corrente.
La sezione dei contenuti
È questa la parte principale di un sito. Se è vero che un buon layout e una buona grafica possono fare la differenza al primo impatto, quello che davvero attira un visitatore dopo un primo sguardo sono i contenuti.
Il footer (pie' di pagina)
Il footer è generalmente una piccola sezione disposta a fondo pagina e contiene informazioni sullo sviluppatore del sito, sul copyright, i contatti di posta elettronica ed eventualmente indirizzo e numero di telefono se il sito riguarda un'azienda. Il footer dovrebbe essere presente in ogni pagina, ben distinguibile e discreto. A mio avviso, non dovrebbe essere spazialmente più grande dell'header.
Esistono varie tipologie di layout. Prendiamo in considerazione il layout monolitico.
Layout monolitico
Il laoyout monolitico si compone di quattro sezioni fondamentali:
- header
- navigazione
- contenuti
- footer
Il codice HTML
Ecco il codice HTML di base, per ora senza contenuti:
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
Per contenere le sezioni principali, ho dichiarato un div con id container. È fondamentale: il suo scopo è infatti modificare l'estensione orizzontale in maniera facile attraverso poche e semplici regole CSS, come spiegato nella parte introduttiva della guida.
Esempio di layout monolitico:
Nel foglio di stile trascrivo questo per collegarlo con la pagina di riferimento:
#container
{ }
#header { }
#navigation { }
#content { }
#footer { }
Link utilli
Nel foglio di stile trascrivo questo per collegarlo con la pagina di riferimento:
#container
{ }
#header { }
#navigation { }
#content { }
#footer { }
#header { }
#navigation { }
#content { }
#footer { }
Link utilli
Nessun commento:
Posta un commento