Sayfa Cetveli, herhangi bir web sayfasına Photoshop tarzı cetveller ve sürüklenebilir kılavuz çizgileri ekler. Piksel-doğru cetveller görüntü alanının üst ve sol kenarları boyunca uzanır ve mesafeleri ölçmek, hizalamayı kontrol etmek ve boşluğu doğrulamak için sayfaya kılavuz çizgileri sürükleyebilirsiniz — hepsi doğrudan canlı sayfada.
Figma veya Photoshop'ta çalışan tasarımcılar, boşluk ve hizalamayı kontrol etmek için cetvellere ve kılavuzlara güvenir. Ancak bu tasarımlar HTML/CSS'te uygulandığında, piksel doğruluğunu doğrulamak tipik olarak DevTools'u açmak, öğelerin üzerine tek tek gelmek ve hesaplanmış değerleri maketle karşılaştırmak anlamına gelir. Sayfa Cetveli, tanıdık cetvel ve kılavuz iş akışını doğrudan tarayıcıya getirir. Onay işaretli yatay bir cetvel görüntü alanının üstünü kaplar ve dikey bir cetvel sol kenarı kaplar — her ikisi de piksel konumlarını gösterir. Sayfaya bir kılavuz çizgi çekmek için her iki cetvelden tıklayıp sürükleyin. Kılavuzlar renk kodludur (yatay için mavi, dikey için kırmızı) ve piksel konumlarını gösterir. Herhangi iki paralel kılavuz arasındaki mesafe otomatik olarak hesaplanır ve görüntülenir. Yeniden konumlandırmak için kılavuzları sürükleyin veya kaldırmak için çift tıklayın. Tüm kaplama invazif olmayan — düzeni veya etkileşimleri etkilemeden sayfanın üzerinde durur.
Her 50 pikselde onay işaretleri olan hassas cetveller görüntü alanının üst ve sol kenarları boyunca uzanır. Cetveller sayfayla birlikte kayar ve sayfa orijine göre (0,0) doğru piksel konumlarını gösterir. 10px aralıklarla onay işaretleri, her 50px'te etiketler.
Yatay bir kılavuz oluşturmak için yatay cetvelden veya dikey bir kılavuz için dikey cetvelden tıklayıp sürükleyin. Kılavuzlar imleç konumuna yapışır ve tam piksel koordinatlarını (örn. y: 200px) gösterir. Yeniden konumlandırmak için sürükleyin, kaldırmak için çift tıklayın.
İki paralel kılavuz yerleştirildiğinde, aralarındaki piksel mesafesi otomatik olarak hesaplanır ve bağlayıcı bir köşeli parantez ve etiketle görüntülenir. İki yatay kılavuzu 120px aralıkla yerleştirin ve aralarında etiketli "120px" görün.
Yatay kılavuzlar mavi, dikey kılavuzlar kırmızıdır — birden fazla kılavuz yerleştirildiğinde bunları bir bakışta ayırt etmeyi kolaylaştırır. Her kılavuz küçük bir etiket rozetinde konumunu gösterir.
Cetveller ve kılavuzlar, sayfanın DOM'unu, düzenini veya JavaScript'ini etkilemeyen şeffaf bir kaplama olarak işlenir. Sayfa öğeleriyle etkileşim kurmak için yine de üzerinden tıklayabilirsiniz. Kaplama yalnızca cetveller ve kılavuz tutamaçları üzerindeki tıklamaları yakalar.
İhtiyacınız olduğu kadar çok kılavuz yerleştirin — sınır yok. Sayfadaki her önemli hizalama noktasını işaretleyen yatay ve dikey kılavuzlarla tam bir ölçüm ızgarası oluşturun.
Maket başlığın 80px yüksekliğinde ve içeriğin üstten 120px'de başladığını söylüyor. Bu konumlara yatay kılavuzlar yerleştirin ve uygulanan sayfanın tasarım belirtimlerine uyup uymadığını anında doğrulayın.
Tümünün aynı boşluğa sahip olduğunu doğrulamak için tekrarlanan öğelerin (kartlar, liste öğeleri, bölümler) üstüne ve altına kılavuzlar yerleştirin. Öğeler arasındaki tutarsız boşluklar anında belirgin hale gelir.
Bir başlığın sol kenarına dikey bir kılavuz yerleştirin, ardından altındaki paragraf metninin, düğmelerin ve resimlerin aynı çizgiye hizalandığını kontrol edin. Sadece birkaç pikselin yanlış hizalanması kılavuza göre görünür.
Genişliğini ölçmek için bir öğenin sol ve sağ kenarlarına iki dikey kılavuz yerleştirin. Yükseklik için iki yatay kılavuz yerleştirin. Otomatik hesaplanan mesafe size tam piksel boyutlarını verir.
Yaygın kesme noktası genişliklerinde (768px, 1024px, 1280px) dikey bir kılavuz yerleştirin ve her kesme noktasında öğelerin doğru şekilde yeniden akıp akmadığını kontrol etmek için tarayıcıyı yeniden boyutlandırın. Kılavuzlar görsel referans noktaları olarak sabit kalır.
DevSuite Pro yüzen yuvasını açın ve Sayfa Cetveli simgesine tıklayın. Görüntü alanının üst ve sol kenarları boyunca piksel-doğru cetveller belirir.
Yatay bir kılavuz çizgisi yerleştirmek için üst cetvelden veya dikey bir kılavuz için sol cetvelden tıklayıp sürükleyin. Kılavuz imlecinizi takip eder ve bıraktığınız piksel konumuna yapışır.
Her kılavuz piksel konumunu gösterir (örn. y: 200px). İki paralel kılavuz yerleştirildiğinde, aralarındaki mesafe etiketli bir köşeli parantez ile otomatik olarak görüntülenir.
Bir kılavuzu yeni bir konuma taşımak için sürükleyin — mesafe etiketleri gerçek zamanlı güncellenir. Bir kılavuzu sayfadan kaldırmak için çift tıklayın.
Tüm cetvelleri ve kılavuzları gizlemek için Sayfa Cetveli simgesine tekrar tıklayın. Aynı oturum sırasında yeniden etkinleştirirseniz kılavuz konumlarınız korunur.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
