עריכה ב-Live View

Live View משתמש במנגנון רינדור מבוסס Chromium כדי שהתוכן שלך ב-Dreamweaver ייראה בדיוק כמו שהוא נראה בדפדפני האינטרנט המועדפים עליך. במהלך הפיתוח, יש לך אפשרות לעבור ל-Live View כדי להציג את הדף שלך בתצורה מקדימה מהירה. בנוסף, כדי לחסוך זמן במעבר בין תצוגות שונות (תצוגת קוד ותצוגת עיצוב), יש לך אפשרות לערוך רכיבי HTML ישירות בתוך Live View.

Live View מתרענן מיידית כדי להציג את השינויים בדף.

באפשרותך להשתמש ברכיבים הבאים לעריכת הדף שלך ב-Live View:

• חלונית DOM: ‏(Window >‏ DOM)‏ מראה את מבנה ה-HTML של המסמך שלך ומאפשרת לך לבצע copy-paste, להעתיק, למחוק או לסדר מחדש את הרכיבים בתצוגה. ראה החלונית DOM לקבלת מידע נוסף.
• Element Display: מופיע מעל רכיב ה-HTML שנבחר ב-Live View.‏ Element Display מאפשר לך לשייך רכיבי HTML למחלקות ומזהים. ראה שיוך רכיבי HTML למחלקות ולמזהים לקבלת מידע נוסף.
• Quick Property Inspector: מופיע בעת לחיצה על סמל Sandwich ב-Element Display או בטקסט הנבחר. Quick Property Inspector מאפשר לך לערוך תכונות תמונה ולעצב טקסט ב-Live View. ראה Quick Property Inspector לקבלת מידע נוסף.
• Live View Property Inspector: מופיע מתחת לחלון Document ומאפשר לך לערוך מאפייני HTML ו-CSS שונים ב-Live View. ראה Live View Property Inspector לקבלת מידע נוסף.
• Insert panel:‏ (Window ‏> Insert‎) מאפשר לך לגרור רכיבים מהחלונית ישירות לתוך Live View. ראה ‏‫הוספת רכיבים ישירות ב-Live View לקבלת מידע נוסף.

עצות:

• אם תצוגת Live View נעשית ריקה בעת עריכת הדף, סגור את תצוגת Live View והפעל אותה שוב.
• אם העריכות אינן משתקפות בדף, לחץ על הלחצן Refresh ב-Live View.

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

Element Display

באמצעות Element Display, באפשרותך לשייך רכיבי HTML למחלקות ולמזהים ישירות ב-Live View. ה-Element Display משלים עבורך את המחלקות והמזהים הזמינים כדי לסייע לך להציג ולבחור במהירות את האפשרות הדרושה. 

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

שיוך רכיבי HTML למחלקות ולמזהים

לחץ על הרכיב הדרוש ב-List View.‏ The Element Display מופיע ומציג את המחלקה והמזהה המשויכים כעת.

כשאתה נמצא ב-Live View, באפשרותך גם ללחוץ על רכיב ה-HTML בחלונית DOM כדי להציג את Element Display עבור הרכיב.

• לביטול השיוך של רכיב ה-HTML למחלקה או למזהה, לחץ על 'x' ליד המחלקה או המזהה.
• לשינוי המחלקה או המזהה המשויכים לרכיב ה-HTML, לחץ בתוך התיבה. מופיעה רשימה של מחלקות ומזהים זמינים. ‫לחץ על האפשרות הנדרשת.
• להוספת מחלקה או מזהה ולהחלתם על הרכיב, לחץ על '+' והקלד את השם. כדי לשמור את השינויים, לחץ על '+' או הקש על Enter.

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

Quick Property Inspector

Quick Property Inspector‎ עבור תמונות

Quick Property Inspector מופיע מעל הרכיבים שנבחרו ב-Live View. באמצעות Property Inspector זה, יש לך אפשרות לערוך תכונות או לעצב טקסט ב-Live View.

להצגה או להסתרה של Quick Property Inspector, הקש Ctrl+Alt+H ‏(Win)/‏CMD+Ctrl+H ‏(Mac).

במסמכי Bootstrap, ‏Quick Property Inspector כולל גם אפשרויות להתאמה אישית של תמונות.

• Clip to Shape: לחץ כדי להפוך את הפינות של תמונות לעגולות או מעוגלות, או להציג כתמונה ממוזערת.
• Make image responsive: לחץ כדי לגרום לתמונות להגיב ולהתאים את עצמן לגדלי מסך שונים.

Quick Property Inspector עבור טקסט

Quick Property Inspector עבור טקסט ב-Live View מאפשר לך לעצב טקסט, ליישר טקסט על-ידי הזחה וכן להוסיף היפר-קישורים לטקסט במהירות. Quick Property Inspector עבור טקסט מופיע בעת לחיצה על סמל הכריך של רכיבי טקסט: h1-h6‏, pre ו-p.

• אפשרות העיצוב מאפשרת לך לשנות במהירות את תג הרכיב לאחד מהתגים הבאים: h1-h6‏, p ו-pre. 
• אפשרות הקישור עוזרת ליצור היפר קישור לרכיב טקסט. 
• הסמלים עבור Bold ו-Italic עוזרים להוסיף את התגים <strong> ו-<em> לרכיב הטקסט.
• סמלי ההזחה מסייעים לך להוסיף או להסיר הזחת טקסט. התג <blockquote> מתווסף או מוסר מהקוד בהתאמה.

במסמכי Bootstrap, ‏Quick Property Inspector עבור טקסט גם מאפשר לך ליישר ולהמיר את רכיבי הטקסט.

• Align: מיישר רכיבי טקסט ב-Bootstrap לשמאל, למרכז, לימין או לשני הצדדים על-ידי החלת המחלקות התואמות.
• Transform: משנה את רישיות הטקסט ברכיב על-ידי החלת מחלקות לאותיות קטנות, אותיות גדולות או אות גדולה בתחילת משפט.

Live View Property Inspector

מפקח המאפיינים של התצוגה החיה הוא מפקח המאפיינים המסורתי הזמין מתחת לחלון המסמך.

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

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

הנה רשימת הרכיבים שניתן לערוך באמצעות ה-Live View Property Inspector:

עריכת תכונות HTML

יש לך אפשרות להוסיף, לערוך או להסיר תכונות HTML של תמונות ישירות ב-Live View באמצעות Quick Property Inspector.

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

לעריכת התכונות, לחץ על סמל הכריך ב-Quick Property Inspector. יש לך אפשרות לשנות את מקור התמונה יחד עם תכונות אחרות כגון "title" ו-"alt", והשינויים ישתקפו באופן מיידי. בדומה, תוכל לשנות את הרוחב והגובה של התמונה ב-Live View.

השינויים שתערוך יישמרו בעת ביצוע אחת מהפעולות הבאות:

• לחץ במקום כלשהו מחוץ ל-Property Inspector
• הקש Enter
• הקש Tab כדי לערוך תכונה נוספת ב-Property Inspector
• שמור את הקובץ
  

בעת טעינה דינמית של תמונות, ניתן להשתמש ב-Quick Property Inspector‎ של התמונה כדי לבחון במהירות את התכונות המוגדרות עבור התמונה. 

עריכת טקסט ישירות ב-Live View

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

הגבול הכתום מסביב למרכיב הטקסט מציין שהמצב משתנה למצב עריכה. 

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

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

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

הטבלה הבאה מפרטת את התרחישים שיש ואין בהם תמיכה במהלך עריכת טקסט ב-Live View:

עיצוב טקסט

כעת ניתן לשנות את העיצוב של טקסט וטקסט של קישור על ישירות ב-Live View. להצגת אפשרויות עיצוב הטקסט, בחר מילה או צירוף מילים. ה-Quick Property Inspector עם אפשרויות העיצוב יופיע ממש מעל הטקסט שנבחר.

הוספת רכיבים ישירות ב-Live View

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

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

• מעל ומתחת - מוצג בעת ריחוף מעל כל סוגי הרכיבים/תגים, למעט תגים בתוך שורה. ריחוף עם סמן העכבר מעל 50% העליונים של רכיב יגרום להצגת מחוונים מעל אותו רכיב. ריחוף עם סמן העכבר מעל 50% התחתונים של רכיב יגרום להצגת מחוונים מתחת לאותו רכיב.

• מימין ומשמאל - מוצג בעת ריחוף מעל תגים בתוך שורה, לדוגמה <a>‏, <span> או מעל תגים שהוגדר להם 'מאפיין ציפה'.

כשאתה משתהה לזמן מה לפני שחרור רכיב, מופיע הסמל של DOM‏ (</>). כאשר אתה מרחף עם סמן העכבר מעל סמל זה, החלונית DOM נפתחת ויש לך אפשרות לשחרר את הרכיב בתוך מבנה DOM של המסמך.

כדי להוסיף רכיבים ישירות ב-Live View, בצע את השלבים הבאים:

בחירה באמצעות הכלי Marquee

בחירת Marquee מאפשרת למזג טקסטים על פני רכיבים ב-Live View.כעת בחרו ומזגו טקסט על פני רכיבים עם אפשרות הגזירה. תוכלו למזג רכיבים באמצעות המקש Delete או Backspace גם כן.
תוכלו לבחור בקלות בלוק של טקסט על ידי לחיצה וגרירה בתוך התג בתצוגה החיה. במהדורות של Dreamweaver שקדמו ל-2014.1 הרכיב כולו זז בעת לחיצה וגרירה של קטע טקסט. 

בחירה וגרירה ושחרור של רכיבים

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

על-ידי לחיצה על שם תג ב-Live View תוכל לבחור את התוכן המלא של אותו התג ב-Code View.

בדוק את הקוד ב-Live View

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

בנוסף לראיית התצוגה הוויזואלית של דגם התיבה במצב Inspect, ניתן גם להשתמש ב-CSS Designer כאשר אתה מרחף מעל לרכיבים ב-Live View.

כאשר ה-CSS Designer פתוח במצב Current ואתה מרחף מעל לרכיב על העמוד, הכללים והתכונות ב-CSS Designer מתעדכנים באופן אוטומטי כדי להציג בפניך את הכללים והמאפיינים עבור אותו רכיב.

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

ניווט בעזרת המקלדת ב-Live View

ניתן לעבור בין רכיבים בדף או בין בוררים ב-Element Display בעזרת המקלדת, כדי להאיץ את תהליך העריכה. 

מעבר בין רכיבים בדף

מקשי החץ למעלה והחץ למטה מסייעים לך לעבור בין רכיבים בדף ב-Live View. המעבר מבוסס על מבנה DOM של המסמך.

ניווט בעזרת המקלדת ב-Live View מאפשר לגשת בקלות לרכיבים מקוננים ולרכיבים מוקפים.

כאשר אתה ניגש לרכיב בעזרת החץ למעלה או החץ למטה, מוצג לך Element Display של אותו רכיב. תוכל לנווט לבוררים ב-Element Display או ללחוץ על Enter כדי לערוך את הטקסט ישירות ב-Live View.

מעבר בין בוררים

הקש על מקש Tab כדי לעבור בין הבוררים ב-Element Display. הבורר שבו המערכת ממוקדת מוקף בגבול כתום, כפי שמוצג להלן: 

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

השבתת עריכה ב-Live View

תרחישים שאינם נתמכים

• קובצי תבנית של Dreaweaver אינם ניתנים לעריכה ב-Live View.
• תגים שמכילים תוכן סטטי ותוכן דינמי. אמנם ניתן לערוך את הבוררים עבור תגים כאלו, אך לא ניתן לערוך טקסט ב-Live View. לחיצה כפולה על רכיבים כאלו ב-Live View תציג גבול אפור מסביבם כדי לציין שאין תמיכה בעריכת טקסט.
• תגים שהוחלו עליהם בוררים מדומים. אתה עשוי לקבלת תוצאות לא צפויות כשתנסה לערוך רכיבים כאלו ב-Live View.
• רשתות CSS נתמכות ב-Live View רק ב-Dreamweaver 2019 ובגירסאות מתקדמות יותר.

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

• פריסת עמודים באמצעות CSS Designer