» Layout-izzatore

Laburno · 09-10-07, 02:51

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
Semantico

Come 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):

Codice 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>

<div id="layout">
    <div id="header"></div>
    <div id="content">
        <div id="sidebar"></div>    
        <div id="main"></div>    
    </div>
    <div id="footer"></div>
</div>

</body>
</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 pagina

Per 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 #layout:

fixed760: dimensione fissa a 760px
fixed960: dimensione fissa a 960px

Ad esempio:

Codice HTML:

<div id="layout" class="fixed960">...

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

liquid90: dimensione liqudia a 90% della dimensione della finestra
liquid80: dimensione fissa a 80% della dimensione della finestra

Ad esempio:

Codice HTML:

<div id="layout" class="liquid90">...

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 #content:

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 300px

Ad esempio:

Codice HTML:

<div id="#content" class="right-sidebar-wide160">...

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 300px

Ad esempio:

Codice HTML:

<div id="#content" class="left-sidebar-wide160">...

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:

Codice HTML:

<div id="sidebar">
  <div> Contenuto Sidebar </div>
</div>

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.

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email