CREARE SITI WEB in HTML e CSS > Scegliere un layout per il sito
Il layout (leggi: leiaut) è la struttura che dà la forma ad una pagina web e/o all'intero sito. Come hai avuto modo di notare, progettare un layout a blocchi (con l'elemento DIV) non è difficile; almeno apparentemente !
Le difficoltà nascono quando si deve rendere accessibile il layout a più browser.
Le soluzioni ci sono, e vedrai come reperirle in rete facilmente.
Cimentarsi nella creazione di un Layout diventerebbe troppo pesante e non fa parte dello spirito di questa guida.
All'indirizzo http://blog.html.it/layoutgala/indexIta.html trovi dei layout molto semplici da capire e accessibili ai browser più diffusi.
Scegli ad esempio la strutura del layout Fisso a tre colonne n.7..
Ecco il listato completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 7</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-
1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
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}
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%}
</style>
<script type="text/javascript" src="filler.js"></script>
</head>
<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></div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 7</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-
1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
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}
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%}
</style>
<script type="text/javascript" src="filler.js"></script>
</head>
<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></div>
</div>
</body>
</html>
1 - collegati al link www.pcdazero.it/web01-00000.php
2 – clicca sulla voce Layout CSS gala
3 – clicca sulla voce Fisso, tre colonne (n.7)
4 - Dalla barra dei menu clicca su "Visualizza > Origine" (o "Visualizza > Sorgente" o "Pagina > HTML")
5 - seleziona e copia il codice (CTRL+A e poi CTRL+C)
6 - avvia il programma HTML-Kit
7 - apri un documento vuoto ("File" > "New..." > "Blank Tex File")
8 - incolla il codice (CTRL+V)
9 - salva il file e clicca sulla scheda "Preview".
Hai ora a disposizione un layout base per il tuo sito