I fogli di stile CSS 2 Cristina Gena

Presentazione sul tema: "I fogli di stile CSS 2 Cristina Gena"— Transcript della presentazione:

1 I fogli di stile CSS 2 Cristina Gena cgena@di.unito.it

2 logo Testo float right Float right 4 Float right 3 Float right 2
immagine float left Testo float right

3 quindi, ridisegnare almeno una pagina del sito analizzato,
Img Esercizio sull'usabilità Alla luce dei criteri di usabilità WEB commentati a lezione, o reperiti da altre fonti: analizzare un sito orientato alla formazione a distanza, evidenziando quali degli aspetti di usabilità siano evidentemente presenti e quali, invece, non lo siano. Possibili siti da analizzare sono uno tra quelli esaminati o cui si è fatto riferimento durante le lezioni, o altri siti di formazione on-line, o mista (inclusi quelli con materiale su corsi tenuti dal docente, oppure uno tra quelli offerti da W3Schools). per almeno uno degli aspetti di usabilità, suggerire le modifiche nell'impostazione dei criteri di progettazione del sito, col fine di correggere la carenza. quindi, ridisegnare almeno una pagina del sito analizzato, cv interessi foto fun

4 Div assoluto con distanza top e left di 10 con float=left, width= 800
Div relativo con float right Div relativo Esercizio sull'usabilità Alla luce dei criteri di usabilità WEB commentati a lezione, o reperiti da altre fonti: analizzare un sito orientato alla formazione a distanza, evidenziando quali degli aspetti di usabilità siano evidentemente presenti e quali, invece, non lo siano. Possibili siti da analizzare sono uno tra quelli esaminati o cui si è fatto riferimento durante le lezioni, o altri siti di formazione on-line, o mista (inclusi quelli con materiale su corsi tenuti dal docente, oppure uno tra quelli offerti da W3Schools). per almeno uno degli aspetti di usabilità, suggerire le modifiche nell'impostazione dei criteri di progettazione del sito, col fine di correggere la carenza. quindi, ridisegnare almeno una pagina del sito analizzato, Div relativo Div relativo Div relativo Div relativo Diamo ai div larghezza fissa. Es width= 150, e width= 500

5 L’img è dentro un div con float=left
Il testo ora sta in un nuovo div con dimesioni più piccole e float=right img cv L’img è dentro un div con float=left interessi foto fun

6 Img img cv img interessi img foto fun
Il testo ora sta in un nuovo div con dimesioni più piccole e float right cv img interessi img foto fun Se volete più img aggiungete un div contenitore con float=left e al suo interno le immagini

7 Img cv interessi foto fun
Img in un div, con float=left Testo in un div con float= right cv interessi Img in un div, con float=left Testo in un div con float=right foto fun Il div arancione ha solo funzione di contenitore al quale potete assegnare una larghezza (e se volete un’altezza con scrolling)

8 Img cv interessi foto fun
Img dentro un div con float=left Img dentro un div con float=right cv Img dentro un div con float=left Img dentro un div con float=right interessi foto Img dentro un div con float=left Img dentro un div con float=right fun