Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Layout liquido

Layout liquido

di GDesign, 13 Giugno 2003

Versione Stampabile


In questo articolo vedremo come realizzare una pagina web con un layout "liquido" utilizzando due diversi modi:le tabelle ed i CSS. Prima di entrare nei dettagli della realizzazione diamo una definizione di layout liquido e vediamo perché dovremmo utilizzarlo.

Una pagina web caratterizzata da un layout "liquido" è una pagina web che occupa sempre tutto lo spazio disponibile della finestra del browser qualunque sia la risoluzione del monitor. Sostanzialmente una pagina web di questo tipo si adatta allo spazio disponibile sullo schermo. Ridimensionando la finestra del browser anche la pagina web verrà ridimensionata.

Perché utilizzare un layout "liquido"?

Abbiamo già affrontato in parte questo argomento parlando della Risoluzione dello schermo come variabile di un progetto web. Riprendendo il discorso, basta dire che un progettista web non può mai sapere a priori quale sarà la risoluzione utilizzata dagli utenti del sito web che sta realizzando.

Conoscendo il target a cui si rivolge il sito web, possiamo supporre quale sarà la risoluzione più utilizzata dagli utenti e di conseguenza progettare per quella determinata risoluzione. Ad esempio, se dobbiamo realizzare un sito che si rivolge principalmente a grafici 3D, possiamo supporre che questi dispongano di monitor piuttosto grandi, quindi potremmo progettare il sito per una risoluzione di 1024x768.

Oppure nel caso in cui dobbiamo realizzare delle pagine web per una Intranet, i cui utenti utilizzano una risoluzione di 800x600, non ci creiamo nessun problema e progettiamo un layout che vada bene soltanto per quella risoluzione.

Ma se non rientriamo in nessuno dei due casi, per quale risoluzione dobbiamo sviluppare un sito web? Per dare una risposta sensata leggiamo queste statistiche; ci rendiamo subito conto che il numero di utenti che utilizzano come risoluzione 800x600 e quelli che utilizzano 1024x768 sono quasi equivalenti, e che queste due risoluzioni sono quelle più utilizzate. A questo punto la risposta alla precedente domanda è semplice: sviluppiamo il sito web in modo che si veda correttamente sia a 800x600 che a 1024x768. Come? O realizzando una versione del sito per ogni risoluzione, soluzione troppo laboriosa e poco comoda, oppure realizzando un sito con un layout "liquido".

Nel prossimi paragrafi realizzeremo una pagina web con layout "liquido" composto da tre colonne così dimensionate:

Layout liquido con le Tabelle

Creiamo una pagina web e scriviamo tra <BODY> e </BODY> il seguente codice:

<TABLE width="100%" cellspacing="0" cellpadding="10" border="0" >
<TR>
<!-- Colonna sinistra -->
<TD width="180" valign="top">Inserire contenuto colonna sinistra</TD>
<!-- Colonna centrale-->
<TD valign="top" >Inserire contenuto colonna centrale</TD>
<!-- Colonna destra -->
<TD width="180" valign="top" >Inserire contenuto colonna destra</TD>
</TR>
< /TABLE>

Esempio (si apre una nuova finestra del browser) di pagina ottenuto utilizzando il codice sopra scritto.

Layout liquido con i CSS

Creiamo una pagina web e definiamo tra <HEAD> e </HEAD> il seguente CSS:

<STYLE type="text/css">
#sinistra { position: absolute; top: 80px; left: 20px; width: 180px; }
#destra { position: absolute; top: 80px; right: 20px; width: 180px; }
#centro { position: absolute; top: 80px; padding-left: 220px; padding-right: 220px; }
< /STYLE>

Fatto questo, tra <BODY> e </BODY> scriviamo il seguente codice:

<!-- Colonna centrale -->
< DIV id="centro">Inserire contenuto colonna centrale< /DIV>
< !-- Colonna destra -->
< DIV id="destra">Inserire contenuto colonna destra< /DIV>
< !-- Colonna sinistra -->
< DIV id="sinistra">Inserire contenuto colonna sinistra< /DIV>

Esempio (si apre una nuova finestra del browser) di pagina ottenuto utilizzando il codice sopra scritto.

Conclusioni

Lo scopo dell'esempio realizzato è di far capire meglio il funzionamento di un layout liquido e per questo motivo è molto semplice e privo di abbellimenti grafici. Potete utilizzarlo come configurazione base da sviluppare ulteriormente per ottenere pagine più complete e dall’aspetto grafico più piacevole.

Adesso sapete cos'è un layout liquido e come realizzarlo; quindi se dovete sviluppare una pagina o un sito web, tenetelo in considerazione perché potrebbe rivelarsi la scelta più opportuna.....buon lavoro ;-)

^Top

Dai un voto a questo articolo:   HITS: 63 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 2