Kuvat ja CSS - Luento 10
- Luentotaltiointi
- CSS (Cascading Style Sheets)
- Tyylien määrittäminen
- Kuvat
- Kuvamuodot
- Kuvankäsittelytermistöä
- Kuvat käyttötarkoituksen mukaan
- Kuvien tuottaminen
- Kuvankäsittelyn perustoimintoja
- PDF ja PostScript
- Lisätietoa
Tällä luennolla käsitellään kuvia ja WWW-sivujen ulkoasua.
Luentotaltiointi
- tyovaline10.mp3 14M
- tyovaline10.wmv 128M
- tyovaline10_xvid.avi 165M
CSS (Cascading Style Sheets)
Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia
- Dokumenttien rakenne määritellään XHTML:n avulla.
- Dokumenttien ulkoasu määritellään CSS-tyylilomakkeen avulla.
- Vrt. Wordin tyyleihin
Hyödyt
- Dokumentin rakenne on yksinkertainen.
- Perusdokumenttien tekeminen helppoa.
- Sivuilla on yhtenäinen ulkoasu.
- Ulkoasun määrittämiseen ei mene aikaa.
- Keskitetty ulkoasun päivitys.
Muistettava
- Sivujen tiedot on saatava myös ilman tyylejä!
- CSS-tyylitiedosto on vain ehdotus ulkoasusta!
- Sivut testattava huolellisesti erilaisilla selaimilla!
Esimerkkejä
Tyylien määrittäminen
Tyylien liittäminen dokumenttiin
XHTML-dokumentin otsikkotietoihin (head) seuraava määritys:
<link href="tyylit.css" rel="stylesheet" type="text/css" />
CSS-tiedostoa itse muokkaamalla
Perusperiaate on muuttaa olemassaolevien XHTML-elementtien ulkoasun ominaisuuksia.
Ominaisuuksilla saattaa olla olemassa jotkut alkuarvot (kuten esim. että tausta on valkoinen ja teksti musta body-lohkossa).
Ominaisuuksia voidaan muokata suoraan kirjoittamalla CSS-muotoiseen tekstitiedostoon. Muoto on määritelty CSS-suosituksessa.
Työkaluja
CSS-Syntaksi
tyylinimi { ominaisuus: arvo; }
- Tyylin nimi oltava aina pienellä
- Yhdessä ominaisuudessa voi olla useampia arvoja. Tällöin arvot erotellaan välilyönnillä.
- Ominaisuudet erotellaan toisiltaan puolipisteellä.
- Jos arvossa on yksikkö niin sen on oltava kiinni numerossa.
- Ominaisuuksia ja arvoja ei voi keksiä itse vaan niille on määritelty vaihtoehdot CSS-standardissa. Katso mahdolliset vaihtoehdot esim.
Esimerkki
body { color: black; background-color: white; }
Isompi esimerkki
Tarkemmin CSS:n eri ominaisuuksiin tutustutaan WWW-julkaiseminen-kurssilla.
Tärkeimmät CSS-ominaisuudet
Ominaisuuden nimi | Toiminta | Esimerkki |
---|---|---|
font-family | Käytettävä kirjasin | font-family: Verdana, Arial, sans-serif; |
color | Tekstin väri | color: black; |
background-color | Taustan väri | background-color: #ffffff; |
text-align | Tekstin tasaus | text-align: center; |
margin-left | Vasen marginaali | margin-left: 1%; |
margin-right | Oikea marginaali | margin-right: 1%; |
margin-top | Ylämarginaali | margin-top: 1%; |
margin-bottom | Alamarginaali | margin-bottom: 1%; |
border-left | Vasen raja | border-left: 1px solid black |
border-right | Oikea raja | border-right: 1px solid black |
border-top | Yläraja | border-top: 3px dotted #e0e0e0; |
border-bottom | Alaraja | border-bottom: 3px solid #000000; |
Kuvat
Kuvia tarvitaan kaikkialla
Erilaiset kuvat ja kuvaformaatit sopivat eri käyttötarkoituksiin.
Esim. WWW-sivulle sopiva kuva ei toimi hyvin tulostuksessa
On olemassa paljon erilaisia vapaaseen käyttöön tarkoitettuja kuvapankkeja
Esim. 1000pictures -kuvapankki.
Kuvamuodot
-
Bittikartta - Kuvainformaatio on tallennettuna kuvapisteinä
- Kuvaa suurennettaessa laatu kärsii
-
Vektorigrafiikka - Kuvainformaatio on tallennettuna geometrisina muotoina
- Koon suurentaminen mahdollista tarkkuuden säilyessä.
- Usein pienempi tiedostokoko bittikarttakuvaan verrattuna.
- Ei sovellu valokuvien näyttämiseen.
Kuvankäsittelytermistöä
- Pikseli (engl. pixel) - kuvapiste
- Tietokoneen näytöllä kuva muodostuu kuvapisteistä
- Resoluutio - kuvapisteiden määrä esim. näytöllä 1024 kertaa 768 pikseliä (1024x768).
- DPI (Dots per Inch) - pistettä tuumalle. Tulostuksessa käytetty tarkkuus esim. 300 DPI
- Läpinäkyvyys (engl. transparency)
- Jonkin värin kohdalta tausta näkyy läpi
- Häviöllinen ja häviötön
- Häviöllisessä kuvaformaatissa hukataan kuvainformaatiota tavalla jota silmä ei huomaa. Tuloksena pienempi tiedostokoko
- Häviöttömässä kuvaformaatissa säilyy kaikki kuvainformaatio
- Bittisyvyys - kuvan esittämien värien lukumäärä.
Bittejä 2^ Värien määrä 1 2^1 2 - mustavalkoinen 8 2^8 256 24 2^24 16 miljoonaa - täysvärit
Kuvatiedoston koko
Kuvatiedoston kokoon vaikuttavat seuraavat asiat:
- Kuvan värien lukumäärä.
- Kuvan fyysinen koko (kuvapisteiden määrä, pituus kertaa leveys).
- Käytettävä kuvaformaatti eli tiedostomuoto.
Kuvaformaatteja
TIFF
- Soveltuu kuvaoriginaalien säilyttämiseen.
- Selaimet eivät tue
BMP
- Windowsin oma bitmap-formaatti
- Selaimet eivät tue
- Ei pakkaa tietoa. Vie tilaa useita megatavuja!
PNG
- Käytetään kuvaoriginaalien säilyttämiseen.
- Käytetään viivapiirroksien ja kaavioiden esittämiseen WWW:ssä.
- Häviötön.
- Tukee läpinäkyvyyttä.
JPEG
- Käytetään valokuvien näyttämiseen WWW:ssä.
- Pakkausaste voidaan määritellä.
- Täysvärit.
- Ei tue läpinäkyvyyttä.
- Häviöllinen (lossy), joten informaation palauttaminen ei onnistu.
WMF (Windows MetaFile) ja EMF (Enhanced Windows Metafile)
- Kuvan tieto tallentaan geometrisinä muotoina.
- Käytetään usein esim. leikepöydän kautta siirrettävissä kuvissa
Kuvat käyttötarkoituksen mukaan
Seuraavassa muutamia vinkkejä kuvien käyttämiseen.
- Kuvien säilytys
- Suuri koko.
- TIFF- tai PNG-formaatti
- WWW-sivuille tulevat kuvat
- Käytä mahdollisimman pieniä ja ydinasian sisältäviä kuvia.
- Käytä sivuilla pieniä kuvia (engl. thumbnail), joista mahdollisuus päästä suurempaan kuvaan.
<p> <a href="isokuva.jpg"> <img src="pienikuva.jpg" alt="Ison kuvan (100K) thumbnail" /> </a> </p>
- 600x400 kokoinen kuva mahtuu näytölle lähes aina.
- Valokuvat
- JPEG-formaatti.
- Mahdollisimman suuri pakkausteho
- Kaaviot
- Värimäärä mahdollisimman pieneksi.
- PNG-formaatti.
- Tulosteissa
- Mahdollisimman tarkka.
- Säädetään DPI-asetusta (Dots per Inch) tulostuskoon mukaan.
- Formaatti kannattaa kuitenkin olla esim. PNG tai EMF/WMF
- Jos dokumentti ei ole tarkoitettu tulostettavaksi vaan esim. verkkojakeluun niin silloin kuvat kannattaa pienentää ja pakata.
Kuvien tuottaminen
Useimmiten käytetty grafiikka on joko kaavioita tai digikameralla kuvattuja valokuvia
- Kaavioita ja diagrammeja voi piirtää Wordillä, Powerpointilla, Excelillä tai jollakin erityisellä kaavioiden piirtämiseen tarkoitetulla ohjelmalla
- Kaaviokuvat voi kopioida Word-dokumenttiin suoraan leikepöydän kautta
- Muista tallentaa alkuperäinen kuva
- Tee liittäminen joko käytetyn työkalun omassa muodossa tai Enhanced Metafile -muodossa (vektorigrafiikkana)
- Jos mahdollista niin liitä linkkinä jolloin muutokset alkuperäiseen kuvaan heijastuvat suoraan Word-dokumentissa olevaan kuvaan
Kuvankäsittelyn perustoimintoja
Käsiteltäviä esimerkkikuvia :
Isot kuvat kannattaa kopioida aina ensin C:\Mytemp-hakemistoon (tai vastaavaan) eikä käyttää verkkolevyltä.
Käsittelytoimenpiteitä digikameran kuville:
- Rajaus (engl. crop)
- Väritasapainon korjaus
- Valotuksen korjaus
- Koon muuttaminen (engl. resize tai resample)
- Terävöitys
PDF ja PostScript
Näitä tiedostomuotoja käytetään, kun halutaan teksti jaettavaksi juuri sellaisessa muodossa kuin millaisena se tulostuisi.
- PDF vaatii Adobe Acrobat Readerin
- Raskas formaatti, vie tilaa ja tehoa
- Tekstiä ei voi aina kopioida leikepöydällä jos tieto viety PDF:ään kuvamuodossa.
- PS vaatii esim. Ghostview-ohjelman.
Word-dokumentti (.doc) PDF:ksi
Ghostview
- Asennetaan PostScript-tulostimen ajuri.
- Tulostetaan tiedosto PS-muotoiseen (tai PRN-päätteiseen) tiedostoon.
- Avataan Ghostview:ssä ja tallennetaan PDF:ksi.
OpenOffice Writer
- Käytetään Export to PDF-toimintoa.
- Word-dokumentteja saa avattua OpenOfficella, josta ne voi viedä PDF:ksi!
Lisätietoa
Ohjelmistoja kuvien käsittelyyn
- GIMP Ilmainen
- Paint Shop Pro 7.0 30 päivän testiversio
- Photoshop
- Photo-Paint
- Macromedia Fireworks
- Irfanview Ilmainen
Käyttäjien kommentit