Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model.

Presentazione sul tema: "Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model."— Transcript della presentazione:

1 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model

2 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model L'insieme di regole che gestisce l'aspetto visuale degli elementi di blocco in un layout. E composto da 4 elementi principali: Il contenuto Il padding Il bordo I margini

3 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il contenuto È la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà CSS width. Quelle verticali con height.

4 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il contenuto La larghezza (width) e laltezza (height) di un elemento possono essere determinate in 2 modi: Automaticamente dai browser attraverso un calcolo su contenuti e elementi della pagina. Specificata dallo sviluppare via CSS.

5 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il contenuto La proprietà width può assumere valori: In percentuale. valori espressi in unità di misura (px, em, …). Gli elementi inline, tranne quelli rimpiazzati (es. ), non hanno una larghezza esplicita.

6 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il contenuto La proprietà height può assumere valori: In percentuale. valori espressi in unità di misura (px, em, …). Se espressa in percentuale, laltezza dellelemento funziona solo se anche laltezza del contenitore dellelemento è espressa.

7 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il padding Il padding è uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Si usa per la distanza del contenuto dai bordi. Se si imposta un colore o unimmagine di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.

8 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il padding La proprietà padding può assumere valori: In percentuale. valori espressi in unità di misura (px, em, …). Si specifica con: Padding-top, padding-right, padding-bottom, padding-left shorthand

9 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il bordo È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto. Di default, gli elementi non hanno bordo.

10 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il bordo La proprietà CSS border si specifica con i valori: Border-top, border-right, border-bottom, border-left Border-style: solid, dashed, dotted Border-color: di solito un valore esadecimale del colore Border-width: thin, medium, thick oppure ununità di misura. shorthand

11 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il margine E uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti. La proprietà CSS margin si specifica con i seguenti valori: Margin-top, margin-right, margin-bottom, margin-left Un valore in percentuale o unità di misura (px, em,..) shorthand

12 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il collapsing margins Margini adiacenti di due o più riquadrati si combinano per formare un singolo margine, nello specifico: Due o più margini verticali adiacenti di elementi di blocco nel flusso normale collassano. L'ampiezza del margine risultante è data dal valore più grande tra i margini dei 2 elementi adiacenti. I margini verticali fra un elemento flottato ed ogni altro elemento non collassano. I margini di elementi posizionati in modo assoluto e in modo relativo non collassano.

13 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model: il collapsing margins

14 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Positioning Position è la proprietà CSS per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Può avere 4 valori: static relativo absolute fixed

15 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Positioning: static Static è il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.

16 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Positioning: relative L'elemento è posizionato relativamente rispetto alla sua posizione iniziale nel flusso del documento. La posizione può cambiare con i valori top, left, bottom, right, senza tuttavia variare il normale flusso del documento.

17 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Positioning: absolute L'elemento viene rimosso dal flusso del documento ed è posizionato in base ai valori top, left, right o bottom rispetto al box contenitore che a sua volta deve essere posizionato in maniera absolute, relative o fixed. Importante: posizionando un elemento in maniera assoluta, si varia il flusso del documento.

18 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Positioning: fixed Lelemento viene, come per absolute, sottratto al normale flusso del documento. La posizione rimane fissa, cioè lelemento non scrolla rispetto al viewport, ovvero la finestra principale del browser. Problemi con IE6 e con i browser che non hanno finestre (es. iPhone).

19 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating Con la proprietà float possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata.

20 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating La proprietà float può assumere 3 valori: left: l'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra. right. l'elemento viene spostato sul lato destro, il contenuto scorre a sinistra. none: valore iniziale e di default in mancanza di una dichiarazione esplicita. L'elemento mantiene la sua posizione normale.

21 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating Importante Quando si usa il float è necessario impostare la larghezza dellelemento con la proprietà width. Non è il caso delle in quanto esse hanno una larghezza intrinseca che il browser riesce a calcolare. Es. li {float: left; width: 30em;} img {float:left}

22 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating

23 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating

24 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating

25 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating: clear La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco e non è ereditata. Ha 4 possibili valori: none: elementi con float possono stare a destra e sinistra dell'elemento. left: impedisce il posizionamento a sinistra. right: impedisce il posizionamento a destra. both: impedisce il posizionamento su entrambi i lati.

26 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate CSS Floating: clear