CSS Layout delle pagine - Server users.dimi.uniud.it

Transcript

Laboratorio di Tecnologie Web
CSS
Layout delle pagine
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
Strategie di layout
Esistono diverse strategie per definire il layout generale
delle pagine web:
• Layout fisso: il layout mantiene le proprie dimensioni
indipendentemente dalla dimensione della finestra del
browser o del testo
• Layout fluido o liquido: le dimensioni del layout
cambiano in modo proporzionale alle dimensioni della
finestra
• Layout elastico: le dimensioni del layout cambiano in
modo proporzionale alla dimensione del testo
• Layout ibrido: combina aree fisse e aree le cui
dimensioni variano dinamicamente
Layout fissi
Nei layout fissi, i designer controllano direttamente la
dimensione delle pagine e le relazioni tra elementi delle
pagine, allineamenti e lunghezza delle linee (la lunghezza
ottimale delle linee è 10-12 parole oppure 60-75 caratteri).
Un layout fisso viene creato impostando in pixel la
larghezza delle pagine (una dimensione comune è 960px) e
dei loro componenti (colonne, margini, etc.). Tipicamente,
il contenuto dell'intera pagina viene inserito all'interno di un
elemento <div> (che può essere posizionato al centro della
pagina in modo che eventuale spazio extra si disponga
equamente sui due lati).
Gli svantaggi di un layout fisso sono dovuti al fatto che non
si adatta alla dimensione della finestra del browser (che può
quindi diventare più piccola o molto più grande del
contenuto da visualizzare).
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
#wrapper {
width: 750px;
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#col1 {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: orange;
}
#col2 {
position: absolute;
top: 0px;
right: 0px;
margin-left: 225px;
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="col1">
<h1>Colonna 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>
</div>
<div id="col2">
<h1>Colonna 2</h1>
<p>Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</p>
</div>
</div>
</body>
</html>
Layout fluidi
Nei layout fluidi, la dimensione delle pagine e delle
colonne al loro interno varia dinamicamente in funzione
dello spazio a disposizione.
Si può creare un layout di questo tipo impostando la
larghezza delle pagine e degli elementi in percentuale (o
non usare la proprietà “width” del tutto, nel qual caso
questa è impostata ad auto e gli elementi occupano tutto lo
spazio a loro disposizione).
Il principale svantaggio di questi layout è che possono
portare a righe di testo (ed elementi in generale) molto
lunghe o molto corte, pregiudicandone la leggibilità. Per
mitigare questo problema si può fare uso delle proprietà
“min-width” e “max-width”.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
#col1 {
width: 70%;
margin-right: 5%;
float: left;
background: yellow;
}
#col2 {
width: 25%;
float: left;
background: orange;
}
</style>
</head>
<body>
<div id="col1">
<h1>Colonna 1</h1>
<p>Sed ...</p>
</div>
<div id="col2">
<h1>Colonna 2</h1>
<p>Lorem ...</p>
</div>
</body>
</html>
Layout elastici
Nei layout elastici, la dimensione delle pagine e degli
elementi si adatta alla dimensione del testo. Questo
permette di avere righe sempre della stessa lunghezza (in
termini di numero di parole o caratteri).
I layout elastici vengono creati impostando le dimensioni
degli elementi in em.
Questo tipo di layout è meno flessibile del layout fluido in
ambito mobile e non si applica particolarmente bene a
contenuti non testuali.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
#col1 {
width: 12em;
margin-right: 2em;
float: left;
background: yellow;
}
#col2 {
width: 12em;
float: left;
background: orange;
}
</style>
</head>
<body>
<div id="col1">
<h1>Colonna 1</h1>
<p>Sed ...</p>
</div>
<div id="col2">
<h1>Colonna 2</h1>
<p>Lorem ...</p>
</div>
</body>
</html>
Layout ibridi
I layout ibridi utilizzano una combinazione di dimensioni
definite in px, percentuali ed em, in base alle esigenze. Ad
esempio, il codice suguente combina una colonna a
dimensione fissa con una colonna a dimensione variabile.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
#col1 {
width: 200px;
position: absolute;
top: 0px;
left: 0px;
background: orange;
}
#col2 {
width: auto;
position: absolute;
top: 0;
left: 225px;
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="col1">
<h1>Colonna 1</h1>
<p>Lorem ...</p>
</div>
<div id="col2">
<h1>Colonna 2</h1>
<p>Sed ...</p>
</div>
</div>
</body>
</html>
Layout multicolonna
In questa sezione, vedremo alcuni esempi di layout a due e
a tre colonne. Gli esempi sono volutamente minimali,
utilizzano elementi generici e sono da intendersi come base
per sviluppare layout più sofisticati e completi.
Utilizzo di float
La proprietà “float” è al momento la più utilizzata per
creare layout multicolonna nelle pagine web.
L'esempio seguente crea un layout fluido a due colonne per
una pagina contenente un header, due aree di contenuto
(contenuto principale e secondario) ed un footer.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #CCC;
padding: 15px;
}
#main {
float: left;
width: 60%;
margin: 0 5%;
background: orange;
}
#secondary {
float: left;
width: 25%;
margin: 0 5% 0 0;
background: yellow;
}
#footer {
clear: left;
padding: 15px;
background: #CCC;
}
</style>
</head>
<body>
<div id="header"><p>Header</p></div>
<div id="main">
<p>Contenuto principale</p>
</div>
<div id="secondary">
<p>Articoli correlati:</p>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div id="footer"><p>Footer</p></div>
</body>
</html>
Entrambe le aree di contenuto sono state definite come
elementi floating a sinistra ed hanno una dimensione
specificata in percentuale.
L'area di contenuto principale ha un margine a destra e a
sinistra mentre l'area secondaria ha un margine solo a
destra. I margini superiori sono stati impostati a 0 per
ottenere l'allineamento verticale.
Il footer utilizza la proprietà “clear” in modo che sia
posizionato sotto le aree di contenuto.
E' possibile applicare “max-width” e “min-width” per
migliorare l'usabilità su schermi molto grandi o molto
piccoli. Tali proprietà possono essere applicate ai singoli
elementi oppure si possono inserire tutti gli elementi
all'interno di un unico <div> e impostare i vincoli a questo.
L'esempio seguente crea un layout fisso a due colonne per
la stessa pagina. A differenza del layout fluido, in questo
caso tutta la pagina viene inserita all'interno di un elemento
<div> di cui viene specificata la dimensione in pixel ed
anche le dimensioni delle due aree di contenuto e dei
margini vengono trasformate in pixel.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
}
#header {
padding: 15px;
}
#main {
float: left;
width: 650px;
margin: 0 20px;
background: orange;
}
#secondary {
float: left;
width: 250px;
margin: 0 20px 0 0;
background: yellow;
}
#footer {
clear: left;
padding: 15px;
background: #CCC;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<p>Contenuto Loremprincipale</p>
<p>Lorem ...</p>
</div>
<ul>
<li>Link 1</li>
...
</ul>
</div>
</div>
</body>
</html>
Per ottenere un layout centrato sulla finestra del browser, è
sufficiente settare la proprietà “margin” del wrapper al
valore 0 auto facendo così in modo che vengano creati
automaticamente dei margini destro e sinistro delle stesse
dimensioni nello spazio a disposizione.
Se si vuole fare in modo che l'header ed il footer occupino
l'intera larghezza della finestra mentre le due aree di
contenuto siano centrate, è sufficiente spostare il wrapper in
modo che racchiuda solo le aree di contenuto, senza
necessità di modificare le regole di stile.
Il seguente esempio crea un layout fluido a tre colonne,
aggiungendo un elemento <div> alla pagina precedente e
modificando le dimensioni delle colonne di conseguenza.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
body {
margin: 0;
padding: 0;
}
#header {
padding: 15px;
}
#navigation {
float: left;
width: 22.5%;
margin: 0 0 0 2.5%;
background: yellow;
}
#main {
float: left;
width: 45%;
margin: 0 2.5%;
background: orange;
}
#secondary {
float: left;
width: 22.5%;
margin: 0 2.5% 0 0;
background: yellow;
}
#footer {
clear: left;
padding: 15px;
background: #CCC;
}
</style>
</head>
<body>
<div id="navigation">
<p>Menu</p>
<ul>
<li>Link 1</li>
...
</ul>
</div>
<div id="main">
<p>Lorem ...</p>
</div>
<ul>
<li>Link 1</li>
...
</ul>
</div>
</body>
</html>
Per trasformare questo layout in un layout fisso, si procede
come nell'esempio a due colonne (provatelo come
esercizio).
Utilizzo del posizionamento assoluto
Un metodo alternativo all'utilizzo di float per creare layout
multicolonna è rappresentato dal posizionamento assoluto.
Un problema di questa soluzione è il fatto che gli elementi
che vengono posizionati in modo assoluto non fanno parte
del flusso normale e quindi non influenzano gli altri
elementi. Questo non permette di creare facilmente un
footer al di sotto delle colonne.
L'esempio seguente crea un layout fluido a tre colonne.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
body {
margin: 0;
padding: 0;
}
#header {
padding: 15px;
}
#contenuto {
position: relative;
margin: 0;
}
#navigation {
width: 20%;
position: absolute;
top: 0;
left: 2.5%;
margin: 0;
background: yellow;
}
#main {
width: 50%;
position: absolute;
top: 0;
left: 25%;
margin: 0;
background: orange;
}
#secondary {
width: 20%;
position: absolute;
top: 0;
right: 2.5%;
margin: 0;
background: yellow;
}
</style>
</head>
<body>
<div id="contenuto">
<div id="main">
<p>Lorem ...</p>
</div>
<p>Menu</p>
<ul>
<li>Link 1</li>
...
</ul>
</div>
<ul>
<li>Link 1</li>
...
</ul>
</div>
</div>
</body>
</html>
La soluzione si basa sul creare un containing block per le
tre colonne con posizione relativa e specificare poi la
posizione assoluta delle colonne al suo interno. Notate
anche che, al contrario dell'utilizzo della proprietà “float”,
non è necessario che le tre colonne compaiano nel codice
nell'ordine in cui vengono visualizzate (in questo esempio,
il contenuto principale è presente nel codice prima delle due
barre laterali).
L'esempio seguente crea un layout fisso tramite
posizionamento assoluto. Oltre all'utilizzo di dimensioni in
pixel, viene aggiunto un wrapper per racchiudere l'intera
pagina.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
body {
margin: 0;
padding: 0;
}
#wrapper{
width: 960px;
margin: 0 auto;
}
#header {
padding: 15px;
}
#contenuto {
position: relative;
margin: 0;
}
#navigation {
width: 200px;
position: absolute;
top: 0;
left: 0;
margin: 0;
background: yellow;
}
#main {
width: 520px;
position: absolute;
top: 0;
left: 220px;
margin: 0;
background: orange;
}
#secondary {
width: 200px;
position: absolute;
top: 0;
right: 0;
margin: 0;
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contenuto">
<div id="main">
<p>Lorem ...</p>
</div>
<p>Menu</p>
<ul>
<li>Link 1</li>
...
</ul>
</div>
<ul>
<li>Link 1</li>
...
</ul>
</div>
</div>
</div>
</body>
</html>
Grid frameworks (e oltre)
Nel corso degli anni, sono stati proposti diversi framework
che permettono di semplificare la creazione di layout basati
su un'organizzazione del contenuto a griglia. Tipicamente,
tali framework sono rigidi nel senso che non permettono
variazioni rispetto all'organizzazione supportata. Per questo
motivo, sono utilizzati principalmente in fase di
prototipazione del design di un sito più che in fase di
produzione.
Un esempio di framework molto diffuso è il “960 Grid
System” che si può scaricare all'indirizzo http://960.gs/.
Esso si basa su pagine di dimensione 960px, suddivise in 12
oppure 16 colonne, larghe rispettivamente 60 o 40 pixel,
con margini di 10px attorno ad ogni colonna (esiste anche
una versione a 24 colonne di 30 pixel).
L'esempio seguente crea un layout a due colonne con
header e footer. Per farlo funzionare, dovete scaricare il
framework dal sito sopra riportato e fare riferimento al
foglio di stile esterno 960.css presente nel framework.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<link rel="stylesheet" type="text/css" media="all"
href="css/960.css" />
<style>
#header, #footer {
background: #CCC;
}
.column {
background: yellow;
}
</style>
</head>
<body>
<div class="container_12">
<div id="header" class="grid_12"><p>Header
960px</p></div>
<div class="clear"></div>
<div class="grid_8 column">
<p>Contenuto principale 620px</p>
</div>
<div class="grid_4 column">
<p>Menu 300px</p>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div id="footer" class="grid_12"><p>Footer
960px</p></div>
</div>
</body>
</html>
Potete trovare un esempio più complesso, che evidenzia
anche i limiti di utilizzo di un framework di questo tipo,
all'indirizzo http://code.tutsplus.com/tutorials/prototypingwith-the-grid-960-css-framework--net-1787.
Oltre a 960, esistono diversi altri framework che
permettono di creare layout (anche di tipo responsive, ossia
che cambiano in funzione dello spazio di schermo a
disposizione). Alcuni esempi sono Blueprint
(http://www.blueprintcss.org/), BlueTrip
(http://bluetrip.org/), yui (http://yuilibrary.com/), Skeleton
(http://www.getskeleton.com/), Bootstrap
(http://getbootstrap.com/).
Future tecnologie di layout
Oltre alle strategie di layout descritte nelle sezioni
precedenti, sono state proposte o sono in fase di definizione
altre modalità per organizzare gli elementi sulle pagine
web. La maggior parte di queste sono supportate solo dalle
ultime versioni dei browser.
Un'aggiunta a CSS che consentirà di poter semplificare la
definizione dei layout è la possibilità di suddividere un
qualsiasi elemento in colonne tramite proprietà quali
“column-width” e “column-count”. La specifica completa
può essere trovata al seguente indirizzo:
http://www.w3.org/TR/css3-multicol/.
L'esempio seguente mostra la suddivisione di un elemento
<div> in due colonne.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
<style>
div {
-webkit-column-count: 2;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Il Flexible Box Layout Model (noto come FlexBox)
permette di organizzare facilmente i box degli elementi gli
uni rispetto agli altri, senza dover utilizzare float, margini
negativi o altre complicate strategie. Alla pagina
http://bocoup.com/weblog/dive-into-flexbox/ potete trovare
una presentazione estesa di questo modello. La
documentazione W3C può essere trovata al seguente
indirizzo: http://www.w3.org/TR/css3-flexbox/.
Alla pagina http://dev.w3.org/csswg/css-grid/ può essere
trovata la descrizione di un altro modello per la definizione
del layout delle pagine basato su griglia.

CSS Layout delle pagine - Server users.dimi.uniud.it

Transcript

Documenti analoghi

Ricchi e Poveri - LIVE A GROTTE DI CASTRO (12-8-15)

Bambini e genitori piangono la loro maestra Dominique

Modulo d`iscrizione

IRCA SPA Div. RICA - Zoppas Industries

Relazione annuale 2014 - Azienda Ospedaliera di Padova

Estate 2015 – Spese

Un clacson diventa musica "Così conquisto Fabri Fibra"

25MHz 40MHz Oscilloscopio digitale 2 Canali

Come inserire una scrollbar in Web Designer 6 Create un rettangolo