Sei sulla pagina 1di 10

Autore: Bocchi Cinzia

Ultimo aggiornamento: 09/02/2014


1
Layout monolitico

Il layout monolitico adatto a siti di piccole dimensioni (con un ordine di pagine sotto la
decina). Il layout monolitico si compone di quattro sezioni fondamentali:
header
navigazione
contenuti
footer

Generalmente la navigazione disposta orizzontalmente sotto l'header, ma pu anche
essere disposta a fianco dei contenuti, ma senza estendersi verticalmente come o pi di
quest' ultima (si otterebbe in questo caso un layout a due colonne).
In un layout monolitico si dovrebbe sempre specificare e dichiarare esplicitamente la
larghezza dell'area principale. Non dichiarando la larghezza esplicitamente, il layout si
adatta alla larghezza della finestra del browser. Questo potrebbe costringere un utente
con monitor ad alte o altissime risoluzioni a stringere la finestra del browser per aumentare
la leggibilit del sito. Infatti, linee di testo troppo lunghe causano difficolt di lettura.
Vediamo il codice HTML di questo layout.

<!DOCTYPE html>
<html>
<head>
<title>Layout monolitico</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
LAYOUT MONOLITICO<br>
HEADER
</div> <!-- end header -->
<div id="navigation">
NAVIGATION
</div> <!-- end navigation -->
<div id="content">
CONTENT
</div> <!-- end content -->
<!-- Begin Footer -->
<div id="footer">
FOOTER
</div> <!-- end footer -->
</div> <!-- end wrapper -->
</body>
</html>




Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
2
Nel seguito vengono mostrati tre diversi stili per il layout proposto.

Layout monolitico fisso


Fig. 1 Esempio di layout monolitico fisso

body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 920px;
}
#header {
height: 100px;
margin: 10px 0 0 0;
padding: 10px;
background-color: #334433;
color: #FFF;
}
#navigation {
margin: 0;
padding: 10px;
background-color: #6699AA;
color: #FFF;
}
#content {
height: 350px;
margin: 0;
padding: 10px;



Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
3
background-color: #AACCCC;
color: #FFF;
}
#footer {
margin: 0 0 10px 0;
padding: 10px;
background-color: #334433;
color: #FFF;
}

Le regole riguardanti il colore di sfondo (background-color) e il colore in primo piano (color)
sono state aggiunte unicamente per rendere visibile le sezioni nella pagina web.


Layout monolitico fluido


Fig. 2 Esempio di layout monolitico fluido

body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
/*920:1280 = x:100 ==> = 72%*/
width: 72%;
}
#header {
height: 100px;
margin: 10px 0 0 0;
padding: 10px;



Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
4
background-color: #334433;
color: #FFF;
}
#navigation {
margin: 0;
padding: 10px;
background-color: #6699AA;
color: #FFF;
}
#content {
height: 350px;
margin: 0;
padding: 10px;
background-color: #AACCCC;
color: #FFF;
}
#footer {
margin: 0 0 10px 0;
padding: 10px;
background-color: #334433;
color: #FFF;
}

Le regole riguardanti il colore di sfondo (background-color) e il colore in primo piano (color)
sono state aggiunte unicamente per rendere visibile le sezioni nella pagina web.


Layout monolitico elastico

html {
font-size:100%;
}
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
/*1px = 0.0625em ==> 920px = 57.5em*/
width: 57.5em;
}
#header {
/*100px = 6.25em*/
height: 6.25em;
/*10px = 0.625em*/
margin: 0.625em 0 0 0;



Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
5
padding: 0.625em;
background-color: #334433;
color: #FFF;
}
#navigation {
margin: 0;
padding: 0.625em;
background-color: #6699AA;
color: #FFF;
}
#content {
/*350px = 21.875em*/
height: 21.875em;
margin: 0;
padding: 0.625em;
background-color: #AACCCC;
color: #FFF;
}
#footer {
margin: 0 0 0.625em 0;
padding: 0.625em;
background-color: #334433;
color: #FFF;
}

Le regole riguardanti il colore di sfondo (background-color) e il colore in primo piano (color)
sono state aggiunte unicamente per rendere visibile le sezioni nella pagina web.


Fig. 3 Esempio di layout monolitico elastico





Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
6
La figura 4 mostra come variano i layout al variare della dimensione del font del browser.
La figura 5 mostra il modo in cui si modificano i layout al diminuire della dimensione della
finestra del browser.

Carattere Molto Piccolo (in Chrome)
FISSO

FLUIDO

ELASTICO


Fig. 4 Variazione dei layout al variare della dimensione del font del browser





Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
7


Zoom al 50%
FISSO

FLUIDO

ELASTICO












Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
8
Zoom al 150%
FISSO

FLUIDO

ELASTICO


Fig. 5 Variazione dei layout al variare della dimensione della finestra del browser





Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
9
Confronto del codice


FISSO FLUIDO ELASTICO
#html
font-size:100%;

#body
margin: 0;
padding: 0;

margin: 0;
padding: 0;

margin: 0;
padding: 0;

#wrapper
margin: 0 auto;

width: 920px;

margin: 0 auto;
/*920:1280=x:100 ==>
x=72%*/
width: 72%;

margin: 0 auto;
/*1px = 0.0625em ==>
920px = 57.5em*/
width: 57.5em;

#header

height: 100px;

margin: 10px 0 0
0;
padding: 10px;
background-color:
#334433;
color: #FFF;


height: 100px;

margin: 10px 0 0 0;
padding: 10px;
background-color:
#334433;
color: #FFF;

/*100px = 6.25em*/
height: 6.25em;
/*10px = 0.625em*/
margin: 0.625em 0 0 0;
padding: 0.625em;
background-color:
#334433;
color: #FFF;

#navigation
margin: 0;
padding: 10px;
background-color:
#6699AA;
color: #FFF;
margin: 0;
padding: 10px;
background-color:
#6699AA;
color: #FFF;

margin: 0;
padding: 0.625em;
background-color:
#6699AA;
color: #FFF;
#content

height: 350px;
margin: 0;
padding: 10px;
background-color:
#AACCCC;
color: #FFF;


height: 350px;
margin: 0;
padding: 10px;
background-color:
#AACCCC;
color: #FFF;

/*350px = 21.875em*/
height: 21.875em;
margin: 0;
padding: 0.625em;
background-color:
#AACCCC;
color: #FFF;

#footer
margin: 0 0 10px
0;
padding: 10px;
background-color:
#334433;
color: #FFF;

margin: 0 0 10px 0;
padding: 10px;
background-color:
#334433;
color: #FFF;

margin: 0 0 0.625em 0;
padding: 0.625em;
background-color:
#334433;
color: #FFF;





Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014
10

Quest'opera stata rilasciata con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo
stesso modo 3.0 Italia. Per leggere una copia della licenza visita il sito web
http://creativecommons.org/licenses/by-nc-sa/3.0/it/ o spedisci una lettera a Creative Commons, 171
Second Street, Suite 300, San Francisco, California, 94105, USA.