Kuvat ja CSS

• Luentotaltiointi
• CSS (Cascading Style Sheets)
  • Hyödyt
  • Muistettava
  • Esimerkkejä
• Tyylien määrittäminen
  • Tyylien liittäminen dokumenttiin
  • CSS-tiedostoa itse muokkaamalla
  • Työkaluja
  • CSS-Syntaksi
  • Tärkeimmät CSS-ominaisuudet
• Kuvat
• Kuvamuodot
• Kuvankäsittelytermistöä
  • Kuvatiedoston koko
  • Kuvaformaatteja
• Kuvat käyttötarkoituksen mukaan
• Kuvien tuottaminen
• Kuvankäsittelyn perustoimintoja
• PDF ja PostScript
  • Word-dokumentti (.doc) PDF:ksi
• Lisätietoa
  • Ohjelmistoja kuvien käsittelyyn

Tällä luennolla käsitellään kuvia ja WWW-sivujen ulkoasua.

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ä

• CSS Zen Garden

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

• EditCSS
• Web developer extension

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.
  • CSS1:n ominaisuudet

Esimerkki

body {
  color:  black;
  background-color:  white;
}

Isompi esimerkki

Esimerkki CSS-tiedostosta

Tarkemmin CSS:n eri ominaisuuksiin tutustutaan WWW-julkaiseminen-kurssilla.

Tärkeimmät CSS-ominaisuudet

Kuvat

Kuvia tarvitaan kaikkialla

Erilaiset kuvat ja kuvaformaatit sopivat eri käyttötarkoituksiin.

Esim. WWW-sivulle sopiva kuva ei toimi hyvin tulostuksessa

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

Kuvaformaattien vertailua

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 :

• Kaavio
• Valokuva

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

• Kuvat & WWW
• Grafiikkaformaat ja niiden käsittely

Ohjelmistoja kuvien käsittelyyn

• GIMP Ilmainen
• Paint Shop Pro 7.0 30 päivän testiversio
• Photoshop
• Photo-Paint
• Macromedia Fireworks
• Irfanview Ilmainen