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

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

 

 

השתמש בנושא זה כדי ללמוד כיצד להשתמש ב-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

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

הערה:

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

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

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

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

עריכת CFML ב-Property inspector

השתמש ב-Property inspector כדי לבדוק ולערוך סימון ColdFusion בתצוגת Design.

  1. ב-Property inspector, לחץ על הלחצן Attributes כדי לערוך את תכונות התג או כדי להוסיף תכונות חדשות.
  2. אם יש תוכן בין התג הפותח והתג הסוגר, לחץ על הלחצן Content כדי לערוך את התוכן.

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

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

סקירה של Quick Tag Editor

השתמש ב-Quick Tag Editor כדי לבדוק, להוסיף ולערוך במהירות תגי HTML מבלי לעזוב את תצוגת Design.

אם תקליד קוד HTML לא תקף ב-Quick Tag Editor, ‏Dreamweaver‏ ינסה לתקן אותו בשבילך תוך הוספת גרשיים וסוגריים משולשים סוגרים לפי הצורך.

כדי להגדיר את האפשרויות של Quick Tag Editor, פתח את Quick Tag Editor בהקשת 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

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

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

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

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

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

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

עריכת תג HTML

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

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

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

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

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

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

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

עטיפת קטע נבחר בתגי HTML

  1. בחר טקסט או אובייקט ללא עיצוב בתצוגת Design.
    הערה:

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

  2. הקש Control+T ‏(Windows) או Command+T ‏(Macintosh), או לחץ על הלחצן Quick Tag Editor ב-Property inspector.

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

  3. הזן תג פותח יחיד, כגון strong, והקש Enter ‏(Windows) או Return ‏(Macintosh).

    התג נוסף בתחילת הקטע שבחרת ותג סוגר תואם נוסף בסופו.

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

שימוש בתפריט האפשרויות להשלמת קוד ב-Quick Tag Editor

Quick Tag Editor כולל תפריט אפשרויות להשלמת תכונות, המפרט את כל התכונות התקפות של התג שאתה עורך או מוסיף.

ניתן לבטל את הפעולה של תפריט האפשרויות להשלמת קוד או להתאים את ההשהיה לפני שהתפריט נפתח ב-Quick Tag Editor.

כדי לראות תפריט להשלמת התכונות התקפות של תג מסוים, השתהה לרגע במהלך העריכה של שם תכונה ב-Quick Tag Editor. יופיע תפריט אפשרויות להשלמת קוד, המפרט את כל התכונות התקפות של התג שאתה עורך.

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

הערה:

העדפות השלמת הקוד של Quick Tag Editor נקבעות לפי ההעדפות הרגילות של האפשרויות להשלמת קוד. למידע נוסף, ראה הגדרת העדפות של אפשרויות להשלמת קוד.

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

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

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

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

ביטול תפריט האפשרויות להשלמת קוד או שינוי ההשהיה שלפני הופעתו

  1. בחר Edit ‏> Preferences ‏(Windows) או Dreamweaver >‏ ‏Preferences ‏(Macintosh) ולאחר מכן בחר Code Hints.

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

  2. כדי לבטל את הפעולה של תפריט האפשרויות להשלמת קוד, בטל את הבחירה באפשרות Enable Code Hints.

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

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

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

  1. לחץ במסמך.

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

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

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

  1. לחץ במסמך.

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

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

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

    הערה:

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

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

ניתן לעבוד עם סקריפטים של JavaScripts ושל VBScripts בצד הלקוח, הן בתצוגת Code והן בתצוגת Design, בדרכים הבאות:

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

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

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

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

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

  1. הצב את נקודת ההכנסה במקום הרצוי לקובץ הסקריפט.
  2. בחר Insert ‏> HTML ‏> Script.

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

    הערה:

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

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

עריכת סקריפט

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

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

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

    הערה:

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

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

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

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

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

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

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

עריכת סקריפטים בדף עם מפקח המאפיינים

  1. ב-Property inspector, בחר בשפת הסקריפט מתוך התפריט הנפתח Language, או הקלד שם שפה בתיבה Language.
    הערה:

    אם תשתמש בשפת JavaScript ואינך בטוח בגרסה שלה, בחר JavaScript ולא JavaScript1.1 או JavaScript1.2.

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

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

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

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

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

משתמש חדש?