Disegnare un “template”
Come cominciamo a “disegnare il template” per il nostro sito web?
Innanzi tutto dobbiamo scegliere un’architettura di base del sito.
I siti web 2.0 conformi agli standard del w3c non si usano più siti
con frame o con tabelle, bensì si usano molto i fogli di stile.
Il primo passo da fare è scegliere un’architettura di base del sito.
Gli elementi essenziali sono:
1. Header
2. Menu orizzontale ( o di navigazione )
3. Menu laterale (che conterrà i links)
4. Contenuto
5. Footer
1
Lezione 8
Disegnare un “template”
La disposizione più utilizzata
è illustrata accanto
HEADER
Solitamente un sito con una struttura
simile non è più largo di 800/900 px.
Useremo le classi dei fogli di stile per
Costruire l’architettura del sito
MENU DI NAVIGAZIONE
CONTENUTO
SIDEBAR
FOOTER
2
Lezione 8
Disegnare un “template”
Iniziamo a definire delle proprietà generali per body:
1. Background
2. Colore del testo
3. Dimensione del testo
4. Gruppo di font per la pagina
5. Margine e padding inizializzati a zero
Come esempio i colori guida del sito saranno nero e gradazioni di
grigio e arancione, ma voi potete modificare queste proprietà a
vostro piacimento.
3
Lezione 8
Disegnare un “template”
body {
margin: 0;
padding: 0;
background-color: #636363;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #70695A;
}
Incollando il codice in un nuovo foglio di stile tramite Top Style, e
agganciandolo ad una pagina in Dreamweaver, ottenete l’anteprima
della pagina principale del sito.
4
Lezione 8
Disegnare un “template”
Nella diapositiva 2 la struttura della pagina del nostro sito è composta
da 5 box.
Un “superbox” che chiameremo “pagina” dovrà contenerli tutti.
Equivale nella pratica a racchiudere tutto in un box contenitore.
Dobbiamo allora creare un identificatore nel foglio di stile che avrà
dimensioni sufficienti a contenere tutti i box che desideriamo.
La larghezza adeguata per una visualizzazione in più browser a diversa
risoluzione è quasi sempre 800 px.
Per consentire a box pagina di stare “al centro” del browser basterà
impostare il margine destro e sinistro al valore auto. In questo modo è
il browser che si occupa di centrare il box.
5
Lezione 8
Disegnare un “template”
#pagina {
width: 800px;
height: auto;
background: #ffffff;
margin-left: auto;
margin-right: auto;
}
6
#pagina
800px
Lezione 8
Disegnare un “template”
Nella pagina web il codice sarà:
<body>
<div id="pagina">
Inserire qui il contenuto per
id "pagina“
</div>
</body>
7
Lezione 8
Disegnare un “template”
L’header del nostro sito dovrà essere
contenuto nel superbox che abbiamo
appena creato. Per questo la dimensione
deve essere uguale o superiore alla
dimensione del box #pagina.
#pagina 800px
Useremo un altro identificatore per l’header
che chiameremo appunto #header.
#header{
height: 150px;
width: 780px;
}
8
Lezione 8
#header
800px
Disegnare un “template”
Nella pagina web il codice sarà:
<body>
<div id="pagina">
<div id="header">Inserire qui il contenuto per id "header"</div>
</div>
</body>
Bisogna usare tag div annidati se vogliamo che i box siano contenuti
uno nell’altro!! Nel caso dell’esempio il tag con id=“pagina” contiene il
nostro primo box con tag id=“header”.
9
Lezione 8
Disegnare un “template”
Immediatamente sotto l’header c’è
la barra di navigazione.
E’ indispensabile inserire i principali link su
tale barra per migliorare la navigazione.
#pagina 800px
Non deve essere molto alta e deve avere le
stesse dimensioni dell’header definite in
Precedenza, nel caso di questo esempio
780px.
#navigation{
height: 42px;
width: 780px;
}
10
Lezione 8
#header 780px
#navigation 780px
800px
Disegnare un “template”
Nella pagina web il codice sarà:
<body>
<div id="pagina">
<div id="header">Inserire qui il contenuto per id "header"</div>
<div id="navigation">Inserire qui il contenuto per id
"navigation"</div>
</div>
11
Lezione 8
Disegnare un “template”
12
Lezione 8
Disegnare un “template”
Ora dobbiamo creare i box del contenuto
principale e del menu laterale.
#pagina 800px
#header 780px
#navigation 780px
Useremo un id #content per il
contenuto e un id #sidebar per il
menu laterale. I box dovranno essere
Affiancati.
780px
#content 580px
Ricordiamo che per allineare i box a destra
o a sinistra della linea corrente bisognerà
Usare la proprietà float.
La linea corrente è rappresentata nel caso
del nostro esempio dal box navigation.
13
Lezione 8
#sidebar
220px
Disegnare un “template”
#content{
width: 780px;
float: left;
height: auto;
}
#pagina 800px
#header 780px
#navigation 780px
780px
#left content
580px
#content =
#leftcontent + #sidebar
14
Lezione 8
#sidebar
200px
Disegnare un “template”
Nella pagina web il codice sarà:
<body>
<div id="pagina">
<div id="header">Inserire qui il contenuto per id "header"</div>
<div id="navigation">Inserire qui il contenuto per id "navigation"</div>
<div id="content">Inserire qui il contenuto per id "content"</div>
</div>
</body>
15
Lezione 8
Disegnare un “template”
#pagina 800px
#content{
#header 780px
width: 780px;
height: auto;
#navigation 780px
}
#leftcontent{
width: 580px;
float: left;
780px #sidebar
#left content
height: auto;
200px
580px
}
#sidebar{
width: 200px;
#content =
height: auto;
#leftcontent + #sidebar
float: right;
}
16
Lezione 8
Disegnare un “template”
Nella pagina web il codice sarà:
<body>
<div id="pagina">
<div id="header">Inserire qui il contenuto per id "header"</div>
<div id="navigation">Inserire qui il contenuto per id "navigation"</div>
<div id="content">
<div id="leftcontent">Inserire qui il contenuto per id "leftcontent"</div>
<div id="sidebar">Inserire qui il contenuto per id "sidebar"</div>
</div>
<div id="footer">Inserire qui il contenuto per id "footer"</div>
</div>
Sia #leftcontent che #sidebar sono annidati in #content!!!
17
Lezione 8
Disegnare un “template”
L’ultimo box è il footer.
Useremo una classe #footer per questo
Ultimo box.
#pagina 800px
#header 780px
#navigation 780px
Per il footer le dimensioni saranno di 780px
Di larghezza e non più alto di 50px.
#footer{
float: left; /*questo valore va corretto*/
height: 42px;
width: 780px;
}
18
Lezione 8
780px
#leftcontent
580px
#sidebar
200px
#footer 780px
Disegnare un “template”
19
Lezione 8
Disegnare un “template”
Ora che la nostra struttura base è completa cominciamo ad eliminare
alcune imperfezioni.
La prima imperfezione è mostrata in figura.
Centrare tutti i box interni al box #pagina
Come vedete i box contenuti in #pagina sono allineati a sinistra.
Come fare per centrarli rispetto al box #pagina???
20
Lezione 8
Disegnare un “template”
Basterà impostare (come nella slide 5) il margine destro e sinistro a
valore auto in tutti quei box che non si allineano centralmente nel box
#pagina.
In alternativa possiamo racchiudere tutto come di seguito:
#header, #navigation, #content, #footer {
margin-left: auto;
margin-right: auto;
}
La proprietà vale per tutte le gli identificatori elencati.
21
Lezione 8
Disegnare un “template”
Box allineati centralmente rispetto a #pagina
Solo #footer non si allinea. Perché?
22
Lezione 8
Disegnare un “template”
Nella slide 18 abbiamo allineato il box di #footer a sinistra.
Secondo la proprietà float esso si allineerà alla sinistra della linea
corrente.
La linea corrente però è rappresentata dal box #content.
Quando usiamo la proprietà float dobbiamo stare attenti a quella che
consideriamo la “linea corrente”.
Possiamo risolvere questa imperfezione utilizzando la proprietà clear.
23
Lezione 8
Disegnare un “template”
Questa proprietà ci viene in aiuto se vogliamo “ripristinare” il normale
flusso del contenuto del documento.
Infatti visto che il float sposta un elemento dal flusso normale del
documento, è possibile che esso venga a trovarsi in posizioni non
desiderate, magari al fianco di altri elementi che vogliamo invece
tenere separati. clear risolve questo problema.
Attrib Valore
uto
Descrizione
clear
Impedisce che al
fianco di un elemento
compaiano altri
elementi con il float
24
1. None (non influsice su float)
2. Left (impedisce che ci siano elementi a
sinistra)
3. Right (impedisce che ci siano elementi a
destra)
4. Both (impedisce che ci siano elementi a
destra e sinistra)
Lezione 8
Disegnare un “template”
Nel nostro caso il valore che ci interessa è both, in questo modo
ripristiniamo il normale flusso della pagina.
#footer{
clear: both;
height: 42px;
width: 780px;
}
25
Il flusso è ripristinato e anche il box
#footer risulta al centro del box #pagina
Lezione 8
Inserire elementi grafici
Aggiungendo testo e collegamenti in ogni tag div (i
nostri box)il risultato è come in figura:
26
Lezione 8
Inserire elementi grafici
Aggiungendo testo e link tra ognuno dei tag div della nostra pagina
template html, otteniamo una pagina graficamente scarna come nella
fig. precedente.
Il passo successivo è appunto definire un po’ della grafica del sito.
1. Definire un set di colori guida (colore di sfondo, colore del testo, colore
alternativo…); definire poi i colori di sfondo per ogni box, i bordi di ogni box
ecc..
2. Definire i colori per:
1. Testo nell’header (titoli <h1>, <h2>…)
2. Testo nella pagina (<p>)
3. Link/ancore (<a>)
4. Link e ancore al passaggio del mouse (a:hover)
5. Stile delle immagini (<img>: allineamento rispetto al testo, bordo…)
6. Immagini con collegamenti ipertestuali (tag <img> in un tag <a>)
7. Stile di altri elementi di html (<blockquote>, <code>, <table>, stile dei
pulsanti, delle caselle di testo…)
27 8. Definire lo stile degli elenchi
Lezione 8
Inserire elementi grafici
Una volta definito lo stile base del sito per i box e per la maggior parte
degli elementi di html più usati possiamo passare a “specializzare” il
nostro stile per ogni elemento a seconda che si trovi o meno in un
determinato box della pagina.
Per esempio possiamo cambiare il colore dei titoli a seconda che stiano
nell’header o nel contenuto, possiamo cambiare lo stile dei link a
seconda che si trovino nel contenuto o nel footer o nella sidebar e
così via.
Nel file template1.css sono elencati alcuni dei tag html principali sui
quali possiamo operare le modifiche giuste per adeguare il nostro
template ai nostri gusti grafici.
Per esercitazione completare a vostro piacimento lo stile per gli
elementi proposti.
28
Lezione 8
Inserire elementi grafici
Attenzione all’ereditarietà!! Ogni proprietà viene sempre ereditata!!
L’operazione che stiamo compiendo è una “specializzazione” di alcune
proprietà di alcuni tag. Stiamo perciò attenti alle proprietà definite in
precedenza in modo che non vadano in conflitto con quelle nuove.
Nell’esempio del file template2.html sono state apportate modifiche sia
ai box che ai vari elementi di html a seconda che si trovino nel diversi
box della pagina.
Il file template2.css raccoglie un esempio di stile guida del nostro sito.
Nelle prossime lezioni ci occuperemo di definire classi e di inserire
elementi di grafica digitale disegnati con Fireworks.
29
Lezione 8
Inserire elementi grafici
Un risultato può essere come in figura:
30
Lezione 8