Discussione Chiusa
Risultati da 1 a 1 di 1

Layout-izzatore

Ultimo Messaggio di Laburno il:
  1. #1
    Esperto L'avatar di Laburno
    Data Registrazione
    Sep 2006
    Località
    Lvcca
    Messaggi
    811

    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
    • 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.
    File Allegati File Allegati

Discussione Chiusa

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.