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

החלונית DOM

חפש

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

למד כיצד להשתמש בחלונית DOM לעריכת HTML על-ידי מיפוי רכיבים בתצוגת Live או בבוררים שהוחלו ב-CSS Designer עם סימון HTML.

החלונית DOM מעבדת עץ HTML אינטראקטיבי עבור תוכן סטטי ודינמי. תצוגה זו עוזרת לך למפות רכיבים בצורה חזותית ב-Live View עם סימוני ה-HTML שלהם והבוררים החלים ב-CSS Designer. באפשרותך גם לבצע עריכה מהירה במבנה ה-HTML בחלונית DOM ולראות כיצד השינויים מיושמים מיידית ב-Live View.

כדי לפתוח את החלונית DOM, בחר Window ‏> DOM. לפתיחת החלונית DOM, באפשרותך גם להשתמש בקיצורי המקשים ‎- Ctrl + /‎‏ (Win‏); Cmd + /‎‏ (Mac).

כאשר אתה גורר רכיבים במטרה להוסיף אותם ישירות ב-Live View, הסמל </> מוצג לפני שחרור הרכיב. ניתן ללחוץ על סמל זה כדי לפתוח את החלונית DOM ולהוסיף את הרכיב במיקום המתאים במבנה המסמך. לקבלת מידע נוסף, ראה הוספת רכיבים ישירות ב-Live View.

החלונית DOM מציגה רק רכיבים סטטיים בתצוגת Code או Design, ורכיבים סטטיים ודינמיים גם יחד ב-Live View.

במסמכי Fluid Grid,‏ החלונית DOM רק מאפשרת לך להציג באופן חזותי את מבנה ב-HTML DOM, אך אינה מאפשרת לך לערוך את מבנה ה-HTML.

הערה:

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

ניתן להזיז את החלונית DOM ולמקם אותה בכל מיקום נוח בממשק המשתמש. ניתן גם לעגן את החלונית יחד עם חלוניות אחרות.

כיצד להשתמש בחלונית DOM

פתח את המסמך הנדרש ולאחר מכן פתח את החלונית DOM על-ידי בחירת Window ‏> DOM.
עבור אל Live View ולחץ על הרכיב שאותו ברצונך לבחון או לערוך.
- סימון ה-HTML של הרכיב שנבחר מודגש בחלונית DOM.
- הבורר החל מודגש ב-CSS Designer.
- הקוד הרלוונטי מודגש ב-Code View.
- התג הרלוונטי מודגש (בכחול) ב-Tag Selector.
לחלופין, באפשרותך לבחור רכיב HTML בחלונית DOM. כאשר אתה לוחץ על רכיב כלשהו בחלונית DOM:
- Live View גולל עד לרכיב התואם.
- אם Code View פתוח, Code View גולל עד לקוד התואם לרכיב.
- CSS Designer (החלונית Selectors) גולל לבורר התואם הקרוב ביותר (בדומה ללחיצה על הרכיב ב-Live View).
- התג מודגש ב-Tag Selector.
סנכרון זה בין התצוגות ו-CSS Designer מאפשר לך להציג באופן חזותי את סימון ה-HTML והסגנון המשויכים לרכיב שנבחר במבט מהיר.
המשך לערוך את הרכיב כנדרש (עריכת HTML או CSS). לקבלת מידע על השימוש בחלונית DOM לעריכת סימון HTML, ראה עריכת מבנה HTML באמצעות החלונית DOM. לקבלת מידע על CSS Designer, ראה פריסת עמודים באמצעות CSS Designer.

עריכת מבנה HTML באמצעות החלונית DOM

הרכיב הנוכחי שנבחר בדף מודגש בחלונית DOM. יש לך אפשרות לנווט לכל צומת או רכיב באמצעות מקשי החצים.

קיצורי מקשים:

Duplicate -‏ Ctrl + D (Win)/ Cmd + D (Mac)‎
Delete -‏ Del או Backspace
Copy -‏ Ctrl + C (Win)/Cmd + C (Mac)‎
Paste -‏ Ctrl + V (Win)/Cmd + V (Mac)‎
Undo -‏ Ctrl + Z (Win)/Cmd + Z (Mac)‎
Redo -‏ Ctrl + Y (Win)/Cmd + Y (Mac)‎

לבחירת רכיב או צומת, לחץ על הרכיב או הצומת. להרחבה או לכיווץ של רכיב או צומת, לחץ על תגית ה-HTML או לחץ לחיצה כפולה על הבורר הצמוד לתגית.
לשכפול רכיב או צומת, לחץ לחיצה ימנית על הרכיב או הצומת ולחץ על Duplicate. כאשר אתה משכפל רכיב עם מזהה המשויך לו, המזהה גדל בהפרש קבוע עבור הרכיב החדש (המשוכפל).
להעתקת רכיב או צומת, לחץ לחיצה ימנית על הרכיב או הצומת ולחץ על Copy. אם העתקת רכיב עם צאצאים, רכיבי הצאצא מועתקים גם כן.
להדבקת רכיב או צומת, לחץ על הרכיב או הצומת שתחתיו ברצונך לקנן את הרכיבים המועתקים. לאחר מכן, לחץ לחיצה ימנית על הרכיב או הצומת ולחץ על Paste.
כדי להדביק את הרכיב המועתק כצאצא של רכיב או צומת ספציפי, לחץ לחיצה ימנית על רכיב או צומת (אב) ולאחר מכן לחץ על Paste As Child.
כדי לשנות מיקום של רכיבים או את הסדר שלהם, גרור את הרכיב למיקום הרצוי בתוך החלונית DOM.

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

למחיקת רכיב או צומת, לחץ לחיצה ימנית על הרכיב או הצומת ולחץ על Delete.

באפשרותך לבטל (Ctrl/Cmd + Z) או לבצע שוב (Ctrl/Cmd + Y) את הפעולות שביצעת בחלונית DOM.

כדי לבצע את פעולות העריכה שצוינו לעיל ברכיבים מרובים, בחר רכיבים מרובים בחלונית DOM:

הקש Shift ולחץ על הרכיבים הנדרשים לבחירת אפשרויות סמוכות
הקש Ctrl ולחץ על הרכיבים הנדרשים לבחירת אפשרויות שאינן סמוכות

הערה:

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

חשוב: אם הדף מכיל JavaScript, תפריט הלחיצה הימנית בחלונית DOM מוצג במשך פרק זמן מסוים ולאחר מכן הופך ללא זמין. כדי להשתמש בתפריט הלחיצה הימנית, הסתר את התצוגות של Live View ‏(Live View Options ‏> ‏Hide Live View Displays), ולאחר מכן השבת את JavaScript ‏(Live View Options ‏> ‏Disable JavaScript).

עריכת תגים, מחלקות ומזהים בחלונית DOM

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

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

רכיבי Insert בחלונית DOM

כעת ניתן להוסיף רכיבים חדשים לדף האינטרנט באמצעות חלונית DOM באחת מהדרכים הבאות:

הקש על מקש הרווח או לחץ על סמל ההוספה הסמוך לרכיב הנדרש בחלונית DOM. בתפריט הנפתח שמופיע, לחץ על אחת האפשרויות. כדי להקיף רכיבים מרובים בתג, בחר את הרכיבים הנדרשים ולאחר מכן בחר Wrap Tag מאפשרויות ההוספה.

לחץ על הרכיב הנדרש בחלונית Insert וגרור אותו לחלונית DOM. מחווני Live Guide מופיעים כדי לציין היכן יתווסף הרכיב. שחרר את הרכיב במיקום הנדרש.

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

כאשר מוסיפים כל אחד מהתגים הבאים ושומרים את השינויים, טקסט ברירת המחדל מתווסף בתצוגת Code‏, Live ו-Design‏:
div‏,‏ header‏,‏ nav‏,‏ aside‏,‏ article‏,‏ section‏,‏ footer‏,‏ h1-h6‎‏ ו-hgroup
כאשר מוסיפים תג של טבלה ושומרים את השינויים, מתווספת טבלת ‎3X3‎‏.
כאשר מוסיפים תג embed או img ושומרים את השינויים, מופיעה תיבת הדו-שיח Select File ומבקשת ממך לבחור קובץ מתאים.
כאשר מוסיפים תג meta ושומרים את השינויים, מתווסף הקוד הבא בתצוגת Code‏: ‏‎<meta name="" content="">‎‏
כאשר מוסיפים תג figure ושומרים את השינויים, מתווסף תג figure עם Figcaption מקונן.
כאשר מוסיפים תג ul או ol ושומרים את השינויים, מתווסף תג ol/ul עם תג li מקונן.

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

משתמש חדש?