עבודה עם תגי div

עודכן לאחרונה בתאריך 25 בספטמבר 2023

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

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

אם אינכם מכירים את השימוש בתגיות div וב-Cascading Style Sheets (CSS) כדי ליצור עמודי אתרים, תוכלו ליצור פריסת CSS המבוססת על אחת הפריסות המעוצבות מראש שמגיעות עם Dreamweaver. אם אינכם מרגישים בנוח לעבוד עם CSS, אבל אתם מכירים את השימוש בטבלאות, תוכלו גם לנסות להשתמש בטבלאות.

הוספת תגי div

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

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

בצע אחת מהפעולות הבאות:

בחרו Insert > HTML > Div.
בקטגוריה HTML של לוח Insert, לחצו על Div.

הגדר כל אחת מהאפשרויות הבאות:

הוספה

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

Class

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

מאפשר לשנות את השם המשמש לזיהוי תג 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 בזמן שאתם עובדים בתצוגת עיצוב. בלוק פריסת 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 הנבחר.