1 / 56

Laboratorio di XHTML e CSS

Laboratorio di XHTML e CSS. Lezione 4: Immagini. Materiale del laboratorio. Il materiale del corso e’ disponibile al seguente indirizzo : http://www.di.unito.it/~chiabran/labXHTML/index.html Se non avete ~ sulla vostra tastiera la potete fare digitando %7E .

pippa
Télécharger la présentation

Laboratorio di XHTML e CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Laboratoriodi XHTML e CSS Lezione 4: Immagini

  2. Materiale del laboratorio Il materiale del corso e’ disponibile al seguenteindirizzo: http://www.di.unito.it/~chiabran/labXHTML/index.html Se non avete~sullavostratastiera la potete fare digitando%7E. ATTENZIONE: Per questalezionescaricateil file zip da http://www.di.unito.it/~chiabran/labXHTML/es/es4.zip I mieicontatti: Mail: osborne@di.unito.it Sito: http://www.di.unito.it/~osborne Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1

  3. Nelleprecedentipuntate… Idea di base: separare struttura e presentazione e utilizzare un linguaggio rigoroso per rappresentare l’informazione: (X)HTML: struttura + CSS: presentazione Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 3

  4. Struttura tag Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 4

  5. Struttura di un documento Unapagina html vuota e’ semprestrutturatasecondoquesto schema: Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 1 5

  6. I selettori CSS • I CSS permettono di definire gli aspetti di presentazione di un documento (X)HTML. Esempio: Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 2

  7. Selettori id • Selettori id: si basano sul valore dell’attributo “id”. Le dichiarazioni saranno applicate a tutti gli elementi, il cui “id” corrisponde a quello indicato (uno solo per documento!). Esempio: #unito { font-size: 2em; } • La dichiarazione viene applicata all’elemento il cui id è “unito” Nelle regole CSS, i selettori id sono introdotti dal simbolo “#” Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 2

  8. Selettoridiclasse • Selettori di classe: si basano sul valore dell’attributo “class”. Le dichiarazioni saranno applicate a tutti gli elementi la cui classe corrisponde a quella indicata. Esempio: .argomento { font-size: 2em; } • La dichiarazione viene applicata agli elementi della classe “argomento”. • Se ad un elemento sono collegate più classi, gli verranno applicate tutte le regole corrispondenti. Nelle regole CSS, i selettori class sono introdotti dal simbolo “.” Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 2

  9. Liste non ordinate: sintassi Lista non ordinata: • elemento • elemento • elemento • elemento • …. Lista non ordinata: • elemento • elemento • elemento • elemento • …. • Sintassi delle liste non ordinate: <ul>Lista non ordinata: <li>elemento </li> <li>elemento </li> <li>elemento </li> </ul> Lista non ordinata: • elemento • elemento • elemento • elemento • …. Lista non ordinata: elemento elemento elemento elemento …. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 3

  10. Liste ordinate: sintassi Listaordinata: primo elemento secondoelemento terzoelemento • Sintassi delle liste ordinate <ol>Lista ordinata: <li> Primo elemento </li> <li> Secondo elemento </li> <li> Terzo elemento </li> </ol> Listaordinata: primo elemento secondoelemento terzoelemento Listaordinata: primo elemento secondoelemento terzoelemento Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 3

  11. List-style-type • Definisce il tipo di punto elenco (immagine, numero o lettera) da usare come marcatore di un list-item. • Si applica agli elementi UL e OL, ma non alle liste di definizione. • Sintassi: • Valori(alcuni): • per liste non ordinate: disc| circle | square | • per liste ordinate: decimal| decimal-leading-zerolower-roman| upper-roman | lower-alpha | upper-alpha • Esempio (inseritelo nel vostro style.css): selettore { list-style-type: valore; } ol { list-style-type: lower-roman; } Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 3

  12. List-style-image • Definisce l'URL di un'immagine da usare come marcatore di un list-item, al posto dei punti elenco predefiniti. • Sintassi: • Esempio (inserite l’icona per la lista non ordinata): Come si potrebbe definire un’altra lista in index.html con un’icona differente? (per esempio icona2.png)? ( definizione di una classe…) Selettore{ list-style-image:url_immagine; } ul{ list-style-image: url(../img/icona.png); } Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 3

  13. outside Elemento box dell’elemento Elemento inside List-style-position • Imposta la posizione del punto elenco rispetto al box in cui è contenuto il testo del list-item. • Sintassi • Valori outside | inside • Esempio (provate le due diverse combinazioni: con inside e con outside) selettore { list-style-position: valore; } ol{ list-style-type:lower-roman; background-color:#ccffcc; list-style-position:inside; } Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 3

  14. Link: sintassi • I link permettono di creare una struttura ipertestuale, fornendo un modo per spostarsi all’interno di un documento e tra documenti diversi. • Sintassi per la creazione di un link ipertestuale <a href=“URL”>Etichetta del link </a> • Attraversol’attributo “title” sipuòfornireunabrevedescrizionechespecifica la destinazione del link. • Esempio: <a href=“http://www.salonedelgusto.it/” title=“sito ufficiale del Salone del Gusto”>Salone del Gusto</a> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 3

  15. Link: CSS • Sintassi per la formattazione dei link ipertestuali • Pseudoclassi: a:link{regola da applicare ai link non selezionati;} a:hover{regola da applicare ai mouse-over link;} a:active{regola da applicare ai link selezionati;} a:visited{regola da applicare ai link visitati;} • Esempio di regole di presentazione per link ipertestuali: a:link{ color:#993366;} a:visited{ color:#333399;} a:hover{ color:#FFFFFF; background-color: #096;} Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 3

  16. Programmadellalezione: XHTML: • Immagini: • Come inserireun’immagine in un file XHTML; CSS: • Proprietà per la formattazionedelleimmagini: • Width, height, border, padding, margin • Proprietà per la gestionediimmaginidisfondo XHTML: • Image Map‏ Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  17. XHTML: Immagini Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  18. Immagine • Fino ad adesso abbiamo visto come formattare il TESTO. • HTML permette di inserire IMMAGINI con il tag <img /> • L’immagine deve essere un file a parte! E’ buona norma creare una cartella apposita contenente tutte le immagini di un sito. • I browser supportano formati delle immagini come • .gif • .jpeg • .bitmap • .png Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  19. Immagine • Il tag IMG ha come attributoobbligatorio “src”: <imgsrc=“pathname dell’immagine” /> • Il pathname e’ il percorso che indica DOVE si trova fisicamente l’immagine da inserire nel sito • Abbiamo due tipi di pathname: • assoluti • relativi Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  20. Immagine • Percorsiassoluti: • Si usano per lo più quando si ha la necessità di fare riferimento a risorse situate in siti esterni. • Per creare un collegamento assoluto ad una risorsa situata in un sito esterno è sufficiente fare riferimento all’URL nella barra degli indirizzi. • Esempio: <imgsrc=“http://www.html.it/foto1.jpg” /> • Per accedere a risorse situate sul computer su cui state lavorando “in locale” è necessario specificare il percorso a partire dalla radice del file system. • Esempio: <imgsrc=“C:\documenti\sito\immagini\foto1.jpg” /> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  21. Immagine Percorsirelativi: • Si usano per fare riferimento a risorselocali. Indicano come raggiungere la risorsa a partiredallacartellacorrente. • Se il file si trova nella stessa directory (cartella…) basta il nome del file • Esempio:<imgsrc=“foto2.jpg” /> • Se il file si trova in una directory diversa occorre indicare cartella/nome file • Esempio:<imgsrc=“img/foto2.jpg” /> • I blank nei nomi dei file si indicano con %20 (meglio rinominare senza spazi (ad es. usare un underscore). • Esempio:<imgsrc=“img/gita%20in%20barca.jpg” /> <imgsrc=“img/gita_in_barca.jpg” /> Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  22. Attributi del tag img • Alt (testo alternativo): viene visualizzato quando il browser non visualizza le immagini: molto utile per garantire l’accessibilità; è un attributo obbligatorio. • Title: descrizione testuale o titolo. Viene visualizzato al passaggio del mouse sull’immagine Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  23. Esercizio 1: inserireimmagini • Inserite nel file galleria.html tre immagini differenti presenti nella cartella album con gli attributi alt e title: • - img1picc.jpg • - img2picc.jpg • - img3picc.jpg Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  24. CSS: proprieta’ delleimmagini Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  25. Dimensioni • Si possono specificare sia nell’HTML (come attributi del tag “img”), sia tramite css – con le proprietà: • width • height Esercizio: • inserite la width per le immagini della galleria pari a 200px; • allineate le immagini al centro della pagina. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  26. Bordi • Per dare un bordo all’immagine (ma non necessariamente solo ad immagini, come abbiamo visto…) si usa la proprieta’ border-style. • I valori possono essere solid, dotted, dashed, double, groove, ridge, inset and outset. • Per vedere le differenze tra i tipi di bordi: http://www.html.it/guide/esempi/css/test/stile_bordi.html Inserite la proprieta’ nel file style.css Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  27. Bordi • Per definire lo spessore del bordo si usa la proprietàborder-width. • Si possono specificare anche separatamente: border-top-width, border-right-width, border-bottom-width e border-left-width. • Infine, per settare il colore del bordo si usa border-color. Inserite la proprieta’ nel file style.css Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  28. Padding e margin • Un’ immagine si può formattare anche utilizzando le proprietà di padding e margin (vedi lezione 2). Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  29. Il box model Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  30. Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  31. E se… aumento padding-right? Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  32. Aumento padding-right Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  33. E se… diminuisco padding-right? Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  34. Diminuisco padding-right Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  35. E se… aumento border-right-width? Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  36. Aumento border-right-width Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  37. E se… aumento margin-right? Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  38. Aumento margin-right Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  39. E se… aumento padding? Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  40. Aumento padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  41. E se… aumento border-width? Margin Border Padding Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  42. Aumento border-width Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  43. Immaginedisfondo • Tramite la proprietàbackground-image si può utilizzare un’immagine come sfondo di un elemento. • Possibilivalori: • none (default) • [URI] • #news { background-image: url(someimage.jpg); } Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  44. Immagineripetutadisfondo • La proprietàbackground-repeat specifica se e in che modo un’immagine di sfondo deve essere ripetuta. • Valori possibili • repeat (default) – ripete l’immagine sia in orizzontale che in verticale. • repeat-x – ripete l’immagine solo in orizzontale. • repeat-y - ripete l’immagine solo in verticale. • no-repeat – non ripetuta, mostrata una volta sola. • #news { background-repeat: repeat-x; } Esercizio: inserire nel body lo sfondo sfondo.png background-image:url(../img/sfondo.png); background-repeat: repeat;

  45. top left top center top right center left center center center right bottom left bottom center bottom right Immaginedisfondo: posizione • La proprietà background-position definisce la posizione (iniziale, nel caso l’immagine sia ripetuta) dell’immagine di sfondo. • Possibili valori: background-position: top center; Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  46. XHTML: Image Map Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  47. Image map • In un documento può essere utile rendere attive delle porzioni di immagini, ossia realizzare dei link ipertestuali con delle parti di immagini. • Esistono due tipi di image maps: • client-side (interpretate dal browser) • server-side (richiedono che l'utente abbia accesso al server e sono in disuso) • Faremo riferimento alle image maps di tipo client-side. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  48. Image map • Un’image map è un’immagine suddivisa in “aree sensibili” che, al click del mouse, si comportano come link. Per es, consideriamo l’immagine contenuta nel file mappa.jpg Clicca qui per aprire la descrizione sulle cucine di strada Clicca qui per aprire la descrizione sul mercato Clicca qui per aprire la descrizione sull’enoteca Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  49. Image map • Per creare le image maps è necessario avere: • 1. l'immagine • 2. una specifica di quali parti sono attive e di quali azioni devono essere svolte quando si clicca su di esse (mappa).  • L'immagine viene caricata con il comando <img /> con l’attributo usemap <img src=“miaImmagine.gif” usemap=“#nomeMappa” /> • Come valore dell’attributo usemap bisogna specificare il nome della mappa a cui l'immagine fa riferimento (che andremo a definire nel seguito) preceduto da “#”. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

  50. Esercizio 2: immagine e usemap • Inserite l’immagine mappa.jpg con l’attributo usemap sotto le tre immagini del file galleria.html <p>Qui sotto trovate invece la mappa del Salone del Gusto (cliccate sulle varie zone per scoprire cosa sono):</p> <p class="center"> <img src="img/mappa.jpg" width="600" alt="Mappa Salone“ usemap=“#mappaSalone” /> </p> • Il valore di usemap e’ il nome che daremo alla mappa (ossia mappaSalone) preceduto dal simbolo #. Corso di Informatica Generale - Laboratorio di XHTML e CSS a.a. 2010/2011 – lezione 4

More Related