למד כיצד לכתוב קוד באמצעות סביבת כתיבת הקוד ב-Dreamweaver כדי להאיץ את תהליך כתיבת הקוד.

אם ברצונך לעבוד עם קוד ב-Dreamweaver, באפשרותך להשתמש בסביבת העבודה Developer. בסביבת עבודה זו התצוגה Code מופיעה כברירת מחדל, ורק החלוניות Files ו-Snippets מעוגנות בצד שמאל של המסך.

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

הערה:

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

עבודה עם קוד ב-Dreamweaver

עומדות לרשותך מגוון דרכים לעבודה עם קוד ב-Dreamweaver. ניתן לעבוד בדרכים הבאות:

באפשרותך לעבור בין התצוגות השונות על-ידי לחיצה על לחצני החלפת המצבים Code, ‏Split ו-Design/Live בחלק העליון של סביבת העבודה.

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

הצגת קוד בחלון Document - תצוגת Code

בחר View ‏> Code.

כתיבה ועריכה בו זמנית של קוד דף בחלון המסמך - תצוגת Split

  1. בחר View ‏> Code and Design.

    הקוד מופיע באזור העליון של החלון והדף מופיע באזור התחתון שלו.

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

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

הצגת קוד בחלון נפרד עם מפקח Code

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

  1. בחר Window ‏> Code Inspector. סרגל הכלים כולל את האפשרויות הבאות:

    File Management

    קוראת או מחזירה את הקובץ.

    Preview/Debug In Browser

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

    Refresh Design View

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

    Code Navigation

    מאפשרת לנוע במהירות בקוד. ראה מעבר לפונקציה של JavaScript או VBScript.

    View Options

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

כתיבת קוד מהירה יותר ב-Dreamweaver

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

להלן חלק מהתכונות ש-Dreamweaver מציע.

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

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

הנה דוגמה לאופן הפעולה של התכונה ב-HTML. 

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

תמיכה באפשרויות השלמת קוד זמינה גם עבור CSS, ‏JavaScript ו-PHP‏ (PHP בגרסה 5.6 ו-7.1). 

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

תמיכה עבור PHP בגרסה 5.6 ו-7.1

Dreamweaver תומך ב-PHP בגרסה 5.6 ו-7.1. 

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

מהדר ה-PHP המוגדר כברירת מחדל לאתרים חדשים ב-Dreamweaver הוא הגרסה שמצוינת ב-Edit ‏> Preferences ‏> PHP.

למידע נוסף לגבי תמיכה ב-PHP ב-Dreamweaver, ראה:

לקבלת מידע כללי על PHP בגרסה 5.6 ו-7.1, עיין במשאבים הבאים:

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

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

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

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

שכתוב קוד JavaScript

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

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

צביעת קוד עבור סוגים שונים של קבצים

Dreamweaver תומך בצביעת קוד עבור HTML‏, JS‏, CSS‏, PHP‏, XML‏, LESS‏, Sass‏, SCSS‏, SVG‏, Bash‏, C‏, C#‏, C++‏, clojure‏, CoffeeScript‏, Dart‏, Diff‏, EJS‏, Embedded Ruby‏, Groovy‏, Handlebars‏, Haskell‏, Haxe‏, Java‏, JSON‏, Lua‏, Markdown‏, Markdown‏ (GitHub)‏, Perl‏, Properties‏, Python‏, RDF Turtle‏, Ruby‏, Scala‏, SQL‏, Stylus‏, Text‏, VB‏, VBScript‏, XML ו-YAML.

סמנים מרובים עבור משימות החוזרות על עצמן

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

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

במהלך עריכת קוד, באפשרותך לבצע את הפעולות הבאות:

  • הוספת סמנים מרובים כדי להוסיף תוכן חדש במקומות מרובים
  • בחירת טקסט במקומות מרובים כדי להחיל את אותה העריכה בחלקים שונים של המסמך

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

עריכה מהירה של קובצי קוד מקושרים

כדי לבצע שינויים מהירים בקוד, מקם את הסמן מעל גזירי קוד מסוימים והשתמש בתפריט תלוי-ההקשר, או הקש על Ctrl-E (ב-Windows) או Cmd-E (ב-Mac) כדי לגשת ל-Quick Edit.

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

תרחיש שימוש

התרחיש הבא מוצג לצורך הדגמה:

במהלך עריכה של קובץ HTML, שמת לב למשהו שנראה שגוי בתצוגה בזמן אמת. בשלב הבא עברת לתצוגת הקוד, והבנת שעליך לערוך קובץ קשור אחר (למשל קובץ CSS) כדי לתקן את הבעיה. 

במקום לעבור לכרטיסייה אחרת, לחץ לחיצה ימנית על הקוד הרלוונטי ולאחר מכן על Quick Edit, או השתמש במקשי קיצור, ומערכת Dreamweaver תפתח את המקטע הרלוונטי של הקוד מקובץ ה-CSS הקשור בתוך קובץ ה-HTML עצמו.

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

למידע נוסף, ראה עריכה מהירה.

תיעוד CSS תלוי-הקשר

האפשרות Quick Docs מספקת תיעוד עבור מאפייני CSS, ישירות מתוך תצוגת הקוד.

אינך צריך לנווט לדף אינטרנט מחוץ ל-Dreamweaver כדי לקבל מידע על מאפייני CSS. כדי להציג את Quick Docs, הקש Ctrl+K (ב-Windows) או Cmd+K (ב-Mac).

לקבלת מידע נוסף, ראה קבלת עזרה עם CSS בתוך Dreamweaver באמצעות Quick Docs.

תמיכה מיידית ב-Emmet

Emmet הוא תוסף שמאפשר כתיבת קוד במהירות גבוהה ויצירה של קוד HTML ו-CSS.

התוסף Emmet כלול ב-Dreamweaver, ומאפשר לך להשתמש בקיצורים של Emmet בלי צורך להתקין את התוסף.

השתמש בקיצורים של Emmet בתצוגת Code או ב-Code Inspector במסגרת העבודה ב-Dreamweaver, והקש על המקש Tab כדי להרחיב את הקיצורים האלו לסימוני HTML או ל-CSS.

קיצורי HTML מתרחבים בדפי HTML ו-PHP.

קיצורי CSS מתרחבים בדפי CSS‏, LESS‏, Sass‏ ו-SCSS או בתוך תג הסגנון שבדף ה-HTML‏.

לקבלת מידע נוסף על שימוש ב-Emmet, ראה שימוש בערכת הכלים של Emmet עם Dreamweaver.

צמצום קוד

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

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

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

אימות קוד

Dreamweaver כולל פונקציונליות משופרת של איתור שגיאות בקוד. 

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

לקבלת מידע נוסף על איתור שגיאות בקוד ב-Dreamweaver, ראה איתור שגיאות בקוד.

אם אתה עובד עם PHP והמסמך שלך כולל קוד לא חוקי, מערכת Dreamweaver מציגה את הקוד בתצוגה Design (אם התצוגה פתוחה) ומדגישה אותו בתצוגה Code (בהתאם להעדפות שהגדרת).

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

הערה:

כברירת מחדל, האפשרות לסמן קוד לא תקף בתצוגת Code אינה פעילה. כדי להפעילה, עבור לתצוגת Code ‏(View ‏> Code) ולאחר מכן בחר ‏View ‏> Code View Options ‏> Highlight Invalid Code.

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

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

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

Dreamweaver תומך כעת בכלים נפוצים לעיבוד מקדים של CSS, כגון SASS, ‏Less ו-SCSS, עם צביעת קוד מלאה, אפשרויות להשלמת קוד וקומפילציה. 

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

לקבלת מידע נוסף על התמיכה של Dreamweaver בכלי עיבוד מקדים של CSS, ראה שימוש בכלי עיבוד מקדים של CSS ב-Dreamweaver.

שמירה ושימוש מחדש בגזירי קוד

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

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

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

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

תצוגה מקדימה בדפדפן בזמן אמת

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

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

התאמה אישית של קיצורי מקשים

יש לך אפשרות להשתמש בקיצורי המקשים המועדפים עליך ב-Dreamweaver. אם אתה רגיל לקיצורי מקשים מסוימים – לדוגמה Shift+Enter להוספת מעבר שורה או Control+G למעבר למיקום מסוים בקוד – ניתן להוסיף אותם ל-Dreamweaver בעזרת Keyboard Shortcut Editor.

להנחיות, ראה התאמה אישית של קיצורי מקשים.

פתיחת קבצים בתצוגת Code כברירת מחדל

בפתיחת קובץ מסוג שאינו מכיל HTML בדרך כלל (לדוגמה, קובץ JavaScript), הקובץ נפתח בתצוגת Code (או במפקח הקוד) ולא בתצוגת Design. ניתן לציין אילו סוגי קובץ ייפתחו בתצוגת Code.

  1. בחר Edit ‏> Preferences ‏(Windows) או Dreamweaver ‏> Preferences ‏(Macintosh).
  2. בחר File Types/Editors מהרשימה Category בצד שמאל.
  3. בתיבה Open In Code View, הוסף את הסיומת של סוג הקובץ שברצונך לפתוח באופן אוטומטי בתצוגת Code.

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

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

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