WWW-sivun ulkoasu ja WWW-grafiikka - demo 6

• Mallivideot
• CSS
• WWW-grafiikka
• Kaaviokuvat
• Mustavalkokuvat
• Läpinäkyvät kuvat
• Edistyneempää CSS:ää

Näissä demoissa tutustutaan CSS:n perusteisiin ja opetellaan tärkeimmät asiat www-grafiikkaan tarvittavasta kuvankäsittelystä ja kuvaformaateista.

CSS

1. Tee edellisten demojen tehtävät loppuun ennen seuraavien tehtävien aloittamista.
2. Käynnistä HTML-kit ja avaa siihen edellisissä demoissa tekemäsi XHTML-dokumentti. Luo myös uusi tyhjä tiedosto ja kopioi siihen kaikki teksti css-malli-tiedostosta. Tallenna uusi tiedosto tyyli1.css-nimellä samaan kansioon missä xhtml-dokumenttisi on.
3. Lisää XHTML-dokumenttisi head-osaan seuraavanlainen rivi:

   <link title="Demotyyli" rel="StyleSheet" href="tyyli1.css" type="text/css" />

   Tämä rivi ehdottaa, että selain voi esittää XHTML-dokumenttisi tyyli1.css-tiedoston tyylimääritysten mukaan. Tallenna XHTML-dokumenttisi.
4. Kokeile selaimella miltä XHTML-dokumenttisi näyttää.
5. Muuta HTML-kitillä tyylitiedoston määrityksiä seuraavilla tavoilla. Tallenna jokaisen muutoksen jälkeen ja kokeile selaimella miten XHTML-dokumentin ulkoasu muuttuu. Esimerkkejä ja neuvoja CSS-ominaisuuksista löytyy luentosivulta , kurssimonisteesta tai tietoverkot työvälineenä -kurssin css-materiaalista.
   • Muuta koko sivun taustaväri valkoiseksi (body-elementin background-color-ominaisuus)
   • Määritä koko sivuston peruskirjasimeksi Verdana (body-elementti ja font-family).
   • Määritä toisen tason otsikoille marginaalia 2em:n verran (h2-elementin margin-ominaisuus)
   • Määritä toisen tason otsikoille 2 pikseliä leveä kiinteä (solid) raja mustalla värillä oikeaan laitaan (border-right) ja alalaitaan (border-bottom). Määritä yhtä leveä kiinteä raja harmaalla ylös (border-top) ja vasemmalle (border-left). Voit katsoa mallia h3-tyylistä johon on määritelty raja alalaitaan.

WWW-grafiikka

1. Tallenna mallikuva editoitavaksi C:-asemalle MyTemp-hakemistoon. Älä tallenna U:-asemalle, koska verkkolevyltä suurien kuvien editoiminen on hyvin hidasta.
2. Käynnistä Irfanview (Start|Programs|Irfanview|Irfanview 3.80).
3. Avaa äsken tallentamasi kuva Irfanviewilla.
4. Käännä kuva oikeaan asentoon

   Kokeile Image|Rotate Left ja Image|Rotate Right -komentojen toimintoja.

5. Rajaa kuvasta haluamasi alue.
   1. Rajaa hiirellä kuvasta haluamasi alue
   2. Tee kuvan lopullinen rajaus Edit|Crop to selection -valinnalla.
6. Pienennä kuva sopivaan kokoon (max. 800x600).
   1. Kuvan kokoa voit muuttaa valinnalla Image|Resize/Resample
   2. Muuta kuvan kokoa joko prosentteina tai pikseleinä sopivaksi
   3. Varmista, että Preserve aspect ratio-kohta on valittuna, koska muuten kuvan suhteet voivat vääristyä.
   
7. Terävöitä kuvaa tarvittaessa.

   Terävöinti tapahtuu valinnalla Image|Sharpen

8. Tallenna kuvan muokattu versio PNG-muodossa. PNG-formaatti on häviötön ja kuvaa voidaan edelleen muokata ilman laadun katoamista. Älä tallenna alkuperäisen kuvan päälle vaan tallenna uudella nimellä! Alkuperäisen kuvan päälle ei koskaan kannata tallentaa kuvaa muutosten jälkeen.
9. Tallenna kuva WWW-käyttöä varten JPG-muodossa.

   Valokuvia käytetään WWW:ssä aina JPG-muodossa. JPG-muodossa tallennettua kuvaa ei kannata enää muokata vaan myöhemmin tarvittavat muutokset pitää tehdä PNG-muotoiseen kuvaan ja tallentaa aina tarvittaessa uusi WWW-versio JPG-muodossa.

   

   Valitse oikea formaatti Save as type -kohdasta.

10. Formaatin valinnan jälkeen pääset muokkaamaan kuvan asetuksia options-nappulalla aukeavasta dialogista. Tallentaessasi jpg-muodossa muista säätää kuvan pakkausteho mahdollisimman suureksi ilman, että kuvan laadussa on silminhavaittavaa heikentymistä.

    

    Agoranetin koneissa Irfanview ei kuitenkaan toimi täydellisesti ja jpg:n pakkaustehosäätö ei oikeasti muutu vaikka sitä tallentaessa säätäisikin :-( Kokeilkaa kotikoneissa hakemalla itsellenne Irfanview.
11. Käy kokeilemassa JPG-pakkauksen toimintaa Online JPEG Compressor -palvelulla, jonka avulla voit optimoida JPG-kuvan mahdollisimman pieneksi.
    • Anna ohjelmalle käsiteltävän kuvan osoitteeksi: http://appro.mit.jyu.fi/2003/syksy/tyovaline/demot/demo6/malli.jpg
    • Voit kokeilla osoitetta: http://i.cnn.net/cnn/2003/US/Northeast/10/15/ferry.accident/top.interior.ap.jpg
    • Tai osoitetta http://www.photo.net/photodb/image-display?photo_id=1727572&size=md
12. Voit kokeilla myös jpegwizard-palvelua jolle voit antaa aiemmin demoissa käsittelemäsi jpg-kuvan.

Kaaviokuvat

• Tallenna seuraava kaaviokuva C:\MyTemp-kansioon.
  • Esimerkkikaavio
• Jos kyseessä on jokin muu kuin valokuva eli esimerkiksi piirros- tai kaavio-tyyppinen kuva niin kannattaa pudottaa kuvassa käytettävien värien määrä minimiin.
  1. Tiettyyn värimäärään muuttaminen onnistuu valinnalla Image|Decrease Color Depth
  2. Colors-kohtaan valitse haluamasi värimäärä. Valitse kokeilemalla mahdollisimman vähäinen määrä värejä joilla kuva vielä näyttää hyvältä. Kerran poistettuja värejä ei voi palauttaa kuin undo-toiminnolla tai avaamalla kuva uudelleen.
  
• Tallenna kuva PNG-muodossa ja myös GIF-muodossa.
• Kokeile saako GifCruncher-ohjelma optimoitua edellä tallentamaasi GIF-versiota vieläkin pienemmäksi.

Mustavalkokuvat

Mustavalkokuvat tulevat monesti aivan vahingossa tallennettua turhan monen värin paletilla ja vievät siten turhaan tilaa. Kopioi seuraava kuva. Vähennä värimäärä kahteen. Tallenna kuva gif-muodossa.

• Mustavalkoinen kuva

Läpinäkyvät kuvat

Usein halutaan että sivun taustaväri näkyy läpi kuvan taustavärin kohdalta jolloin kuvaa voi käyttää helposti melkein minkävärisellä sivulla tahansa. PNG- tai GIF-tiedostomuodot tukevat myös läpinäkyvyyttä. Läpinäkyvyyden määrittely onnistuu helposti kunnollisilla kuvankäsittelyohjelmilla esim. Paint Shop Pro. Agoranetin koneista ei kuitenkaan löydy sopivaa ohjelmaa (valittakaa mikrotuelle) joten joudumme käyttämään muita konsteja:

• Muuta kaaviokuva kaavio.gif läpinäkyväksi seuraavien ohjeiden mukaisesti TransWeb-palvelun avulla.
• Anna ohjelmalle kuvan osoite (URL). Linkin osoitteen voit kopioida leikepöydälle hiiren oikealla näppäimellä aukevan valikon avulla
• TransWeb hakee kuvan näkyviin ja odottaa että klikkaat kuvasta sellaista kohtaa jossa esiintyy läpinäkyväksi haluamasi väri.
• Tallenna (klikkaa hiiren oikeaa näppäintä kuvan päällä) läpinäkyvä kuva haluamallesi nimelle U:-asemalle.

Edistyneempää CSS:ää

1. Lisää HTML-dokumenttiisi yksi uusi tekstikappale (p) haluamaasi kohtaan.
2. Lisää tekstikappaleen sisään img-elementti, jolla liität äsken muokkaamasi kuvan mukaan dokumenttiin. img-elementtiin liittyvät seuraavat ominaisuudet:
   • src-ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistorakenteessa dokumentin kanssa. esim.

     <img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietokone ja tietoverkot työvälineenä kurssilla" title="Luento 1" />

   • alt-ominaisuus kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia. esim.

     <img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietokone ja tietoverkot työvälineenä kurssilla" title="Luento 1" />

   • title-ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle. esim.

     <img src="kuva.jpg" alt="Tommi Lahtonen luennoi tietokone ja tietoverkot työvälineenä kurssilla" title="Luento 1" />

3. Kirjoita dokumenttiin liittämällesi kuvalle järkevät title- ja alt-tekstit.
4. Määritä äsken lisäämäsi tekstikappale käyttämään vasen-nimistä tyyliä (class="vasen".

   <p class="vasen">

5. Lisää csstiedostoon tyyli .vasen, jossa kokeilet float-ominaisuuden toimintaa. Voit lisätä uuden tyylin css-tiedoston loppuun.

   .vasen {
   
   }
   

   Määrittele .vasen-tyyli leijuttamaan sisältönsä vasempaan laitaan (float: left;).

   Tee vastaavalla tavalla .oikea-tyyli, joka ohjaa oikeaan laitaan (float: right;). Määrittele kumpaankin tyyliin järkevät marginaalit. Kokeile selaimella miten dokumentissa olevan kuvan paikka muuttuu.

   Jos kuvaa ei näy niin varmista että kuva on tallennettuna samaan kansioon kuin xhtml-dokumenttisi.

6. Kopioi tästä dokumenttisi alkuun pieni navigointipalkki:

   <div class="navbar">
   <ul>
   <li><a href="linkki1">Linkki1</a></li>
   <li><a href="linkki2">Linkki2</a></li>
   <li><a href="linkki3">Linkki3</a></li>
   <li><a href="linkki4">Linkki4</a></li>
   </ul>
   </div>

7. Muotoile navigointipalkki selkeästi muusta dokumentista eroavalla tavalla CSS:n avulla (.navbar). Määrittele sille sopivat marginaalit, taustaväri jne.

   Jos haluatkin navigoinnin vaikkapa sivun vasempaan laitaan niin käytä aiemmin oppimaasi float-ominaisuutta ja määritä navigointipalkille jokin leveys. esim:

   width: 15%;

8. Validoi html-dokumenttisi sekä CSS-tiedostosi. CSS-validaattori löytyy HTML-kitistä samasta paikasta kuin W3C:n html-validaattorikin.