Dabartinės išdėstymo būsena turėtų atrodyti apie taip:
Kol kas įdėtas logotipas ir viršutinis meniu. Toliau eikime prie šiek tiek didesnio vaizdo, kuris turėtų būti matomas tiesiai po navigacijos.
Naujų sluoksnių kūrimo principas jau buvo aprašytas ankstesniame vadove. Todėl šiuo metu noriu jums parodyti kažką kita. Tiesiog po viršutiniu meniu turėtų būti rodomas didesnis vaizdas. Galutinis rezultatas atrodys taip:
Vaizdas turėtų būti įkeltas tinkamais matmenimis. Taigi jį redaguokite, jei reikia. Tada paspauskite Failas>Atverti ir pasirinkite vaizdą. Pasirinktas vaizdas tada bus atvaizduotas naujame lange. Spauskite Ctrl+C, norėdami nukopijuoti vaizdą į iškarpinę. Taigi, kad galėtumėte įvesti šį vaizdą kaip naują sluoksnį, turintį tinkamą dydį, pasitelkite Redagavimas>Įdėti kaip>Naują sluoksnį. Naujasis sluoksnis automatiškai turės vaizdo matmenis, todėl lengvai galėsite jį perkelti į tinkamą vietą. Taip galėsite perkelti visus norimus įdėti vaizdus į išdėstymą ir juos ten įdėti.
Tada įveskite tekstus į atitinkamas vietas, kuriose jie vėliau iš tikrųjų turės būti matomi. Koncepcijos etape įprastai naudojamas vadinamasis „aklasis tekstas“. Prieš pradedant rašyti juodai tekstui „testas, testas, testas“, rekomenduočiau apsilankyti puslapyje http://www.blindtextgenerator.de/.
Tame puslapyje galėsite automatiškai generuoti įvairias rūšies „akląjį tekstą“. Tada tekstus galėsite lengvai perkelti į dizaino eskizą kopijuodami ir įklijuodami. Šioje vietą taip pat rekomenduočiau puslapį http://dummyimage.com/. Šiame puslapyje galite įvairios apimties „dummy“ vaizdus lengvai generuoti. Tuo metu šiuos „dummy“ vaizdus galite panaudoti kaip vietas laikinus, kol dar neesate sukūrę originalių grafikų savo išdėstymuose.
Problema su skaidriais sluoksniais
Kai įdedate tekstus, jie sudaryti iš kelių elementų, tokių kaip antraštės, teksto paragrafai ir t.t. Todėl turėtumėte susieti atitinkamus tekstus kiekvienam atskiram sluoksniui. Taip galėsite lengvai juos perkelti. Šiam tikslui pasitelkite Sluoksnės>Naują sluoksnį. Tada priskirkite norimą dydį ir prireikus foninę spalvą. Dažniausiai reikės skaidrios foninės spalvos. Tačiau problema kyla tuo, kad sunku perkelti tokį skaidrų sluoksnį. Dažnai klystate ir pagaunate paviršiaus sluoksnį. Šią problemą galima lengvai išspręsti. Svarbu čia yra nustatymai skirtuke Įrankiai. Jame aktyvuokite Perkėlimo įrankį. Apačioje esančiame lange aktyvuokite „Perkelti aktyvų sluoksnį“ parinktį.
Taip galėsite perkelti skaidrius sluoksnius į bet kurį pageidaujamą vietą.
Elementų iškarpyti
Kai esate patenkinti išdėstymu, ateina laikas praktiškai pereiti prie HTML svetainės kūrimo. Būtent šiuo etapu ateina pjovimo pasirengimas, tai yra elementų iškarpymas. Šis pjovimas nieko kito nėra kaip išdėstymo padalijimas į atskirus gabalus, kurie vėliau bus sugeneruoti vėlą HTML ir CSS pagalba. Turite iškarpėti visus tuos elementus, kurie vėliau turi būti rodomi atskirai. Nepirko nukreipti visi tie vaizdai, kurie iš pradžių jau buvo atskirai. Norėčiau jums parodyti, kaip galite iškirpti elementus. Nubrėžkite pagalbos linijas, kad apibrėžtumėte atitinkamą elementą. Šios pagalbos linijos galų gale sudarys pjūvio kraštus. Todėl įsitikinkite, kad jas tinkamai nustatėte.
Dabar pažymėkite norimą sritį ir paspauskite kombinaciją Ctrl+Shift+C. (Tai taip pat tinka tiek GIMP, tiek Photoshop programoms). Tada sukurkite naują failą. Photoshop programoje jis tuomet turės tinkamą dydį. GIMP programoje proceso nebus taip paprasta. Čia tiesiog sukurkite failą su pakankama dydzio. Per Ctrl+V bus įklijuotas turinys iš iškarpinės.
Dabar ateina Iškirpimo įrankis. Apibrėžkite, kuris plotas turi būti iškarpytas ir tada paspauskite Grįžti, kurie paveiksliukas bus daryti pjūvį į pageidaujamą sritį. Per Failas>Išsaugoti kaip galite išsaugoti vaizdą.
Daugeliui internetinių svetainių svarbus stilistinis elementas yra spalvų gradientas. Šiame pavyzdiniame išdėstyme yra tokio tipo spalvų gradientas. Kad iškarpytumėte spalvuo gradientą, pasirinkite siaurą šio pasimagrinde sritį. Iš tikrųjų tai pakaktų pasirinkti sritį, kuri yra plona vieno pikselio pločio. Aukštis turi būti atitinkamas elemento tikruoju aukščiu. Vėliau CSS galėsite padaryti, kad šis grafinis objektas būtų horizontaliai kartojamas, kol visas elementas užsistos. Žinoma, galėtumėte pasirinkti ir platesnį vaizdo iškarpytą plotą. Tačiau tai pablogintų puslapio veikimo greitį. Todėl spalvų gradientui pasirinkite vieno pikselio pločio sritį.
Naudodami Ctrl+Shift+C nukopijuokite vieno pikselio pločio grafiką į iškarpinę ir įkelkite jį kaip naują vaizdą. Tada tinkamai išsaugokite naują vaizdą, po to, kai jis bus nutaikytas į reikiamą iškarpytą plotą.
Tai turėtų aiškiai paaiškinti pagrindinį pjovimo principą. Jūs iškarpite visus dalykus iš išdėstymo, kurie vėliau turės būti užimti svetainėje. Jei kai kurie svetainės elementai jau egzistuoja atskirai, tai nebūtina kirpti, tokiuos elementus galite pridėti tiesiogiai, be iškarpymo. Dabar turėtumėte turėti tokį rezultatą: turite visus vaizdus, kuriuos norite vėliau įdiegti į savo svetainę. Tai gali apimti, pavyzdžiui, logotipą, fonus, spalvų gradientus ir pan. Kalbant apie spalvų gradientus, aš suprantu, kad CSS3 galima lengvai sukurti juos. Tačiau problema yra ta, kad tai vis dar nepalaiko visi naršyklių. Be to, pjovimas puikiai pademonstruoja spalvų gradientų naudojimą, todėl šiame vadove pasirinkau naudoti vaizdą spalvų gradientams.
