למד כיצד לעצב, לערוך ולהציג בתצוגה מקדימה את עמודי האינטרנט שלך בתצוגת Live. סדר מחדש או הוסף רכיבים, החל בוררים, ערוך תכונות תמונה, הוסף, ערוך ועצב טקסט מבלי לעבור ל-Code 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 נעשית ריקה בעת עריכת הדף, סגור את תצוגת Live View והפעל אותה שוב.
  • אם העריכות אינן משתקפות בדף, לחץ על הלחצן Refresh ב-Live View.

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

לא ניתן לערוך רכיב עם גבול אפור ב-Live View
לא ניתן לערוך רכיב עם גבול אפור ב-Live View

הערה:

ב-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 עבור הרכיב.

Element Display עבור הרכיב
Element Display עבור הרכיב

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

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

הערה:

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

Quick Property Inspector

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

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

Quick Property Inspector אשר מופיע מעל לרכיבי הדף ב-Live view
Quick Property Inspector אשר מופיע מעל לרכיבי הדף ב-Live view

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

הערה:

סמל Code navigator אינו מוצג ב-Live View בעת השימוש ב-Quick Property Inspector.

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

Quick Property Inspector עבור תמונות במסמכי Bootstrap
Quick Property Inspector עבור תמונות במסמכי Bootstrap

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

Quick Property Inspector עבור טקסט

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

Quick Property Inspector עבור טקסט
Quick Property Inspector עבור טקסט

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

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

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

Live View Property Inspector

Live View Property Inspector הוא ה-Property Inspector המסורתי הזמין מתחת לחלון Document.

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

הערה:

Live View Property Inspector אינו זמין בדפי Fluid Grid.

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

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

  • HTML
  • CSS
  • Image
  • Table
  • מדיה - רק שמע HTML5 ווידאו HTML5
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

הערה:

jQuery UI ומאפיינים הקשורים לתבניות אינם זמינים לעריכה ב-Live View Property Inspector.

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

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

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

Quick Property Inspector עבור עריכת תכונות
Quick Property Inspector עבור עריכת תכונות

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

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

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

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

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

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

הערה:

בעת ההקשה על Enter לאחר המעבר למצב עריכה, התוצאות משתנות בהתאם למיקומה של נקודת ההכנסה לפני ההקשה על Enter. השינויים דומים למה שמתרחש בעת ההקשה על Enter בעת עריכת טקסט ב-Design View.

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

גבול כתום מציין מצב עריכה
גבול כתום מציין מצב עריכה

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

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

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

נתמך לא נתמך
כל רכיבי ה-HTML המסוגלים להכיל טקסט

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

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

 

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

עיצוב טקסט

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

Quick Property Inspector עבור עיצוב טקסט
Quick Property Inspector עבור עיצוב טקסט

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

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

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

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

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

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

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

  1. עבור אל Live View.

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

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

  3. שחרר את הרכיב בחלק העליון של רכיב אחר, בחלקו התחתון, מימינו או משמאלו, בהתבסס על מחווני Live Guides. לחלופין, שחרר את הרכיב במיקום מדויק במבנה המסמך על-ידי לחיצה על </> ושימוש בחלונית DOM.

    המרכיב מתווסף לדף ומודגש.

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

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

הערה:

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

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

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

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

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

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

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

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

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

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

  1. כאשר המסמך שלך פתוח בחלונית המסמך, לחץ View ‏> Inspect.

    הערה:

    אם אינך נמצא עדיין בתצוגת Live, מצב Inspect מפעיל אותה באופן אוטומטי.

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

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

  4. (אופציונלי) לחץ על רכיב כדי לנעול בחירת סימון.

    הערה:

    הלחיצה על הרכיב לנעילת בחירת הסימון מכבה את מצב Inspect.

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

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

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

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

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

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

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

טקסט מודגש נבחר
הטקסט המודגש נבחר.

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


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

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

הבורר שנמצא במוקד מודגש
הבורר שבו המערכת ממוקדת מוקף בגבול כתום.

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

הערה:

ניתן להשתמש ב-Ctrl+[‎ או Cmd+[‎ כדי לבחור את רכיב האב וב-Ctrl+]‎ או Cmd+]‎ כדי לבחור את רכיב הצאצא.

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

אם אתה מעדיף שלא להשתמש ב-Element Display ו-Quick Property Inspector ב-Live View, באפשרותך להשבית תכונות עריכה אלה.

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

  • (Win)‏ Ctrl+Alt+H
  • (Mac)‏ Cmd+Ctrl+H

  1. עבור ל-Live View ולחץ על View ‏> Live View Options.

  2. בחר Hide Live View Displays.

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

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

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת