Materiali
Incontro 3
I div - Creare un contenitore per il sito
Creiamo il contenitore esterno per il nostro sito, cioè il blocco che nella pagina modello era colorato in azzurro.
Più o meno, otterremo il riquadro centrale della figura sotto, in cui
inseriremo tutti i nostri contenuti.
1) Creiamo un contenitore
Clicchiamo sull'icona dei fogli di stile in alto:
2) Ora scegliamo la terza voce della lista:
style applied to an element with specified ID attribute
Sotto, dopo il simbolo #, scriviamo il nome del div, ad
esempio "contenitore".
Avremo perciò:
#contenitore
3) Ora dobbiamo dare delle caratteristiche al nostro contenitore, ad esempio la larghezza e il posizionamento al centro della pagina.
- selezioniamo la voce Box in alto
- compiliamo con i seguenti valori:
larghezza:
width :970px
posizionamento al centro dello schermo:
right:auto
left:auto
5) Inseriamo il contenitore nella pagina
5) Inseriamo il contenitore nella pagina
Se apriamo la nostra pagina in html con un browser (es explorer o firefox) non compare ancora nulla. Perchè?
Finora
abbiamo deciso quali caratteristiche deve avere il nostro contenitore,
ma queste caratteristiche sono tutte contenute dentro il foglio di
stile. Sono in un altro file.
Per vedere il nostro contenitore dentro la pagina, dobbiamo prima inserirlo nel file .html
- apriamo il codice HTML della pagina, cliccando su Source
- posizioniamo il cursore dopo il tag <body>, chee rappresenta l'inizio della nostra pagina
- scriviamo:
<div id="contenitore"></div>
