HTML: layout a due colonne senza utilizzare le tabelle

Di: Lorenz`o | 26/09/2020 19:37:32
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

Risposte


Nessuna risposta trovata!