WWW-sivun ulkoasu ja WWW-grafiikka - demo 6

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

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 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 2px 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).

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.75).
3. Avaa äsken tallentamasi kuva Irfanviewilla.
4. Tallenna kuva (File|Save As) heti uudella nimellä PNG-muodossa. Alkuperäisen kuvan päälle ei koskaan kannata tallentaa kuvaa muutosten jälkeen.
5. Käännä kuva oikeaan asentoon

   Kokeile Rotate Left ja Rotate Right -komentojen toimintoja.

6. Rajaa kuvasta haluamasi alue.
   1. Rajaa hiirellä kuvasta haluamasi alue
   2. Tee kuvan lopullinen rajaus Edit|Crop -valinnalla.
7. 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ä.
   
8. Terävöitä kuvaa tarvittaessa.

   Terävöinti tapahtuu valinnalla Image|Sharpen

9. Tallenna kuvan muokattu versio PNG-muodossa. PNG-formaatti on häviötön ja kuvaa voidaan edelleen muokata ilman laadun katoamista.
10. 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.

11. 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.
12. Käy kokeilemassa JPG-pakkauksen toimintaa JPEG Wizard -palvelulla, jonka avulla voit optimoida JPG-kuvan mahdollisimman pieneksi.
    • E-mail-kohtaan ei tarvitse täyttää mitään
    • Browse-nappulan avulla pääset etsimään äsken tallentamasi kuvan
    • Jos haluat voit muutella JPG-pakkauksen asetuksia Compression-kohtiin.
    • Muihin kohtiin ei tarvitse koskea.
    • Vertaile ohjelman antamia versioita kuvastasi ja tutki paljonko niillä säästyy levytilaa ja mahdollisen WWW-sivun latausaikaa.

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ä.
  
• 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).
• 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 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 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 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".
5. Lisää tyylitiedostoon tyyli .vasen, jossa kokeilet float-ominaisuuden toimintaa. 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.
6. Lisää dokumenttisi alkuun pieni navigointipalkki:

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

7. Muotoile navigointipalkki selkeästi muusta dokumentista eroavalla tavalla CSS:n avulla (.navbar). Määrittele sille sopivat marginaalit, taustaväri jne.
8. Validoi html-dokumenttisi sekä CSS-tiedostosi. CSS-validaattori löytyy HTML-kitistä samasta paikasta kuin WDG:n html-validaattorikin.