Layout complessi con i fogli di stile
Il presente tutorial seguirà passo passo la creazione di una grafica avanzata mediante l'uso di HTML e CSS.
Il layout che si sta per creare può essere visionato da questo indirizzo. Qui, invece, è possibile scaricare un'immagine, in formato jpg, del layout complessivo.
Suddivisione in aree di lavoro
Per prima cosa, occorre concentrarsi sul layout complessivo, così come fornito, individuando le aree (rettangoli, o <div>) che dovranno essere usati per la composizione visiva della pagina web. In questa immagine sono in dettaglio visualizzate le tre macro aree del layout e, tratteggiate, le aree interne, o microaree.
Solo successivamente è possibile iniziare il lavoro su Dreamweaver, a partire dalla definizione del sito Web.
Avvio: il codice HTML
Di seguito è presentato il codice html di avvio, comprensivo di collegamento al foglio di stile. Il codice comprende anche la prima realizzazione del layout, con la ripartizione in <div>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
@import url(style/style.css);
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">Logo</div>
<div id="menu">Menu</div>
<div id="claim">Claim</div>
</div>
<div id="main">
<div id="contenuto">Contenuto</div>
<div id="evidenza">Evidenza</div>
</div>
<div id="footer">
<div id="copyright">Copyright</div>
</div>
</div>
</body>
</html>
CSS: La formattazione dell'header
Una volta creato il file html, è possibile utilizzare i fogli di stile per formattare tutto il layout. Di norma, il foglio di stile contiene all'inizio una ridefinizione dei tag generali (ad esempio <body>, <a> e i titoli <h>), prosegue con il dettaglio della struttura generale della pagina, e finisce con i dettagli tipografici (tipo la dimensione dei bordi delle immagini, il tipo di allineamento del testo, ecc.). Per procedere con ordine, quindi, il nostro foglio di stile sarà diviso in tre parti:
- Main definition settings (la definizione principale dei tag)
- Main structure settings (la definizione della struttura generale della pagina)
- Main typographic settings (la definizione della struttura tipografica della pagina)
Ricordando che, come si è visto qui, i commenti, nel foglio di stile iniziano con /* e finiscono con */, ecco di seguito il dettaglio del foglio di stile, relativo alla prima parte del layout (header).
/* Main definition settings */
body {
margin:0;
padding:0;
font: 12px/1.5em "Lucida Grande", helvetica, arial, verdana, sans-serif;
color: #515151;
background-color: #fff;
text-align:center;
}
/* E' possibile definire più tag tutti assieme, separandoli l'uno dall'altro con virgole */
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
padding: 0;
}
/*Main structure settings */
#container {
width:750px;
margin:0 auto;
text-align:left;
}
/*header */
/* In questo layout userò la navigazione del DOM a partire da div#container */
#container #header {
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
background-position:top left;
height:213px;
}
#container #header #logo {
padding-top:10px;
padding-left:10px;
float:left;
}
#container #header #menu {
margin-left:330px;
padding-top:7px;
text-align:right;
}
#container #header #claim {
/* Usando display:block e clear:both posso forzare un div a restare elemento blocco */
display:block;
clear:both;
text-align:right;
/* In questo layout uso margin, ma avrei potuto usare anche padding */
margin-top:130px;
}
Ovviamente sarà opportuno inserire le immagini e il testo dei menu nel file html, per poter apprezzare il risultato.
<div id="header">
<div id="logo"><img src="images/logo.gif" alt="Martini & Rossi" width="187" height="72" /></div>
<div id="menu">
<a href="#">HOME</a>
<a href="#">LO STUDIO</a>
<a href="#">NEWS</a>
<a href="#">SCADENZE</a>
<a href="#">DOCUMENTI</a>
<a href="#">AREA RISERVATA</a>
<a href="#">LINK</a>
</div>
<div id="claim"><img src="images/soluzioni.gif" alt="Soluzioni per il tuo business" width="252" height="52" /></div>
</div>
Formattare usando il DOM: i link del menu
Per formattare correttamente i link del menu (che sono di colore grigio, mentre i link della pagina sono viola) sarà necessario usare la formattazione via DOM. Con la pseudoclasse :hover formatteremo poi i link quando il mouse dell'utente si trova sopra il link
Di seguito il codice css:
#container #header #menu a {
color:#333333;
background-color:transparent;
text-decoration:none;
font-weight:bold;
}
#container #header #menu a:hover {
color:#658fdc;
}
Main: il layout a due colonne
Il layout è a due colonne: di seguito il codice CSS per la formattazione.
#container #main #contenuto {
background-image:url(../images/content.gif);
background-repeat:no-repeat;
background-position:top left;
/* Con float e width faccio galleggiare un elemento blocco */
float:left;
width:408px;
padding-top:20px;
padding-left:40px;
padding-right:20px;
}
#container #main #evidenza {
margin-left:470px;
background-image:url(../images/side.gif);
background-repeat:no-repeat;
background-position:top left;
padding-top:20px;
padding-left:30px;
/* A destra il font è più piccolo */
font-size:11px;
}
Il footer
La formattazione del footer comprende due <div>: il footer (che ha un'immagine di sfondo) e il copyright, che contiene il testo. Si noterà che il testo è di un altro colore e presenta un bordo sopra tratteggiato. Ecco il foglio di stile:
/* Footer */
#container #footer {
display:block;
clear:both;
background-image:url(../images/footer.gif);
background-repeat:no-repeat;
background-position:right;
height:80px;
font-size:9px;
color:#AAA;
}
#container #footer #copyright {
width:408px;
padding-top:20px;
margin-left:40px;
padding-right:20px;
border-top:1px dashed #AAA;
}
Ritocchi: titoli, immagini e link
La struttura generale del layout è pronta, adesso. Restano da modificare i titoli del div#contenuto e quelli del div#evidenza, da settare il colore dei link nel div#main e da aggiungere un bordo alle immagini presenti in div#evidenza. Di seguito l'ultima parte del codice del foglio di stile, che consente di ultimare il layout.
/*Main typographic settings */
/*Immagini in div#evidenza */
#container #main #evidenza img {
float:left;
border:3px double #000;
margin-right:3px;
margin-top:5px;
}
/*Titoli in div#content e div#evidenza*/
#container #main h2 {
font-size: 2em;
margin: 5px 0px 10px;
display: block;
padding-bottom: 8px;
border-bottom: 1px solid #E4DCE3;
}
/* Link globali */
a {
color:#9751e2;
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
a:hover {
background-color:#9751e2;
color:#FFF;
}
/* Paragrafi */
p {
margin:0;
padding:0;
margin-bottom:20px;
}
File da scaricare
Da questo link è possibile scaricare lo zip contentenente tutti i file utilizzati in questo tutorial.