Vai ai contenuti
Ti trovi in:   Home > CSS Layout Design

CSS Layout - CSS Template

I layout delle pagine web si suddividono sostanzialmente in tre categorie:
layout fisso, layout fluido (o liquido che dir si voglia) e layout elastico.

Un layout fisso è generalmente studiato per una dimensione standard e pertanto non è possibile variare la larghezza ridimensionando la finestra del browser o cambiando la dimensione del testo.
La larghezza dei vari componenti che compongono la pagina è specificata solitamente in unità di misura assoluta generalmente espressa in pixel (.px).
Vi sono tre principali larghezze utilizzate per questo tipo di layout: 600px 760px e 960px che tengono conto rispettivamente delle più diffuse risoluzioni del monitor: 640x480 pixel - 800x600 pixels - 1024x768 pixels.
Il layout fisso è senza dubbio più facile da realizzare e offre maggiori possibilità di personalizzazione grafica rispetto al layout liquido.
È importante considerare che un buon layout fisso deve essere progettato per servire bene la maggior parte degli utenti, soprattutto senza scrolling orizzontale.

Una pagina web caratterizzata da un layout fluido è una pagina web che occupa sempre tutto lo spazio disponibile della finestra del browser qualunque sia la risoluzione del monitor.
La larghezza dei vari componenti che compongono la pagina è specificata solitamente in percentuale (%).
Ridimensionando la finestra del browser anche la pagina web verrà ridimensionata. Il disegno della pagina web non è però influenzato dai cambiameti del formato testo.
Il layout fluido è più versatile per l'utente poichè si presta ad uno spettro più ampio di risoluzioni.
La sua realizzazione può risultare un po' più complessa rispetto al layout fisso, per le limitate possibilità grafiche soprattutto in casi di layout liquidi con colonne percentuali.
Questo tipo di layout consente una gestione migliore in fase di stampa della pagina web a differenza delle pagine con layout fissi che sovente hanno come risultato il taglio dei contenuti su uno o entrambi i lati.

Il layout elastico usa il dimensionamento in unità relative (.em) sia per il testo che per la larghezza degli elementi che compongono la pagina web.
Si differenzia dal fluido in quanto non si adatta solo alla risoluzione del monitor ma ridimensiona anche tutti i contenuti secondo le preferenze dell'utente cosicchè solo ridimensionando il carattere del browser è possibile agire sulla larghezza della pagina.

Vi è poi anche il layout ibrido che è una miscela di due (o di tre) dei layout citati sopra. Un esempio potrebbe essere il caso in cui la larghezza della pagina web è di tipo fluido (espressa in %) mentre la colonna che contiene il menu di navigazione è di tipo elastico e quindi con dimensioni espresse in em.

Esempi - CSS Layout Design - CSS Template

Quella che segue è una piccola galleria di layout realizzati mediante l'uso dei fogli di stile (CSS) e senza l'uso di tabelle.
Per ognuno di essi è possibile visualizzare il codice XHTML 1.0 Strict validato tramite il servizio di validazione codice del W3C e il relativo foglio di stile che è stato validato dal tester CSS versione 2 del W3C.
I fogli di stile sono stati inoltre sottoposti ad un ulteriore test di accessibilità e di validazione del contrasto dei colori e delle dimensioni con Juicy Studio. Una versione in italiano di questo strumento di validazione è disponibile sul sito www.webaccessibile.org.
Sono anche disponibili da scaricare le eventuali immagini utilizzate per la realizzazione della pagina web.

Tutti i layout sono stati testati per la corretta visualizzazione con i browsers:
- Internet Explorer v.6
- Opera ver. 8.54 Build 7730
- Firefox Mozilla ver. 1.5.0.4
- Netscape ver. 8.1

COPYRIGHT : siete liberi di usare e copiare senza limitazione alcuna i layout elencati in questa sezione del sito.
In caso di utilizzo delle immagini mi affido al Vs. buon cuore per una citazione dell'autore e della fonte.


CSS Layout fisso

Layout n.01/F

Layout fisso con larghezza dimensionata in 760 pixels e con menu orizzontale.
Il menu orizzontale usato è descritto al punto n.01/O nella sezione Css Menu n.01/O.
L'immagine utilizzata nell'header proviene dalla raccolta Foto Desktop (Galleria n.2 - Faro a Pointe du Raz) presente in questo sito.

Layout fisso n.01/F



CSS Layout fluido (liquido)

Layout n.01/L

Layout fluido (liquido) con larghezza dimensionata in percentuale (%) e con menu verticale.
Il menu verticale usato è descritto al punto n.01/V nella sezione Css Menu n.01/V.
L'immagine utilizzata nell'header proviene dalla raccolta Foto Desktop (Galleria n.2 - Faro a Ploumanac'h) presente in questo sito.

Layout fluido (liquido) n.01/L



Artwork & Design Copyright 2000-     Ivano Montanari    Verona - Italy

Mappa del sito | Privacy | Informativa cookie | Accessibilità | Accesskey | Contattami

W3C Valid XHTML 1.0 Strict W3C Valid CSS ver.2 W3C-WAI Web Content Accessibility Guidelines 1.0 Level Triple-A conformance Layout senza tabelle