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.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

NON seguire questo link o sarai bannato dal sito!