Web design
/1
prof. Marco Pagano
[email protected]
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:
http://www.accademiabellearti.fr.it/didattica/insegnamenti/web-design-1
Web Design – Prof. Pagano
il box model
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»
Web Design – Prof. Pagano
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
Web Design – Prof. Pagano
posizionamento degli
elementi
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à
descrizione
Position
Metodo di posizionamento
left, right, top, bottom
Distanza (offset) del posizionamento
z-index
Livello su asse Z
La proprietà position può assumere i seguenti valori:
valore
descrizione
static
Valore predefinito. L’elemento viene posizionato normalmente
relative
L’elemento è posizionato relativamente alla sua posizione normale
absolute
L’elemento è posizionato relativamente al primo elemento
contenitore con un posizionamento diverso da static
fixed
L’elemento è posizionato rispetto alla finestra del browser
Web Design – Prof. Pagano
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
Web Design – Prof. Pagano
colonne
colonne /specifiche
La funzionalità colonne permette di organizzare i contenuti in
colonne simili a quelle dei quotidiani.
proprietà
descrizione
column-count
numero (ideale) di colonne
column-fill
Modalità di distribuzione dei contenuti nelle colonne:
• balance indica al browser di distribuire il contenuto uniformemente
• auto indica una distribuzione sequenziale
column-gap
distanza tra le colonne
column-rule-color
colore della riga tra le colonne
column-rule-style
stile della riga tra le colonne (come border)
column-rule-width
larghezza della riga tra le colonne
column-rule
versione abbreviata per <width> <style> <color>
column-span
Specifica la quantità di colonne che un elemento può attraversare
column-width
Larghezza delle colonne
columns
versione abbreviata per <length> <number>
Web Design – Prof. Pagano
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;
Web Design – Prof. Pagano
tabelle
tabelle/specifiche
Il layout table permette di simulare il comportamento di una tabella
html classica.
proprietà
descrizione
table
attiva il comportamento «a tabella» (display: table);
inline-table
come tabella ma in linea (in-line element)
table-caption
intestazione di tabella
table-column
colonna
table-column-group
raggruppamento di colonne
table-header-group
intestazione di tabella
table-row-group
corpo della tabella
table-footer-group
piede della tabella
table-row
riga
table-cell
cella
Web Design – Prof. Pagano
Colori
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
www.w3.org/TR/css3-color
Formato esadecimale: #008080
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)
Web Design – Prof. Pagano
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
000000 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. (http://it.wikipedia.org/wiki/Sistema_numerico_esadecimale)
Web Design – Prof. Pagano
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
Web Design – Prof. Pagano
Colori/hsl
Web Design – Prof. Pagano
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.
Web Design – Prof. Pagano
