Web design/1. prof. Marco Pagano

Transcript

1 Web design/1 prof. Marco Pagano

2 Questo documento è pensato come supporto alle lezioni frontali e non è quindi da considerarsi come «testo d esame» o sostitutivo della frequenza al corso Per una bibliografia di riferimento fare riferimento alla pagina web del corso all indirizzo:

3 il box model

4 il box model /specifiche Ogni elemento visibile della pagina occupa uno spazio rettangolare definito box dell elemento. Ogni box è costituito da quattro parti: margine bordo padding Soltanto il contenuto ed il bordo sono visibili, ovvero possono essere formattati. Content box Non esiste «margin-color»

5 il box model /content block Un elemento può contenere altri elementi, in questo caso il content box dell elemento padre diventa il blocco di contenuto dell elemento interno Content block

6 posizionamento degli elementi

7 Posizionamento /positioning Il posizionamento degli elementi è effettuato tramite la proprietà positioning, che permette di modificare la modalità con la quale un elemento è posizionato dal browser. proprietà Position left, right, top, bottom z-index descrizione Metodo di posizionamento Distanza (offset) del posizionamento Livello su asse Z La proprietà position può assumere i seguenti valori: valore static relative absolute fixed descrizione Valore predefinito. L elemento viene posizionato normalmente L elemento è posizionato relativamente alla sua posizione normale L elemento è posizionato relativamente al primo elemento contenitore con un posizionamento diverso da static L elemento è posizionato rispetto alla finestra del browser

8 Posizionamento /z-order La proprietà z-order determina l ordinamento da fronte a retro dell elemento. E impostata con un valore numerico e possono essere utilizzati valori negativi. La proproetà z-index è visibile solo con elementi che possono essere sovrapposti

9 colonne

10 colonne /specifiche La funzionalità colonne permette di organizzare i contenuti in colonne simili a quelle dei quotidiani. proprietà column-count column-fill column-gap column-rule-color column-rule-style column-rule-width column-rule column-span column-width columns descrizione numero (ideale) di colonne Modalità di distribuzione dei contenuti nelle colonne: balance indica al browser di distribuire il contenuto uniformemente auto indica una distribuzione sequenziale distanza tra le colonne colore della riga tra le colonne stile della riga tra le colonne (come border) larghezza della riga tra le colonne versione abbreviata per <width> <style> <color> Specifica la quantità di colonne che un elemento può attraversare Larghezza delle colonne versione abbreviata per <length> <number>

11 colonne /supporto attuale Le colonne non sono attualmente supportate solo su: Internet Explorer Opera Gli altri browser supportano le colonne attraverso i vendor prefix: -webkit- per opera a chrome -moz- per firefox -webkit-column-count: 3; -webkit-column-fill: balance; -webkit-column-rule: medium solid black; -webkit-column-gap: 1.5em; -moz-column-count: 3; -moz-column-fill: balance; -moz-column-rule: medium solid black; -moz-column-gap: 1.5em;

12 tabelle

13 tabelle/specifiche Il layout table permette di simulare il comportamento di una tabella html classica. proprietà descrizione table inline-table table-caption table-column table-column-group table-header-group table-row-group table-footer-group table-row table-cell attiva il comportamento «a tabella» (display: table); come tabella ma in linea (in-line element) intestazione di tabella colonna raggruppamento di colonne intestazione di tabella corpo della tabella piede della tabella riga cella

14 Colori

15 Colori/specifiche Le specifiche CSS permettono di specificare i colori utilizzando diversi metodi. Nome predefinito del colore: teal L elenco dei colori disponibili è disponibile nel sito del W3C all indirizzo Formato esadecimale: # Formato RGB: rbg(0,128,128) o rgba(0,128,128,0.5) nel formato rgba (e hsla) l ultimo valore indica il canale alfa, ovvero la trasparenza, il cui valore può andare da 0 (completamente trasparente) ad 1 (completamente opaco) Formato HSL: hsl(180, 100%, 25%) o hsla(180, 100%, 25%, 0.5)

16 Colori/il sistema esadecimale Il sistema numero esadecimale è un sistema numerico posizionale a base 16 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) dove f rappresenta il valore 15. Per descrivere un colore con il sistema esadecimale si utilizzano due posizione esadecimali per ciascun canale, come ad esempio: ffffff per il bianco per il nero ff0000 per il rosso Il valore ff rappresenta il valore più alto e corrisponde al valore RGB 255 Il sistema esadecimale in informatica è utilizzato spesso perché permette di rappresentare valori numeri occupando meno memoria ed è relativamente facile da tradurre in numeri binari. (

17 Colori/il sistema HSL Nel sistema HSL il colore viene specificato definendo le sue proprietà di tonalità (hue), saturazione (saturation) e luminosità (lightness). Hue è rappresentato come un angolo del cerchio di colore (cioè l'arcobaleno dei colori rappresentato in un cerchio). Questo angolo è espresso in gradi in modo implicito (sintatticamente, solo un <numero> è dato). Per definizione il colore rosso è uguale a 0 ovvero 360 gradi. Gli altri colori sono distribuiti nel cerchio (verde = 120, blu = 240, ). Essendo un angolo, si riavvolge su se stesso in modo implicito tale che -120 corrisponde a 240 e 480 corrisponde a 120 Saturation è rappresentata come percentuale. 100% è piena saturazione, 0% è una tonalità di grigio Lightness è rappresentata come percentuale. 0% è nero, 100% è bianco e il 50% è "normale

18 Colori/hsl

19 Colori/scelta della modalità di colore E 'stato osservato che il sistema di colori RGB presenta le seguenti limitazioni: RGB è hardware-oriented: riflette l'uso di CRT RGB non è intuitivo. Le persone possono imparare ad usare RGB, ma in realtà imparano come tradurre tonalità, saturazione e luminosità in RGB. Il vantaggio di HSL rispetto RGB è che è molto più intuitivo: è possibile iniziare ad indovinare un colore e poi modificare. E anche più facile creare gruppi di colori corrispondenti mantenendo la stessa tonalità e variando luminosità e saturazione. Se la saturazione è minore di 0%, le applicazioni devono agganciarlo al 0%. Se il valore risultante è al di fuori del gamut del dispositivo, le applicazioni devono agganciarlo al gamut massimo previsto dal dispositivo. In questo modo la tonalità dovrebbe essere preservata.