1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Page Scuola Media &quot;Don Milani&quot; LODI</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		  
2)
<style type="text/css" media="screen">
<!--		 INIZIO CODICE: Rilassatevi, mettete un pò di musica ed accendete l'aria condizionata
3)
html {
height: 100%;
} 		Trattasi di un documento html con altezza al 100%
4)
body {
background-color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

Caratteristiche del corpo del documento:
Colore di sfondo bianco; testo centrato, margini 0, ecc......

E' MEGLIO NON MODIFICARLO!!
(Rischiate di entrare in depressione istantaneamente!)
5)
#box {
background-color: #FFFFFF;
text-align: left;
width: 768px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 100%;
}

Questo è il box dove risiederanno le tre colonne. Da notare il colore di sfondo sempre bianco, il testo allineato a sinistra, e la larghezza fissa di 768 pixel. Sia il margine destro che sinistro si espanderanno automaticamente. L'altezza è sempre al 100%.

Anche questo E' MEGLIO NON MODIFICARLO! Per i motivi che ho detto prima

6)
#top {
background-color: #FFFFFF;
}		 Questa è l'indicazione per il logo: io ho usato come sfondo il bianco, ma si può modificare a piacimento, in funzione del colore del logo. Basta cambiare i caratteri esadecimali.
7)
#barretta {
background-color: #0000CC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
border-top: 2px solid #CCCCCC;
border-bottom: 2px solid #CCCCCC;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 2px;
}		 La barretta mi consente di spezzare il logo dal resto del documento. In essa si può mettere l'indirizzo della scuola o si possono linkare altre pagine. Per questo è però necessario inserire altro codice che dà indicazioni su come devono comportarsi i links.
Per gli interessati posso comunicarlo in seguito dietro lauto compenso.
In questo caso il colore di sfondo è blu, i font sono di 11 pixel, di colore bianco e ci sono due bordi (superiore ed inferiore) di colore grigio. Qui si può cambiare tutto quello che vi pare.
8)
#left {
background-color: #0000CC;
float: left;
width: 130px;
height: 100%;
margin: 0px;
}		 Margine sinistro: colore chiaro, gusto pulito
Colore di sfondo blu, larghezza 130 pixel, ecc..
Qui potete modificarne, oltre al colore, anche la larghezza, avendo l'accortezza di modificare anche quelle relative al centro ed al margine destro, in quanto il totale deve essere sempre di 768 pixel
9)
#middle {
background-color: #FFFFFF;
width: 508px;
float: left;
height: 100%;
margin: 0px;
}		 Centro pagina: colore di sfondo bianco, larghezza 508 pixel.
Anche qui è possibile riadattare.
10)
#right {
background-color: #FFFFFF;
background-repeat: repeat;
float: left;
width: 130px;
height: 100%;
margin: 0px;
}		 Margine destro: uguale al sinistro. Se volete un layout a 2 colonne, come ho fatto io nelle altre pagine, dovete tagliare interamente questa parte di codice, stando però attenti alla larghezza!
In questo caso: 130 + 508 + 130 = 768 (i conti tornano! Se però avete problemi di calcolo, munitevi di una calcolatrice tascabile, ne esistono tante in commercio, o usate quella di Windows: Start-Programmi-Accessori-Calcolatrice)
11)
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}		 Queste sono le indicazioni per il menu: io ho usato le dimensioni dei font a 12 pixel per meglio visualizzarli (ipovedenti, persone con difficoltà nella manipolazione del mouse, ecc...) Il colore dei caratteri è nero mentre quello di sfondo è bianco
12)
.menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #6699FF;
display: block;
width: auto;
border-bottom: 1px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
border-top: 1px solid #FFFFFF;
padding: 3px;
}

Questo è il comportamento del menù prima di passarci su con il mouse: qui cambia il colore di sfondo (6699FF), i bordi superiori ed inferiori sono di 1 pixel. Quelli destro e sinistro sono invece di 0 pixel. Lo spazio tra i "bottoni" l'ho aumentato a 3 pixel (padding) per il motivo precedente (maggiore distanza tra i bottoni).
Qui potete fare delle prove per adattare a vostro piacimento il menu.
Provate con: background-color; border. padding, visualizzate in anteprima e salvate quando ritenete di aver creato un menu a vostra immagine e somiglianza.
13)
.menu a:hover {
background-color: #FFFF66;
}		 Ed eccoci all'effetto "rollover". Quello che prima realizzavamo con il codice javascript e ci portava via parecchi Kb! Qui sono solo tre righe.
Lo sfondo del link cambia colore e diventa giallino (FFFF66). Naturalmente anche qui potete farne le opportune modifiche.
14)
#contenuto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
width: 490px;
margin-right: 9px;
margin-left: 9px;
}		 Contenuto del documento: oltre agli ormai familiari comandi: font, colore font, colore di sfondo. C'è da notare la larghezza, fissa a 490 pixel, ed i due margini, destro e sinistro di 9 + 9 = 18 pixel. Il totale fa 508, che è la dimensione del centro pagina (middle). Ricordate?
Quindi quando volete modificare le dimensioni delle colonne ricordatevi che occorre cambiare i valori su: left, middle, right e contenuto, altrimenti...........
15)
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}		 Questo potete anche non metterlo. Mi da delle indicazioni su come si deve comportare un titolo
16)
-->
</style>		 FINE CODICE. Se siete arrivati fin qui senza sudare, pur avendo l'aria condizionata al massimo, meritate un premio.
17)
</head>
<body>		 FINE DELL'INTESTAZIONE. Ricordarsi che il foglio di stile va inserito all'interno dei tag head!
18)
<div id="box">
 Comando per il box
19)
<div id="top">
<div align="center">
<img src="immagini/titolo.gif" alt="SCUOLA MEDIA DON MILANI LODI" width="768" height="60" />
</div>
</div>

Comando per il logo: Ho inserito l'immagine di 768x60 pixel che risiede nella cartelletta immagini, denominata "titolo.gif" ed ho inserito il tag ALT per farla leggere dallo screen reader.
I due div finali chiudono sia il div-top sia il div-center
20)
<div id="barretta">
<div align="center">Via Salvemini, 1 26900 LODI Tel : 0371/30657 Fax : 0371/431369
</div>
</div>		 Questo è il comando per la barretta. Qui manca l'immagine in quanto l'indirizzo è testuale.
21)
<div id="left">
<div class="menu">
<p><a href="scuola.htm">La Scuola</a> <a href="segreteria.htm">La Segreteria</a>
<a href="laboratori.htm">I Laboratori</a> <a href="pentola.htm">In Pentola</a>
<a href="progetto.htm">Il Progetto</a> <a href="masterbook/gb_sign.php">Il
Guestbook</a> <a href="chat.htm">La Chat</a> <a href="contatti/index.php">Contattaci</a>
<a href="giochi.htm">La Sala Giochi</a> <a href="links.htm">I Links</a>
<a href="mediainweb/index.htm">Il Corso Web</a></p>
</div>
</div>		 Comando per la colonna di sinistra e per il menu.
Qui arrangiatevi in quanto dovreste sapere cosa vuol dire fare dei links!
Attenzione ai div!
Div-left e div-menu
22)
<div id="middle">
<div id="contenuto">
<div align="center"><img src="immagini/ballerina.jpg" alt="La Ballerina - Disegno della scolara. Realizzato da un'allieva di terza media" width="236" height="325" /></div>
<h1 align="center"><a href="mailto:info@scuoladonmilani.it">info@scuoladonmilani.it</a></h1>
<div align="center"><strong><a href="laboratori/multimediale/michele/ricordomichele.htm">a
Michele Cavalli</a></strong></div>
</div>
</div>		 Centro del documento con i soliti familiari comandi.
Div-middle e div-contenuto
23)
<div id="right">
<p><a href="masterbook/gb_sign.php"><img src="immagini/guest.gif" alt="Il Guestbook" width="130" height="35" border="0" /></a><br />
Firma il nostro libro degli ospiti</p>
<p><a href="pentola.htm"><img src="immagini/pentola.gif" alt="In Pentola" width="130" height="35" border="0" /></a><br />
Dai uno sguardo alle nostre attivit&agrave;!</p>
<p><a href="chat.htm"><img src="immagini/chat.gif" alt="La Chat" width="130" height="35" border="0" /></a><br />
Entra in chat per digitare con i tuoi amici!</p>
<p><a href="laboratori/multimediale/multimediale.htm"><img src="immagini/multimedia.gif" alt="Multimedia" width="130" height="35" border="0" /></a><br />
Visita i progetti pubblicati in rete!</p>
</div>
</div>

Parte destra del documento. Anche qui ci sono dei link ma con l'uso di immagini.
Div-right. L'ultimo div di chiusura </div>, chiude il div- box
24)
</body>
</html>		 Chiusura del corpo del documento e del documento html


Fin qui il codice.
Alcune considerazioni:
Quella soprastante è una normalissima pagina in HTML con incorporato un foglio di stile.
Per un lavoro ben fatto conviene, per tutte le altre pagine del sito, strutturare un foglio di stile esterno.
Per esempio, se le altre pagine saranno a 2 colonne (1 per il menu ed 1 per il contenuto), si può procedere così:
- copiate e modificate opportunamente il codice, dal punto 2 al punto 16 (va bene anche Blocco Note di Windows);
- Salvate il documento come, per esempio, "prova.css";
- aprite un documento in HTML ed inseritevi il restante codice
- all'interno dei tag <head> scrivete
<style type="text/css">
@import url(prova.css);
</style>
- in questo modo avrete un unico foglio di stile esterno che sarà collegato a tutte le pagine del vostro sito. Quando vorrete cambiare qualcosa nel layout, basta intervenire solo su "prova.css" e si modificheranno automaticamente tutte le pagine del sito.
A questo punto:
- auguro buon lavoro a chi è interessato a questo percorso;
- vi prego di segnalarmi eventuali anomalie ed imperfezioni che, se ne sarò capace, tenterò di sanare;
- vi prego altresì di non divulgare questo documento per evitare che finisca nelle mani di qualche tecnico informatico che, sicuramente, troverà delle imprecisioni nelle spiegazioni da me fornite;
- chiedo venia per l'uso delle tabelle nella stesura di questo documento (non ho molto tempo per implementare un nuovo foglio di stile)
- resto in attesa dei vostri dubbi per farmi scervellare ancor più ed arrivare ad una completa interpretazione;
- per una spiegazione molto più tecnica, se ne avete voglia, visitate il sito www.html.it;
- mi auguro che il tempo che ho rubato alla stesura delle noiose e ripetitive (copia e incolla!) relazioni finali scolastiche, sia stato utile a qualcuno.
Demetrio