CREARE SITI WEB in HTML e CSS > Analisi di un layout in CSS
Analizziamo il codice del layout "Fisso a tre colonne n.7", (raggiungibile all'indirizzo www.pcdazero.it/web01-layout-css-gala.php) per vedere dove e come è possibile modificare (o meglio, personalizzare) il codice senza intaccare la struttura.
La parte di codice che non deve essere modificata si trova sotto la riga vuota 23, prima del TAG di chiusura del Foglio Stile (</style>). Eccola:
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-700px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-700px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}
In queste righe vengono infatte impostate dimensioni e posizione dei blocchi.
Tutti i quaranta layout "gala" scaricabili anche in formato zip dall'indirizzo:
http://www.pcdazero.it/web01-layout-css-gala.php
differiscono solamente di queste 5 o 6 righe.
La prima parte di codice (dalla riga 8 alla riga 22) potrai personalizzarla a piacimento. Questa parte di codice infatti, contiene proprietà riguardanti prevalentemente la formattazione del testo.
Ecco il codice:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
Nel listato, noterai che alcune proprietà sono già state analizzate nelle precedenti lezioni; mentre le altre non sono ancora state sviscerate. Vedrai in seguito la loro peculiarità.
Ovviamente, per personalizzare il contenuto della pagina web, la tua attenzione dovrà essere posta sul codice inserito tra i TAG <body> </body>.
<body>
<div id="container">
<div id="header"><h1>Header</h1><a
href="http://blog.html.it/layoutgala/layout07.zip">scarica questo
layout</a></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Contenuto</strong> column long long column very long ...
</p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigazione</strong> long long fill filler very fill
column ... </p>
</div>
<div id="extra">
<p><strong>3) Sezione extra</strong> column long make silly silly
filler ... </p>
</div>
<div id="footer"><p>Il footer. Torna all'<a
href="http://blog.html.it/layoutgala/indexIta.html">indice</a>.</p></d
iv>
</div>
</body>
<div id="container">
<div id="header"><h1>Header</h1><a
href="http://blog.html.it/layoutgala/layout07.zip">scarica questo
layout</a></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Contenuto</strong> column long long column very long ...
</p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigazione</strong> long long fill filler very fill
column ... </p>
</div>
<div id="extra">
<p><strong>3) Sezione extra</strong> column long make silly silly
filler ... </p>
</div>
<div id="footer"><p>Il footer. Torna all'<a
href="http://blog.html.it/layoutgala/indexIta.html">indice</a>.</p></d
iv>
</div>
</body>
Per prendere confidenza con il codice, divertiti a modificare un valore per volta e visualizza subito il risultato cliccando sulla scheda "Preview" o aprendo il browser.
Ad esempio sostituisci il codice
div#container{text-align:left}
con
div#container{text-align:center}
oppure con
div#container{text-align:right}}
Sostiruisci il codice
div#extra{background:#FF8539}t}}
con
div#extra{background:#4555FF}t}}
eccetera.Esegui anche alcune prove, modificando il testo del corpo (body).