Tecniche di design: layout e livelli
Proviamo adesso a costruire lo stesso layout della lezione precedente
Proviamo quindi a costruire, con solo codice CSS, il layout mostrato nell'immagine precedente. Di seguito un esempio di codice, commentato esplicitamente in seguito.
(L'articolo continua più sotto...)
Iniziamo dal codice HTML:
<html>
<head>
<title>Layout senza tabelle con i CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div align="center">
<div id="MAIN">
<div id="TOP">Testo di benvenuto...</div>
<div id="LOGO">Logo...</div>
<div id="RICERCA">Ricerca...</div>
<div id="MENU_ORIZZ">Menu orizzontale...</div>
<div id="MENU_SX">Menu sinistro...</div>
<div id="CORPO">Corpo della pagina...</div>
<div id="MENU_DX">Menu destro...</div>
</div>
</div>
</body>
</html>
Nulla di più e nulla di meno di una semplice pagina HTML con una serie di layer con degli ID, i cui nomi sono abbastanza esplicativi in merito alla funzione che svolgono ed ai contenuti che mostreranno a video sulla pagina. L'aspetto di questa pagina HTML, senza CSS, è il seguente:
/*
ASSEGNO UNO STILE GENERICO AL CORPO DELLA PAGINA
ED ALL'ELEMENTO DIV
*/
body
{
margin: 0px;
background-color: #EEEEEE;
color: #000000;
}
div
{
font: Normal 10px Verdana;
}
/*
DEFINISCO IL DIV DIV PRINCIPALE, CONTENITORE
DI TUTTI GLI ALTRI DIV
*/
#MAIN
{
width: 750px;
}
/*
DEFINISCO UNO STILE AL TOP DELLA PAGINA
*/
#TOP
{
text-align: Left;
background-color: #000000;
color: #FFFFFF;
font-weight: Bold;
padding: 3px;
border: Solid 1px #000000;
}
/*
DEFINISCO IL DIV CONTENENTE IL LOGO DELLA PAGINA
*/
#LOGO
{
text-align: Left;
background-color: #FFCC00;
float: Left;
width: 270px;
padding: 25px;
border-left: Solid 1px #000000;
}
/*
DEFINISCO UN DIV CONTENENTE IL MOTORE DI RICERCA
O ALTRI ELEMENTI DA POSIZIONARE DI CANTO AL LOGO
COME AD ESEMPIO UN BANNER PUBBLICITARIO
*/
#RICERCA
{
text-align: Center;
background-color: #FFCC00;
float: Left;
width: 480px;
padding: 25px;
border-right: Solid 1px #000000;
}
/*
SULLA FALSA RIGA DEL TOP, DEFINISCO UN MENU ORIZZONTALE
*/
#MENU_ORIZZ
{
text-align: Left;
background-color: #336699;
color: #FFFFFF;
font-weight: Bold;
padding: 3px;
border: Solid 1px #000000;
}
/*
DEFINISCO, IN UN UNICO STILE, I DUE MENU LATERALI
*/
#MENU_SX, #MENU_DX
{
background-color: #FFCC00;
float: Left;
width: 125px;
padding: 3px;
border-left: Solid 1px #000000;
border-right: Solid 1px #000000;
border-bottom: Solid 1px #000000;
}
/*
DEFINISCO IL CORPO DELLA PAGINA
*/
#CORPO
{
background-color: #FFFFFF;
float: Left;
width: 500px;
padding: 3px;
border-bottom: Solid 1px #000000;
}
La pagina HTML, a questo punto, acquisterà il seguente aspetto:
