בחר File > Fluid Grid (legacy).
עודכן לאחרונה בתאריך
20 בדצמבר 2021
מעוניין ליצור אתרי אינטרנט מהירי תגובה למסכים מרובים? למד כיצד להשתמש ברכיבי 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.
ערך ברירת המחדל של מספר העמודות ברשת מוצג במרכז סוג המדיה. כדי להתאים אישית את מספר העמודות עבור התקן כלשהו, ערוך את הערך בהתאם לצורך.
כדי לקבוע את רוחב הדף בהשוואה לגודל המסך, הגדר את הערך באחוזים.
ניתן גם לשנות את רוחב מרווח העמודות. מרווח העמודות הוא הרווח בין שתי עמודות.
ציין את אפשרויות 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 |
מסתיר את הרכיב. |
|
Move up a row |
מעביר את הרכיב שורה אחת למעלה |
|
Duplicate |
שכפול הרכיב שנבחר כעת. ה-CSS המקושר לרכיב משוכפל גם הוא. |
|
Delete |
עבור בוררי מזהה, מחק הן את ה-HTML והן את ה-CSS. כדי למחוק רק HTML, הקישו על DELETE. |
|
Align |
עבור בוחרי מחלקה, האפשרות יישור פועלת כלחצן אפס שוליים. |
פתק
ניתן לעבור בין רכיבים באופן מחזורי באמצעות מקשי החצים למעלה ולמטה. בחר את גבול הרכיב ולאחר מכן הקש על מקש החץ.
רכיבים מקננים
כדי לקנן רכיבים זורמים בתוך רכיבים זורמים אחרים, ודא שהמוקד נמצא בתוך רכיב האב. לאחר מכן, הוסף את רכיב הצאצא הדרוש.
קיימת תמיכה גם באפשרות Nested Duplication. האפשרות Nested Duplication משכפלת את ה-HTML (של הרכיב שנבחר) ויוצרת את ה-Fluid CSS המתאים. רכיבים מוחלטים הנכללים ברכיב שנבחר ממוקמים בהתאם. ניתן לשכפל רכיבים מקננים גם באמצעות לחצן השכפול.
בעת מחיקת רכיב אב, נמחקים גם ה- CSS המתאים לרכיב, הצאצאים שלו וה- HTML המשויך. ניתן גם למחוק רכיבים מקננים ביחד באמצעות הלחצן Delete (קיצור מקשים: Ctrl+Delete).
פריטים דומים נוספים
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
