מדריך למשתמש ביטול

יצירת עיצוב מהיר תגובה באמצעות פריסות Fluid Grid

חפש

עודכן לאחרונה בתאריך 18 בפברואר 2022

מעוניין ליצור אתרי אינטרנט מהירי תגובה למסכים מרובים? למד כיצד להשתמש ברכיבי Fluid Grid ב-Dreamweaver לעיצוב אתרי אינטרנט למכשירים ניידים ומחשבים שולחניים.

פריסת אתר האינטרנט צריכה להתאים ולהסתגל לממדי המכשיר שבו היא מוצגת (עיצוב מגיב). פריסות Fluid Grid מספקות דרך חזותית ליצירת פריסות שונות המתאימות למכשירים שבהם מוצג אתר האינטרנט.

לדוגמה, אתר האינטרנט שלך יוצג במחשבים שולחניים, מחשבי לוח וטלפונים ניידים. באפשרותך להשתמש בפריסות Fluid Grid כדי לציין פריסות עבור כל אחד מהתקנים אלה. בהתאם להצגת אתר האינטרנט במחשב שולחני, מחשב לוח או טלפון נייד, הפריסה המתאימה משמשת להצגת אתר האינטרנט.

מידע נוסף: Adaptive Layout לעומת Responsive Layout

מצב Inspect אינו זמין עבור מסמכים בפריסת Fluid Grid.

יצירת פריסת Fluid Grid

ניתן לערוך פריסות קיימות מסוג Fluid Grid ב-Dreamweaver 2017. עם זאת, לא ניתן ליצור פריסות מסוג Fluid Grid.

במקום זאת, השתמש ב-Bootstrap כדי ליצור פריסות מהירות תגובה ב-Dreamweaver 2017. לקבלת מידע נוסף על Bootstrap, ראה עבודה עם קובצי Bootstrap.

בחר File‏ > Fluid Grid (legacy)‎.
ערך ברירת המחדל של מספר העמודות ברשת מוצג במרכז סוג המדיה. כדי להתאים אישית את מספר העמודות עבור התקן כלשהו, ערוך את הערך בהתאם לצורך.
כדי לקבוע את רוחב הדף בהשוואה לגודל המסך, הגדר את הערך באחוזים.
ניתן גם לשנות את רוחב מרווח העמודות. מרווח העמודות הוא הרווח בין שתי עמודות.
ציין את אפשרויות CSS עבור הדף.

בעת הלחיצה על Create, אתה מתבקש לציין קובץ CSS. באפשרותך לבצע אחת מהפעולות הבאות:
- יצירת קובץ CSS חדש.
- פתיחת קובץ CSS קיים.
- ציון קובץ ה- CSS שנפתח כקובץ CSS של Fluid Grid.
פריסת Fluid Grid עבור טלפונים ניידים מוצגת כברירת מחדל. בנוסף, מוצגת החלונית Insert עבור Fluid Grid. השתמש באפשרויות בחלונית Insert כדי ליצור את הפריסה שלך.

כדי לעבור לעיצוב הפריסה עבור התקנים אחרים, לחץ על הסמל המתאים באפשרויות מתחת לתצוגה Design.
שמור את הקובץ. בעת שמירת קובץ ה-HTML, אתה מתבקש לשמור את הקבצים התלויים, כגון boilerplate.css ו-respond.min.js במיקום במחשב שלך. ציין מיקום ולחץ על Copy.

הקובץ boilerplate.css מבוסס על HTML5 boilerplate. זוהי ערכה של סגנונות CSS שמבטיחה תאימות באופן העיבוד של דף האינטרנט שלך בין התקנים מרובים. respond.min.js הוא ספריית JavaScript שמסייעת לספק תמיכה עבור שאילתות מדיה בגרסאות ישנות יותר של הדפדפן.

עריכת מסמכים בפריסת Fluid Grid

ניתן לערוך מסמכי Fluid Grid ישירות בתצוגת Live כדי לבצע את הפעולות הבאות:

שיוך מחלקות ומזהים של HTML לרכיבים. לקבלת מידע נוסף, ראה Element Display.
עריכת טקסט ותכונות של תמונות. לקבלת מידע נוסף, ראה Quick Property Inspector וגם עריכת טקסט בתצוגה Live.
הוספת רכיבים חדשים. לקבלת מידע נוסף, ראה הוספת רכיבי Fluid Grid.

ניתן גם להציג באופן חזותי את מבנה HTML DOM של מסמך Fluid Grid באמצעות Element Quick View.

הוספת רכיבי Fluid Grid

בחלונית Insert‏ (Window ‏> ‏Insert) מפורטים הרכיבים שבהם ניתן להשתמש בפריסת Fluid Grid. בעת הוספת הרכיבים, ניתן לבחור להוסיף אותם כרכיבי Fluid‏.

בחלונית Insert, לחץ על הרכיב שברצונך להוסיף.
בתיבת הדו-שיח שמופיעה, לחץ על Before, ‏After או Nest כדי למקם את הרכיב ביחס לרכיב ההפניה שמסומן במסמך.
בחר מחלקה או הזן ערך עבור המזהה. התפריט Class מציג מחלקות מקובץ ה- CSS שציינת בעת יצירת הדף.
סמן את תיבת הסימון Insert As Fluid Element‏.

בעת בחירת רכיב שנוסף, מוצגות האפשרויות להסתיר, לשכפל או למחוק את הרכיב Div. עבור קובצי Div בשכבות זה מעל זה, אפשרות החלפת קובצי ה- Div מוצגת.

אפשרות	תיאור
Swap Div	החלפת הרכיב שנבחר כעת ברכיב מעליו או מתחתיו.
Hide	הסתרת הרכיב. כדי לבטל הסתרה של רכיב, בצע אחת מהפעולות הבאות: כדי לבטל הסתרה של בוררי מזהה, שנה את מאפיין התצוגה בקובץ ה-CSS שיש לחסום. (display:block) כדי לבטל הסתרה של בוררי מחלקה, הסר את המחלקה שהוחלה (hide_<MediaType>) בקוד המקור.
Move up a row	העלאת הרכיב שורה אחת למעלה
Duplicate	שכפול הרכיב שנבחר כעת. CSS המקושר לרכיב משוכפל גם הוא.
Delete	עבור בוררי מזהה, מחק הן את ה-HTML והן את ה-CSS. כדי למחוק רק את ה-HTML, הקש Delete. עבור בוררי מחלקה, רק HTML נמחק.
Align	עבור בוררי מחלקה, האפשרות Align משמשת כלחצן ביטול שוליים. עבור בוררי מזהה, לחצן היישור מיישר את הרכיב בהתאם לרשת.

הערה:

ניתן לעבור בין רכיבים באופן מחזורי באמצעות מקשי החצים למעלה ולמטה. בחר את גבול הרכיב ולאחר מכן הקש על מקש החץ.

רכיבים מקננים

כדי לקנן רכיבים זורמים בתוך רכיבים זורמים אחרים, ודא שהמוקד נמצא בתוך רכיב האב. לאחר מכן, הוסף את רכיב הצאצא הדרוש.

קיימת תמיכה גם באפשרות Nested Duplication. האפשרות Nested Duplication משכפלת את ה-HTML (של הרכיב שנבחר) ויוצרת את ה-Fluid CSS המתאים. רכיבים מוחלטים הנכללים ברכיב שנבחר ממוקמים בהתאם. ניתן לשכפל רכיבים מקננים גם באמצעות לחצן השכפול.

בעת מחיקת רכיב אב, נמחקים גם ה- CSS המתאים לרכיב, הצאצאים שלו וה- HTML המשויך. ניתן גם למחוק רכיבים מקננים ביחד באמצעות הלחצן Delete (קיצור מקשים: Ctrl+Delete).

פריטים דומים נוספים

יצירת שאילתות מדיה

קבל עזרה במהירות ובקלות

משתמש חדש?