• User Attivo

    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>

    <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>
    [/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.