Aktuaalne paigutus peaks praegu olema umbes selline:
Seni on lisatud logo ja ülemine menüü. Jätkame suurema graafikaga, mis peaks olema nähtav otse navigatsiooni all.
Uute kihtide loomise põhimõtteid on juba kirjeldatud eelnevas õpetuses. Seetõttu tahan teile siinkohal midagi muud näidata. Otse ülemise menüü all peaks olema suurem pilt. Tulemus näeb välja järgmine:
Pilt peaks olema – kui lisate selle – õigetes mõõtmetes. Vajadusel tehke enne selle töötlemist. Seejärel avage Fail> Ava ja valige pilt. Valitud pilt kuvatakse seejärel uues aknas. Vajutage Ctrl+C, et kopeerida pilt lõikeplokki. Nüüd saate selle pildi kihipaani otse lisada nii, et see oleks ka õiges suuruses, avades Redigeeri> Kleebi kui> Uus kiht. Uus kiht saab automaatselt pildi mõõtmed ja seejärel saate kihi lihtsalt õigesse kohta lohistada. Sel viisil saate lisada kõik pildid, mida soovite kujundusse lisada ja asetada need sinna.
Lisage seejärel tekstid kohtadesse, kus need hiljem tegelikult nähtavad olema. Kavandifaasis kasutatakse selleks tavaliselt nn kurtteksti. Enne kui hakkate nüüd istuma ja kirjutama suvaliselt "test, test, test", soovitan teil külastada lehte http://www.blindtextgenerator.de/.
Seal saate lasta automaatselt genereerida kurttekste – erinevat liiki – Tekste saab seejärel lihtsalt kopeerida ja kleepida kujunduse kontseptsiooni. Sellega seoses soovitan külastada ka lehte http://dummyimage.com/. Sellel veebisaidil saate genereerida suvalise suurusega dummy-pilte. Neid dummy-pilte saate näiteks kasutada kavandites alles loomata originaalgraafika asendajatena.
Probleem läbipaistvate kihtidega
Kui lisate tekste, koosnevad need mitmest elemendist nagu pealkirjad, tekstilõigud jne. Seetõttu peaksid te sama kuuluvad tekstid koondama vastavatesse kihtidesse. Nii saate neid tekste alati tervikuna liigutada. Avage Kihid> Uus kiht. Määrake seejärel kihile soovitud suurus ja vajadusel taustavärv. Enamasti peate aga seadma/lisada läbipaistva tausta. Probleem tekib siis, kui soovite läbipaistvaid kihte raskesti liigutada. Sageli tabatakse seal alamkihti. Seda probleemi saab hõlpsasti vältida. Olulised on selleks seaded aknas Tööriistad. Selles lülitage sisse Liiguta tööriist. Aktiveerige allosas seejärel valik Aktiivne kiht liigutamiseks.
Nii saate liigutada ka läbipaistvaid kihte mis tahes soovitud asukohta.
Elementide lõikamine
Kui olete paigutusega rahul, jätkake selle praktiliseks elluviimiseks HTML-veebilehena. Siin tuleb mängu viilutamine ehk lõikamine. See viilutamine ei ole muud kui kujunduse tükeldamine osadeks, mis hiljem kombineeritakse HTML-i ja CSS-iga. Peate viilutama kõik elemendid, mis tuleks hiljem eraldi kuvada. Erandiks on muidugi kõik need pildielemendid, mis on niikuinii eraldi olemas. Tahan kõigepealt näidata, kuidas saate elemente lõigata. Veo selleks ümber tegemiseks Juhendjooni. Need jooned moodustavad lõpuks lõikejooned. Veenduge, et need oleksid õigesti paigutatud.
Märgistage seejärel soovitud ala ja vajutage klahvikombinatsiooni Ctrl+Shift+C. (See kehtib muide nii GIMPi kui ka Photoshopi puhul). Seejärel looge uus fail. Photoshopis on sellel otse õige suurus. GIMP-is see nii lihtsalt ei toimi. Siin loote lihtsalt faili piisavate mõõtmetega. Üle Ctrl+V kleepige sisu lõikepliiast sisse.
Nüüd kasutage tööriista Lõika. Seadke selle abil lõigatav ala ja vajutage seejärel Return-klahvi. Pilt lõigatakse seejärel soovitud alale. Üle Fail> Salvesta kui saate pildi salvestada.
Oluline stilistiline element paljudele veebisaitidele on värviüleminek. Ka siin näidatud näitekujundusel on selline värviüleminek olemas. Värviülemineku lõikamiseks valige kitsas ala vastavast üleminekust. Selleks piisab tegelikult, kui seadistate ala, mille laius on üks piksel. Kõrgus peab vastama elemendi tegelikule kõrgusele. CSS-iga saate hiljem tagada, et seda graafikat korratakse horisontaalselt seni, kuni terve element on täidetud. Loomulikult võiksite kasutada ka laiemat pildilõiku. See aga halvendaks lehe jõudlust. Seetõttu valige üleminekuvärvi korral ühe piksli laiune laius.
Klahvikombinatsiooniga Ctrl+Shift+C kopeerite ühe piksli laia graafika lõikeplokki ja kleepige selle uue pildina sisse. Uue pildi salvestate seejärel, pärast kui see on soovitud lõigetele viidud.
Sellega peaks lõikamise põhimõte olema selge. Lõikate seega kõik asjad kujundusest välja, mis hiljem kuuluvad veebisaidile. Kui teile on juba olemas üksikud lehelemendid, mida ei pea lõikama, lisate need otse, ilma et peaksite lõikamistee kaudu minema.
Tulemus peaks nüüd välja nägema järgmine: Teil on olemas kõik graafikad, mida soovite hiljem veebisaidil kasutada. Selle hulka kuuluvad näiteks logo, taustad, värviüleminekud jne. Kui juba räägime värvide üleminekutest: Mul on muidugi täiesti selge, et CSS3 abil saab värvide üleminekuid hõlpsalt luua. Probleem on aga selles, et kõiki veebilehitsejaid seda veel ei toetata. Lisaks saab lõikamist väga hästi näidata värvide üleminekute abil, olen seetõttu selle õpetuse jaoks kasutanud graafikat värvide üleminekute rakendamiseks.
