סיכום תכונות חדשות

מהדורת 2015 של Dreamweaver CC מתמקדת בעיצוב בעל תגובה מהירה, שיפורים בתכונות לעריכת קודים, תצוגה מקדימה של דפי אינטרנט בהתקנים שונים וחילוץ באצווה של תמונות ממוטבות לאינטרנט עם רזולוציות שונות מקומפוזיציות של Photoshop. שילוב עם מסגרת Bootstrap עוזר לבנות אתרי אינטרנט בעלי תגובה מהירה שנועדו בעיקר להתקנים ניידים. Visual Media Queries משלים אף יותר את חוויית העיצוב של אתרים מהירי תגובה בכך שהוא מאפשר לך להציג באופן חזותי ולשנות את העיצוב בנקודות עצירה שונות. 

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

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

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

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

Visual Media Queries

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

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

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

לקבלת מידע נוסף, ראה Visual Media Queries.

תמיכה באיתור שגיאות בקוד

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

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

תמיכה ב-Emmet

האם אתה מפתח שמשקיע זמן רב בהקלדת שורות קוד ב-Dreamweaver? הקיצורים של Emmet יעזרו לך לחסוך בזמן. קל לזכור ולהקליד את הקיצורים האלו, וניתן להרחיב אותם לקוד מלא ב-Code View באמצעות הקשה על המקש Tab.

לקבלת מידע מפורט, ראה הוספת קוד באמצעות Emmet.

תצוגה מקדימה ב-Code View

אם אתה עובד בתצוגת Split, ניתן לראות מיד את כל השינויים שנעשו בתמונות או בצבעים בתצוגת Live או Design. אך אם אתה מעדיף לעבוד ב-Code View בלבד, התמונות מוצגות כשמות קבצים, ולרוב זוהי תצוגה פחות אינטואיטיבית. גם הצבעים מוצגים רק כסדרת מספרים ללא משמעות (אלא אם כן משתמשים בצבעים מוגדרים מראש). בגרסה זו של Dreamweaver, ניתן להציג את הצבעים במהירות בתצוגה מקדימה ישירות ב-Code View‏. תכונה זו מסייעת לך ליצור חיבור חזותי בין שמות הקבצים של התמונות ותבניות הצבעים לבין התמונה או הצבע שהם מייצגים. כתוצאה מכך, ניתן לקבל החלטות עיצוב מהר יותר ולקצר באופן משמעותי את זמן הפיתוח.

לקבלת מידע נוסף, ראה תצוגה מקדימה של תמונות וצבעים ב-Code View‏.

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

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

גזירי קוד חדשים

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

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• גזירי JavaScript (מעודכנים)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

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

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

שילוב Bootstrap

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

Dreamweaver מאפשר לך ליצור מסמכי Bootstrap וכן לערוך דפי אינטרנט קיימים שנוצרו באמצעות Bootstrap. באפשרותך להתחיל לעצב את אתר האינטרנט מסוג Bootstrap שלך באמצעות אחת מתבניות Bootstrap הראשוניות הזמינות לבחירה מתיבת הדו-שיח New Document‏ (Starter Templates ‏> Bootstrap Templates). 

• Bootstrap-סוכנות
  
• Bootstrap-מסחר אלקטרוני
• Bootstrap-תיק מוצרים
• Bootstrap-מוצר
• Bootstrap-נדל"ן
• Bootstrap-קורות חיים
  

באפשרותך גם ליצור מסמך Bootstrap מותאם אישית מתיבת הדו-שיח New Document‏ (New Document ‏> Bootstrap). לאחר מכן, בנה את אתר האינטרנט שלך באופן הדרגתי באמצעות רכיבי Bootstrap כמו אקורדיונים וקרוסלות מהחלונית Insert ב-Dreamweaver. לחלופין, אם יש לך רכיבי Photoshop, השתמש ב-Extract להבאת תמונות, גופנים, סגנונות, טקסט ועוד למסמך Bootstrap שלך.

ניתן לערוך ב-Dreamweaver קובצי Bootstrap בעיצוב מלא, או עיצובים שעדיין לא הושלמו, לא רק לצורך עריכת הקוד אלא גם לצורך שינוי העיצוב, באמצעות תכונות עריכה חזותיות, כמו עריכה ב-Live View‏, Visual CSS Designer‏, Visual Media Queries ו-Extract. 

לקבלת פרטים מלאים, ראה עבודה עם קובצי Bootstrap.

תמיכה בעריכת טבלאות ב-Live View

באפשרותך לערוך טבלאות ב-Live View‎ בקלות ובמהירות באמצעות אחת מהאפשרויות הבאות או שילוב שלהן:

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

תפריטים חדשים ב-Live View

יכולות העריכה ב-Live View השתפרו כעת, הודות לתפריטים הבאים הזמינים ב-Live View:

• Modify
• Format
• Commands
• Site
• האפשרות 'Paste Special' בתפריט Edit ובתפריט ההקשר

תמיכה ברכיבי jQuery UI ב-Live View

באמצעות החלונית Insert, כעת באפשרותך להוסיף רכיבים גרפיים מסוג jQuery ב-Live View. גרור את הרכיב הנדרש מתוך החלונית Insert ל-Live View, והחזק את העכבר כדי להשתמש באחת מהתכונות הבאות כדי להוסיף:

• Live Guides: מחוונים אלה מופיעים בשעה שאתה מעביר את העכבר מעל הרכיבים ב-Live View לאחר גרירת הרכיב הנדרש מהחלונית Insert. בעזרת ה-Live Guides, באפשרותך להוסיף רכיבים מעל, מתחת, משמאל או מימין לרכיב מסומן.

• סמל DOM: סמל DOM מופיע כאשר אתה משתהה לרגע עם הופעת ה-Live Guides. לחץ על הסמל כדי להציג את מבנה ה-DOM בחלון הקופץ ולשחרר את הרכיב במיקום מדויק במבנה המסמך.

• Position Assist:‏ Position Assist מסייע לך למקם את הרכיב לפני, אחרי או בתוך הרכיב המסומן (ב-Live View‏).

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

החלונית DOM

Element Quick View הוחלפה בחלונית DOM‏ (Windows ‏> DOM). חלונית DOM מספקת את כל הפונקציות שנכללו בעבר ב-Element Quick View, ועוד. חלונית זו זמינה בכל סביבות העבודה והיא קבועה - כלומר, באפשרותך לפתוח שני מסמכים ולגשת אל חלוניות DOM שלהם בו-זמנית.

בעזרת החלונית DOM באפשרותך:

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

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

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

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

Technology Previews

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

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

כדי להשתמש בתכונה זו, בצע את הפעולות הבאות:

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

• בחר את המופע הבא: F3‏ (Win‏); Cmd+G‏ (‏Mac‏)
• בחר את המופע הקודם: Shift+F3‏ (Win‏); ‏Cmd+Shift+G‏ (Mac‏)

תצוגה מקדימה מותאמת אישית בתצוגת Code באמצעות API של ShowPreview

במהדורה זו של Dreamweaver, ניתן ליצור תפריט נפתח של תצוגה מקדימה מותאמת אישית המוצג כאשר אתה מרחף עם העכבר מעל הקוד ב-Code View. כדי ליישם תצוגות מקדימות מותאמות אישית, באפשרותך להשתמש ב-API החדש, showPreview, יחד עם ה-API הקיים mm:browsercontrol. לדוגמה, באפשרותך להשתמש בממשקי API אלה כדי להציג בתצוגה מקדימה את כל הפרמטרים של הפונקציה JavaScript כאשר אתה מרחף עם העכבר מעל שם הפונקציה.

לקבלת מידע נוסף, ראה חומר עזר בנושא API ב-Dreamweaver: פונקציות תצוגת Code‏.

קיפול קוד

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

קיפול קוד (צמצום) זמין בקובצי HTML‏, CSS‏, LESS‏, SASS‏, SCSS‏, JS‏, PHP‏, XML ו-SVG והוא מבוסס על גושי תגים.

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

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

למידע מפורט, ראה צמצום קוד.

שיפורים ב- Extract

• Extract עבור התקנים
• תמיכה ב-% יחידות

Extract עבור התקנים

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

Extract ב-Dreamweaver מפשט משימה זו במידה רבה. כשאתה מחלץ תמונה מהרכיב Photoshop במהדורת 2015 של Dreamweaver, באפשרותך לבחור לחלץ גם גרסאות ברזולוציות שונות של אותה תמונה. התמונה ב-Photoshop מותאמת לרזולוציות שונות ומוגדרות מראש במהלך החילוץ.

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

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

תמיכה ביחידות %

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

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

שיפורים בעריכה ב-Live View

הוספה מקננת ב-Live View

כעת באפשרותך להוסיף רכיבים בתוך רכיבים אחרים ב-Live View. כאשר אתה גורר רכיבים מהחלונית Insert, מהחלונית Asset או בתוך Live View ומעביר את העכבר מעל רכיבים שונים בדף, תבחין במשוב חזותי עבור הרכיבים המקננים (יחד עם מכווני Before/After).

• מכווני Before/After: כאשר אתה מעביר את העכבר מעל 30% העליונים או התחתונים של הרכיב.
• משוב חזותי על קינון: כאשר אתה מעביר את העכבר מעל 40% האמצעיים של הרכיב.

עריכת בוררים ישירות ב-Element Display

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

שינויים בסרגל הכלים Coding

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

• Collapse Full Tag
• Collapse Selection

הערה: אפשרויות אלו הוסרו מתפריט ההקשר הנפתח בלחיצה ימנית וכן מתפריט Edit‏.   כעת תוכל לצמצם קוד על ידי ריחוף עם העכבר מעל למספר השורה ולחיצה על המשולש שמופיע.   כמו כן, האפשרויות הבאות אינן זמינות עבור קבצי HTML‏, CSS ו-JS‏.

• Highlight Invalid Code
• Syntax Error Alerts in Info Bar

כעת ניתן להשתמש באיתור שגיאות בקוד (Linting) כדי לאתר שגיאות בקוד, כאשר החלונית Output מציגה את תוצאות איתור השגיאות בקוד.

שיפורים ב-CSS Designer

• המצבים All ו-Current
• רמזים עבור ערכי מאפיינים
• קידוד צבע עבור שאילתות מדיה
• שינויים נוספים

המצבים All ו-Current

CSS Designer מספק כעת שני מצבים נפרדים להצגה ועריכה של מאפייני CSS‏:

• All‏: ‏כל מאפייני ה-CSS, שאילתות המדיה והבוררים במסמך הנוכחי מפורטים בתוך מצב זה. מצב אינו מושפע מהבחירה בתצוגה Design או Live‏.

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

• Current‏: מצב זה מפרט סגנונות ממוחשבים עבור כל רכיב שתבחר בתצוגה Design או Live‏. בקובץ CSS, אם המוקד מכוון לבורר מסוים, מצב זה מציג את מאפייני הבורר.

רמזים עבור ערכי מאפיינים

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

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

שאילתות המדיה בחלונית CSS Designer מוצגות כעת בקידוד צבעים בהתאם ל-Visual Media Queries.

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

שינויים נוספים

• האפשרות Show Set: תיבת הסימון Show Set במקטע Properties נבחרת כעת כברירת מחדל בעת ההפעלה הראשונה של Dreamweaver‏. כל שינוי שייעשה באפשרות זו (סימון או ביטול סימון) יבוא לידי ביטוי בכל הפעלות Dreamweaver הבאות.

• גלילה בחלונית מציגה את Add Property במרכז: בעת לחיצה על + במקטע Properties‏, המקטע נגלל כך שהשורה Add Property מוצגת במרכז החלונית. אם המקטע Properties קטן מדי, השורה Add Property מופיעה בחלק התחתון של החלונית.

• סימון רקע בעת הוספת מאפיין חדש: כאשר המוקד מכוון לתיבת הטקסט Add New Property, השורה מסומנת ברקע אפור.

• שינוי המיקום של הלחצנים '+' ו-'-': הלחצנים '+' ו-'-' אשר מופיעים בכל אחת מהחלוניות של CSS Designer זזו מהקצה הימני לקצה השמאלי כדי להבליט אותם.

• שם חדש לקטגוריה Custom‏: שם הקטגוריה של מאפייני Custom השתנה לשם More‏.

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

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

שינויים בהגדרת השרת

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

אם אתה פותח אתר או מייבא הגדרות של אתר אשר נוצר בגירסאות קודמות של Dreamweaver ואם לאתר יש שרת אחד המוגדר הן לצורכי בדיקות והן כשרת המרוחק, נוצר ערך כפול של השרת. לאחר מכן, אחד מהמופעים מסומן כשרת מרוחק (עם הסיומת ‎_remote‏) והשני מסומן כשרת בדיקות (עם הסיומת ‎_testing‏).

דחיפה אוטומטית של קבצים דינמיים

כעת Dreamweaver מסנכרן באופן אוטומטי מסמכים דינמיים לשרת הבדיקות שלך בעת פתיחה, יצירה או שמירה של שינויים במסמכים דינמיים. Dreamweaver אינו מציג עוד את תיבות הדו-שיח "Update Testing Server" או "Push Dependent Files" עבור תהליכי עבודה של שרתי בדיקות.

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

שינויים בתהליך העבודה של Business Catalyst

הרחבת Business Catalyst הוצאה משימוש ולא תהיה זמינה לשימוש עם מהדורת Dreamweaver CC 2015 ואילך. Dreamweaver CC 2014.1.1 היא המהדורה האחרונה התואמת להרחבת Business Catalyst.

כדי להשתמש ב-Business Catalyst עם מהדורת Dreamweaver CC 2015 ואילך, השתמש באפשרות חיבור SFTP ב-Dreamweaver. לקבלת מידע נוסף, ראה תיעוד Business Catalyst.

הנה הודעה רשמית על שינוי זה באתר האינטרנט של Business Catalyst. 

שינויים נוספים

• החלונית Insert אורגנה מחדש וכעת מקבצת את כל האפשרויות בקטגוריות Common‏, Layout ו-Media בקטגוריה לוגית יותר - HTML.

• סרטוני הווידאו של מיני-סיור והקישור להפעלתם בתפריט Help הוסרו. אפשרות זו אינה זמינה גם עבור אזורים שאינם דוברי אנגלית.

• האפשרויות הקיימות בתפריט הנפתח של שורת המסמך בתחתית הדף הוסרו - רק האפשרויות Orientation‏, Full Size ו-Edit Sizes זמינות כעת.