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

עבודה עם תגי div

חפש

עודכן לאחרונה בתאריך 20 במאי 2021

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

ניתן ליצור פריסות דף בעזרת הוספה ידנית של תגי div והחלת סגנונות מיקום CSS על התגים. תג div הוא תג המגדיר חלוקות לוגיות בתוכן של דף אינטרנט. ניתן להשתמש בתגי div כדי למרכז גושי תוכן, ליצור אפקטים של עמודות, ליצור אזורי צבע שונים ועוד.

אם אין לך ניסיון בשימוש בתגי div ובגיליונות סגנונות CSS ליצירת דפי אינטרנט, ניתן ליצור פריסת CSS המבוססת על אחת מהפריסות המוגדרות מראש הנלוות ל-Dreamweaver‏. אם אינך חש בנוח להשתמש ב-CSS, אך אתה יודע להשתמש בטבלאות, תוכל גם לנסות להשתמש בטבלאות.

הוספת תגי div

ניתן להשתמש בתגי div כדי ליצור גושים של פריסת CSS ולמקם אותם במסמך. הדבר שימושי אם יש לך גיליון סגנונות CSS קיים עם סגנונות מיקום המקושר למסמך. Dreamweaver מאפשר להוסיף במהירות תג div ולהחיל עליו סגנונות קיימים.

בחלון המסמך, הצב את נקודת ההכנסה במקום שברצונך להוסיף בו תג div.
בצע אחת מהפעולות הבאות:
- בחר Insert‏ > HTML‏ ‏> Div.‎
- בקטגוריה HTML בחלונית Insert, לחץ על Div.‎
הגדר כל אחת מהאפשרויות הבאות:

Insert

מאפשר לבחור במיקום של תג div ובשם התג אם זה איננו תג חדש.

Class

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

ID

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

הערה:

Dreamweaver יתריע אם תזין מזהה הזהה לזה של תג אחר במסמך.

New CSS Rule

פותח את תיבת הדו-שיח New CSS Rule.
לחץ על OK.

התג div מופיע כתיבה במסמך עם טקסט מציין מיקום. כשמזיזים את המצביע לקצה התיבה, Dreamweaver מסמן אותה.

אם התג div הוא בעל מיקום מוחלט, הוא הופך לרכיב AP. ‏(ניתן לערוך תגי div שאינם בעלי מיקום מוחלט).

עריכת תגי div

לאחר הוספת תג div, ניתן לטפל בו או להוסיף לו תוכן.

הערה:

תגי div שהם בעלי מיקום מוחלט הופכים לרכיבי AP.

כשמקצים גבולות לתגי div, או כשבוחרים CSS Layout Outlines, הגבולות מוצגים. ‏(האפשרות CSS Layout Outlines נבחרת כברירת מחדל בתפריט View >‏ Visual Aids). כשמזיזים את המצביע לתג div‏, Dreamweaver מסמן את התג. ניתן לשנות את צבע הסימון או לבטל את הסימון.

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

בצע אחד מהצעדים הבאים כדי לבחור בתג div:
- לחץ על גבול תג div.
הערה:

חפש את הסימון כדי לראות את הגבול.
- לחץ בתוך תג ה-div והקש פעמיים Control+A ‏(Windows) או Command+A ‏(Macintosh).
- לחץ בתוך תג div ובחר בתג div בעזרת בורר התגים בתחתית חלון המסמך.
בחר Window >‏ CSS Designer כדי לפתוח את החלונית CSS Designer אם היא אינה פתוחה עדיין.

כללים שהוחלו על תג div זה יופיעו בחלונית.
בצע את שינויי העריכה הרצויים.

שינוי צבע הסימון של תגי div

כשמזיזים את המצביע לקצה של תג div בתצוגת Design, ‏Dreamweaver מסמן את גבולות התג. ניתן להפעיל או לבטל את הסימון בהתאם לצורך, או לשנות את צבע הסימון בתיבת הדו-שיח Preferences.

בחר Edit ‏> Preferences ‏(Windows) או Dreamweaver ‏> Preferences ‏(Macintosh).
בחר Highlighting ברשימת הקטגוריות מצד שמאל.
בצע אחד מהשינויים הבאים ולחץ על OK:
- כדי לשנות את צבע הסימון של תגי div, לחץ את תיבת הצבע Mouse-Over, ובחר צבע סימון בעזרת דוגם הצבע (או הזן ערך הקסדצימלי לצבע הסימון בתיבת הטקסט).
- כדי להפעיל או לבטל את הסימון לתגי div, סמן או בטל את הסימון באפשרות Show checkbox for Mouse-Over.
הערה:

אפשרויות אלה משפיעות על כל האובייקטים, כגון טבלאות, ש-Dreamweaver מסמן כשמזיזים אליהם את המצביע.

גושי פריסת CSS

ניתן להציג גושי פריסת CSS בזמן העבודה בתצוגת Design. גוש פריסת CSS הוא רכיב בדף HTML שניתן למקם בכל מקום בדף. ביתר פירוט, גוש פריסת CSS הוא תג div ללא display:inline, או כל רכיב אחר הכולל את הצהרות CSS display:block‏, position:absolute, או position:relative. להלן מספר דוגמאות לרכיבים הנחשבים לגושי פריסת CSS ב-Dreamweaver:

תג div
תמונה שהוקצה לה מיקום מוחלט או יחסי
תגa שהוקצה לו הסגנון display:block
פסקה שהוקצה לה מיקום מוחלט או יחסי

הערה:

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

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

רשימת העזרים החזותיים הבאה לגושי פריסת CSS מתארת מה Dreamweaver מעבד כגלוי לכל אחד מהם:

CSS Layout Outlines

מציג את קווי המתאר של גושי פריסת CSS בדף.

CSS Layout Backgrounds

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

בכל פעם שמפעילים את הכלי החזותי לתצוגת רקעים של גושי פריסת CSS, ‏Dreamweaver מקצה אוטומטית לכל גוש פריסת CSS צבע רקע מוגדר. ‏(Dreamweaver בוחר את הצבעים בעזרת אלגוריתמים – אין לך אפשרות להקצות את הצבעים בעצמך). הצבעים שהוקצו נבדלים חזותית, ומוקצים כדי לסייע לך להבדיל בין גושים בפריסת CSS.

CSS Layout Box Model

מציג דגם תיבה (כלומר מרווח ושוליים) של גוש פריסת CSS שנבחר.

תצוגה של גושי פריסת CSS

ניתן להפעיל או לבטל את העזרים החזותיים של גושי פריסת CSS בהתאם לצורך. כדי להציג גושי פריסת CSS, בחר View‏ ‏> Design View Options‏ ‏> Visual Aids.

ניתן להפעיל או לבטל CSS Layout Backgrounds‏, CSS Layout Box Model ו- CSS Layout Outlines.

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

Adobe

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

משתמש חדש?