סיכום התכונות החדשות - מאי 2015

שאילתות מדיה חזותית

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

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

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

תמיכה ב- Emmet

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

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

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

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

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

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

תצוגה מקדימה של תמונות זמינה כעת עבור נתיבים של תמונות מרוחקות, כגון ‎<img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

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

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

JPEG
JPG
PNG
GIF
BMP
SVG

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

• url(‎ )‎;
• data-uri(‎ )‎
• ערך התכונה src של התג img

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

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

ערכי צבעים הקסדצימליים באורך של 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 וכדומה;

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

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

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

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

שילוב Bootstrap

כעת ניתן לפתוח ב- Dreamweaver אתרים שנוצרו באמצעות מסגרת Bootstrap (גרסה 3 ואילך), ולערוך את העמודים באמצעות הקוד או באמצעות תכונות עיצוב חזותיות. מערכת Dreamweaver מזהה את קובצי CSS המשויכים אם שמות הקבצים כוללות את המילה "bootstrap". 

בנוסף, ניתן להוסיף רכיבי Bootstrap ב- Dreamweaver (החלונית Insert) ולשנות את העיצוב של אזורי תצוגה על-ידי עריכה קלה ומהירה של הרשתות.

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

תבניות starter של Bootstrap

התבניות של Bootstrap שכלולות כעת ב- Dreamweaver עוזרות לך להתחיל בעבודה עם עיצובים מהירי תגובה. ניתן לגשת לתבניות Bootstrap הבאות מתיבת הדו-שיח New Document:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

קיפול קוד

קיפול קוד זמין כעת בקובצי HTML‏, CSS‏, LESS‏, SASS‏, SCSS‏, JS‏, PHP‏, XML ו-SVG שמבוססים על גושי תגים. כאשר אתה מרחף עם העכבר מעל לעמודת מספר השורה, מופיע משולש קטן ליד מספרי השורה ב- Code View. ניתן ללחוץ על משולש זה כדי להרחיב או לצמצם את גושי הקוד. פונקציונליות חדשה זו של קיפול קוד מחליפה את הפונקציונליות הקיימת, שמבוססת על בחירה.

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

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

קיפול קוד בקובצי HTML

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

בגוש הקוד המצומצם מוצג כעת מספר גדול יותר של תווים. הגדלת מספר התווים מסייעת לך להציג תצוגה מקדימה של התכונות הראשוניות בגוש בתגים המצומצם, אם תכונות אלו קיימות. לדוגמה, אם תג Div מצומצם כולל תכונות id ו-class, הגוש המצומצם ייראה כך:

ב- Windows ניתן להציג תצוגה מקדימה של הקוד הכלול בגוש מצומצם על ידי ריחוף עם העכבר מעל הקוד המצומצם. הגוש המצומצם מורחב באופן אוטומטי כאשר הקוד שבתוכו עובר למוקד באמצעות Tag Selector‏, Find & Replace‏, Go To Line‏, Element Quick View‏, Live View או Undo/Redo. לאחר שהמוקד עובר לקוד שנמצא מחוץ לאותו הגוש, הגוש שהורחב חוזר אוטומטית למצב מצומצם.

קיפול קוד בקובצי CSS‏, LESS‏, SASS‏, SCSS‏ ו- JS

ניתן לצמצם כעת גושי קוד שמוקפים בסוגריים מסולסלים בקובצי CSS‏, Less‏, Sass‏, SCSS‏ ו- JS.

רחף מעל לאזור צמצום הקוד בכל שורה שכוללת סוגריים מסולסלים פותחים ("}").

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

קיפול קוד בקובצי PHP

בנוסף לצמצום גושי קוד של PHP, בקובצי PHP ניתן לצמצם רכיבי HTML וגושי קוד של ‏CSS ו-JS.

ניתן לצמצם גושי PHP שמתחילים ב- "‎<?php‎" ומסתיימים ב- "<‎?".

רחף מעל לאזור צמצום הקוד בכל שורה שכוללת "‎<?php", ולחץ על סמל הצמצום כדי לצמצם את גוש הקוד.