CSS ja WWW-grafiikka

• Luentotaltiointi
• Kertausta edellisluennon aiheista
• CSS (Cascading Style Sheets)
  • Periaate
  • Hyödyt
  • Muistettava
  • Esimerkkejä
• Tyylien määrittäminen
  • Syntaksi
  • Tyylien liittäminen dokumenttiin
  • Pituuksien määrittäminen
  • Sivuilla käytettävät värit
  • Tyylien aliluokat (engl. selectors)
• Tärkeimmät CSS-ominaisuudet
  • Esimerkkejä
• Kuvat
  • Kuvatiedoston koko
  • Kuvankäsittelytermistöä
  • Vektorigrafiikka
  • Bittikarttaformaatit
  • WWW-sivuille tulevat kuvat
  • Tulostettaviin dokumentteihin tulevat kuvat
  • Kuvankäsittelyn perustoimintoja
  • Kuvat käyttötarkoituksen mukaan
  • Ohjelmistoja kuvien käsittelyyn
  • Lisätietoa kuvista ja kuvankäsittelystä

Tällä luennolla käsitellään lyhyesti WWW-sivujen ulkoasun muokkaamista CSS-kielen avulla sekä kuvankäsittelyn perusteita WWW:hen tuotettavan grafiikan kannalta.

Kertausta edellisluennon aiheista

• Frontpage
• Harkkatarkistin
• Tärkeimmät xhtml-elementit
• Harjoitustyöstä kysytyt asiat: puuttuva kirjasintyyppi, puuttuva tasaus

CSS (Cascading Style Sheets)

Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia

Periaate

• Dokumenttien rakenne määritellään HTML: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ä!
• Tyylit eivät saa häiritä sivujen käyttäjiä!
• Sivut testattava huolellisesti erilaisilla selaimilla!

Esimerkkejä

• CSS Zen Garden

Tyylien määrittäminen

Perusperiaate on muuttaa olemassaolevien XHTML-elementtien ominaisuuksia.

Syntaksi

tyylinimi {

  ominaisuus:  arvo;

}

Esimerkki

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

Tyylien liittäminen dokumenttiin

HTML-dokumentin otsikkotietoihin seuraava määritys:

  <link href="tyylit.css" rel="stylesheet" type="text/css"  />

Erilliseen tyylitiedostoon (tyylit.css) seuraava määritys:

h1 {
  color: red;
  text-align: center;
}

Pituuksien määrittäminen

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina. px (pikseli) yksikköä voi käyttää reunusten ja marginaalien määrittelyssä.

h1 {
	margin-top: 1%;
}
h2 {
	border: 1px solid black;
}

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Helpoin tapa on käyttää prosentteja. Esimerkin värisekoituksessa on punaista 90%, vihreää 30% ja sinistä 60%.

p {
	background-color: rgb(90%, 30%, 60%);
}

Linkkejä värien määrittämisestä:

• HTMLHelp, "RGB Color Values"
• Color scheme generator 2

Käyttöliittymän visuaalisesta suunnittelusta (Minja Revonkorpi). Sopii myös hyvin ohjenuoraksi nettisivujen suunnittelussa.

Tyylien aliluokat (engl. selectors)

Aliluokat täytyy aina liittää rakenteellisesti oikeaan elementtiin.

class-attribuutti

Seuraavassa esimerkki class-attribuutin käytöstä

<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus </p>

Esimerkki aliluokan lisäämisestä tyylitiedostoon.

.varoitus {
  background-color: white;
  color: red;
}

Tärkeimmät CSS-ominaisuudet

Esimerkkejä

Hyviä apuvälineitä CSS:n kirjoittamiseen ovat mozillan EditCSS ja Web developer extension

Esimerkki css-tiedostosta

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

Kuvat

Kuvatiedoston koko

Kuvatiedoston kokoon vaikuttavat seuraavat asiat:

• Kuvan värien lukumäärä.
• Kuvan fyysinen koko (pituus kertaa leveys).
• Käytettävä kuvaformaatti.

Kuvankäsittelytermistöä

• Pikseli (engl. pixel) - kuvapiste
• Resoluutio - kuvapisteiden määrä esim. 1024 kertaa 768 pikseliä (1024x768).
• Bittisyvyys - kuvan esittämien värien lukumäärä (esim. 24 bit - 16 milj. väriä).

  • Bittejä	2^	Värien määrä
    1	2^1	2
    2	2^2	4
    4	2^4	16
    8	2^8	256
    15	2^15	32768
    16	2^16	65536
    24	2^24	16 miljoonaa

• Indeksoidut värit(engl. indexed colors) ja täysvärit eli 16 miljoonaa väriä
• Lomitus (engl. interlacing) - kuva tarkentuu tasoittain näytölle. esim. lomitettu kuva vs. ei-lomitettu kuva
• Läpinäkyvyys (engl. transparency) - jonkin värin kohdalta tausta näkyy läpi.

  

  

• Häviöllinen (engl. lossy) ja häviöttömät kuvaformaatti

Vektorigrafiikka

• Kuvan tieto esitetään matemaattisina lausekkeina.
• Koon suurentaminen mahdollista tarkkuuden säilyessä.
• Usein pienempi tiedostokoko bittikarttakuvaan verrattuna.
• Ei sovellu valokuvien näyttämiseen.

Bittikarttaformaatit

• Kuva esitetään bittikarttana, joka koostuu pikseleistä.
• Kuvan värien määrä riippuu kuvapikselin tiedon pituudesta (esim. 8 bittinen kuva 256 väriä)
• Kuvan koko on karkeasti pikseleiden lukumäärä kertaa värien bittisyys (+lisainfot).
• Kuvia ei voi suurentaa kunnolla.

JPEG

• Käytetään valokuvien näyttämiseen WWW:ssä.
• Pakkausaste voidaan määritellä. (Pakkausasteiden vertailu)
• 16 miljoonaa väriä (24 bit).
• Tukee lomitusta (progressive jpeg).
• Ei tue läpinäkyvyyttä.
• Häviöllinen (lossy), joten informaation palauttaminen ei onnistu.
• Selaimet tukevat formaattia hyvin.

PNG

• Käytetään viivapiirroksien ja kaavioiden esittämiseen WWW:ssä.
• Käytetään myös kuvaoriginaalien säilyttämiseen.
• Tukee lomitusta.
• Tukee läpinäkyvyyttä (alpha channel).
• Lisenssivapaa pakkausalgoritmi, jossa ei menetetä tietoa.
• GIF-formaattia parempi pakkaustapa.
• Tulee korvaamaan GIF-formaatin.

GIF

• Käytetään viivapiirroksissa ja kaavioissa.
• Tukee lomitusta (interlaced gif).
• Tukee "taustavärin" läpinäkyvyyttä.
• Tukee animaatioita.
• Maksimissaan 256 väriä (8 bit).
• Lisenssimaksuja vaativa pakkausalgoritmi.

BMP

• Windowsissa yleisesti käytettävä kuvaformaatti.
• Kuvat yleensä huomattavan suuria.
• Selaimet eivät tue BMP-formaattia.

TIFF

• Soveltuu kuvaoriginaalien säilyttämiseen.
• Selaimet eivät tue TIFF-formaattia.

WWW-sivuille tulevat kuvat

Kuvia laitettaessa WWW-sivuille kannattaa muistaa seuraavat asiat:

• Käytä mahdollisimman pieniä ja ydinasian sisältäviä kuvia.
• Käytä sivuilla pieniä kuvia (engl. thumbnail), joista mahdollisuus päästä suurempaan kuvaan.
• Merkitse suuremman kuvan yhteydessä kuvan koko linkkitekstin yhteyteen.
• 600x400 kokoinen kuva mahtuu näytölle lähes aina.
• Kaaviokuvissa värimääräksi kannattaa valita pienin mahdollinen.
• Valitse tilanteeseen oikea formaatti.(formaatin ja värimäärän vaikutus kuvan kokoon)

Tulostettaviin dokumentteihin tulevat kuvat

• Määritä sopiva DPI (Dots per Inch) tulostuskoon mukaan

Kuvankäsittelyn perustoimintoja

• Rajaus (engl. crop)
• Kääntäminen (engl. rotate)
• Koon muuttaminen (engl. resize tai resample)
• Erilaiset korjaukset.
• Efektit.

Kuvat käyttötarkoituksen mukaan

Seuraavassa muutamia vinkkejä kuvien käyttämiseen.

• Kuvien säilytys
  • Suuri koko.
  • TIFF- tai PNG-formaatti
• WWW-sivuille tulevat valokuvat
  • JPEG-formaatti.
  • Mahdollisimman suuri pakkausteho
• WWW-sivuille tulevat kaaviokuvat
  • Värimäärä mahdollisimman pieneksi.
  • PNG-formaatti.

Ohjelmistoja kuvien käsittelyyn

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

Yllämainittujen graafisella käyttöliittymällä varustettujen ohjelmien lisäksi voi käyttää myös komentoriviliittymällä toimivaa ImageMagick-ohjelmistoa, joka on täysin ilmainen ja löytyy useimmille eri käyttöjärjestelmille. Jukka Korpela on kirjoittanut pikaohjeen ImageMagickin asentamisesta Windowsiin. ImageMagic löytyy valmiiksi asennettuna atk-keskuksen st-sarjan (silmu, itu, verso) linux-koneista ja www-palvelimesta.

Lisätietoa kuvista ja kuvankäsittelystä

• Kuvat & WWW
• Grafiikkaformaat ja niiden käsittely