Lehe Joonlaud lisab igale veebilehele Photoshop-stiilis joonlauad ja lohistatavad juhisjooned. Pikslitäpsed joonlauad kulgevad vaateava ülemise ja vasaku serva mööda ning saad juhisjooni lehele lohistada kauguste mõõtmiseks, joonduse kontrollimiseks ja vahede kontrollimiseks — kõik otse avalehel.
Disainerid, kes töötavad Figmas või Photoshopis, tuginevad vahede ja joonduse kontrollimiseks joonlaudadele ja juhisjoontele. Kuid kui need disainid on rakendatud HTML/CSS-iga, tähendab pikslitäpsuse kontrollimine tavaliselt DevToolsi avamist, elementide ükshaaval üle hõljutamist ja arvutatud väärtuste võrdlemist makettiga. Lehe Joonlaud toob tuttava joonlaua ja juhiste töövoo otse brauserisse. Horisontaalne joonlaud koos kriipsumärkidega ulatub üle vaateava ülaosa ja vertikaalne joonlaud vasaku serva mööda — mõlemad näitavad pikslipositsiioone. Klõpsa ja lohista kummaltki joonlaualt, et tõmmata juhisjoon lehele. Juhised on värvikoodiga (sinine horisontaalsetele, punane vertikaalsetele) ja näitavad nende pikslipositsiooni. Kahe paralleelse juhise vaheline kaugus arvutatakse automaatselt ja kuvatakse. Lohista juhiseid nende ümberpaiknemiseks või tee topeltklõps eemaldamiseks. Kogu kihistus on mittesekkuv — see istub lehe peal ilma paigutust või interaktsioone mõjutamata.
Täpsed joonlauad kriipsumärkidega iga 50 piksli tagant kulgevad vaateava ülemise ja vasaku serva mööda. Joonlauad kerivad koos lehega ja näitavad täpseid pikslipositsiioone suhtes lehe alguspunktiga (0,0). Kriipsumärgid 10px intervallidega ja sildid iga 50px tagant.
Klõpsa ja lohista horisontaalselt joonlaualt horisontaalse juhise loomiseks või vertikaalselt joonlaualt vertikaalse juhise jaoks. Juhised kinnituvad kursori positsioonile ja näitavad täpset pikslite koordinaati (nt y: 200px). Lohista ümberpaiknemiseks, tee topeltklõps eemaldamiseks.
Kui kaks paralleelset juhistet on paigutatud, arvutatakse nende vaheline pikslite kaugus automaatselt ja kuvatakse ühendava sulu ja sildiga. Paiguta kaks horisontaalset juhist 120px vahega ja näe "120px" nende vahel.
Horisontaalsed juhised on sinised, vertikaalsed juhised punased — mistõttu on neid lihtne eristada esmapilgul, kui on paigutatud mitu juhistet. Iga juhis näitab oma positsiooni väikeses sildi märgises.
Joonlauad ja juhised renderdatakse läbipaistva kihistusena, mis ei mõjuta lehe DOM-i, paigutust ega JavaScripti. Saad endiselt klõpsata läbi, et suhelda lehe elementidega. Kihistus tabab ainult klõpse joonlaudadel ja juhiste käepidemetel.
Paiguta nii palju juhiseid kui vaja — piirangut pole. Loo täielik mõõtmisvõrk horisontaalsete ja vertikaalsete juhistega, mis märgivad kõik olulised joonduspunktid lehel.
Makett ütleb, et päis on 80px kõrge ja sisu algab 120px ülevalt. Paiguta horisontaalsed juhised nendesse positsioonidesse ja kontrolli kohe, kas rakendatud leht vastab disainispetsifikatsioonidele.
Paiguta juhised korduvate elementide (kaardid, loendielemendid, jaotised) ülaossa ja alaossa, et kontrollida, kas neil kõigil on ühesugune vahekaugus. Ebajärjepidevad lüngad elementide vahel muutuvad kohe ilmseks.
Paiguta vertikaalne juhis pealkirja vasaku serva juurde, seejärel kontrolli, kas allolev lõiketekst, nupud ja pildid joonduvad sama joonega. Isegi mõne piksli suured valesjoondused on juhise kõrval nähtavad.
Paiguta kaks vertikaalset juhist elemendi vasaku ja parema serva juurde, et mõõta selle laiust. Paiguta kaks horisontaalset juhist kõrguse jaoks. Automaatselt arvutatud kaugus annab sulle täpsed piksli mõõtmed.
Paiguta vertikaalne juhis tavalistesse murdepunkti laiustesse (768px, 1024px, 1280px) ja muuda brauseri suurust, et kontrollida, kas elemendid voolavad ümber õigesti igal murdepunktil. Juhised püsivad fikseerituna visuaalsete viitepunktidena.
Ava DevSuite Pro ujuv dokk ja klõpsa Lehe Joonlaua ikoonil. Pikslitäpsed joonlauad ilmuvad piki vaateava ülemist ja vasakut serva.
Klõpsa ja lohista ülemiselt joonlaualt horisontaalse juhisjoone paigutamiseks või vasakult joonlaualt vertikaalse juhise jaoks. Juhis järgib sinu kursorit ja kinnitub piksli positsioonile, kus vabastad.
Iga juhis näitab oma pikslipositsiooni (nt y: 200px). Kui kaks paralleelset juhist on paigutatud, kuvatakse nende vaheline kaugus automaatselt märgistatud suluga.
Lohista mis tahes juhist, et viia see uude positsiooni — kauguse sildid uuenevad reaalajas. Tee topeltklõps juhisel selle lehelt eemaldamiseks.
Klõpsa Lehe Joonlaua ikoonil uuesti, et peita kõik joonlauad ja juhised. Sinu juhiste positsioonid säilitatakse, kui aktiveerid uuesti sama seansi ajal.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
