WWW-sivun ulkoasu ja WWW-grafiikka - demo 6

CSS

1. Tee edellisten demojen tehtävät loppuun ennen seuraavien tehtävien aloittamista. Lisätehtäviä ei kuitenkaan tarvitse tehdä!
2. Tallenna css-malli (hiiren oikean napin kautta) samaan kansioon edellisissä demoissa tekemäsi XHTML-dokumentin kanssa. Jos käytätx Internet Exploreria ja klikkaat edellistä linkkiä vasemmalla näppäimellä niin IE yrittää väkisten avata css-tiedoston aivan väärällä ohjelmalla.
3. Käynnistä HTML-kit ja avaa siihen edellisissä demoissa tekemäsi XHTML-dokumentti. Avaa myös äsken tallentamasi CSS-tiedosto (tyyli1.css).
4. 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. Tallenne XHTML-dokumenttisi.
5. Kokeile selaimella miltä XHTML-dokumenttisi näyttää.
6. 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

Valitse seuraavista mieleisesi kuva ja tallenna kuva editoitavaksi C:-asemalle MyTemp-hakemistoon. Älä tallenna U:-asemalle, koska verkkolevyltä suurien kuvien editoiminen on hyvin hidasta. HUOM! Kuvat ovat erittäin suuria eli niiden tallentaminen voi kestää jonkin aikaa.

• Dscn2287-Iltavalo.tif 5.3M
• Dscn2296-Risteys.tif 2.9M
• Dscn2327-Serpentiinitie.tif 7.1M
• Dscn2382-Yksityiskohtia.tif 7.2M
• Dscn2400-Maisema.tif 4.6M
• Dscn2621-Perunamaa_ja_ydinvoimala.tif 5.8M

Näitä mallikuvia saa käyttää ainoastaan demotehtävien harjoittelumateriaalina. Kaikki muu käyttö on kielletty.

Yritä muovata jostakin ylläolevasta kuvasta tai omasta kuvastasi hyvä WWW:hen sopiva versio Irfanviewillä (Start|Programs|Irfanview|Irfanview 3.75). Muista tallentaa kuva usein, mutta älä tallenna alkuperäisen tiedoston päälle vaan uudelle nimelle!

1. Käynnistä Irfanview (Start|Programs|Irfanview).
2. Avaa äsken tallentamasi kuva Irfanviewilla.

3. Rajaus

   Rajaa kuvasta käyttöösi vain haluamasi alue.

   1. Rajaa hiirellä kuvasta haluamasi alue
   2. Tee kuvan lopullinen rajaus Edit|Crop -valinnalla.

4. Efektit

   Kuvankäsittelyohjelmissa on lukemattomia erilaisia efektityökaluja. Tärkeimpiä ovat terävöinti ja pehmennys. Erikoisempia efektejä voit kokeilla omalla ajallasi.

   Terävöinti

   Terävöinti tapahtuu valinnalla Image|Sharpen

   Pehmennys

   Pehmennys tapahtuu valinnalla Image|Effects|Blur. Voit Kokeilla myös muita Effects-valikon alta löytyviä työkaluja. Edit|Undo peruuttaa tarvittaessa muutokset.

5. Koko

   Jos et ole vielä kertaakaan tallentanut muokkaamaasi kuvaa niin tallenna kuva nyt mutta älä alkuperäisen päälle!. Muuta nyt kuvan koko WWW-käyttöön sopivaksi. n. 800x600 pikseliä on hyvä maksimikoko kuvalle. Varmista siis ettei kuvasi korkeus ole suurempi kuin 800 pikseliä eikä leveys yli 600 pikseliä. Jos haluat käyttää isompia niin tee pienemmästä kuvasta linkki isompaan ja mahdollisesti varoita käyttäjää suurikokoisesta kuvasta.

   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ä.

6. Tallennusformaatti

   WWW:ssä käytetään lähinnä kolmea kuvaformaattia eli jpg, gif ja png.

   • jpg on oikea formaatti valokuville
   • gif-formaattia kannattaa käyttää läpinäkyvyyttä vaativissa kuvissa esim. logoissa
   • png-formaatti on parhaimmillaan kaavioissa ja viivapiirroksissa joissa ei ole käytettyä tuhansia värejä. png tulee korvaamaan gif-formaatin kunhan selaimet alkavat tukea png:n läpinäkyvyysominaisuuksia
   1. Talleta alkuperäinen kuva grafiikkaohjelman omassa muodossa tai png-muodossa täysivärisenä ja -kokoisena versiona
   2. Muutettuasi kuvan koon webbiin sopivaksi niin talleta kuva jossakin yllämainituista muodoissa valinnalla File|Save As
   3. Valitse oikea formaatti kohtaa Save as type
   4. Formaatin valinnan jälkeen pääset muokkaamaan kuvan asetuksia options-nappulalla aukeavasta dialogista. Tallettaessasi jpg-muodossa muista säätää kuvan pakkausteho mahdollisimman suureksi ilman, että kuvan laadussa on silminhavaittavaa heikentymistä. Avaa tallentamasi kuva uudelleen niin näet miten pakkaustehon säätäminen on vaikuttanut siihen. Jos kuva on mennyt suttuiseksi niin avaa alkuperäinen versio ja tallenna se uudelleen vähemmän pakattuna. 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.

Kaaviokuvat

Tallenna jompikumpi seuraavista kaaviokuvista.

Esimerkkikaavio 1 Esimerkkikaavio 2

Värimäärä

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ä.

Vähennä kuvan värimäärä mahdollisimman pieneksi ja tallenna kuva PNG-muodossa.

Mustavalkokuvat

Mustavalkokuvat tulevat monesti aivan vahingossa talletettua 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

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.

Lisätehtävä

Yritä luento 10:n ohjeiden mukaan siirtää (kopioida) xhtml-dokumenttisi ja siihen liittyvä css-tiedosto ATK-keskuksen www-palvelimelle. Muista tehdä ensin UNIXissa paikka WWW-sivullesi (makewww). Myös tähän löytyy ohjeistus luento 10:n sivulta.