סרגל דף מוסיף סרגלים בסגנון Photoshop וקווי מנחה גררים לכל דף אינטרנט. סרגלים מדויקים לפיקסל רצים לאורך השוליים העליונים והשמאליים של ה-viewport, ובאפשרותך לגרור guide lines אל הדף כדי למדוד מרחקים, לבדוק יישור ולאמת ריווח — הכול ישירות על הדף החי.
מעצבים שעובדים ב-Figma או ב-Photoshop מסתמכים על סרגלים וקווי מנחה לבדיקת ריווח ויישור. אך כאשר עיצובים אלה מיושמים ב-HTML/CSS, אימות דיוק הפיקסל מחייב בדרך כלל פתיחת DevTools, ריחוף מעל אלמנטים אחד אחד והשוואת ערכים מחושבים מול הקובץ המקורי. סרגל דף מביא את זרימת העבודה המוכרת של סרגל-וקווי-מנחה ישירות לדפדפן. סרגל אופקי עם סימני חלוקה עובר לאורך ראש ה-viewport, וסרגל אנכי לאורך השוליים השמאליים — שניהם מציגים מיקומי pixel. לחץ וגרור מכל אחד מהסרגלים כדי למשוך guide line אל הדף. קווי המנחה מקודדים בצבע (כחול לאופקי, אדום לאנכי) ומציגים את מיקומם בפיקסלים. המרחק בין כל שני קווי מנחה מקבילים מחושב ומוצג אוטומטית. גרור קווי מנחה לשינוי מיקומם, או לחץ לחיצה כפולה להסרתם. כל ה-overlay אינו פולשני — הוא יושב מעל הדף מבלי להשפיע על הפריסה או האינטראקציות.
סרגלים מדויקים עם סימני חלוקה כל 50 pixel רצים לאורך השוליים העליונים והשמאליים של ה-viewport. הסרגלים גוללים עם הדף ומציגים מיקומי pixel מדויקים יחסית לנקודת המוצא של הדף (0,0). סימני חלוקה במרווחים של 10px עם תוויות כל 50px.
לחץ וגרור מהסרגל האופקי כדי ליצור guide אופקי, או מהסרגל האנכי ל-guide אנכי. קווי המנחה נצמדים למיקום הסמן ומציגים את הקואורדינטה המדויקת בפיקסלים (לדוגמה, y: 200px). גרור לשינוי מיקום, לחץ לחיצה כפולה להסרה.
כאשר שני קווי מנחה מקבילים ממוקמים, מרחק ה-pixel ביניהם מחושב ומוצג אוטומטית עם סוגר מחבר ותווית. מקם שני guide lines אופקיים במרחק 120px ותראה "120px" מתויג ביניהם.
קווי מנחה אופקיים הם כחולים, קווי מנחה אנכיים הם אדומים — מה שמקל על הבחנה ביניהם במבט אחד כאשר מרובים ממוקמים. כל guide מציג את מיקומו בתג תווית קטן.
סרגלים וקווי מנחה מרונדרים כ-overlay שקוף שאינו משפיע על ה-DOM, הפריסה, או ה-JavaScript של הדף. עדיין ניתן ללחוץ דרכו כדי לקיים אינטראקציה עם אלמנטי הדף. ה-overlay לוכד לחיצות רק על הסרגלים וידיות קווי המנחה.
מקם כמה קווי מנחה שתצטרך — אין הגבלה. צור רשת מדידה מלאה עם guide lines אופקיים ואנכיים המסמנים כל נקודת יישור משמעותית בדף.
ה-mockup קובע שהכותרת גבוהה 80px והתוכן מתחיל ב-120px מהחלק העליון. מקם guide lines אופקיים באותם מיקומים ואמת מיידית האם הדף המיושם תואם את מפרטי העיצוב.
מקם guide lines בחלק העליון והתחתון של אלמנטים חוזרים (כרטיסים, פריטי רשימה, סקשנים) כדי לאמת שכולם בעלי ריווח זהה. פערים לא עקביים בין פריטים נהיים ברורים מיידית.
מקם guide אנכי בשוליים השמאליים של כותרת, ואז בדוק האם טקסט הפסקה, הכפתורים והתמונות מתחת מיושרים לאותו קו. חוסר יישור אפילו של מספר פיקסלים גלוי מול ה-guide.
מקם שני guide lines אנכיים בשוליים השמאלי והימני של אלמנט למדידת רוחבו. מקם שני guide lines אופקיים לגובה. המרחק המחושב אוטומטית נותן לך את ממדי ה-pixel המדויקים.
מקם guide אנכי ברוחבי נקודות שבירה נפוצים (768px, 1024px, 1280px) ושנה את גודל הדפדפן כדי לבדוק האם אלמנטים מסתדרים מחדש כראוי בכל נקודת שבירה. קווי המנחה נשארים קבועים כנקודות ייחוס ויזואליות.
פתח את ה-floating dock של DevSuite Pro ולחץ על אייקון סרגל הדף. סרגלים מדויקים לפיקסל מופיעים לאורך השוליים העליונים והשמאליים של ה-viewport.
לחץ וגרור מהסרגל העליון כדי למקם guide line אופקי, או מהסרגל השמאלי ל-guide אנכי. ה-guide עוקב אחרי הסמן ונצמד למיקום ה-pixel שבו אתה משחרר.
כל guide מציג את מיקומו בפיקסלים (לדוגמה, y: 200px). כאשר שני קווי מנחה מקבילים ממוקמים, המרחק ביניהם מוצג אוטומטית עם סוגר מתויג.
גרור כל guide להזזתו למיקום חדש — תוויות המרחק מתעדכנות בזמן אמת. לחץ לחיצה כפולה על guide להסרתו מהדף.
לחץ שוב על אייקון סרגל הדף להסתרת כל הסרגלים וקווי המנחה. מיקומי ה-guide נשמרים אם תפעיל מחדש במהלך אותה סשן.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
