Joka tunte palveluiden kehityksen, tietää, ettei se yleensä ala HTML-rakenteella. Sen sijaan otetaan grafiikkaohjelma ja rakennetaan sivun ulkoasu siellä. (Ne, jotka työskentelevät virastossa, saavat ulkoasun graafikolta tai asiakkaalta). Sen jälkeen tehtävänä on rakentaa sivu tästä ulkoasusta. Juuri siitä on kyse nyt.
Kopioimisen yhteydessä ulkoasujen uudelleenrakentamiseen saatte aina törmätä termeihin Slicing ja Dicing. Siinä ei käytännössä tarkoiteta muuta kuin että kaava otetaan, se leikataan grafiikkaohjelmassa ja sen jälkeen kootaan HTML:n avulla uudelleen.
Oikea grafiikkaohjelma
No, jokaisella on omat mieltymyksensä siitä, mikä ohjelmisto hän haluaa käyttää. Sama pätee tietysti grafiikkaohjelmiin. Ammattimaisen verkkosuunnittelun yhteydessä tilanne näyttää kuitenkin hieman toiselta. Siellä työskennellään lähes yksinomaan Photoshopilla. Itse asiassa useimmat suunnitteluesikuvat ovat PSD-tiedostomuodossa. Ja juuri tätä PSD-muotoa ei voi avata tai muokata kaikilla ohjelmilla.
Joka ei omista Photoshopia, ei ole kuitenkaan täysin hukassa. Mahdollinen vaihtoehto on GIMP. Voit ladata ohjelman ilmaiseksi osoitteesta http://www.gimp.org/. Näytän teille GIMP:n avulla perusvaiheet ulkoasun luomisessa. Se toimii melko samalla tavalla myös Photoshopissa.
Oma ulkoasu luomiseen
Aluksi miettikää perusasiat suunnittelun kannalta:
• Kuinka leveä ulkoasu on?
• Kuinka monta saraketta siihen sisältyy?
Luo sitten työtila valitsemalla Tiedosto>Uusi ja määrittämällä koko. Vaikka minun luoma ulkoasu on "sivua täyttävä", itse sisältö on vain 1000 pikselin levyinen. Asetan ulkoasun korkeudeksi 887 pikseliä. (Vaikka sivun korkeus myöhemmin mukautuu sisältöön joka tapauksessa).
Vahvista tiedot painamalla OK. Näin työtila on valmis ja sitä voidaan täyttää sisällöllä. (Työskentelen selvyyden vuoksi luonnoksessa harmaalla taustalla. Tämä tausta ei tule näkymään myöhemmin verkkosivustolla).
Tavallinen elementti, joka kuuluu verkkosivustolle, on logo, joka yleensä on grafiikka. Lisätäksesi sen ulkoasuun, avaa Tiedosto>Avaa ja valitse logosi, joka tulisi olla PNG-, GIF- tai JPEG-muodossa. Vahvista valinta painamalla Avaa. Paina sitten Ctrl+C, kopiodaksesi logon leikepöydälle. Siirry sitten varsinaiseen verkkosuunnitteluun ja paina siellä Ctrl+V. Lisätty logo ei vielä ole halutussa paikassa. Käytä Siirtotyökalua siirtääksesi sen oikealle paikalle.
Jos kuva ei siirry, sinun täytyy ensin aktivoida kerros. Tarvittavat asetukset löytyvät kohdasta
ikkuna>Asetettavat laatikot>kerrokset.
Paremmaksi jaokkeisuudeksi voit näyttää apuviivat. Tee se napsauttamalla hiiren kakkospainikkeella viivainta ja vedä se alaspainetulla vasemmalla hiirenpainikkeella haluttuun paikkaan.
Voit vetää haluamasi määrän apuviivoja, joiden avulla voit kohdistaa verkkosivuston elementtejä.
Luo nyt toinen kerros. Tämän kerroksen tulisi sisältää ylävalikon.
Nimeä se esimerkiksi Ylävalikko. Luo kerros painamalla OK. Käytä Valintarekisteriä ja vedä alue, johon navigointi tulee sijoittaa.
Oletan tässä esimerkissä, että ylävalikon tausta saa väriyhdistelmän. Siihen klikkaa Väriyhdistelmä: Valintaa väriyhdistelmällä (täytyy).
Väriyhdistelmän tulisi kulkea harmaasta mustaan. Voit asettaa vastaavat värit värikentistä. Asetuksiksi laita VG to HG, se kulkee siis Etu- taustavärin välillä. Pidä nyt Ctrl-näppäintä pohjassa ja vedä valitulla alueella viiva ylhäältä alas. Kun vasen hiiren painike vapautetaan, alueella on haluttu väriyhdistelmä.
Periaatteessa sinulla on kaksi vaihtoehtoa nyt:
• Jätä navigointialue sellaiseksi kuin se on.
• Lisää yksittäiset valikkokohteet, jotta voit tarkkailla jo suunnitteluvaiheessa käyttämiäsi kirjasimia jne.
Kumman valitset, jää loppujen lopuksi sinun päätettäväksi. Mutta jos esimerkiksi haluat esitellä ulkoasua asiakkaillesi, suosittelisin ehdottomasti sisällyttämään valikkokohteet. Kokemuksen perusteella monilla asiakkailla nimittäin puuttuu mielikuvitusta tässä asiassa.
Valitse nyt Kirjasintyyppi. GIMP:stä löydät vastaavat asetukset kohdasta ikkuna>Asetettavat dialogit>kirjasimet.
Tässä jaksossa on jo käsitelty kirjainten ongelmia CSS:n ja HTML:n yhteydessä. Periaatteessa voit määrittää verkkosuunnittelijana teoriassa minkä tahansa kirjasinlajin. Onko sitä kuitenkaan kävijöiden tietokoneella ja voidaanko se siksi näyttää, et tiedä. Siksi tulokset – erityisesti jos käytät hyvin eksoottisia kirjasinlajeja – ovat vaikea kontrolloida. Kuitenkin palaan tähän näkökohtaan tämän jakson aikana, kun käsitellään esimerkkisivuston kirjasinlajeja. Tämänhetkistä ulkoasua varten valitsen kuitenkin seuraavat asetukset:
• Verdana bold
• 20 pikseliä
• Valkoinen kirjasinväri
Nyt voit lisätä yksittäiset valikkokohteet tällä tavalla. Parasta on kopioida taso, jossa ensimmäinen valikkokohta on ja lisätä se uutena tasona. Voit sitten mukauttaa tason tekstiä. Luo siten ylävalikko.
Ylävalikko tulee saada hover-efektin. Kun hiiren osoitin viedään yksittäisten valikkokohteiden yli, niiden taustaväri muuttuu. Tämä ominaisuus olisi myös visualisoitava suunnittelussa. Valitse haluttu hover-väri ja kopioi jokin olemassa olevista valikotasosta. Määritä tämä taso väriin. Tässä esimerkissä oletan sinisen väriasteikon. Sen jälkeen lisätään valikkokohdan teksti. Tällä tavoin saat jo käsityksen siitä, miltä valikko lopulta näyttää.
