Alates CS6 versiooni saabumisest rakendas Adobe Photoshopis veebidisainide paigutamiseks ja arendamiseks väga kasuliku võimaluse. Operatsioon on väga lihtne ja ennekõike kiiresti. Rakenduse kaudu on meil võimalik luua kaskaadseid stiililehti, võttes aluseks meie kuju ja tekstikihid. Protseduur on sama lihtne kui maketi väljatöötamine, elementide koodiversiooni kopeerimine ja lehele kleepimine.
See on väga hea võimalus eelkõige seetõttu, et see võimaldab meil näha oma disaini arengut visuaalselt ja reaalajas. Siin on mõned näpunäited selle võimaluse kasutamiseks ja maksimaalne jõudlus:
Püüa olla täpne
Professionaalse tulemuse saamiseks on soovitatav arvestada oma saidi mõõtmete ja proportsioonidega. Määrake kujundatava malli laius ja kõrgus ja rakendage need oma maketile. Kui kopeerite CSS-koodi, asetame iga elemendi võrdluseks iga elemendi ja lõuendi servade vaheline kaugus pikslites. Kasutajate maksimaalse loetavuse tagamiseks võtke arvesse ka suurusi ja hierarhilisi põhjuseid, mille kavatsete oma kujundusse lisada, sealhulgas iga elemendi joondamine ja nende vaheline kaugus.
Juhendite ja liidese reeglite kasutamine aitab teil luua korraliku ja puhta malli, mille kõik elemendid on ideaalselt joondatud.
Konfigureerige iga elemendi kõik omadused
CSS-koodi kopeerimise võimalus annab meile võimaluse kujundada oma sait vormi- ja tekstikihtide kasutamise abil väga täpselt. Iga kihi sisu kopeeritakse lõikelauale ja saame selle kiiresti oma stiililehele kleepida. Kujundage kujundikihtidest järgmiste seadete väärtused:
- tamaño
- Asukoht
- Löögi värv
- Täitevärv (ka gradient)
- Varju langemine
Tekstikihtidest saame lüüa järgmised väärtused:
- Fontide perekond
- Fondi suurus
- Fondi paksus
- Reakõrgus
- Allajoonitud
- Läbikriipsutamine
- Ülaindeks
- Alaindeks
- Teksti joondamine
Pidage seda meeles ja määrake kõik need väärtused otsitava stiili pakkumiseks.
Töö kihtgruppidega
See funktsioon tõlgib meie tööd, mis on korraldatud kahte tüüpi klasside kaupa: üks igale rühmale, mis koondab kujundi- või tekstikihte, ja klass nende tüüpide iga kihi jaoks. Iga rühmaklass esindab vanema div elementi, mis sisaldab alam div elemente, mis vastavad igasse rühma sisestatud kihtidele. Sel viisil määratakse alamkonteinerite ülemine ja vasak väärtus, lähtudes vanemkonteinerist. Peaksite meeles pidama, et see valik pole nutikate objektidega saadaval ja see ei kehti korraga rohkem kui ühe kihi jaoks, kui need pole rühmitatud.
Teisendamise sammud
Kui olete oma maketi teinud, olete iga elemendi kohandanud ja grupeerinud, peate järgima ainult neid samme:
- Minge kihtide paneelile ja valige üks kahest võimalusest.
- Paremklõpsake kuju või tekstikihil või kihtide rühmal ja valige Kopeeri CSS kontekstimenüüs.
- Valige kujundid või tekstikiht või kihtide rühm ja seejärel suvand Kopeeri CSS paneeli menüüs Kihid.
-
Kleepige kood oma stiililehe dokumenti ja rakendage seda oma lehtedele html5 kaudu.
