Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

I Layout fissi e liquidi.

Abbiamo visto nelle lezioni precedenti come creare dei box e come posizionarli nello schermo, adesso facendo uso di queste tecniche possiamo assemblarli creando di fatto un layout, cioŔ una struttura per disporre i nostri dati.

Si tratta in pratica di usare box fissi e/o box flottanti per impaginare il tutto, dai testi alle immagini dai moduli alle liste o qualsiasi altro oggetto che possa far parte di una pagina web.

Ne vediamo uno soltanto a scopo didattico formato da due colonne: una per il men¨ a sinistra e l'altra per la pagina principale, una testata con titolo ed un margine inferiore. Lo possiamo vedere a questo link.

Questo il codice nel foglio di style CSS:

body {
text-align: center; /* IE5.x */
}

#telaio {
width:100%;
margin: 0px;
border:1px solid gray;
line-height:150%;
color: black;
background-color: #ffffcc;
text-align: left; /* IE5.x */
}

#testata {
font-size: 130%;
}

#fondo {
font-size: 85%;
text-align: center;
}

#testata, #fondo {
padding:0.5em;
color:white;
background-color: #cc9900;
clear:left;
}

#sinistro {
float:left;
width:160px;
margin: 0px;
padding: 5px;
}

#centrale {
margin-left: 170px;
border-left:1px solid gray;
padding:10px;
}

Questo il codice HTML per ottenerlo:

<div id="telaio">
<div id="testata"> ...Testata... </div>

<div id="sinistro">
... Sinistro...
</div>

<div id="centrale">
... Centrale ...
</div>

<div id="fondo"> ...Fondo... </div>
</div>

Su questo link il risultato a video

Sono state introdotte molte delle cose trattate fino a questo momento ed anche i parametri sono stati espressi volutamente con unitÓ di misura differenti al solo scopo di rendere meglio l'idea di cosa sia possibile adoperare con l'uso dei fogli di style.


Nella prossima lezione vedremo le tabelle che non servono soltanto per impaginare dati ma sono a volte adoperate come fossero layout.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi