23Jul
A ceruza egy drótkötélelő eszköz, amelyet felhasználhatunk az alkalmazás felhasználói felületének méretezéséhez. A Pencil nagyszerű dolog, hogy könnyű, könnyen használható és szorosan integrálható a Firefoxhoz. A tetején minden ingyenes nyílt forrású alkalmazás! A cikk végén bemutatunk egy egyszerű bemutatót a Ceruza használatáról a Brizzly-szerű drótváz létrehozásához.
Miért hozunk létre drótvázakat?
A drótvázlat egy oldalelrendezési elképzelés vázlata. A drótvázkeret egy oldal információtervezésére összpontosít, annak érdekében, hogy a tervezés megfeleljen a felhasználó igényeinek. A drótváz általában különböző formájú( például dobozokból, oválisokból és gyémántokból áll) a tartalom, a funkcionális és a navigációs elemek megjelenítésére. Ezek az alakzatok megjelenítik az elhelyezést az oldalon.
Először úgy tűnhet, hogy időpocsékolást okoz egy oldal vázlatairól. A drótkeret fontos ahhoz, hogy a felhasználók az oldal fontos elemére összpontosítsanak. Az oldal durva vázlatának létrehozása, fantáziadús elemek nélkül, a felhasználók figyelmét olyan fontos elemekre ruházza át, mint az oldalelemek méretezése, elrendezése és elhelyezése. Kezdjük jobban megérteni, hogy az ügyfél valóban mit akar, és szükség van a szoftverről, amikor a felhasználó az oldal fontos elemeire koncentrál. A drótkeret létrehozása lehetővé teszi Önnek és a felhasználóknak, hogy hatékonyan működjenek együtt, és korán felismerjék a lehetséges tervezési problémákat.
A ceruza használatának megkezdése
Töltsd le a Ceruza ceruza ceruza kiegészítők oldaláról. A ceruza telepítése után elérhető az "Eszközök" & gt;"Ceruza rajzolása".
Így néz ki Brizzly. Ez egy elég hűvös webes alkalmazás, amely összegyűjti a Facebook és Twitter egy oldalát.
Ez a vezetékes keret végeredménye. A drótváz fő alakjai, téglalapok, szövegdobozok és fülek. A cikk következő része egyszerű példát ad arra, hogyan lehet létrehozni az egyes alakokat.
Egy téglalap létrehozása
A drótkeret-alakzat létrehozásának első lépése az alak Formátum gyűjtése a vászonra.
Átméretezi a téglalapot megfelelő szélességre és magasságra.
Testreszabhatja a Ceruza formájú szöveg, szegély és háttérszínt. Jobb egérgombbal kattintson a téglalapra, és válassza a "Tulajdonságok" lehetőséget a Tulajdonságok ablak megnyitásáhozEz a háttér tulajdonságai képernyő.Állítsa a téglalap háttérszínét fehérre( #FFFFFF).
Kattintson a "Határ" fülre, és állítsa be a határ tulajdonságait.Állítsa a szegély színét fekete( # 000000) értékre, és állítsa át a keret súlyát 1-re.
A szöveg tulajdonságai képernyőn személyre szabhatjuk a szöveg típusát, méretét, stílusát, súlyát, színét, fényességét és opacitását.
Lapok létrehozása
Az otthoni, vázlatos, képsávok három lapot helyeznek egymásra. Húzza három "Tabs Panel" elemet a téglalapba.Átméretezheti az egyes lapokat úgy, hogy minden lap egymás mellett jelenjen meg.
Nyissa meg a szöveg tulajdonságainak képernyőjét a "Képek" és a "Vázlat" lap betűszínének beállításához.Állítsa be szürkére( # 989898).
Szöveg létrehozása
Húzza a "Szöveg" alakot a vászonra, hogy létrehozza az egyes menüpontokat. Beállíthatjuk a szöveg megjelenését a szöveg tulajdonságai ablak elérésével.
Hasznos tippek a színek megváltoztatásához
A szín az egyik legfontosabb része a kellemes drótváz kialakításának. A forma színének legegyszerűbb módja a szín HTML kódjának megadása. Egy adott színű HTML kód megmutatása nehéz lehet. A w3cschools.com HTML-színes cheat-lapjaival megkereshetjük a megfelelő HTML-kódot egy adott színhez.
Azt is szeretnénk használni colorzilla, hogy válasszon színek a képernyőn, és használja a ceruza. Kattints a Firefox bal alsó sarkában látható szemcsepp ikonra, hogy kiválasszon színt a képernyőn. A ColorZilla színválasztóját is duplán kattintva kattinthatjuk a szemcsepp ikonra. Csak illessze be a Hex kódot Pencil színes HTML kódjába.
Következtetés
A ceruza könnyen használható drótkötél-szerszám. A ceruza integrációja a Firefox használatával lehetővé teszi számunkra, hogy más Firefox plugint használjunk, hogy segítsen létrehozni egy jobb drótvázakat
Linkek
Letöltés ceruza
Letöltés Colorzilla
W3C HTML Color Cheat Sheet
