Layoutin nykyinen tila tulisi näyttää suunnilleen tältä:
Tähän mennessä on lisätty logo ja ylävalikko. Jatketaan hieman suuremmalla grafiikalla, joka tulisi näkyä suoraan navigoinnin alapuolella.
Uusien tasojen luomisen periaate on jo kuvattu edellisessä opetusohjelmassa. Haluan kuitenkin näyttää teille vielä jotain muuta tässä vaiheessa. Ylävalikon alapuolelle tulisi näkyä suurempi kuva. Lopputulos näyttää tältä:
Kuvan tulisi olla oikeassa koossa, kun lisäät sen. Muokkaa se tarvittaessa. Avaa sitten Tiedosto>Avaa ja valitse kuva. Valittu kuva näkyy sen jälkeen uudessa ikkunassa. Paina Ctrl+C, kopioi kuva leikepöydälle. Jotta voit heti lisätä kuvan tasoksi oikeassa koossa, käytä komentoa Muokkaa>Liitä tasoksi>Uusi taso. Uusi taso saa automaattisesti kuvan mitat, joten voit helposti siirtää tason oikeaan paikkaan. Näin voit nyt lisätä kaikki kuvat, jotka haluat lisätä, layoutiin ja sijoittaa ne sinne.
Lisää sitten tekstit paikkoihin, joissa ne todella näkyvät myöhemmin. Suunnitteluvaiheessa käytetään yleensä niin kutsuttua "lorem ipsum" -tekstiä. Ennen kuin alat naputella villisti "test, test, test", suosittelen kuitenkin sivustoa http://www.blindtextgenerator.de/.
Sivustolla voit generoida automaattisesti erilaisia lorem ipsum -tekstejä. Tekstit voidaan sitten helposti kopioida ja liittää design-suunnitelmaan. Tässä yhteydessä suosittelen myös sivustoa http://dummyimage.com/. Tällä sivustolla voit generoida dummikuvia haluamassasi koossa. Voit esimerkiksi käyttää näitä dummikuvina alkuperäisten grafiikoiden tilalla layoutissasi.
Ongelma läpinäkyvien tasojen kanssa
Kun lisäät tekstejä, ne koostuvat useista elementeistä, kuten otsikoista, tekstikappaleista jne. Siksi sinun tulisi ryhmitellä yhteenkuuluvat tekstit omiin tasoihinsa. Näin voit siirtää nämä tekstit kokonaisina. Avaa siis Tasot>Uusi taso. Määritä tasolle sitten halutut mitat ja tarvittaessa taustaväri. Yleensä tarvitset kuitenkin läpinäkyvän taustavärin. Ongelma on kuitenkin siinä, että läpinäkyviä tasoja on vaikea siirtää. Usein tällöin vahingossa tarttuu alatason tasoon. Tätä ongelmaa on kuitenkin helppo välttää. Tärkeitä ovat asetukset Työkalupalkissa. Valitse sieltä siirto-työkalu. Alaosassa ikkunaa aktivoi vaihtoehto Aktiivisen tason siirto.
Näin voit siirtää läpinäkyviä tasoja mihin tahansa haluamaasi paikkaan.
Elementtien leikkaaminen
Kun olet tyytyväinen layoutiin, on aika toteuttaa se käytännössä HTML-verkkosivustona. Tässä vaiheessa slicen, eli leikkaamisen aika on tullut. Tämä leikkaaminen tarkoittaa layoutin leikkaamista osiin, jotka yhdistetään myöhemmin HTML:llä ja CSS:llä. Sinun täytyy leikata kaikki ne elementit, jotka halutaan esittää erikseen. Tähän eivät tietenkään kuulu kuvaelementit, jotka ovat erikseen saatavilla. Haluan ensin näyttää teille, miten voitte leikata elementtejä. Piirtäkää ympärille ohjausviivat ko. elementtiin. Ohjausviivat muodostavat lopulta leikkaajan. Huolehtikaa siis siitä, että ne ovat oikein asetettu.
Merkatkaa nyt haluttu alue ja painakaa näppäinyhdistelmää Ctrl+Shift+C (tämä pätee muuten sekä GIMPissä että Photoshopissa). Luokaa sitten uusi tiedosto. Photoshoppissa sille annetaan heti oikeat mitat. GIMPissä tämä ei toimi yhtä helposti. Luo siellä yksinkertaisesti tiedosto riittävin mitoin. Ctrl+V avulla sisältö liitetään leikepöydältä.
Nyt otetaan käyttöön Leikkaustyökalu. Määritä sen päälle leikattava alue ja paina sitten Enter-näppäintä. Kuva leikataan sitten haluttuun alueeseen. Kuvan voi tallentaa valitsemalla Tiedosto>Tallenna nimellä.
Monille verkkosivuille tärkeä tyylillinen elementti on väriliukuma. Tällainen väriliukuma löytyy myös tästä esimerkkilayoutista. Jotta voit leikata värikuviota, valitse kapea alue vastaavasta liukumasta. Itse asiassa riittää, että määrität alueen, joka on yhden pikselin levyinen. Korkeuden on vastattava elementin todellista korkeutta. CSS:llä voit myöhemmin varmistaa, että tätä kuvaa toistetaan vaakasuunnassa, kunnes koko elementti on täytetty. Voit tietysti käyttää myös laajempaa kuvakatkelmaa. Tämä kuitenkin heikentäisi sivuston suorituskykyä. Valitse siis väriliukumalle pikselin levyinen leveys.
Kopioi pikselin levyinen kuva leikepöydälle painamalla Ctrl+Shift+C ja liitä se sitten uutena kuvana takaisin. Tallenna uusi kuva sen jälkeen, kun se on asetettu relevantille alueelle.
Näin periaate slicenssä tulisi olla selvä. Leikkaat kaiken layoutista, mikä kuuluu myöhemmin verkkosivulle. Jos sinulla on jo yksittäisiä sivuelementtejä, joita ei tarvitse erikseen leikata, käytä niitä suoraan ilman leikkausta.
