Un layout per un sito web
Aggiornato il 04/03/2008
Generalmente i layout più comuni sono composti di alcune parti essenziali che sono:
- un header ( la parte alta del sito, quella dove è presente il titolo del sito ).
- un footer ( la parte riservata di solito al'autore del sito...all'anno di costruzione del sito..ecc.. )
- un menu ( il menù )
- e uno spazio dedicato ai contenuti ( tutti i contenuti del sito )
Per questo possiamo già inserire i nostri quattro elementi, scrivendo il relativo codice html tra i tag body:
<body>
<div id="header">NOME DEL SITO</div>
<div id="main">
<div id="menu">il menu </div>
<div id="terza">a piacere </div>
<div id="contenuto">
<p>contenuti del sito </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">autore toninosite.altervista.org </div>
</body>
A questo codice ora va associato il relativo foglio di stile, allora tra i tag head inseriamo questo codice:
<style type="text/css">
body
{
text-align: center;
padding: 0;
border: 0;
color: #000000;
font-family: "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
font-size: 11px;
}
#main
{
padding: 0;
text-align: left;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header
{
padding: 0; /*centra negli altri browsers*/
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: 0px;
text-align: left;
}
#menu
{
width: 160px;
float: left;
text-align: left;
}
#terza
{
float: right;
width: 160px;
text-align: left;
}
#contenuto
{
margin-left: 175px;
margin-right: 175px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
color: #000000;
}
#footer
{
padding: 0; /*centra negli altri browsers*/
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: 0px;
text-align: left;
}
</style>