Skip to main content

GIMP www-suunnittelussa

Pystyykö GIMP kaikkien muiden ominaisuuksiensa lisäksi toimimaan myös www-suunnittelijan apuvälineenä? Kyllä vain, tässä on esimerkki siitä. Kyseessä on kohtuullisen harvinainen taito, jonka hallitseminen nostaa kunnioitustasoasi www-sivuharrastajien keskuudessa.

Esitiedot

Jotta saisit parhaimman hyödyn tästä oppaasta, on suositeltavaa että osaat HTML-kielen ja kotisivun teon alkeet. Opas voi toki periaatteessa toimia myös ensimmäisen WWW-sivusi teko-oppaana, vaikka siinä käsitelläänkin hiukan harvinaisempaa asiaa ensi alkuun.

Osittainen kuvan linkittäminen

Joskus www-suunnittelussa törmäämme ongelmaan, jossa haluamme linkittää kuvan tietyiltä osin johonkin tietylle sivulle ja toisilta osin jonnekin toiselle sivulle. Esimerkiksi voidaan ottaa vaikka bändin kotisivu, jossa on yhteisvalokuva jokaisesta bändin jäsenestä ja napsauttamalla tiettyä bändin jäsentä päädymme hänen omalle palstalleen.

Miten tällainen nettisivu tehdään? Se onnistuu GIMP:illä seuraavasti:

Ensin aukaistaan kuva GIMP:issä, esimerkiksi seuraava:


Kuva 1. Kuva opettajanhuoneesta.

Sitten valitsemme ”Suotimet”=>”Web”=>”Kuvakartta” ja saamme seuraavan näkymän:


Kuva 2. Kuvakartan luomistyökalu

Sitten valitsemme tiettyjä osia kuvasta ensin napsauttamalla vasemmassa reunassa olevia muotoja (suorakulmio, pallo, epäsäännöllinen monikulmio) ja sitten vetämällä niitä kuvaan hiirellä:


Kuva 3. Tietokoneen kuvaruutu valittu, huomaa katkoviivoitus määrittämässä aluetta.


Kuva 4. Tämä ikkuna ilmestyy automaattisesti esiin, ja siihen laitetaan sen WWW-sivun nimi johon haluamme linkin viittaavan. Suomeksi sanottuna, kun napsautamme hiirellä valokuvassa monitorin kuvaa, niin silloin linkki vie tietokone.fi-sivustolle.

Huomaa, että tässä ikkunassa on kaikenlaista outoa lyhennettä, kuten ”FTP”, ”WAIS”, ”Telnet” yms. Näistä ei tarvitse tietää mitään, mutta riippuen siitä kuinka paljon olet nettiin tutustunut, jotkut niistä voivat olla tuttuja. Meille riittää kuitenkin asetus ”Web sivusto”.

Samalla lailla voimme tehdä alueita muualle kuvaan. Esimerkiksi aamulehden alue valokuvasta voi viedä aamulehden sivuille ja HP-tulostin voi viedä HP-yhtiön sivuille. Sitten kun olemme tehneet alueita kylliksi, niin valitsemme kuvakartta-työkalusta (EI varsinaisesta kuvaikkunasta) ”Tiedosto”=>”Tallenna nimellä”:


Kuva 5. Tallennetaan kuvakartta. Kun painat pienestä ”+”-merkistä, saat muita kansioita esille. Anna sille nimi, jonka pääte on .html, esimerkiksi ”koe.html”. Pääte .html ilmaisee, että kysymyksessä on aito nettisivu, siis sellainen, joka näkyy www-selaimessa. Voit siirtää sen vaikka nettiin, mutta se olkoon toisen tunnin aihe- nyt tallenna se vain kovalevyllesi, avaa nettiselain (esimerkiksi Internet Explorer) ja valitse sieltä ”Tiedosto”=>”Avaa” ja avaa äsken tekemäsi nettisivu ja katsele sitä nettiselaimella.


Kuva 6. Näin tallennetaan tekemämme WWW-sivu. Paina vain ”Tallenna”.

Sitten vain katselet selaimella tekemääsi sivua. Oma yksinkertainen esimerkkini näyttää tältä. Klikkaa tietokoneen ruutua ja pääset tietokone.fi- osoitteeseen. Muualta kuvaa ei ole linkitetty.

Tehtävä: Tee samanlainen nettisivu, mutta laita samaan kuvaan vähintään kolme eri linkkiä eri paikkoihin. Muista laittaa WWW-osoite täydellisenä, siis http://-tunnus mukaan.

Loppuhuomautus: tämän tehtävän tekninen puoli on monesti jäänyt ihmisiltä puutteelliseksi. Oleellista on ymmärtää että vaikka työskentelemme kuvankäsittelyohjelmalla, niin itse kuvaa emme tässä muokkaa millään tavalla. Me rakennamme kuvan ympärille HTML-kielellä www-sivun, joa linkittää kuvan osat muualle.