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

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

למד כיצד לעבוד בתצוגת Code ולהפיק את המיטב מתכונות כתיבת הקוד של Dreamweaver.

יש מספר דרכים לעבוד עם קוד ב-Dreamweaver.

ניתן לפתוח קובץ קוד חדש באמצעות תיבת הדו-שיח "New Document" ולהתחיל להקליד את הקוד.

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

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

אם אתם מוצאים את עצמכם מעתיקים ומדביקים את אותו קטע קוד מספר פעמים, נסו את התכונות החוסכות זמן הבאות:

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

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

השתמשו בתכונה find and replace של Dreamweaver כדי לחפש תגיות, תכונות או טקסט בקוד.
השתמש ב- Code Navigator כדי לנווט אל קוד קשור בתוך הקובץ הנוכחי ומחוצה לו. אפילו יותר טוב, השתמשו בתכונה Quick Edit כדי לערוך קוד בקבצים קשורים מבלי לפתוח את הקובץ בכרטיסייה חדשה.
לחצו לחיצה ימנית על הקוד כדי להציג תפריט הקשר פשוט ורלוונטי המאפשר לכם לערוך את הקוד ישירות.
השתמשו ב-Wrap Tag כדי לעטוף טקסט בתגיות.

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

הוספת קוד באמצעות החלונית Insert

הצב את נקודת ההכנסה בקוד.

בחר קטגוריה מתאימה בחלונית Insert.

לחצו על לחצן בלוח Insert או בחרו פריט מתפריט נפתח בלוח Insert.

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

המספר והסוג של הלחצנים הזמינים בחלונית Insert, משתנים לפי סוג המסמך הנוכחי. הדבר תלוי גם בתצוגה בה תשתמש – תצוגת Code או תצוגת Design.

שימוש בערכת הכלים של Emmet עם Dreamweaver

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

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

קיצורי HTML מתרחבים בדפי HTML ו-PHP. קיצורי CSS מתרחבים בעמודי CSS‏, LESS‏, SASS‏, SCSS או בתוך תגית style בעמוד HTML.

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

פתק

Dreamweaver תומך כרגע בקיצורי Emmet 1.2.2.

דוגמה 1: הוספת קוד HTML באמצעות Emmet

כדי להוסיף במהירות קוד HTML עבור רשימה לא מסודרת עם שלושה אלמנטים, פתחו את קובץ ה-HTML והקלידו את קיצור הדרך של Emmet הבא בתצוגת קוד בתוך <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

כעת עליך לוודא שהסמן ממוקם מיד לאחר הקיצור של Emmet, ולאחר מכן להקיש על Tab כדי להרחיב את הקיצור. לחלופין, בחרו את כל הקיצור ולאחר מכן הקישו Enter.

הקיצור מתרחב לקוד הבא:

<div>

<ul>

<li>Lorem Ipsum</li>

</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>

<p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>

<p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>

<p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>

</div>

דוגמה 2: הוספת קוד CSS באמצעות Emmet

כדי להוסיף קוד CSS ליצירת border radius עם vendor prefixes, פתחו את קובץ ה-CSS שלכם והקלידו את קיצור הדרך הבא של Emmet בתוך class:

-bdrs

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

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

עבודה עם הערות קוד

הערה היא טקסט תיאורי שניתן להוסיף לקוד HTML על מנת להסביר את הקוד או לספק מידע אחר. הטקסט של ההערה מופיע רק בתצוגת Code והוא לא מוצג בדפדפן.

הוספת הערות לקוד

כדי להוסיף הערות, הקלד תחילה את טקסט ההערה. לאחר מכן תוכלו למקם את הסמן בנקודת ההוספה וללחוץ על סמל ה-Insert מסרגל הכלים כדי לפתוח את תת התפריט Apply Comment.

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

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

תוכלו גם להשתמש בקיצורי הדרך Ctrl+/ (ב-Windows) או Cmd+/ (ב-Mac) כדי להוסיף הערות.

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

הסרת הערות מהקוד

כדי להסיר הערות קוד, בחר את הקוד ולחץ על הסמל Remove comment בסרגל הכלים. תוכלו גם להשתמש בקיצורי המקשים Ctrl-/ (ב-Windows), או Cmd-/ (ב-Mac) כדי להסיר הערות.

מעבר בין הערות קוד

כדי לעבור בין הצגה והסתרה של הערות בתצוגת הקוד, פשוט הקישו Ctrl+/ ב-Windows, או Cmd+/ ב-Mac עבור ההערה או השורה שנבחרה.

שימוש בסמנים מרובים כדי להוסיף או לשנות טקסט במקומות מרובים

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

פתק

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

הוספת סמנים מרובים או בחירת פריטים מרובים

תוכלו להוסיף מספר סמנים בדרכים שונות בהתאם לדרישות שלכם.

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

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

כדי להוסיף מספר סמנים או מספר בחירות באותה עמודה על פני שורות רציפות:

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

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

בחירה ועדכון של שורות טקסט מרובות בו-זמנית

פתק

כדי להוסיף במהירות סמנים או לכלול מספר שורות בבחירה, השתמשו בקיצור המקשים Shift-Alt-Up או Shift-Alt-Down.

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

אם יש לכם מספר סמנים, אז טקסט חדש מתווסף.

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

כדי להוסיף מספר סמנים בעמודות שונות על פני שורות:

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

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

כדי לבחור שורות טקסט לא רציפות, בחרו קצת טקסט, ואז הקישו על מקש Ctrl (Windows), או מקש Cmd (Mac), והמשיכו לבצע בחירות נוספות.

כדי להוסיף סמנים בתחילת/סוף כל שורה:

בחרו מספר שורות של טקסט והקישו על מקשי החץ שמאלה או ימינה.

כדי להוסיף סמנים בשורות קודמות או הבאות עבור בחירה:

הקישו על מקשי Shift+Alt+Up/Down ואז הקישו על מקש החץ ימינה.

כדי לבחור שורות טקסט רציפות ולא רציפות:

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

תחילה בחרו את השורות הלא רציפות של הטקסט, לאחר מכן לחצו Ctrl-Alt (ב-Windows) או Cmd-Alt (ב-Mac) וגררו כדי להוסיף קבוצת שורות לבחירות המרובות הקיימות.

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

קבלת עזרה עם CSS ב- Dreamweaver באמצעות Quick Docs

בעת עבודה עם קבצי CSS,‏ LESS או SCSS ב-Dreamweaver, תוכלו לקבל במהירות מידע נוסף על מאפייני CSS או ערכים.

הניחו את הסמן בתוך מאפיין או ערך ולחצו Ctrl + K,‏ Dreamweaver פותח תיעוד מפרויקט Web Platform Docs.

תוכלו לפתוח בו-זמנית עורכים מוטמעים מרובים ומציגי תיעוד.

כדי לסגור עורך מוטמע יחיד או מציג תיעוד, לחצו על "X" בפינה השמאלית העליונה או לחצו Escape כאשר Quick Docs הוא במוקד.

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

לנתח קוד

Dreamweaver תומך ב-linting (ניתוח קוד לאיתור שגיאות פוטנציאליות) עבור HTML,‏ CSS ו-JavaScript.

חלונית Output מפרטת את השגיאות והאזהרות שזוהו במהלך איתור השגיאות בקוד (Linting). לקבלת מידע נוסף, ראה איתור שגיאות בקוד.

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

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

גלישת טקסט בקוד באמצעות Wrap Tag

השתמש ב- Wrap Tag בתצוגת Code כדי להקיף שורות טקסט ספציפיות בתג. בתצוגת Design או Live, תוכלו להשתמש בתכונה זו כדי לעטוף אובייקטים בתג.

בחרו טקסט בתצוגת Code או אובייקט בתצוגת Design, ולחצו Ctrl+T במקלדת.

חלון קופץ מופיע ומאפשר לכם לבחור ממספר תגי HTML.

בחרו תג מהתפריט.

אם אתה עובד בתצוגת Code, הטקסט שנבחר מוקף בתג. אם אתם עובדים בתצוגת Design או Live, האובייקט הנבחר נעטף בתג.

עריכת קוד עם תפריט ההקשר של Coding

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

כדי לגשת לתפריט תלוי ההקשר, לחץ לחיצה ימנית (ב-Windows) או לחץ על Command (ב-Mac). האפשרויות הבאות זמינות עבורכם:

עריכה מהירה

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

גזירה, העתקה, הדבקה

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

Find and replace‏, Find next‏, Find previous

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

יצירת גזיר קוד חדש

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

פתיחת קובץ קשור

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

Attach Style Sheet

צרפו גיליון סגנונות CSS קיים לדף שלכם.

Selection

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

Code Navigator

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

Code Hint Tools

תת-התפריט רמזי קוד מביא את ה-Color Picker (בורר הצבעים), דפדפן ה-URL ורשימת הגופנים בהישג ידכם.

הזחה של קטעי קוד

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

הזחה של קטע הקוד שנבחר

הקישו על Tab, או
הקישו על Ctrl+], או
בחר Edit ‏> Indent Code.

בטלו הזחה של בלוק הקוד הנבחר

הקישו על Shift+Tab, או
הקישו על Ctrl+[, או
בחר Edit ‏> Outdent Code.

ניווט לקוד קשור

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

אם תלחץ על כלל CSS ב- Code Navigator, ‏Dreamweaver יעביר אותך ישירות לכלל זה. אם הכלל הוא פנימי בקובץ, Dreamweaver יציג את הכלל בתצוגת Split. אם הכלל הוא קובץ CSS חיצוני, Dreamweaver יפתח את הקובץ ויציג את הכלל באזור הקבצים המקושרים שמעל לחלון הראשי.

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

לסקירת וידאו כללית מצוות ההנדסה של Dreamweaver אודות עבודה עם נווט הקוד, ראו www.adobe.com/go/dw10codenav.

לערכת לימוד בווידאו על עבודה עם תצוגה חיה, קבצים קשורים ונווט הקוד, ראו www.adobe.com/go/lrvid4044_dw.

פתיחת Code Navigator

Alt+לחיצה (Windows) או Command+Option+לחיצה (Macintosh) בכל מקום בעמוד.נווט הקוד מציג קישורים לקוד המשפיע על האזור שעליו לחצתם.

לחץ מחוץ ל- Code Navigator כדי לסגור אותו.

פתק

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

נווטו לקוד באמצעות נווט הקוד

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

לחץ על קטע הקוד אליו ברצונך לעבור.

Code Navigator מקבץ מקורות קוד מקושרים לפי הקובץ ומפרט את הקבצים באופן אלפביתי. לדוגמה, נניח שכללי CSS משלושה מקורות חיצוניים משפיעים על הקטע שבחרת במסמך. במקרה זה, Code Navigator מפרט שלושה קבצים אלה וכן את כללי CSS הנוגעים לקטע שנבחר. ב- CSS המקושר לקטע שנבחר, Code Navigator פועל כמו החלונית CSS Styles ב- Current Mode.

פתק

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

ביטול הפעולה של סמן Code Navigator

פתח את Code Navigator.

בחר Disable Indicator בפינה הימנית התחתונה.

לחץ מחוץ ל- Code Navigator כדי לסגור אותו.

כדי להפעיל מחדש את מחוון נווט הקוד, Alt+לחיצה (Windows) או Command+Option+לחיצה (Macintosh) כדי לפתוח את נווט הקוד ו בטלו את האפשרות השבת מחוון.

עברו לפונקציה של JavaScript או VBScript

בתצוגת קוד ובמפקח הקוד, אתם יכולים להציג רשימה של כל פונקציות ה-JavaScript או VBScript בקוד שלכם ולקפוץ לכל אחת מהן.

הציגו את המסמך בתצוגת קוד (תצוגה > קוד) או במפקח הקוד (חלון > מפקח קוד).

בצע אחת מהפעולות הבאות:

לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) במיקום כלשהו בתצוגת Code ובחר בתפריט המשנה Functions מתוך התפריט תלוי-ההקשר.

פתק

תפריט המשנה Functions לא מופיע בתצוגת Design.

אם קיימות פונקציות של JavaScript או VBScript בקוד שלך, הן יופיעו בתפריט המשנה.

פתק

כדי להציג את הפונקציות בסדר אלפביתי, לחץ לחיצה ימנית תוך כדי הקשת Control ‏(Windows) או לחץ תוך כדי הקשת Option-Control ‏(Macintosh) בתצוגת Code, ולאחר מכן בחר בתפריט המשנה Functions.

במפקח הקוד, לחצו על לחצן ניווט הקוד ({ }) בסרגל הכלים.

בחרו שם פונקציה כדי לקפוץ לפונקציה בקוד שלכם.

חילוץ JavaScript

JavaScript Extractor ‏(JSE) מסיר כל קוד JavaScript, או את רובו, מתוך מסמך Dreamweaver, מייצא אותו לקובץ חיצוני ומקשר את הקובץ החיצוני למסמך שלך. JSE יכול גם להסיר רכיבים לטיפול באירועים כגון onclick ו-onmouseover מהקוד שלך ולאחר מכן לצרף למסמך שלך את קוד JavaScript המשויך לרכיבים אלה באופן שקוף.

שימו לב למגבלות הבאות של מחלץ ה-JavaScript לפני השימוש בו:

JSE לא מחלץ תגי סקריפט בגוף המסמך (פרט לרכיבי widget של Spry). ייצוא של סקריפטים אלה לקובץ חיצוני עלול לגרום לתוצאות לא צפויות. כברירת מחדל, Dreamweaver מפרט סקריפטים אלה בתיבת הדו-שיח Externalize JavaScript, אולם הוא לא בוחר בהם לצורך החילוץ. (אם תרצה, תוכל לבחור בהם ידנית).
JSE לא מחלץ JavaScript מאזורים ניתנים לעריכה של קובצי ‎.dwt ‏(Dreamweaver template), מאזורים שלא ניתנים לעריכה במופעי תבנית או מפריטי Dreamweaver Library.
לאחר חילוץ JavaScript עם Externalize JavaScript והאפשרות Attach Unobtrusively, לא ניתן עוד לערוך התנהגויות של Dreamweaver בחלונית Behaviors. Dreamweaver לא יכול לבדוק ולאכלס את החלונית Behaviors בהתנהגויות שהוא צירף באופן שקוף.
לא ניתן לבטל את השינויים לאחר סגירת הדף. עם זאת, ניתן לבטל שינויים כל עוד אתה נמצא באותו מופע עריכה. בחר Edit ‏> Undo Externalize JavaScript כדי לבטל את השינויים.
ייתכן שדפים מורכבים לא יפעלו כצפוי. פעל במשנה זהירות בחילוץ JavaScript מתוך דפים הכוללים document.write()‎ בגוף המסמך ומשתנים גלובליים.

לסקירה כללית בווידאו מצוות ההנדסה של Dreamweaver אודות תמיכה ב-JavaScript ב-Dreamweaver, ראו www.adobe.com/go/dw10javascript.

כדי להשתמש ב- JavaScript Extractor:

פתחו דף המכיל JavaScript.

לחצו על Tools > Externalize JavaScript.

בתיבת הדו-שיח Externalize JavaScript, ערכו את הבחירות המוגדרות כברירת מחדל במידת הצורך.

בחרו Only Externalize JavaScript אם ברצונכם ש-Dreamweaver יעביר JavaScript כלשהו לקובץ חיצוני, ויפנה לקובץ זה במסמך הנוכחי. אפשרות זו משאירה מטפלי אירועים כמו onclick ו-onload במסמך, ומשאירה Behaviors גלויים בלוח Behaviors.
בחרו Externalize JavaScript and Attach Unobtrusively אם ברצונכם ש-Dreamweaver יבצע: 1) העברת JavaScript לקובץ חיצוני ויפנה אליו במסמך הנוכחי, ו-2) הסרת מטפלי אירועים מה-HTML והכנסתם בזמן הריצה באמצעות JavaScript. כשאתם בוחרים באפשרות זו, לא תוכלו עוד לערוך Behaviors בלוח Behaviors.
בעמודה Edit, בטלו את הבחירה של כל עריכה שאתם לא רוצים לבצע, או בחרו עריכות ש-Dreamweaver לא בחר כברירת מחדל.
כברירת מחדל, Dreamweaver מציג אך לא בוחר את העריכות הבאות:
- בלוקי Script בראש המסמך המכילים קריאות document.write() או document.writeln().
- בלוקי Script בראש המסמך המכילים חתימות פונקציה הקשורות לקוד טיפול EOLAS, שידוע שמשתמש ב-document.write().
- בלוקי Script בגוף המסמך, אלא אם הבלוקים מכילים רק קונסטרקטורים של Spry widget או של מערכי נתוני Spry.
Dreamweaver מקצה באופן אוטומטי מזהים לאלמנטים שאין להם כבר מזהים. אם המזהים הללו לא מוצאים חן בעיניכם, תוכלו לשנות אותם על ידי עריכת תיבות הטקסט ID.

לחץ על OK.

תיבת הדו-שיח של הסיכום מציגה סיכום של החילוצים. סקור את הקוד שיחולץ ולחץ על OK.

שמור את העמוד.

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

עריכה מהירה

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

תוכלו להיכנס למצב Quick Edit על ידי:

לחיצה ימנית על קטע קוד ובחירה ב-Quick Edit מהתפריט ההקשר שמופיע
לחיצה על Ctrl + E (ב-Windows) או Cmd+E (ב-Mac)

שימוש במצב Quick Edit עם קובצי HTML

בקובץ HTML, מקם את הסמן בתוך תכונת מחלקה או מזהה (שם או ערך) או בשם התג. מצב Quick Edit מציג לך את כל כללי CSS‏, SCSS ו- LESS בפרוייקט שלך שמתאימים. תוכלו לערוך את הכללים הללו ישירות באופן מוטבע, מבלי לעזוב את ההקשר של קובץ ה-HTML.

כשמספר כללים מתאימים, נווטו ביניהם באמצעות הרשימה בצד הימני (או השתמשו ב-Alt-Up/Down).

ליצירת כלל CSS ישירות מהעורך המוטבע, לחצו על New Rule או לחצו על Ctrl-Alt-N (ב-Windows) או Cmd-Opt-N (ב-Mac).

שימוש במצב Quick Edit עם קובצי JavaScript

בקובץ JavaScript, מקם את הסמן על שם פונקציה. Quick Edit מציג לך את גוף הפונקציה (גם אם הוא נמצא בקבצים אחרים שמוזכרים בפקודת require()).

שימוש במצב Quick Edit עם קובצי CSS, SCSS או LESS

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

בקובץ CSS,‏ LESS או SCSS, הציבו את הסמן על פונקציית תזמון המעבר cubic-bezier()‎ או steps()‎ ו-Quick Edit יציג עורך עקומת מעבר גרפי.

פונקציות התזמון המוגדרות מראש ease,‏ ease-in,‏ ease-out,‏ ease-in-out,‏ step-start ו-step-end הן גם נקודות התחלה תקפות.

שכתוב קוד

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

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

פתק

שכתוב קוד זמין כעת רק בקובצי ‎.js.

שכתוב JavaScript

תוכל לשכתב קוד במסמכים מסוג html,‏ php, ו-javascript. כאשר אתם לוחצים לחיצה ימנית על אזור הקוד ב-Dreamweaver, האפשרות Refactor מופיעה בתפריט הנפתח. Refactor כולל את האפשרויות הבאות:

Rename
Extract to Variable
Extract to Function
Wrap in Try Catch
Wrap in Condition
Convert to Arrow Function
Create Getters/Setters

כדי להבין את הפונקציונליות של כל אפשרות שכתוב, עיינו בחלקים הבאים:

Rename

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

בצעו את השלבים הבאים כדי לשנות שם ב-JavaScript:

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

לחצו לחיצה ימנית על הטקסט הנבחר ואז בחרו Refactor > Rename. תוכלו גם להשתמש בקיצורי דרך Ctrl + Alt + R במערכת הפעלה Windows, או Command + option + R במקלדת macOS כדי לשנות שם.

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

Extract to variable

השתמש באפשרות Extract to Variable כדי להחליף ביטוי במשתנה, במשתנה מקומי או בקבועים ב-JavaScript על-ידי בחירה בביטוי באמצעות לחצן העכבר הימני. לאחר מכן בחר באפשרות Refactor > Extract to Variable. תוכלו גם להשתמש ב-Ctrl + Alt + V במערכת הפעלה Windows וב-Cmd + Alt + V ב-macOS.

Extract to Function

השתמש באפשרות Extract to Function כדי להחליף ביטוי בקריאה לפונקציה בתוך פרמטר. ערך ברירת המחדל של הפרמטר החדש יכול להיות מאותחל בתוך גוף הפונקציה או מועבר דרך קריאות פונקציה.

בצעו את השלבים הבאים כדי לבצע שכתוב באמצעות Extract to Function:

בחרו כל ביטוי או קבוצת ביטויים ב-JavaScript.

לחצו לחיצה ימנית ובחרו Refactor > Extract to Function. תוכלו גם להשתמש ב-Ctrl + Alt + M במערכת הפעלה Windows או ב-Cmd + Alt + M ב-Mac OS.

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

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

המאפיינים של Extract to function הם:

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

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

Wrap in Try Catch

השתמש באפשרות Wrap in Try Catch במקרה של חריגה בבלוק של קוד שמופיעה כשגיאה לאחר ביצוע קומפילציה של התוכנית. הפונקציה עוטפת את בלוק הקוד באמצעות Try Catch Block. בלוק הקוד הזה מסומן כחריג במהלך הפעלת התוכנית.

בחרו או הציבו את הסמן על הקוד, לחצו לחיצה ימנית ובחרו Refactor > Wrap in Try Catch. אם תציבו את הסמן במיקום מסוים, הוא ימצא את ההצהרות הסובבות, אחרת הוא יבדוק האם הקוד מורכב מהצהרות או לא.אם יש הצהרות, הוא עוטף את הקוד בבלוק Try Catch.

Wrap in Condition

השתמשו ב-Wrap in Condition כדי לעטוף ביטוי בקוד שיתקמפל רק עבור תנאי מסוים.

בחרו ביטוי בקוד, לחצו לחיצה ימנית ובחרו Refactor > Wrap in Condition.

Convert to Arrow Function

פונקציית חץ היא ביטוי שאין לו ביטויי פונקציה משלו כמו this, arguments, super, או new.target. ביטויי פונקציה אלה מיועדים לביטויים שאינם מתודות, ולא ניתן להשתמש בהם כקונסטרקטור.

הציבו את הסמן בפונקציה, לחצו לחיצה ימנית ובחרו Refactor > Convert to Arrow Function.

פתק

אם להצהרה שנבחרה יש פרמטר אחד, אז מבנה הפרמטר מופיע כ-param => {statements}.
אם להצהרה שנבחרה יש אפס פרמטרים או יותר מפרמטר אחד כמו param (param1, param2) אז מבנה הפרמטר מופיע כ-param (param1, param2) => {statements}.

Create Getters/Setters

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

הציבו את הסמן על חבר של ביטוי אובייקט, לחצו לחיצה ימנית ובחרו Refactor > Create Getters/Setters.

עצות לפתרון בעיות

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

שם הפונקציה	הודעת שגיאה	טיפ לפתרון בעיות
Rename	No expression at the given position	מקם את הסמן על שם המשתנה או שם הפונקציה או לפניהם.
Extract to Variable	Selection does not form an expression	בחר בביטוי בקוד לפני שכתוב הקוד.
Extract to Function	Selected block should represent set of statements or an expression	ודא שבחרת בבלוק עם ערכת הצהרות או ביטויים.
Wrap in Try Catch	Select valid code to wrap in a Try-catch block	ודא שבחרת בקוד לפני החלת אפשרות השכתוב Try Catch.
Wrap in Condition	Select valid code to wrap in a Condition block	ודא שבחרת בביטוי לפני החלת אפשרות השכתוב Wrap in Codition.
Convert to Arrow Function	Place the cursor inside a function expression	ודא שמיקמת את הסמן בתוך ביטוי הפונקציה לפני החלת אפשרות השכתוב.
Create Getters/Setters	Place the cursor at a member of an object expression	ודא שמיקמת את הסמן על חלק מביטוי האובייקט לפני החלת אפשרות השכתוב Create Getters/Setters‬.

חיפוש והחלפה של טקסט

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

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

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

לאחר איתור הטקסט, תוכל לבחור להחליף אותו בטקסט, בקוד או ברווח הלבן שציינת.

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

הצגת תצוגה מקדימה של תמונות וצבעים בתצוגת קוד

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

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

רחף עם העבר מעל כתובת URL של תמונה כדי לראות תצוגה מקדימה של התמונה בתצוגה Code. תוכלו להציג בתצוגה מקדימה תמונות שמצוינות כאחד מהבאים:

url();
data-uri()
ערך מאפיין Src של תג img

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

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

תוכלו לראות תצוגה מקדימה של סוגי התמונות הבאים:

JPEG
JPG
PNG
GIF
SVG

תצוגה מקדימה של צבעים

רחף עם העכבר מעל ערכי הצבעים כדי להציג תצוגה מקדימה של צבעים בתצוגה Code. הפורמטים הנתמכים הם:

ערכי צבע הקסדצימליים של 3 ו-6 ספרות: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
שמות צבעים מוגדרים מראש, כגון Olive, Teal, red.

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

לחצו באמצעות לחצן ימני על ערך ובחרו עריכה מהירה כדי לפתוח את ה-Color Picker (בורר הצבעים) ולבחור צבע אחר.

פתק

כדי להשבית תצוגות מקדימות לתמונות ולצבעים, בטלו את הסימון של האפשרות View > Code View Options > Asset Preview.

הדפסת קוד

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

פתח דף בתצוגת Code.

בחר File ‏> Print Code.

ציינו אפשרויות הדפסה ולאחר מכן לחצו על OK (Windows) או Print (Macintosh).

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

פתיחת היישום

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

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

למידה

למד עם מדריכי וידאו שלב אחר שלב ועם הדרכה מעשית ישירות ביישום.

קהילה

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

דף הבית של Adobe

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