Od prihoda različice CS6 je Adobe v Photoshopu uvedel zelo uporabno možnost za postavitev in razvoj spletnih oblik. Operacija je zelo enostavno in predvsem hitro. Z aplikacijo bomo lahko ustvarili kaskadne slogovne liste, pri čemer bomo kot referenco upoštevali naše oblike in sloje besedila. Postopek je tako preprost, kot je razviti naš model, kopirati kodno različico naših elementov in jo prilepiti na naš list.
To je zelo dobra možnost, zlasti zato, ker nam omogoča, da vidimo razvoj našega oblikovanja v vizualnem smislu in v realnem času. Tu je nekaj nasvetov za uporabo te možnosti in pridobitev največja zmogljivost:
Poskusite biti natančni
Da bi dosegli profesionalni rezultat, je priporočljivo, da upoštevate mere in deleže vašega spletnega mesta. Nastavite vrednosti Širina in Višina predloge, ki jo načrtujete, in ju uporabite v svoji maketi. Ko kopirate kodo CSS, bomo postavili vsak element kot referenco razdaljo v slikovnih pikah med vsakim elementom in robovi platna. Upoštevajte tudi velikosti in hierarhične razloge, ki jih boste vključili v svojo zasnovo, vključno s poravnavo vsakega elementa in razmikom med njimi, da boste svojim uporabnikom zagotovili največjo berljivost.
Uporaba vodnikov in pravil vmesnika vam bo pomagala zgraditi lično in čisto predlogo z vsemi elementi, ki so popolnoma poravnani.
Konfigurirajte vse značilnosti vsakega elementa
Možnost kopiranja kode CSS nam daje možnost zelo natančnega oblikovanja našega spletnega mesta z uporabo oblik in besedilnih slojev. Vsebina vsake plasti bo kopirana v odložišče in jo bomo lahko hitro prilepili v naš slog. Iz slojev oblike zajemite vrednosti za naslednje nastavitve:
- Velikost
- Položaj
- Barva poteze
- Barva polnila (vključno z prelivi)
- Spustite senco
Iz besedilnih slojev lahko zajamemo naslednje vrednosti:
- Družina pisav
- Velikost pisave
- Debelina pisave
- Višina vrstice
- Podčrtano
- Prečrtano
- Nadpis
- Podpis
- Poravnava besedila
Imejte to v mislih in nastavite vsako od teh vrednosti, da bo zagotovila iskalni slog.
Delo s skupinami slojev
Ta funkcija prevede naše delo, organizirano po dveh vrstah predavanj, po eno za vsako skupino, ki združuje plasti oblik ali besedila in razred za vsako plast ene od teh vrst. Vsak razred skupine bo predstavljal nadrejeni element div, ki bo vseboval podrejene elemente div in bo ustrezal slojem, vstavljenim v vsako skupino. Na ta način bosta nastavljeni zgornji in levi vrednosti podrejenih vsebnikov glede na nadrejeni vsebnik. Upoštevati morate, da ta možnost pri pametnih predmetih ni na voljo in hkrati ne bo uporabljena za več kot en sloj, razen če so združeni.
Koraki za pretvorbo
Ko naredite maketo, prilagodite posamezne elemente in jih razvrstite po skupinah, sledite le naslednjim korakom:
- Pojdite na ploščo slojev in izberite eno od teh dveh možnosti:
- Z desno miškino tipko kliknite plast oblike ali besedila ali skupino slojev in izberite Kopirajte CSS v kontekstnem meniju.
- Izberite plast oblik ali besedila ali skupino slojev, nato izberite možnost Kopirajte CSS v meniju plošče Sloji.
-
Kodo prilepite v dokument s slogi in jo uporabite na svojih straneh prek html5.
