body {
background-color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#box {
background-color: #FFFFFF;
background-image: url(sfondo.gif);
text-align: left;
width: 768px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 100%;
}
#top {
background-color: #000066;
background-image: url(sfondo.gif);
}
#barretta {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
border-top: 2px solid #CCCCCC;
border-bottom: 2px solid #CCCCCC;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 2px;
}
#barretta a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
margin-right: 2px;
}
#barretta a:hover {
color: #000000;
background-color: #FFFF66;
text-decoration: none;
}
#left {
background-color: #CCCCCC;
background-image: url(sfondo.gif);
float: left;
width: 130px;
height: 100%;
margin: 0px;
}
#middle {
background-color: #FFFFFF;
width: 508px;
float: left;
height: 100%;
margin: 0px;
}
#right {
background-color: #FF66FF;
background-image: url(sfondo.gif);
background-repeat: repeat;
float: left;
width: 130px;
height: 100%;
margin: 0px;
}
.homepage {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
padding-left: 1px;
border-bottom: 1px solid #000000;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}
.menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #6699FF;
display: block;
width: auto;
border-bottom: 1px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
border-top: 1px solid #FFFFFF;
padding: 1px;
}
.menu a:hover {
background-color: #FFFF66;
}
.preferiti {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #a0bcd9;
padding: 5px 1px 1px 1px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
line-height: 1.5em;
}
.testopref {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
background-color: #21528e;
padding: 2px 1px 2px 1px;
}
#ricerca {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
background-color: #21528e;
text-align: center;
margin: 0px;
width: auto;
padding-top: 2px;
padding-bottom: 5px;
}
#ricerca img {
vertical-align: middle;
}
form {
margin: 0px;
padding: 0px;
}
input {
vertical-align: middle;
}
#pillola {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
padding: 5px 3px 5px 3px;
background-color: #acd0e6;
}
.classpill {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
}
#contenuto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
width: 490px;
margin-right: 9px;
margin-left: 9px;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
#contenuto img {
float: right;
margin-left: 3px;
}
#articoli {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
width: 490px;
margin-right: 9px;
margin-left: 9px;
margin-top: 15px;
}
#articoli img {
float: left;
margin-right: 5px;
border: 1px solid #000000;
}
.titoletto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF;
font-weight: bold;
}
.descrizione {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="top">
<img src="layimg/logo_pro.gif" alt="Logo Pro Html.it"
/>
</div>
<div id="barretta"> <a href="#">CD</a>|
<a href="#">CORSI</a>| <a href="#">LIBRI</a>|
<a href="#">SHOP</a>| <a href="#">NEWSLETTER</a>|
<a href="#">B2B</a>| <a href="#">NEWS</a>|
<a href="#">PRO</a>| <a href="#">HOSTING</a>|
<a href="#">ADSL</a>| <a href="#">PROGR.</a>|
<a href="#">LINUX</a>| <a href="#">FLASH</a>|
<a href="#">ASP</a>| <a href="#">PHP</a>|
<a href="#">CGI</a>| <a href="#">GIF</a>|
<a href="#">FONT</a>| <a href="#">HOMEPAGE</a>
</div>
<div id="left">
<div class="homepage">Home page</div>
<div class="menu">
<a href="#">Pillole</a>
<a href="#">Grafica</a>
<a href="#">Leggi e lavoro</a>
<a href="#">Linguaggi</a>
<a href="#">Multimedia e 3D</a>
<a href="#">Software</a>
<a href="#">Web Design e contenuti</a>
<a href="#">Web promotion</a>
<a href="#">Forum</a>
<a href="#">Area download</a>
<a href="#">Torna ad HTML.it</a>
</div>
<p></p>
<div class="preferiti">
I tuoi preferiti <img src="layimg/what.gif" alt="Help"
/> <img src="layimg/on.gif" alt="On" />
</div>
<div class="testopref">
Non hai salvato nessun articolo.
<br />
Per aggiungere un articolo ai preferiti clicca sull'icona accanto al
titolo dell'articolo letto.
</div>
<div class="preferiti"> <a href="#">Elimina
gli articoli letti</a><br />
<a href="#">Elimina tutti gli articoli</a><br />
</div>
<p> </p>
</div>
<div id="middle">
<div id="ricerca">
<form action="#" method="get">
Ricerca un termine:
<input type="text" name="textfield" />
<img src="layimg/cerca.gif" alt="Cerca" width="21"
height="21" />
</form>
</div>
<div id="pillola"> <img src="layimg/tips_anim.gif"
alt="Pillola" width="16" height="16" />Pillola:
<span class="classpill">Posizionare immagini o testo in punti
precisi della
pagina </span></div>
<div id="contenuto">
<h1>Approfondimenti di Web Publishing</h1>
<p><img src="layimg/home_piuvotati.gif" alt="Votati"
width="78" height="15" /><img src="file:///D|/Cesare/zeromedia/layimg/home_piuvisti.gif"
alt="Visti" width="78" height="15" /><img
src="file:///D|/Cesare/zeromedia/layimg/home_piurecenti_on.gif" alt="Recenti"
width="78" height="15" /></p>
<p class="imgart"> </p>
</div>
<div id="articoli">
<p><img src="layimg/dreamweaver.gif" alt="Dreamweaver"
width="35" height="35" /><span class="titoletto">Banner
animato con l'estensione Banner Image Builder </span><br />
<span class="descrizione">Creiamo un banner animato con Dreamweaver
e
l'estensione Banner Image Builder</span><br />
<span class="descrizione">Categoria:<a href="#">
Dreamweaver </a></span></p>
<p><img src="layimg/dmw-mx.gif" alt="Mx" width="35"
height="35" /><span class="titoletto">Il
nuovo Dreamweaver MX </span><br />
<span class="descrizione">Novità, pregi e difetti
del nuovo editor
HTML di Macromedia<br />
Categoria: <a href="#">Dreamweaver</a></span></p>
</div>
</div>
<div id="right"> </div>
</div>
</body>
</html>