סביבת כתיבת קוד ב-Dreamweaver

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

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

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

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

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

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

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

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

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

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

כתיבת קוד מהירה יותר ב-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
• אפשרויות להשלמת קוד PHP

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

• העברה מ-PHP 5.6.x ל-PHP 7.0.x:‏ http://php.net/manual/en/migration70.php
• העברה מ-PHP 7.0.x ל-PHP 7.1:‏ http://php.net/manual/en/migration71.php
• לפרטים נוספים על 7.1 PHP:‏ http://php.net/releases/7_1_0.php

אפשרויות השלמת קוד לאובייקטים של 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 יציג מידע המסביר מדוע הקוד לא חוקי וכיצד לתקן אותו.

תמיכה עבור כלים לעיבוד מקדים של 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.