Sto assumendo come base il layout a colonne tipico per il nostro progetto pratico. Prima di presentare questo progetto dal vivo e a colori, voglio mostrarvi concretamente come potete realizzare voi stessi i layout a colonne. Qui metterò in evidenza le disposizioni a due e tre colonne, poiché queste costituiscono ancora la base della maggior parte dei siti web.
Il classico per eccellenza nel web design è probabilmente il layout a due colonne. Nella colonna sinistra viene di solito mostrata la navigazione, mentre nella colonna destra si visualizza il contenuto effettivo. A proposito dei blog, questo comportamento è leggermente cambiato. Infatti, in molti blog la navigazione o la pubblicità vengono mostrate a destra, mentre a sinistra viene presentato il contenuto effettivo.
Applicazioni simili possono essere realizzate in CSS in modo relativamente semplice. Infatti, i layout a due colonne sono la forma di layout più semplice.
Nell'esempio seguente mostrerò un layout a due colonne che si basa su valori assoluti percentuali.
Ecco l'esempio completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Layout con posizionamento assoluto</div>
<div id="nav">Navigazione</div>
<div id="main">Questa è l'area contenuti</div>
<div id="footer">Qui sono presenti le informazioni di copyright</div>
</body>
</html>Ecco come appare il tutto nel browser:
È possibile spostare facilmente la colonna sinistra a destra. Modificate le seguenti istruzioni:
• Da #nav cambiate left: 0 in right: 0.
• Da #main trasformate margin-left in margin-right.
Dopo aver salvato le modifiche, si vedrà il risultato desiderato.
Tuttavia, il layout mostrato basato sul posizionamento assoluto ha un problema: se il contenuto della colonna sinistra diventa più ampio, va oltre l'area del piè di pagina.
Questo accade semplicemente perché per gli elementi posizionati in modo assoluto non viene "riservato" spazio. Si può risolvere questo problema inserendo nel main contenuti adeguati più lunghi rispetto a quelli presenti nella colonna sinistra.
Utilizzate questa forma di layout solo se siete certi che l'area principale sia effettivamente più alta della colonna sinistra (o destra).
Un layout a due colonne con float
Il problema riscontrato nell'esempio precedente con la sovrapposizione dell'area pie può essere risolto utilizzando la proprietà float. La sintassi modificata sarà la seguente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Layout con posizionamento assoluto</div>
<div id="nav">Area della navigazione</div>
<div id="main">Questo è l'area contenuti</div>
<div id="footer">Qui sono presenti le informazioni di copyright</div>
</body>
</html>Entrambe le colonne sono state dotate della proprietà float. Per questo motivo le colonne sono ora allineate una accanto all'altra.
La larghezza della colonna sinistra è stata impostata al 20 percento. Prestare particolare attenzione al fatto che un elemento posizionato tramite float richieda sempre una dichiarazione di larghezza.
L'area contenuti effettiva riceve una larghezza del 80 percento. Anche quest'area viene posizionata con float: left, facendola apparire accanto alla colonna sinistra.
Per garantire che l'area pie sia sempre visibile nella parte inferiore della finestra – quindi sotto le colonne – si utilizza la seguente sintassi:
#footer {
clear: both;
}
Come avevo già accennato, è possibile definire una propria classe per questa variante.
Un layout a tre colonne con float
Anche il layout a tre colonne è una soluzione popolare nel web design. Una suddivisione tipica prevede quanto segue:
• La colonna sinistra contiene la navigazione.
• Nella colonna centrale è presente il contenuto effettivo.
• A destra vengono visualizzate informazioni aggiuntive o pubblicità.
Dopo troverete un esempio in cui viene creato un layout a tre colonne flessibile. Come noterete, la sintassi è simile a quella del predefinito layout a due colonne mostrato in precedenza. Tuttavia, c'è ora un'aggiunta, ovvero il right, che rappresenta infine la colonna della finestra destra.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout con posizionamento assoluto</div>
<div id="nav">L'area per la navigazione</div>
<div id="main">Questa è l'area dei contenuti</div>
<div id="right">Questa è la colonna di destra</div>
<div id="footer">Qui trovate le informazioni sul copyright.</div>
</body>
</html>
La nuova area è stata assegnata una larghezza del 20 percento. Quindi la distribuzione appare come segue:
• Le colonne sinistra e destra occupano ciascuna il 20 percento dello spazio dell'area visualizzazione disponibile.
• La colonna centrale ha una larghezza del 60 percento.
Attraverso la sintassi mostrata, l'area right viene effettivamente visualizzata a destra.
La sintassi è flessibile su questo punto. Potreste modificare l'area main nel seguente modo:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Qui il float è stato impostato su right. Di conseguenza, l'area right si sposta a sinistra.
In questo tutorial avete visto quanto sia semplice definire layout di base basati su float. Questa conoscenza costituisce ora la base per la creazione di un sito web. Nei prossimi tutorial verrà creato passo dopo passo un sito web, partendo dalla struttura di base.
