HTML: layout a due colonne senza utilizzare le tabelle

Ecco un semplice tutorial su come impostare un Layout web a due colonne senza utilizzare le tabelle.

Supponiamo che il nostro Layout debba avere la struttura come raffigurata nello screenshot N°1;




La prima cosa da fare è crearci le 3 immagini principali:

1) lo sfondo dell'header;
2) lo sfondo della parte centrale ( compreso di ombre volendo );
3) lo sfondo della parte bassa;

Utilizzate le dimensioni che più preferite.

A questo punto salviamo le nostre immagini ( possibilmente in .gif ).

Adesso non ci resta che montare il tutto con Dreamweaver;
Per prima cosa scriveremo il codice Css, perciò creiamo un nuovo documento Css;

Avremo tre blocchi, uno rappresentante l'header, uno il centro ed infine il piede della pagina;


#header {
width:777px;
height:150px;
background-image:url(alt.gif);
margin: 0px auto;

}

#cent {
width:800px;;
background-image:url(cent.gif);
background-repeat:repeat-y;
margin: 0px auto;

}

#bottom {
width:800px;
height:100px;
background-image:url(bott.gif);
background-repeat:repeat-y;
margin: 0px auto;

}

Bene, questa è la paginetta di css necessaria per montare il nostro template ! Ovviamente nomi e misure delle immagini sono state adottate da me a mio piacimento.

Ora salviamo la pagina con il nome stile.css ( o quello che preferite );

A questo punto apriamo un nuova pagina html e per prima cosa associamogli il foglio di stile appena salvato:

<link rel="stylesheet" href="style.css" />

Adesso non ci resta che inserire i nostri blocchi nella pagina :)

<div id="header" ></div>
<div id="cent"></div>
<div id="bottom"></div>

Salvate il file nella stessa cartella dove precedentemente avete salvato il foglio di stile ed il vostro Layout sarà pronto.

Sia chiaro, il tutorial è molto semplice ed è solo una introduzione per fare qualche passetto con css ed xhtml :) spero possa essere utile a qualcuno. Buon Lavoro

 Lorenz`o, N.D.
001design.it ® è un marchio registrato.
© 2004-2017 Molfese Paolo - P.Iva: 03430820617 - All rights reserved | Tutti i diritti sono riservati.