Kuvat ja CSS - Luento 12
- 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
- tyovaline12.wmv 102M
- tyovaline12.mp3 32M
- tyovaline12.avi 199M
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 - kuvaformaatin tallentamien 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:
- Kuvaformaatin tallentamien värien lukumäärä. Huom. kuva voi olla mustavalkoinen mutta jos se tallennetaan täysvärimuodossa niin värejä tallentuu 16 miljoonaa...
- 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.
- Kuvaoriginaalien 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. kts. The Myth of DPI
- Formaatti kannattaa 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
Pdf-ohjeistusta aloittelijasta edistyneeseen
PDF Creator
- Toimii yliopiston mikroluokissa. Valitse tulostimeksi PDF Creator
- Voidaan asentaa myös kotikoneeseen
OpenOffice Writer
- Käytetään Export to PDF-toimintoa.
- Word-dokumentteja saa avattua OpenOfficella, josta ne voi exportoida PDF:ksi!
Käyttäjien kommentit
Tuo oli hauska, miten voi sotkea koneen toiminnan? Hyvä keino siihen on "päivittää" BIOS windowsilla. Päivittämisellä taarkoitan siis että vanhasta tulee uusi... tai joku ihan muu esim. asusin emosta tuleekin Intelin... Nimim. Kokemusta on... Toki vahingos... Yks kirjain meni väärin...
Vaikuttavat erittäin hyviltä, pitänette linkin voimassa syksylläkin?
Olemme pitäneet sivut avoimena henkilökohtaiseen käyttöön, ja näin on tarkoitus olla jatkossakin. Tarkemmin käyttöoikeuksista kts. http://appro.mit.jyu.fi/copyright.html
Hyvät sivut! En pääse tuonne nyysseihin, saan vain ilmotuksen ettei ole lupaa osallistua :(
Virtalähde on mainittu vain kerran kun luetellaan tarvittavia osia. Olisi aiheellista sanoa sen tuottaman melun tärkeydestä ja laittaa se tietenkin myös hintataulukkoon mukaan.