A CS6 verzió érkezése óta az Adobe a Photoshop alkalmazásban nagyon hasznos lehetőséget adott a webes tervek elrendezésére és fejlesztésére. A művelet az nagyon könnyű és mindenekelőtt gyors. Az alkalmazás révén képesek leszünk létrehozni lépcsőzetes stíluslapokat, referenciaként figyelembe véve alak- és szövegrétegeinket. Az eljárás olyan egyszerű, mint fejleszteni a makettünket, lemásolni az elemeink kódváltozatát és beilleszteni a lapunkra.
Ez egy nagyon jó lehetőség, különösen azért, mert lehetővé teszi számunkra, hogy vizuálisan és valós időben lássuk a tervezésünk fejlődését. Íme néhány tipp ennek a lehetőségnek a használatához és a maximális teljesítmény:
Próbálj pontos lenni
A szakmai eredmény elérése érdekében javasoljuk, hogy vegye figyelembe webhelyének méreteit és arányait. Állítsa be a tervezendő sablon szélességének és magasságának értékét, és alkalmazza azokat a makettjére. Amikor másolja a CSS kódot, minden elemet elhelyezünk referenciaként, figyelembe véve az egyes elemek és a vászon széle közötti pixelekben mért távolságot. Vegye figyelembe a méretben és a hierarchikus okokat is, amelyeket bele fog foglalni a tervezésbe, beleértve az egyes elemek igazítását és az egyes elemek közötti távolságot, hogy a felhasználók maximálisan olvashatóak legyenek.
Az útmutatók és a kezelőfelület szabályainak használata segít egy tiszta és tiszta sablon elkészítésében, annak minden elemével tökéletesen igazodva.
Konfigurálja az egyes elemek összes jellemzőjét
A CSS-kód másolásának lehetősége lehetőséget nyújt számunkra, hogy az űrlap- és szövegrétegek használatával nagy pontossággal tervezzük meg webhelyünket. Minden réteg tartalmát a vágólapra másoljuk, és gyorsan beilleszthetjük a stíluslapunkba. Az alakrétegekből rögzítse a következő beállítások értékeit:
- méret
- Pozíció
- Stroke színe
- Kitöltési szín (a színátmeneteket is beleértve)
- Árnyék
A szövegrétegekből a következő értékeket tudjuk megragadni:
- Betűtípus család
- Betűméret
- Betűvastagság
- Vonal magassága
- Aláhúzva
- áthúzás
- Felső index
- Előirat
- Szöveg igazítása
Ezt tartsa szem előtt, és állítsa be ezeket az értékeket, hogy biztosítsa a kívánt stílust.
Munka rétegcsoportokkal
Ez a függvény kétféle osztályba rendezve fordítja le a munkánkat, egy-egy minden csoport számára, amely összefogja az alakzatok vagy a szöveg rétegeit, és egy osztály az ilyen típusú rétegek mindegyikéhez. Minden csoportosztály egy szülő div elemet fog képviselni, amely gyermek div elemeket fog tartalmazni, és amely megfelel az egyes csoportokba beillesztett rétegeknek. Ily módon a gyermek konténerek felső és bal értékét a szülő konténerre hivatkozva állítjuk be. Ne feledje, hogy ez az opció intelligens objektumoknál nem érhető el, és egyidejűleg csak egy rétegre lesz használható, hacsak nem csoportosítják őket.
Az átalakítás lépései
Miután elkészítette a makettjét, testre szabta az egyes elemeket, és csoportok szerint csoportosította őket, csak ezeket a lépéseket kell végrehajtania:
- Lépjen a rétegek panelre, és válassza a következő két lehetőség egyikét:
- Kattintson a jobb gombbal egy alakzatra vagy szöveges rétegre vagy rétegcsoportra, és válassza a lehetőséget CSS másolása a helyi menüben.
- Válasszon ki egy alakzatot vagy szöveges réteget vagy rétegcsoportot, majd válassza az opciót CSS másolása a Rétegek panel menüjében.
-
Illessze be a kódot a stíluslapdokumentumba, és alkalmazza az oldalaira a html5-n keresztül.
