WWW-sivun ulkoasu ja WWW-grafiikka

• Mallivideot
• WWW-sivun ulkoasun muotoilu
• WWW-grafiikka
• Kuvan liittäminen WWW-sivulle
• WWW-sivun julkaiseminen
• Erilaisten kuvien käsittelyä
  • Kaaviokuvat
  • Läpinäkyvät kuvat
  • Mustavalkokuvat
  • Ruutukaappaukset
• Useiden kuvien muokkaus
  • Batch conversion
  • Thumbnails

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

WWW-sivun ulkoasun muotoilu

WWW-sivun ulkoasu saadaan helposti muotoiltua kerralla käyttäen valmista tyylitiedostoa. Kokeillaan muokata myös muutamia ominaisuuksia.

1. Tee edellisten demojen tehtävät loppuun ennen seuraavien tehtävien aloittamista.
2. Käynnistä Xetor ja avaa siihen edellisissä demoissa tekemäsi XHTML-dokumentti.
3. Tallenna tyyli1.css-tiedosto samaan kansioon missä XHTML-dokumenttisi on.
4. Lisää XHTML-dokumenttisi head-osan sisään (valinta Inside...) link-elementti elementtipuun kautta
5. Valitse elementtipuusta edellä lisäämäsi link-elementti ja paina sen kohdalla hiiren oikeaa painiketta ja valitse ponnahdusvalikosta Edit
6. Muuta link-elementin attribuuteille seuraavat arvot:

   Ominaisuus	Arvo	Selitys
   href	tyyli1.css	Kertoo mitä tyylitiedostoa dokumentissa käytettän
   rel	stylesheet	Kertoo mikä suhde linkitetyllä tiedostolla on tähän dokumenttiin (tyylitiedosto)
   type	text/css	Kertoo käytetyn tiedoston tyypin

   
7. Tallenna XHTML-dokumenttisi.
8. Kokeile selaimella miltä XHTML-dokumenttisi näyttää.
9. Muuta Xetorilla tyylitiedoston määrityksiä valitsemalla Plugins|XML|Show CSS Dialog
10. Muuta koko sivun taustaväri valkoiseksi
    • Valitse body-elementti ikkunan vasemmasta laidasta.
    • Valitse background-color-ominaisuuden vieressä oikealla olevasta alasvetovalikosta arvoksi (Value) valkoinen (white).
    • Napauta alalaidasta Update file-painiketta niin muutokset tallentuvat.
11. Tee vielä seuraavat muutokset:
    • Määritä koko sivuston peruskirjasimeksi Verdana ja varalle yleiseksi kirjainperheeksi sans-serif (body-elementti ja font-family). Valintaa ei löydy alasvetovalikosta, joten joudut kirjoittamaan sen näppäimistöltä Value-sarakkeen soluun. Erota fonttien nimet pilkulla. Älä paina lopuksi enteriä vaan paina Update file-painiketta!
    • Muuta ensimmäisen tason otsikoille kirjaisimen kooksi 2.5em (h1-elementin font-size-ominaisuus). font-size-ominaisuuden saat näkyviin, kun valitset sen Property-sarakkeen tyhjän solun alasvetovalikosta.
    • Määritä toisen tason otsikoille marginaalia 2em:n verran (h2-elementin margin-ominaisuus)
    • Määritä toisen tason otsikoille 2 pikseliä leveä kiinteä (2px solid black) 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). Ominaisuudet on erotettava välilyönnillä.

      

    • Muuta normaalin tekstikappaleen (p-elementti) tekstin tasaus (text-align) molempiin reunoihin (justify).
12. Sulje CSS-dialogi Close-painikkeella, mutta älä sulje XetorjEdit:iä vielä.

WWW-grafiikka

WWW:ssä käytettävä grafiikassa on erityisesti otettava huomioon kuvan tiedostonkoko sillä isojen kuvien liikuttaminen verkon ylitse on hidasta. Kuvan kokoa pystytään pienentämään rajaamalla kuvaa, tarkkuutta pienentämällä ja pakkaustehoa lisäämällä.

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.
   • Rajaa hiirellä kuvasta haluamasi alue
   • Tee kuvan lopullinen rajaus Edit|Crop to selection -valinnalla.
6. Pienennä kuva sopivaan kokoon (max. 800x600).
   • Kuvan kokoa voit muuttaa valinnalla Image|Resize/Resample
   • Muuta kuvan kokoa joko prosentteina tai pikseleinä sopivaksi
   • 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ä. Pakkaustehon vaikutuksen kuvaan voit varmistaa avaamalla kuvan (jpg-version) uudelleen Irfanviewiin.

    

    Tallenna lopuksi tiedosto samaan hakemistoon XHTML-dokumenttisi kanssa nimellä hertta_sulo.jpg

11. Käy kokeilemassa JPG-pakkauksen toimintaa JPG-optimizer -palvelulla, jonka avulla voit optimoida JPG-kuvan mahdollisimman pieneksi. JPG-optimizer näyttää pakkaustehon numerona ja kuvan kyseisellä pakkausteholla pakattuna.
    • Anna ohjelmalle käsiteltävän kuvan osoitteeksi esimerkiksi http://appro.mit.jyu.fi/2003/syksy/tyovaline/demot/demo6/malli.jpg

Kuvan liittäminen WWW-sivulle

Lisätään muokattu kuva WWW-sivulle.

1. Lisää XHTML-dokumenttiisi yksi uusi tekstikappale (p) haluamaasi kohtaan.
2. Lisää tekstikappaleen sisään img-elementti, jolla liität äsken muokkaamasi kuvan mukaan dokumenttiin. Valitse elementtipuusta img-elementti, napauta sitä oikealla hiiren napilla ja valitse Edit. img-elementti tarvitsee seuraavat ominaisuudet:
   • src-ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen, jos kuva sijaitsee samassa hakemistorakenteessa dokumentin kanssa.
   • alt-ominaisuus kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia.
   • title-ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle.

   

3. Kirjoita dokumenttiin liittämällesi kuvalle järkevät title- ja alt-tekstit.

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

4. Tallenna dokumenttisi

WWW-sivun julkaiseminen

Siirretään sivusto WWW-palvelimelle, jolloin se kaikkien nähtävillä internetissä.

1. Luo XetorjEdit:llä uusi tiedosto valitsemalla File | New. Tallenna tiedosto U:\tyovaline\-hakemistoon nimellä index.html
2. Käynnistä SSH Secure File Transfer valitsemalla Start | All Programs | SSH Secure Shell | SSH Secure File Transfer Client. Ota Quick Connect, kirjoita Host Name-kohtaan www-palvelin people.cc.jyu.fi ja User Name-kohtaan oma käyttäjätunnuksesi.
3. Valitse vasempaan tiedostonäkymään U-aseman tyovaline-hakemisto. Avaa oikeasta laidasta www-hakemisto tuplanapauttamalla sitä.
4. Siirrä raahamalla index.html (kuten demoissa 2) paikalliselta koneelta www-hakemistoon-
5. Siirrä koko demo6-hakemisto (tai muu vastaava hakemisto, joka sisältää tiedostot demo6.html, tyyli1.css ja hertta_sulo.jpg) www-hakemiston sisälle.
6. Valitse oikean laidan näkymästä index.html oikealla hiiren näppäimellä ja valitse kohta Properties. Tästä ikkunasta saat näkyviin tiedostojen oikeudet. Katso, että kaikilla käyttäjillä (Owner, Group, Other) on lukuoikeus (Read) tiedostoon. Ryhmä ja muut (Group, Other) eivät tarvitse kuitenkaan kirjoitus- tai suoritusoikeutta (Write, Execute) tiedostoon.

   

7. Valitse demo6-hakemiston ominaisuudet. Katso, että kaikilla on luku- ja suoritusoikeus hakemistoon. Suoritusoikeutta tarvitaan hakemiston sisällön listaamiseen.

   

8. Avaa demo6-hakemisto oikeasta laidasta. Napauta demo6.html-tiedostoa oikealla ja valitse Rename. Muuta nimeksi index.html. Tarkista, että kaikilla demo6-hakemiston tiedostoilla on kaikille käyttäjille lukuoikeus.
9. Nyt demo-sivusi pitäisi näkyä osoitteessa:

   http://people.cc.jyu.fi/~käyttäjätunnus/demo6/

   

   www-hakemistoon siirretty tyhjä index.html estää muita käyttäjiä näkemästä mitä hakemistoja sinulla on people-palvelimella. Jos haluaisit tehdä omat sivut http://people.cc.jyu.fi/~käyttäjätunnus/-osoitteeseen, niin sinun pitäisi siirtää tyhjän index.html-tiedoston tilalle toinen XHTML:ää sisältävä index.html-tiedosto.

Erilaisten kuvien käsittelyä

Eri tyyppiset kuvat tarvitsevat erilaista kuvankäsittelyä mikäli haluamme hyvän näköistä jälkeä WWW-sivulle. Seuraavassa tyypillisimpiä tapauksia.

Kaaviokuvat

1. Tallenna seuraava kaaviokuva C:\MyTemp-kansioon.
   • Esimerkkikaavio
2. 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.
   • Tiettyyn värimäärään muuttaminen onnistuu valinnalla Image|Decrease Color Depth
   • 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.
   
3. Tallenna kuva PNG-muodossa. PNG pakkaa hyvin kaaviot ja piirrokset eikä kadota niistä informaatiota.

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

1. Valitaan kaaviokuvalle läpinäkyvä väri. Ensin värin järjestysnumero on katsottava paletista: valitse Image | Palette | Edit Palette. Valitse valkoinen väri (pohjaväri) ja katso mitä Index-kohdassa lukee.
2. Tallenna kuva uudelleen. Valitse tallennusmuodoksi nyt GIF-formaatti (GIF on PNG:tä vastaava, hieman vanhempi kuvaformaatti). Ennen tallennusta valitse Options, valitse päälle kohta Save Transparent Color ja laita tekstikenttään katsomasi värin numero. Tallenna kuva samaan hakemistoon XHTML-dokumenttisi kanssa.
3. Lisää kuva XHTML-dokumenttiisi XetorjEditillä samaan tapaan kuin yllä tehtiin.
4. Valitse Plugins | XML | Show CSS Dialog. Muuta body-elementin taustan väri (background-color) harmaaksi (gray).
5. Tallenna sivu ja avaa se selaimessa. Nyt GIF-kuvan taustan värin pitäisi näkyä harmaana.

Kuvankäsittelyohjelmissa (Paint Shop Pro, Photoshop jne.) läpinäkyvyyden määrittely onnistuu yleensä värinvalintatyökalun avulla. Myös uudemmassa Irfanview:ssä läpinäkyvyys toimii myös PNG-formaatissa ja läpinäkyvän värin voi valita suoraan kuvasta.

Mustavalkokuvat

Mustavalkokuvat tulevat monesti aivan vahingossa tallennettua turhan monen värin paletilla ja vievät siten turhaan tilaa.

1. Tallenna mustavalkoinen kuva Mytemp-hakemistoon kuvankäsittelyä varten.
2. Vähennä värimäärä kahteen.
3. Tallenna kuva PNG-muodossa U-asemalle tyovaline-hakemistoon.

Ruutukaappaukset

Erilaisia ohjeita varten saatat tarvita kuvaruutukaappaus tietokoneen työpöydästäsi. Voit kaapata minkä tahansa näytöllä olevan ikkunan sisällön tai koko työpöydän sisällön kuvana leikepöydälle seuraavilla ohjeilla:

1. Aktivoi haluamasi ohjelman ikkuna.
2. Paina Alt + Print Scrn
3. Aktivoi Irfanview ja liitä (CTRL-V) leikepöydältä edellä kaappaamasi kuva muokattavaksi.
4. Pudota kuvan värimäärä pienemmäksi.
5. Tallenna kuva PNG-muodossa.
6. Kokeile vielä kaapata koko työpöytä painamalla pelkästään Print Scrn -näppäintä ja viedä kuva Irfanview-ohjelmaan.

Useiden kuvien muokkaus

Tehdään kuvagalleria nettiin. Tätä varten on hyvä ensin hieman pienentää kameralla otettuja isohkoja kuvia ja tehdä kuvista napautettavat postimerkkiversiot.

Batch conversion

1. Tallenna seuraava digitaalisella kameralla otettuja kuvia sisältävä zip-paketti C:\Mytemp-hakemistoon.
2. Purkaa paketti Mytemp-hakemiston alihakemistoon Tommin_digikuvia.
3. Muunnetaan Irfanview-ohjelmalla kaikki kuvat kerralla puoleen kokoon. Valitse File | Batch Conversion.
4. Valitse oikeassa yläkulmassa olevasta tiedostodialogista C:\Mytemp\Tommin_digikuvia ja paina Add all-painiketta.
5. Luo uusi alihakemisto nettikuvia ja tuplanapauta hakemistoa niin että pääset hakemiston sisälle.
6. Napauta painiketta Use this directory as output.
7. Valitse alareunasta Use advanced options ja napauta Set advanced options. Valitse Resize ja Set new size as percentage of original. Laita kohtiin Width ja Height luku 50. Napauta OK:ta.
8. Paina Start-näppäintä vasemmalta ylhäältä. Nyt pienennetyt kuvat tulevat nettikuvia-hakemistoon.

Thumbnails

1. Valitse Irfanviewin valikosta File | Thumbnails.
2. Etsi hakemistopuusta Tommin_digikuvia-hakemisto.
3. Valitse ensin kaikki kuvat (SHIFT-näppäimen avulla) ja sitten Thumbnails-ikkunan valikosta File | Save selected thumbs as HTML file.
4. Vaihda HTML-tiedoston nimeksi index.html ja kohdehakemistoksi C:\Mytemp\Tommin_digikuvia\nettikuvia.
5. Vaihda Page Titleen teksti Luontokuvia Suomesta ja poista kaikki muut ruksit paitsi kohta Write "relative" path names only. Valitse Export.
6. Siirrä nettikuvia-hakemisto SFTP:llä people.cc.jyu.fi-palvelimen www-hakemistoon. Tämän jälkeen kuvat ovat julkaistuna internetissä osoitteessa:

   http://people.cc.jyu.fi/~käyttäjätunnus/nettikuvia/

Huomaa, että Irfanview ei tee puhdasta XHTML:ää vaan vanhan muotoista HTML:ää. Sivu toimii kuitenkin hyvin nykyisillä (graafisilla) selaimilla.