Materiali
Incontro 3
Struttura di una pagina web modello
In una pagina web i contenuti sono ordinati in una
struttura, disposti in blocchi e aree visive per facilitare la lettura.
Il layout grafico di una pagina web è la struttura portante del nostro
sito.
Cominciamo a costruire una pagina modello, che servirà per tutte le
pagine del nostro sito.
Il nostro modello sarà costruito più o meno così:
Avremo cioè una serie di blocchi, o div, ch definiscono le aree della pagina.
Nel dettaglio troviamo:
- un blocco-contenitore
che contiene tutto il sito (in azzurro)
- un blocco per l'intestazione o top, in rosso
- un blocco centrale in bianco, per i contenuti. A sua volta conterrà:
- la colonna sinistra, dove possiamo mettere il menu di navigazione
- la colonna destra, dove metteremo immagini, foto ecc
- il , cioè la chiusura della pagina
Cosa troviamo nel codice HTML
Se andiamo a vedere come sono definiti questi blocchi nel codice HTML, vedremo che troviamo sempre un tag
<div> </div>
con indicato anche il nome del blocco nel tag di apertura. Il nome si scrive con:
id="nome"
ad esempio:
<div id="top"> qui ci sono i contenuti dell'intestazione </div>
<div id="sinistra"> qui ci sono i contenuti della colonna di sinistra</div>
In altre parole, come abbiamo visto per i titoli o i paragrafi, nel codice HTML trovo un tag che indica l'inizio dei contenuti di ciascun blocco e un tag che indica la fine.
Come dare il formato a questi blocchi?
Per dare un colore e una grandezza a questi blocchi, o per indicare esattamente la posizione nella pagina (a destra, a sinistra, in alto o in basso ecc) dovrò dare alla pagina una serie di istruzioni.
Tutte le istruzioni sul formato dei blocchi saranno contenute all'interno di un altro file, che si chiama foglio di stile e che avrà l'estensione .css
ad esempio: stile.css
