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

השלמת קוד ואפשרויות השלמת קוד

 

 

השתמש בתכונות האפשרויות להשלמת הקוד של Dreamweaver כדי לצמצם את זמן כתיבת קוד.

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

ניתן גם להשתמש בתכונה זו כדי לראות:

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

תמיכה בשפות ובטכנולוגיות

Dreamweaver תומך באפשרויות להשלמת קוד בשפות ובטכנולוגיות הבאות:

המשך לקרוא כדי ללמוד כיצד ‏‫השלמות קוד פועלות עבור שפות אלה.

הפעלת השלמות קוד

כדי להפעיל את השלמות הקוד, לחץ על Edit ‏> Preferences ‏> Code Hints ובחר Enable Code Hints. כדי להשבית את השלמות הקוד, בטל את הבחירה של Enable Code Hints.

העדפות השלמות קוד
העדפות השלמות קוד

כדי לאפשר הוספה אוטומטית של סוגריים מסולסלים ומרכאות, בחר Auto-insert Braces ו-Auto-insert Quotes בהתאמה.

כדי להפעיל תיאורים בהשלמות קוד, בחר Enable description tooltips. לאחר מכן תוכל לראות את התיאורים עם השלמות הקוד שלך.

אפשרויות להשלמת קוד HTML

האפשרויות הבאות להשלמת קוד זמינות עבור HTML:

  • אפשרויות להשלמת תג
  • אפשרויות להשלמת שם תכונה
  • אפשרויות להשלמת ערך תכונה

אפשרויות להשלמת תג

לחץ על המקש ‏> שעל המקלדת כדי להתחיל בהדלקת הקוד. בעת ההקלדה, Dreamweaver מציג תגי HTML חוקיים. אם המחרוזת שאתה מקליד מופיעה בתפריט, גלול אליה ולחץ על גלילה Enter או Return כדי להשלים את מה שהזנת.

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

אפשרויות להשלמת קוד HTML בסיסי
אפשרויות להשלמת קוד HTML בסיסי

אפשרויות אלה להשלמת תג HTML כוללות גם תיאור קצר של התג כשהדבר אפשרי.

אפשרויות להשלמת שם תכונה

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

אפשרויות להשלמת קוד שם תכונה
אפשרויות להשלמת קוד שם תכונה

אפשרויות להשלמת ערך תכונה

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

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

דוגמאות לאפשרויות להשלמת ערך תכונה
דוגמאות לאפשרויות להשלמת ערך תכונה

Dreamweaver מציג אפשרויות השלמת קוד דינמיות עבור ערכי תכונה המחייבים זאת - דוגמת id‏, target‏, src‏, href‏ ו-class.

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

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

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

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

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

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

הכללת משאב מספריית CC בקוד
הכללת משאב מספריית CC בקוד

הערה:

ניתן להציג רק 50 משאבי ספריית CC בתוך האפשרויות להשלמת קוד. אפשרויות ההשלמה מופיעות בסדר אלפביתי.

הערה:

הכללת משאבי ספריית CC מרוחקת ב-Dreamweaver אינה נתמכת.

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

בעת הקלדת href‏, Dreamweaver מציג רשימה של קבצים בתיקייה, ובה בעת זמינה האפשרות לדפדף ולבחור את הקובץ שאליו ברצונך ליצור קישור.

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

אפשרויות להשלמת דינמיים עבור id ו-style

אם הגדרת מזהים בקובצי CSS שלך, כאשר תקליד id בקובצי‏ HTML, ‏Dreamweaver יציג את כל המזהים שזמינים.

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

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

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

אפשרויות להשלמת קוד CSS

השלמת קוד זמינות עבור הסוגים השונים הבאים של CSS:

  • @rules
  • מאפיינים
  • בוררים מדומים ורכיבים מדומים
  • קיצורים

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

אפשרויות להשלמת קוד עבור CSS @rules

Dreamweaver מציג אפשרויות להשלמת קוד עבור כל ה-rules@‎ יחד עם תיאור הכלל של ה-CSS כפי שמוצג להלן.

אפשרויות השלמת קוד עבור CSS @rule
אפשרויות השלמת קוד עבור CSS @rule

אפשרויות להשלמת מאפייני CSS

בעת הקלדת מאפייני CSS, אם תקליד הנקודתיים, מופיעות אפשרויות להשלמת קוד המסייעות לך לבחור ערך חוקי.

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

ניתן לבחור באחת מערכות הגופנים או ניתן שלפתוח את תיבת הדו-שיח Manage Fonts מתוך אפשרויות השלמה אלה ולהגדיר את הגופנים המועדפים.

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

דוגמה נוספת לאפשרויות השלמת קוד שימושיות היא בעת עבודה עם צבע ב-CSS. בעת הקלדת כל מאפיין הקשור לצבע (כגון צבע גבול או צבע רקע), אם תלחץ על הנקודתיים, אפשרויות השלמת הקוד מציגות רשימת צבעים. ניתן לבחור צבע מהרשימה, או ניתן לפתוח את Color Picker מתוך אפשרויות השלמת הקוד עצמן ולהגדיר את הצבע המועדף.

אפשרויות השלמת קוד CSS הקשורות לצבע
אפשרויות השלמת קוד CSS הקשורות לצבע

אם יש לך דוגמיות צבע בספריות CC, אפשרויות השלמת הקוד מציגות גם דוגמיות אלה.

דוגמיות צבע מספריות CC מצוינות על-ידי סמן הענן
דוגמיות צבע מספריות CC מצוינות על-ידי סמן הענן

הערה:

ניתן להציג רק 50 משאבי ספריית CC בתוך האפשרויות להשלמת קוד. אפשרויות ההשלמה מופיעות בסדר אלפביתי.

בורר מדומה והשלמות לרכיבים מדומים

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

בעת הקלדת ":", Dreamweaver מציג רשימה של בוררים מדומים חוקיים אם הסמן נמצא בהקשר המתאים.

השלמות קוד של בורר מדומה
השלמות קוד של בורר מדומה

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

השלמות קוד של רכיב מדומה
השלמות קוד של רכיב מדומה

השלמות תחביר מקוצר ל-CSS

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

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

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

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

טיפים לקוד CSS

עבור מאפייני CSS מסוימים (כמו box-shadow או text-shadow), יוצגו ב-Dreamweaver טיפים המציינים מהם הערכים שצריכים להופיע אחר כך, תוך ציון הערכים שהם ערכי חובה באמצעות כוכבית. 

ניתן גם לראות כיצד הדפדפן מפרש את ה-CSS.

טיפים שמופיעים עבור מאפייני CSS
טיפים שמופיעים עבור מאפייני CSS

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

בקובצי ‏JavaScript, ‏Dreamweaver‏ מספק אפשרויות להשלמת קוד עבור משתנים ופרמטרים לפונקציה. 

בדוגמה למטה, הגזיר הקוד מציין את הסוג.

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

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

הערה:

עדכון אוטומטי זה יפעל אם תערוך את קובצי ה-JavaScript ב-Dreamweaver.

בדיקת אובייקט בזמן אמת

Dreamweaver מרענן באופן אוטומטי גם השלמות קוד של JavaScript.

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

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

השלמת קוד המציינת את סוג המשתנה
השלמת קוד המציינת את סוג המשתנה

הכללת תיעוד דינמי

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

אפשרויות להשלמת קוד PHP

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

לקבלת מידע נוסף על PHP גרסה 5.6 ו-7.1, ראה מדריך PHP.

לקבלת מידע נוסף על אפשרויות השלמת קוד ספציפיות לאתר, ראה אפשרויות השלמת קוד ספציפיות לאתר.

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

בעת הקלדת סימן דולר ($), מופיעה רשימה של כל המשתנים בקובץ הסקריפט הנוכחי שלך. בחר את המשתנה הרצוי ולחץ על Enter/Return. מפורטים גם משתנים מקבצים קשורים, ומבטלים את סכנת השימוש החוזר באותו משתנה למטרה אחרת.

כאשר PHP 7.1 מוגדר כברירת המחדל, Dreamweaver מציג אפשרויות ספציפיות להשלמת קוד עבור PHP 7.1.

אפשרויות להשלמת קוד PHP 7
אפשרויות להשלמת קוד PHP 7

דוגמה של אפשרויות להשלמת קוד לאובייקטים של PHP
דוגמה של אפשרויות להשלמת קוד לאובייקטים של PHP

עריכת הגדרות ההשהיה עבור השלמות קוד PHP

כדי לשפר את ביצועי הקלדת הקוד בקובצי ‎.php, ‏Dreamweaver 2017.5 ואילך כולל השהיה נוספת עבור השלמות קוד PHP. בעת הקלדת קוד PHP,‏ Dreamweaver מציג את אפשרויות ההשלמה לאחר השהיה של 400 אלפיות השנייה. אם ברצונך לשנות את הגדרות ההשהיה עבור קוד PHP, בצע את ההליך הבא: 

  1. צא מ-Dreamweaver.

  2. פתח את brackets.json מהמיקום הבא, באמצעות עורך טקסט:

    • Win:‏ %appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS:‏ ~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. לחץ על הלחצן Save Structure בפינה הימנית העליונה של תיבת הדו-שיח.

    בקובץ JSON, הוסף פסיק לאחר הצמד שם משפח/ערך.

    הוסף את השורה הבאה עם זמן ההשהיה המועדף עליך באלפיות שנייה: "delayInPHPHint": <time in milliseconds>. לדוגמה, "delayInPHPHint": 200.

  4. שמור את הקובץ והפעל את Dreamweaver.

השלמות קוד ספציפיות לאתר

Dreamweaver מאפשר למפתחים העובדים עם Joomla, ‏Drupal, ‏Wordpress או מסגרות אחרות להציג השלמות קוד PHP במהלך הכתיבה בתצוגת Code. כדי להציג השלמות קוד אלה, יש תחילה ליצור קובץ תצורה באמצעות תיבת הדו-שיח Site-Specific Code Hints. התצורה מורה ל-Dreamweaver היכן לחפש אחר השלמות קוד שהן ספציפיות לאתר שלך.

לקבלת ערכות לימוד בווידאו בנושא עבודה עם השלמות קוד ספציפיות לאתר, ראה http://www.adobe.com/go/learn_dw_comm13_il.

יצירת קובץ התצורה

השתמש בתיבת הדו-שיח Site-Specific Code Hints כדי ליצור את קובץ התצורה הדרוש להצגת השלמות קוד ב-Dreamweaver.

כברירת מחדל, Dreamweaver מאחסן את קובץ התצורה בספרייה Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

הערה:

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

  1. בחר ‎Site >‏ Site Options‏ ‏> Site-Specific Code Hints.

    כברירת מחדל, התכונה Site-Specific Code Hints סורקת את האתר כדי לקבוע את מסגרת Content Management System ‏(CMS) שבה אתה משתמש. Dreamweaver תומך בשלוש מסגרות כברירת מחדל: Drupal, ‏Joomla ו-Wordpress.

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

    הערה:

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

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

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

  3. לחץ על לחצן הפלוס (+) מעל החלון Files כדי לבחור קובץ או תיקייה שברצונך להוסיף לסריקה. בתיבת הדו-שיח Add Files/Folders, תוכל לציין סיומות שם קובץ מסוימות שברצונך לכלול.

    הערה:

    ציון סיומת שם קובץ מסוימות מאיץ את תהליך הסריקה.

  4. כדי להסיר קבצים מהסריקה, בחר את הקבצים שאינך רוצה לסרוק ולאחר מכן לחץ על לחצן המינוס (-) מעל החלון Files.

    הערה:

    אם בחרת במסגרת Drupal או Joomla, תיבת הדו-שיח Site-Specific Code Hints מציגה נתיב נוסף לקבצים בתיקיית התצורה של Dreamweaver.

    אל תמחק זאת—זהו רכיב נדרש בעת השימוש במסגרות אלה.

  5. כדי להתאים אישית את האופן שבו התכונה Site-Specific Code Hints מתייחסת לקובץ או תיקייה מסוימים, בחר אותם מהרשימה ובצע אחת מהפעולות הבאות:

    • בחר Scan This Folder כדי לכלול את התיקייה שנבחרה בסריקה.
    • בחר Recursive כדי לכלול את כל הקבצים והתיקיות בתוך ספרייה שנבחרה.
    • לחץ על הלחצן Extensions כדי לפתוח את תיבת הדו-שיח Find Extensions. בתיבת דו-שיח זו ניתן לציין את סיומות שמות הקבצים שתרצה לכלול בסריקה של קובץ או תיקייה מסוימים.

שמירת מבנה אתר

באפשרותך לשמור את מבנה האתר המותאם אישית שיצרת בתיבת הדו-שיח Site-Specific Code Hints.

  1. צא מ-Dreamweaver.

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

  4. ציין שם עבור מבנה האתר ולחץ על Save.

הערה:

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

שינוי שם של מבני אתר

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

  1. הצג את המבנה שברצונך לשנות את שמו.

  2. לחץ על הלחצן Rename Structure בפינה הימנית העליונה של תיבת הדו-שיח.

  3. ציין שם חדש עבור המבנה ולחץ על Rename.

הערה:

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

הוספת קבצים או תיקיות למבנה אתר

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

  1. לחץ על לחצן הפלוס (+) מעל החלון Files כדי לפתוח את תיבת הדו-שיח Add File/Folder.

  2. בתיבת הדו-שיח Add File/Folder, הזן את הנתיב לקובץ או לתיקייה שברצונך להוסיף. ניתן גם ללחוץ על סמל התיקייה ליד תיבת הטקסט כדי לאתר קובץ או תיקייה.

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

    הערה:

    ציון סיומת שם קובץ מסוימות מאיץ את תהליך הסריקה.

  4. לחץ על Add.

סריקת אתר בחיפוש אחר סיומות שם קובץ

השתמש בתיבת הדו-שיח Find Extensions כדי להציג ולערוך סיומות שמות קבצים הכלולות במבנה האתר.

  1. בתיבת הדו-שיח Site-Specific Code Hints, לחץ על הלחצן Extensions.

    תיבת הדו-שיח Find Extensions מפרטת את הסיומות הנוכחיות שניתן לסרוק.

  2. כדי להוסיף סיומת נוספת לרשימה, לחץ על לחצן הפלוס (+) מעל החלון Extensions.

  3. כדי למחוק סיומת מהרשימה, לחץ על לחצן המינוס (-).

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

משתמש חדש?