docEsercitazione 3 - CSS avanzati: layout
download 
Reclamo Transcript
Esercitazione 3 - CSS avanzati: layout
Marco Porta – 2011/12
CIM – Web Design & Technologies
Esercitazione 3 – CSS avanzati: layout
Traccia di lavoro:
1. Vogliamo realizzare una pagina con un layout come il seguente:
contenitore
intestazione
barra di navigazione
menù
contenuto
<html>
<head>
<title>Un layout coi CSS</title>
</head>
<body>
<div id="contenitore">
<div id="intestazione"></div>
<div id="contenuto"></div>
<div id="barranavigazione"></div>
<div id="menu"></div>
<div id="footer"></div>
</div>
</body>
</html>
footer
2.
Scelte da fare: (1) Layout a larghezza fissa o liquido? (2) Layout centrato o allineato a
sinistra/destra? (3) Quali box saranno disposti secondo il flusso normale? Quali saranno
posizionati in modo assoluto, e quali in modo relativo? Ci sono box flottanti?
Possibile soluzione:
a. contenitore larghezza fissa, centrato, posiz. relativo
b. intestazione larghezza variabile, flusso normale
c. contenuto larghezza fissa, flusso normale
d. barranavigazione larghezza fissa, posiz. assoluto
e. menu larghezza fissa, posiz. assoluto
f. footer larghezza variabile, flusso normale
3. Definiamo lo stile per il body e il contenitore (ad esempio direttamente nel file HTML):
body {
margin: 0px; padding: 0px;
font-size: 85%;
font-family: Verdana, sans-serif;
text-align: center;
color: black;
background-color: white;
}
#contenitore {
padding: 0px;
margin: 1em auto;
position: relative;
width: 630px;
height: 150px; /* per vederlo… */
text-align: left;
background-color: lightgrey;
border: 1px solid black;
}
4.
Definiamo l’intestazione:
Marco Porta – 2011/12
#intestazione {
height: 80px;
background-color: red;
}
5.
Definiamo il contenuto, supponendo che la barra di navigazione superiore sia alta 25 pixel (per
vederlo, dobbiamo inserire qualcosa nel div con id=“contenuto”…):
#contenuto {
margin-top: 25px;
margin-left: 129px;
background-color: yellow;
}
6.
Inseriamo la barra di navigazione:
#barranavigazione {
position: absolute;
top: 80px; left: 0px;
height: 25px;
width: 100%;
background-color: lightgreen;
}
7.
Inseriamo il menù di navigazione a sinistra:
#menu {
position: absolute;
top: 115px; left: 0px;
width: 109px;
background-color: cyan;
}
8.
Inseriamo il footer:
#footer {
height: 20px;
background-color: white;
}
9.
Definiamo delle aree di padding per il contenuto (es. 1em) e il menù (es. 10px), uguali sui quattro
lati
10. Togliamo la definizione dell’altezza nel contenitore (altrimenti Mozilla non lo espande
verticalmente…)
11. Inseriamo immagini di sfondo nel body e nell’intestazione (scaricare i file back.jpg e header.jpg
da http://vision.unipv.it/wdt-cim/esercitazioni/layoutcss/): usare la
proprietà background-image (valore url("…"))
12. Definiamo le caratteristiche dei link. Ad esempio:
a {
text-decoration: none;
font-weight: bold;
color: #932F02;
font-size: 80%;
}
a:hover {
text-decoration: underline;
}
Marco Porta – 2011/12
13. Cambiamo in bianco il colore di sfondo del contenitore…
14. Riempiamo la barra di navigazione (ad esempio con i link generici Sezione 1, Sezione 2, ecc.) e la
“abbelliamo” (cambiandone anche il colore di sfondo):
#barranavigazione {
...
border-top: solid white 1px;
padding-top: 5px;
background-color: #FFDF71;
}
#barranavigazione a {
padding-left: 0.7em;
padding-right: 1em;
border-right: white solid 1px;
}
15. Cambiamo in bianco il colore di sfondo del contenuto e lo riempiamo (creare due paragrafi,
copiando il testo da http://vision.unipv.it/wdt-cim/esercitazioni/
layoutcss/contenuto.txt; scaricare anche l’immagine i4.jpg e, definendo una classe
generica destra, inserirla con un posizionamento flottante a destra appena all’inizio del secondo
paragrafo). Definire un font Arial (in alternativa sans-serif) per i paragrafi
16. Inseriamo prima dei paragrafi del punto precedente un titolo h1 (es. “Layout coi CSS”) e un
sottotitolo h3 (es. “18 ottobre 2011”), e ne definiamo le caratteristiche; ad esempio:
h1 {
font-family: serif;
color: red;
font-size: 1.8em;
font-weight: normal;
}
h3 {
margin-top: -1.1em;
font-family: serif;
color: #FF6666;
font-size: 1.3em;
font-weight: normal;
font-style: italic;
}
17. Cambiamo in bianco il colore di sfondo del menù e lo riempiamo; ad esempio con il seguente
contenuto:
<h2>Archivio</h2>
<ul>
<li><a href="">Gen.
<li><a href="">Mar.
<li><a href="">Mag.
<li><a href="">Lug.
<li><a href="">Set.
</ul>
2011</a></li>
2011</a></li>
2011</a></li>
2011</a></li>
2011</a></li>
Definiamo anche le caratteristiche dei titoli h2 e delle liste non numerate:
h2 {
font-family: serif;
color: red;
font-size: 1.5em;
font-weight: normal;
}
Marco Porta – 2011/12
ul {
padding: 0px;
margin-left: 1.5em;
}
18. Inseriamo un contenuto nel footer (“Copyright (c) Il mio sito 2011”) e ne impostiamo altre
caratteristiche:
#footer {
height: 20px;
background-color: #FFDF71;
border-bottom: solid white 1px;
text-align: right;
font-size: 75%;
padding-top: 0.4em;
padding-right: 1em;
}
19. Definiamo una classe generica corsivo, che faccia diventare il testo in corsivo, e la applichiamo
poi (ad esempio con uno <span>) al testo "Il mio sito 2010" nel footer:
.corsivo { font-style: italic }
20. Il titolo h2 “Archivio” non è allineato verticalmente col testo se si usa Internet Explorer… mentre
lo è con Mozilla. Bisogna caricare (dopo lo stile "ufficiale" che stiamo definendo) un CSS solo
per Explorer:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" > <![endif]-->
Contenuto CSS:
#menu {
padding-top: 25px;
}
21. Aggiungiamo un bordo a sinistra del contenuto:
border-left: solid 1px #FFDF71;
22. Inseriamo dentro l’intestazione un elemento h1con id=“titolointestazione” contenente il testo
“Un sito senza tabelle”; nel foglio di stile, specificare che l’elemento titolointestazione non deve
essere visualizzato (valore none per la proprietà display… questo elemento non si vede, ma un
browser vocale lo leggerà!)
23. E se si vuole un layout liquido? (1) Nel contenitore si specifica una larghezza percentuale (es.
80%) anziché fissa; (2) Nell’intestazione si usa un’immagine di sfondo che sfuma a destra con un
certo colore c (scaricare l’immagine header2.jpg da http://vision.unipv.it/wdtcim/esercitazioni/layoutcss/) e si specifica che non deve essere ripetuta (valore norepeat per la proprietà background-repeat); sempre per l’intestazione si definisce un colore di
sfondo uguale a c (rgb(253, 232, 141))
24. E se vogliamo spostare il menù a destra? Bastano tre piccolissime modifiche da apportare a
contenuto e menu… quali?
25. Pensare a possibili layout per la stampa e i dispositivi palmari (smartphone, ecc.)
