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; </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 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> </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; #col2 { width: 25%; float: left; background: orange; </style> </head> <body> <div id="col1"> <h1>colonna 1</h1> <p>sed...</p> <div id="col2"> <h1>colonna 2</h1> <p>lorem...</p> </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; #col2 { width: 12em; float: left; background: orange; </style> </head> <body> <div id="col1"> <h1>colonna 1</h1> <p>sed...</p> <div id="col2"> <h1>colonna 2</h1> <p>lorem...</p> </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; </style> </head> <body> <div id="wrapper"> <div id="col1"> <h1>colonna 1</h1> <p>lorem...</p> <div id="col2"> <h1>colonna 2</h1> <p>sed...</p>
</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 { 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; #footer { clear: left; padding: 15px; background: #CCC; </style> </head> <body> <div id="header"><p>header</p> <div id="main"> <p>contenuto principale</p> <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 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 id="footer"><p>footer</p> </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 { padding: 0;
#wrapper { width: 960px; #header { background-color: #CCC; padding: 15px; #main { float: left; width: 650px; margin: 0 20px; background: orange; #secondary { float: left; width: 250px; margin: 0 20px 0 0; #footer { clear: left; padding: 15px; background: #CCC; </style> </head> <body> <div id="wrapper"> <div id="header"><p>header</p> <div id="main"> <p>contenuto Loremprincipale</p> <p>lorem...</p> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>... </ul> <div id="footer"><p>footer</p> </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 { padding: 0; #header { background-color: #CCC; padding: 15px; #navigation { float: left; width: 22.5%; margin: 0 0 0 2.5%;
#main { float: left; width: 45%; margin: 0 2.5%; background: orange; #secondary { float: left; width: 22.5%; margin: 0 2.5% 0 0; #footer { clear: left; padding: 15px; background: #CCC; </style> </head> <body> <div id="header"><p>header</p> <div id="navigation"> <p>menu</p> <ul> <li>link 1</li>... </ul> <div id="main"> <p>contenuto principale</p> <p>lorem...</p> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>... </ul> <div id="footer"><p>footer</p> </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 { padding: 0; #header { background-color: #CCC; padding: 15px; #contenuto { position: relative; #navigation {
width: 20%; position: absolute; top: 0; left: 2.5%; #main { width: 50%; position: absolute; top: 0; left: 25%; background: orange; #secondary { width: 20%; position: absolute; top: 0; right: 2.5%; </style> </head> <body> <div id="header"><p>header</p> <div id="contenuto"> <div id="main"> <p>contenuto principale</p> <p>lorem...</p> <div id="navigation"> <p>menu</p> <ul> <li>link 1</li>... </ul> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>...
</ul> </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 { padding: 0; #wrapper{ width: 960px; margin: 0 auto; #header { background-color: #CCC;
padding: 15px; #contenuto { position: relative; #navigation { width: 200px; position: absolute; top: 0; left: 0; #main { width: 520px; position: absolute; top: 0; left: 220px; background: orange; #secondary { width: 200px; position: absolute; top: 0; right: 0; </style> </head> <body> <div id="wrapper"> <div id="header"><p>header</p> <div id="contenuto"> <div id="main"> <p>contenuto principale</p> <p>lorem...</p> <div id="navigation"> <p>menu</p> <ul> <li>link 1</li>
... </ul> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>... </ul> </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 { </style> </head> <body> <div class="container_12"> <div id="header" class="grid_12"><p>header 960px</p> <div class="clear"> <div class="grid_8 column"> <p>contenuto principale 620px</p> <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 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 class="clear"> <div id="footer" class="grid_12"><p>footer 960px</p> <div class="clear"> </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> <p>contenuto principale</p> <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> </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.