Layout-izzatore

laburno

Layout-izzatore

Il layout-izzatore è un semplice foglio di stile da utilizzare per creare velocemente, attraverso l'uso di classi semantiche, la struttura di 32 differenti combinazioni di layout bicolonna.

CrossBrowser (testato con Opera 8+, Firefox 1.5+ IE6+)
XHTML 1.0 Strict
Markup e CSS Valido secondo standard
SemanticoCome si usa

Per creare un layout basta aggiungere delle classi css al codice XHTML della pagina, che rimane sempre invariato (struttura completamente slegata dalla presentazione).

Per prima cosa, presentiamo la struttura XHTML del layout, salvatela come file .html in una cartella insieme a layoutizzatore.css (in allegato):

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="layoutizzatore.css" />
</head>
<body>

</body>
</html>
[/html]Il layout è composto da 6 parti:

#layout, è il div che funge da contenitore per tutta la struttura.
#header, è il div che definisce la testata
#content, è il div contenitore del corpo principale del layout, a sua volta diviso in due parti:
#sidebar, è la colonna secondaria, da adibire alla navigazione e ad altre sezioni di minor rilievo
#main, è la colonna principale per i conenuti
#footer, è il div che definisce il pié di paginaPer motivi SEO la colonna secondaria, nel markup, è posta prima di quella principale. Questo non influisce sulla presentazione perché sarà riposizionabile a piacere tramite i CSS.

Scelta 1: Liquido o Fisso

La prima scelta da fare riguarda il tipo di layout che vogliamo ottenere: di dimensione fissa o liquida. Tenete presente che ogni elemento di dimensione fissa in realtà è fluido, ovvero si ridimensiona in base alla dimensione del testo impostata dall'utente. Questa scelta è stata fatta per motivi di accessibilità.

Se vogliamo un layout di tipo fisso dobbiamo applicare una di queste classi a:

fixed760: dimensione fissa a 760px
fixed960: dimensione fissa a 960pxAd esempio:
[html]<div id="layout" class="fixed960">...[/html]Se vogliamo un layout di tipo liquido dobbiamo applicare una di queste classi a:
liquid90: dimensione liqudia a 90% della dimensione della finestra
liquid80: dimensione fissa a 80% della dimensione della finestraAd esempio:
[html]<div id="layout" class="liquid90">...[/html]**
Scelta 2: Posizionamento e dimensione della Sidebar**

La sidebar sarà sempre di dimensione fissa e le possibili dimensioni sono state scelte secondo gli standard IAB per i contenuti pubblicitari. È possibile inoltre scegliere se posizionare la sidebar a destra o a sinistra.

Se vogliamo la sidebar a destra dobbiamo applicare una di queste classi a:

right-sidebar-wide160: sidebar a destra di dimensione fissa 160px
right-sidebar-wide180: sidebar a destra di dimensione fissa 180px
right-sidebar-wide240: sidebar a destra di dimensione fissa 240px
right-sidebar-wide300: sidebar a destra di dimensione fissa 300pxAd esempio:
[html]<div id="#content" class="right-sidebar-wide160">...[/html]Se vogliamo la sidebar a sinistra dobbiamo applicare una di queste classi a
left-sidebar-wide160: sidebar a sinistra di dimensione fissa 160px
left-sidebar-wide180: sidebar a sinistra di dimensione fissa 180px
left-sidebar-wide240: sidebar a sinistra di dimensione fissa 240px
left-sidebar-wide300: sidebar a sinistra di dimensione fissa 300pxAd esempio:
[html]<div id="#content" class="left-sidebar-wide160">...[/html]**Note

**Il layoutizzatore è stato volutamente creato per essere facile da utlizzare, semantico e didatticamente utile. Queste scelte comportano una serie di limiti che emergono nella stesura di layout complessi.

In particolare il dimensionamento di ognuna delle sei aree principale impone di utilizzare dei sotto elementi di blocco per definire bordi margini e padding (perché il loro utilizzo diretto altererebbe, in accordo con il boxmodel, le dimensioni).

Ad esempio:
[html]<div id="sidebar">
<div> Contenuto Sidebar </div>
</div>[/html]Questo implica un eccesso di nidificazione dei div che, pur non essendo scorretto, penalizza la dimensione della pagina e la chiarezza del markup.

**Espandibilità

**Con un minimo di pratica nei fogli di stile è possibile modificare con facilità le dimensioni standard degli elementi. Il punto focale su cui si basano i dimensionamenti è il font-size del body. Per poter ottenere layout fluidi, come già detto prima, è stato opportuno impostare la dimensione dell'EM (unità relativa alla dimensione del font). Alla proprietà font-size è stato assegnato il valore 62.5% che equivale proporzionalmente ad una dimensione base di 10px per 1EM. È ovviamente possibile cambiare il font-size a piacimento, ma sarete costretti anche a ricalcolare tutti i dimensionamenti in EM.

Per qualsiasi chiarimento o necessità il forum CSS è a vostra disposizione.