Kuva xhtml-sivulla. Mirja Jaakkola

Transkriptio

1 Kuva xhtml-sivulla Mirja Jaakkola

2 Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri selaimilla 9. Tekstin vieritys kuvan suhteen 10.Taustakuva 11.Taustakuvan paikka 12.Taustakuvan toistaminen sivulla 13.Esimerkkejä CSS-koodista taustakuvalle 14.background-ominaisuus 2

3 Kuva www-sivulla Kuvalla voi olla erilaisia tehtäviä www-sivulla: kuva ohjaa lukijan huomion sivun sisältöön ja herättää lukijan mielenkiinnon kuva voi havainnollistaa asiaa kuva voi luoda tunnelman sivulle tai kertoa tarinan kuva voi katkaista pitkän tekstin kuva voi toimia symbolina tai logona kuva voi olla linkki, painonappi tai toimia listan merkkinä Kuvatekstin avulla voidaan kertoa tilannekuvan merkitys lukijalle. Www-sivulla käytettävien kuvien tiedostomuodot ovat: JPEG: valokuvat, liukuvärit GIF: kuville, joissa on suuria samansävyisiä väripintoja, kuvassa max 256 väriä, grafiikalle, esim. logot, läpinäkyvät kuvat PNG: kehitetty korvaamaan jpeg- että gif-kuvaformaatin eli esim. liukuvärit, läpinäkyvät kuvat. Huom. kaikki vanhemmat selaimet eivät tue png-kuvan kaikkia ominaisuuksia esim. läpinäkyvyyttä. 3

4 img-elementti Kuva liitetään www-sivulle xhtml-koodissa img-elementillä img-elementti on inline-elementti, joka tarkoittaa sitä, että et voi laittaa img-elementtiä suoraan body-elementin alle vaan img-elementti on aina laitettava jonkun lohko-elementin sisälle esim. div, p img-elementti on tyhjä elementti eli elementillä ei ole sisältöä <img src= nelli.jpg alt= kuva Nellistä /> img-elementti tarvitsee aina seuraavat kaksi attribuuttia (siis pakollisia): src: kertoo sivulle liitettävän kuvan nimen alt: vapaamuotoinen lyhyt kuvaus kuvasta Muita img-elementin attribuutteja ovat height (korkeus) ja width (leveys): selain varaa k.o. tilan kuvalle ja lataa ensin www-sivun muun sisällön, jolloin kuvia odotellessa lukija voi jo lukea sivun tekstisisältöä. longdesc (pitkä kuvaus): linkki kuvasta kertovaan tekstiin ismap ja usemap: kuvakarttojen tekeminen 4

5 Kuvan koko xhtml-sivu ei saa olla liian raskas latautumaan. Sivulla olevien kuvien tiedostokoot (kilotavut) vaikuttavat www-sivun latautumiseen netissä. Rajaa kuvat sopivan kokoisiksi ennen kuin tuot ne www-sivulle. Jos ilmoitat xhtml-koodissa kuvan korkeuden ja leveyden varaa selain k.o. tilan kuvalle ja lataa ensin www-sivun muun sisällön, jolloin kuvia odotellessa lukija voi jo lukea sivun tekstisisältöä. <div> <img src= nelli.jpg alt= kuva Nellistä height= 300 width= 400 /> </div> Kuva skaalautuu nyt annettujen arvojen mukaan ja ne voivat kaventaa tai leventää kuvaa jos korkeuden ja leveyden suhde ei pysy samana. Voit antaa vain toisen arvon, jolloin selaa pitää mittasuhteen alkuperäisenä. Kuvan korkeuden ja leveyden voi antaa myös CSS:n avulla. 5

6 Kuvan keskitys vaakasuoraan & kuvateksti Koska kuva on inline-elementti, vaikuttaa kuvaan css-määritys text-align (arvot left, center, right). Esim. kuvan keskittämisestä: <div style= text-align:center > <img src= nelli.jpg alt= kuva Nellistä /> </div> Voit lisätä kuvatekstin suoraan kuvan alle esim. div-elementillä: <div style= text-align:center > <img src= nelli.jpg alt= kuva Nellistä /> <div>kuva Nellistä kesältä 2009</div> </div> 6

7 Kuvan tasaus pystysuoraan Määritä tekstin ja kuvan pystysuora suhde CSS:n avulla vertical-alignominaisuudella, jonka arvoja voivat olla: baseline middle sub super text-top text-bottom top bottom Tasaa kuvan samalle tasolle tekstirivin alareunan kanssa (oletusarvo). Tasaa kuvan pystysuoraan tekstin keskitasolle. Tasaa kuvan tekstin alaindeksin tasolle. Tasaa kuvan tekstin yläindeksin tasolle. Tasaa kuvan ylälaidan tekstisisällön ylälaidan tasolle. Tasaa kuvan alalaidan tekstisisällön alalaidan tasolle. Tasaa kuvan ylälaidan tekstirivin ylälaidan tasolle Tasaa kuvan alalaidan tekstirivin alalaidan tasolle Lisäksi voit antaa arvon pituusyksikkönä (positiivinen luku nostaa, negatiivinen laskee) tai prosenttina suhteessa tekstiriviin. 7

8 Esimerkki: Pystysuoratasaus eri selaimilla Eri selaimet tulkitsevat hieman erilailla vertical-align ominaisuutta, esim. IE 7: Firefox 2: 8

9 Tekstin vieritys kuvan suhteen Voit kiertää kuvan tekstillä antamalla float-ominaisuuden, jonka arvoina voi olla left tai right. Padding-arvolla saat tyhjää tilaa tekstin ja kuvan välille. <div> <img src="nelli.jpg" alt="nelli" style="vertical-align:top; float:left; padding-right:5px"/> <div> Nelli on Cavalier King Charlesin spaniel. Nellin väri on blenheim. Nelli on seurakoira.</div> </div> <div> <img src="nelli.jpg" alt="nelli" style="vertical-align:top; float:right; padding-left:5px"/> <div> Nelli on Cavalier King Charlesin spaniel. Nellin väri on blenheim. Nelli on seurakoira.</div> </div> 9

10 Taustakuva Taustakuva toimii yleensä sivulla koristeena, joka tukee sivun sisältöä. Taustakuva usein haittaa tekstin lukemista, jos taustakuva sijaitsee tekstin takana. Jos lisäät taustakuvan www-sivulle huolehdi riittävästä kontrastista taustan ja tekstin suhteen. Hillityllä taustakuvalla voit luoda yhtenäisen ilmeen sivustollesi. Taustakuvan voi lisätä mille elementille vain. Voit lisätä sivulle taustakuvan CSS:n avulla background-imageominaisuudella, jonka url-arvo kertoo taustakuva sijainnin suhteessa csstiedostoon. Jos et aseta muita taustakuvaan liittyviä arvoja, toistuu taustakuva sivulla koko sivun alueella. body {background-image: url(tausta.jpg);} h1 {background-image: url(kuvat/otsikkotausta.gif);} 10

11 Taustakuvan paikka Taustakuvan paikan elementin sisällä voit määrittää background-position ominaisuudella. Taustakuvan toiston aloituspaikka kerrotaan joko vain vaakasuorana siirtymänä (jolloin pystysuoran arvo on oletuksena 50%) tai sekä vaakaettä pystysuorana siirtymänä elementin vasemmasta yläkulmasta alkaen. Jos molemmat arvot ilmoitetaan tulee ensiksi vakaasuora ja sitten välilyönnin jälkeen pystysuora siirtymäarvo. Siirtymäarvo voidaan esittää: Sanana vaakasuorassa siirtymässä: left, center, right pystysuorassa siirtymässä: top, center, bottom Pituusmittana tai prosenttilukuna 11

12 Taustakuvan toistaminen sivulla Yhdelle elementille voit lisätä vain yhden taustakuva, jota voit toistaa useita kertoja. Taustakuvan toistuminen kerrotaan background-repeat-ominaisuudella: repeat Toistuu vaaka- ja pystysuorassa täyttäen koko elementin (oletusarvo) repeat-x repeat-y no-repeat Toistuu vaakasuorassa Toistuu pystysuorassa Taustakuva tulee vain yhden kerran elementiin inherit Periytyy ympäröivältä elementiltä Background-attachment ominaisuudella voit määrittää taustakuvan sivun mukana liikkuvaksi tai paikoilleen scroll fixed Taustakuva liikkuu sivun mukana sivua scrollattaessa Taustakuva pysyy kiinteästi paikoillaan vaikka sivua vieritetään inherit Periytyy ympäröivältä elementiltä 12

13 Esimerkkejä CSS-koodista taustakuvalle Taustakuva liitetään sivulle ja kuva toistuu koko sivun: body {background-image: url(tausta.gif); } Taustakuva toistuu yläreunassa vaakasuunnassa: body {background-image: url(tausta.gif); background-repeat: repeat-x;} Taustakuva toistuu vasemmassa reunassa pystysuunnassa: body {background-image: url(tausta.gif); background-repeat: repeat-y; background-position: left;} Taustakuva toistuu yhden kerran vasemmassa reunassa 200px yläreunasta: body {background-image: url(tausta.gif); background-repeat: no-repeat; background-position: left 200px;} 13

14 Background-ominaisuus Antamalla pelkän background-ominaisuuden, voit antaa yhdellä kertaa kaikki seuraavat ominaisuudet: background-color background-image background-position background-repeat background-attachment Voit kertoa ominaisuudet missä tahansa järjestyksessä. Eri ominaisuudet erotetaan toisistaan välilyönnillä. Kaikkia ominaisuuksien arvoja ei tarvitse kirjoittaa. background: url(tausta.jpg); background: red url(tausta.jpg) no-repeat top right; Lähde: 14