עריכת קוד בתצוגת Design

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

השתמש בנושא זה כדי ללמוד כיצד להשתמש ב-Property inspector לעריכת קוד בתצוגת Design ב-Adobe Dreamweaver.

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

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

בחירת תגים בנים בתצוגת Design

אם תבחרו אובייקט בתצוגת Design שמכיל תגיות צאצא – לדוגמה, טבלת HTML – תוכלו לבחור במהירות את תגית הצאצא הראשונה של האובייקט הזה על ידי בחירה ב-Edit > Select Child.

פתק

פקודה זו זמינה רק בתצוגת Design.

לדוגמה, לתגית <table> יש בדרך כלל תגיות צאצא <tr>. אם תבחרו תגית <table> בבורר התגיות, תוכלו לבחור את השורה הראשונה בטבלה על ידי בחירה ב-'Edit' > 'Select Child'.Dreamweaver בוחר את התגית <tr> הראשונה בבורר התגיות. מכיוון שלתגית <tr> עצמה יש תגיות צאצא, כלומר תגיות <td>, בחירה ב-Edit > Select Child שוב בוחרת את התא הראשון בטבלה.

עריכת קוד ב-Property inspector

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

פתק

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

לחץ על הטקסט או בחר באובייקט בדף.

בקר המאפיינים עבור הטקסט או האובייקט מופיע מתחת לחלון המסמך. אם בקר המאפיינים לא מוצג, בחרו ב-Window > Properties.

בצע שינויים בתכונות ב-Property inspector.

עריכת CFML ב-Property inspector

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

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

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

אם התגית מכילה ביטוי תנאי, בצעו שינויים בו בתיבת Expression.

סקירה של Quick Tag Editor

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

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

כדי להגדיר את אפשרויות עורך התגיות המהיר, פתחו את עורך התגיות המהיר על ידי לחיצה על Control-T (Windows) או Command-T (Macintosh).

ל-Quick Tag Editor יש שלושה מצבים:

  • מצב Insert HTML משמש להוספת קוד HTML חדש.
  • מצב Edit Tag משמש לעריכת תג קיים.
  • מצב Insert HTML משמש להוספת קוד HTML חדש.

  • מצב Edit Tag משמש לעריכת תג קיים.

  • מצב Wrap Tag משמש לעטיפת הקטע הנוכחי שבחרת בתג חדש.

פתק

המצב בו Quick Tag Editor נפתח תלוי בבחירה הנוכחית בתצוגת Design.

בכל שלושת המצבים, ההליך הבסיסי לשימוש ב-Quick Tag Editor הוא זהה: פתח את העורך, הזן או ערוך תגים ותכונות ולאחר מכן סגור את העורך.

ניתן לעבור בין המצבים בהקשת Control+T ‏(Windows) או Command+T ‏(Macintosh) כאשר Quick Tag Editor פעיל.  

עריכת קוד עם Quick Tag Editor

השתמש ב-Quick Tag Editor‏ (Edit‏ > Quick Tag Editor) כדי להוסיף ולערוך במהירות תגי HTML מבלי לצאת מהתצוגה Design.

הוספת תג HTML

בתצוגת Design, לחצו בדף כדי למקם את נקודת ההכנסה במקום שבו אתם רוצים להכניס קוד.
הקש Control+T ‏(Windows) או Command+T ‏(Macintosh).

Quick Tag Editor נפתח במצב Insert HTML.

Quick Tag Editor במצב Insert HTML
Quick Tag Editor במצב Insert HTML

הזן תג HTML והקש Enter.

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

הקש Escape כדי לצאת מבלי לבצע שינויים.

עריכת תג HTML

בחר אובייקט בתצוגת Design.

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

הקש Control+T ‏(Windows) או Command+T ‏(Macintosh).

Quick Tag Editor נפתח במצב Edit Tag.

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

כברירת מחדל, השינויים מוחלים על המסמך כשאתם לוחצים Tab או Shift+Tab.

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

עיטוף הבחירה הנוכחית עם תגי HTML

בחרו טקסט לא מעוצב או אובייקט בתצוגת עיצוב.
פתק

אם תבחר טקסט או אובייקט הכוללים תג HTML פותח או סוגר, Quick Tag Editor ייפתח במצב Edit Tag ולא במצב Wrap Tag.

לחצו Control+T (Windows) או Command+T (Macintosh), או לחצו על הלחצן עורך התגים המהיר במפקח המאפיינים.

Quick Tag Editor נפתח במצב Wrap Tag.

הזינו תג פתיחה יחיד, כמו strong, ולחצו Enter (Windows) או Return (Macintosh).

התג מוכנס בתחילת הבחירה הנוכחית, ותג סגירה תואם מוכנס בסוף.

כדי לצאת מבלי לבצע שינויים, הקש Escape.

שימוש בתפריט הרמזים בעורך התגים המהיר

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

באפשרותכם גם לבטל את תפריט הרמזים או להתאים את העיכוב לפני שהתפריט מופיע בעורך התגים המהיר.

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

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

פתק

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

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

  • השתמש במקשי החצים למעלה ולמטה כדי לבחור בפריט.

  • השתמש בסרגל הגלילה כדי לאתר פריט.

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

ביטול תפריט הרמזים או שינוי העיכוב לפני הופעתו

בחרו Edit > Preferences (Windows) או Dreamweaver > Preferences (Macintosh) ובחרו Code Hints.

תיבת הדו-שיח Code Hints Preferences מופיעה.

כדי לבטל את תפריט הרמזים, בטלו את הבחירה באפשרות "Enable Code Hints".

עריכת קוד עם בורר התגים

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

עריכה או מחיקה של תג

לחץ במסמך.

התגיות שחלות בנקודת ההוספה מופיעות בבורר התגיות.

לחצו לחיצה ימנית (Windows) או Control-click (Macintosh) על תגית בבורר התגיות.
כדי לערוך תג, בחר Edit Tag מתוך התפריט. ערכו את השינויים בעורך התגיות המהיר. למידע נוסף, ראו עריכת קוד בעורך התגיות המהיר.
כדי למחוק תג, בחר Remove Tag מתוך התפריט.

בחרו אובייקט המותאם לתגית

לחץ במסמך.

התגיות שחלות בנקודת ההוספה מופיעות בבורר התגיות.

לחץ על תג בבורר התגים.

האובייקט שהתג מייצג נבחר בדף.

פתק

השתמשו בטכניקה זו כדי לבחור שורות טבלה בודדות (תגיות tr) או תאים (תגיות td).

כתיבה ועריכת תסריטים בתצוגת Design view

ניתן לעבוד עם JavaScript ו-VBScript בצד הלקוח בתצוגת Code ובתצוגת Design, בדרכים הבאות:

  • כתבו תסריט JavaScript או VBScript לדף שלכם מבלי לעזוב את תצוגת Design.

  • צרו קישור במסמך שלכם לקובץ תסריט חיצוני מבלי לעזוב את תצוגת Design.

  • ערכו תסריט מבלי לעזוב את תצוגת Design.

    לפני שתתחילו, בחרו View > Visual Aids > Invisible Elements כדי לוודא שסמני התסריט מופיעים בדף.

כתיבת סקריפט בצד הלקוח

מקמו את נקודת ההוספה במקום שבו אתם רוצים את התסריט.

בחר Insert ‏> HTML ‏> Script.

בחר את קובץ הסקריפט בחלון הבחירה בקובץ.

פתק

אין צורך לכלול את תגי הסקריפט הפותחים והסוגרים.

תג סקריפט של הקובץ שנבחר מתווסף למסמך.

עריכת סקריפט

בחר בסמן הסקריפט.
ב-Property inspector, לחץ על הלחצן Edit.

הסקריפט מופיע בתיבת הדו-שיח Script Properties.

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

פתק

אם יש קוד בין תגיות התסריט, תיבת הדו-שיח Script Properties נפתחת גם אם יש גם קישור לקובץ תסריט חיצוני.

בתיבת ה-Language, ציינו JavaScript או VBScript כשפת התסריט.
בתפריט הקופץ Type, ציינו את סוג הסקריפט, בין אם מצד הלקוח או מצד השרת.
(אופציונלי) בתיבת Source, ציינו קובץ תסריט מקושר חיצונית.

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

ערוך את הסקריפט ולחץ על OK.

עריכת תסריטים בצד השרת של ASP בתצוגת Design

השתמשו ב-Property inspector של תסריט ASP כדי לבחון ולשנות תסריטים בצד השרת של ASP בתצוגת Design.

בתצוגת Design, בחרו את הסמל החזותי של תגית שפת השרת.
ב-Property inspector של תסריט ASP, לחצו על לחצן Edit .
ערוך את סקריפט ASP של צד השרת ולחץ על OK.

עריכת סקריפטים בדף באמצעות ה-Property inspector

ב-Property inspector, בחרו את שפת כתיבת התסריטים מהתפריט הקופץ Language, או הקלידו שם שפה בתיבת Language.
פתק

אם אתם משתמשים ב-JavaScript ואינכם בטוחים בגרסה, בחרו JavaScript במקום JavaScript1.1 או JavaScript1.2.

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

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

לחץ על Edit כדי לשנות את הסקריפט.

שימוש בהתנהגויות של JavaScript

תוכלו לצרף בקלות התנהגויות JavaScript (לצד לקוח) לאלמנטים של העמוד באמצעות הכרטיסייה Behaviors של Tag inspector. לפרטים נוספים, ראו יישום התנהגויות JavaScript מובנות ב-Dreamweaver.