CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09"

Lucrezia Pasquali
7 anni fa
Visualizzazioni

1 CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 Selettori class e id! Sono due attributi fondamentali applicabili a tutti gli elementi! Consentono di superare le limitazioni intrinseche nell'uso di un selettore di elementi! <p class="testorosso">...</p>! <p id="testorosso">...</p>! L'attributo id è usato per identificare in modo univoco un elemento! In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina. 2

2 Selettori class e id! Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo! Regola: se uno stile va applicato ad un solo specifico elemento si usa un ID; se invece si prevede di usarlo più volte ovvero su più elementi si definisce nel CSS una classe. 3 Selettori class e id! CSS per la classe.nome_della_classe p.testorosso {color: red;}! CSS per l id #nome_id #titolo {color: blue;} 4

3 Layout liquido! Una pagina web caratterizzata da un layout liquido è una pagina web che occupa sempre tutto lo spazio disponibile della finestra del browser qualunque sia la risoluzione del monitor.! Una pagina web di questo tipo si adatta allo spazio disponibile sullo schermo. Ridimensionando la finestra del browser anche la pagina web verrà ridimensionata.! Non può mai sapere a priori quale sarà la risoluzione utilizzata dagli utenti del sito web che sta realizzando 5 Obiettivo! Realizzare una pagina web con layout "liquido" composto da tre colonne così dimensionate: colonna sinistra:180px; colonna centrale:dimensioni variabili a seconda dello spazio disponibile; colonna destra:180px. 6

4 Come? <STYLE type="text/css"> #sinistra { position: absolute; top: 80px; left: 20px; width: 180px;} #destra { position: absolute; top: 80px; right: 20px; width: 180px; #centro { position: absolute; top: 80px; padding-left: 220px; padding-right: 220px; } < /STYLE> Fatto questo, tra <BODY> e </BODY> scriviamo il seguente codice:  < DIV id="centro">inserire contenuto colonna centrale< /DIV>  < DIV id="destra">inserire contenuto colonna destra< /DIV>  < DIV id="sinistra">inserire contenuto colonna sinistra< /DIV> 7 Esercizio 8

5 Come inserire un foglio di stile! La scorsa lezione abbiamo visto che definire un foglio di stile all interno di un file HTML! In realtà il modo più pratico è usare un foglio di stile esterno, ideale quando lo stile è applicato a molte pagine. Con il foglio di stile esterno si può cambiare l aspetto di un intero sito web cambiando solo un file.! Ogni pagina deve collegarsi al foglio di stile tramite il tag <link> nell head del file HTML <head> <link rel="stylesheet" type="text/css href="mystyle.css" /> </head> 9 Esempio <html> <head> <link rel="stylesheet" type="text/css href="exe2.css" /> </head> <body> <h1>this is a header 1</h1> <hr /> body {backgroundcolor: tan} h1 {color:maroon; font-size:20pt} hr {color:navy} p {font-size:11pt; margin-left:15px} a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue} <p>you can see that the style sheet formats the text</ p> <p><a href=" target="_blank">this is a link</a></p> </body> </html> 10

6 Riferimenti e link utili! Per le esercitazioni: HyperEdit (per MAC) e NVU (per Windows)! Per saperne di più sui CSS Firebug: pluging di Firefox per capire com è fatto un sito, nella sua struttura e nella sua forma 11 Immagini digitali Strumenti informatici per giornalisti AA 2008/09

7 L immagine digitale! Un immagine fotografica è composta da milioni di pigmenti colorati molto piccoli che, messi uno vicino all altro, ci danno l impressione di vari oggetti che la compongono! Questi punti disposti in modo irregolare diventano visibili se ingrandiamo nel dettaglio l immagine! Un immagine digitale si basa sullo stesso principio, ma la disposizione di puntini base che la compongono è regolare 13 L immagine digitale! PIXEL = picture element! Solitamente quadrati 14

8 Caratteristiche! Dimensione! Risoluzione! Profondità di colore! Occupazione di memoria 15 Digitalizzazione! Nel processo di digitalizzazione una griglia regolare quadrata, detta griglia di campionamento, viene sovrapposta all immagine! Ogni quadrato della griglia dà origine ad un pixel, ed il colore del pixel è la media dei colori degli oggetti che cadono all interno di quel quadrato! Più la griglia di acquisizione è fitta, migliore è il risultato, ossia meno evidente appare la quadrettatura dell immagine, detta pixellatura 16

9 Pixellatura 17 Risoluzione e dimensioni! Il numero di pixel che compongono un immagine costituisce la dimensione dell immagine 1024x1024, 512x512,! La risoluzione indica la densità dei pixel che formano l'immagine. Lo schermo di un computer, infatti, non può mostrare linee o disegni, ma soltanto, in definitiva, punti: se questi sono sufficientemente piccoli (tali, in pratica, da essere più piccoli della risoluzione percepita dall'occhio umano), l'osservatore ha l'impressione di vedere linee anziché punti allineati, e disegni anziché ammassi di puntini distinti.! E il numero di punti che sono contenuti in un centimetro, o per pollice (dpi) Dimensione = Grandezza x Risoluzione 18

10 Risoluzione e dispositivi! Per visualizzare un immagine digitale su un monitor la risoluzione di 72 o 96 dpi va bene! Per una stampante a getto d inchiostro possiamo stare tra i 150 e i 300 dpi! Per una stampante laser possiamo raggiungere i 600/1200 dpi 19 Scala tonale 16 ldg 8 ldg! E la quantità di colori visualizzabili! In un immagine a ldg è l insieme di tutti i livelli di grigio che la compongono! In un img a colori è l insieme di tinte e sfumature 4 ldg 2 ldg 20

11 Profondità di colore! L informazione contenuta in un pixel deve venire rappresentata in bit! Maggiore è il numero bit per pixel, tanti più toni si potranno riprodurre! N bit = 2 N valori, per cui con un byte (8 bit) si possono codificare 256 ldg! N = profondità di colore 21 Occupazione di memoria! Occupazione = Dimensione x Profondità di colore! Esempio: immagine da stampare a 10x15 cm Risoluzione 300dpi Profondità di colore 24 bit + di 6 Mb! E necessario ridurre l occupazione in memoria lavorando su Risoluzione Dimensione Profondità di colore Tecniche di compressione 22

Documenti analoghi

Sistemi Di Elaborazione Dell informazione

Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets