נוח להשתמש ברשתות מודולריות בעת פיתוח עיצוב או יצירת תמונה מורכבת. הם משמשים בסיס להרכב, ומחלקים את הסדין למספר מוגדר של צעדים אנכיים ואופקיים במרחקים זהים או שונים.
נחוץ
תכנית פוטושופ למגורים
הוראות
שלב 1
כל העורכים הגרפיים המודרניים ותוכניות עיצוב אתרים כוללים רשתות מודולריות מובנות. אם אתה עובד ב- Adobe Photoshop, הפעל את תצוגת הרשת לסידור קל של אובייקטים של התמונה ואת מיקומם המדויק על הגיליון. לשם כך, עבור לפריט התפריט ערוך והעביר את העכבר מעל הכיתוב 'העדפה'. בתפריט שמופיע בחר בפריט Guides, Grid & Slices (תלוי בגרסת התוכנית, לפריט זה עשויים להיות שמות שונים, בחר במילה Grid).
שלב 2
בחלון ההגדרות שנפתח, הגדר את הפרמטרים של הרשת המודולרית. באזור הרשת, בחר את צבע השורות היוצרות את פריטי הרשת ואת רווח השורות. לחץ על "אישור" ובדוק כיצד השינויים שבוצעו ישפיעו על מראה התמונה. בסביבת פיתוח האינטרנט של Adobe DreamWeaver, הרשת כלולה כברירת מחדל בפריסת הדף שאתה מפתח.
שלב 3
באפשרותך להוסיף טבלאות שונות (פריטי רשת) עם כל קבוצה של שורות ועמודות באמצעות פריט הוסף טבלה, וכן להוסיף טבלאות חדשות לתאים, וכך ליצור רשת מורכבת לבניית אלמנטים בעמוד.
שלב 4
ניתן ליצור רשת מודולרית באופן ידני באמצעות סגנונות CSS. לשם כך השתמש בכלים #grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr ומודולים אחרים. לדוגמה, קטע הקוד הבא יוצר רשת של ארבעה מודולים ברוחב נתון:.page-layout {margin-right: -5px; }.box-box {float: left; שוליים: 0 5 פיקסלים 5 פיקסלים 0; }.lb-1 {רוחב: 779 פיקסלים; } / * 100% * /. Lb-2 {רוחב: 583 פיקסלים; } / * 75% * /. Lb-3 {רוחב: 387 פיקסלים; } / * 50% * /. Lb-4 {רוחב: 191 פיקסלים; } / * 25% * /
שלב 5
הנוכחות של רשת מודולרית מקלה על מעצבים מתחילים ומפתחי אתרים, ועל אדונים מנוסים בתחום זה. פרויקטים שנוצרו על בסיס רשת מודולרית קלים לעריכה והעברה, וזה מאוד נוח לכמויות גדולות של עבודה. ניתן גם להפסיק את העבודה בכל עת ולהמשיך להשתמש בקובץ השמור.
