העדכונים האחרונים למהדורת 2014 של Dreamweaver CC כוללים שילוב עם Extract כדי לסייע לך לבנות אתרים למחשבים שולחניים וניידים מקומפוזיציית PSD ישירות ב-Dreamweaver‏. מחווני Live Guide חדשים מקלים עליך למקם ולארגן מחדש רכיבי HTML במדויק, ותכונות העריכה המשופרות של תצוגת Live מאפשרות לערוך שינויים בזמן אמת.

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

Adobe Dreamweaver CC 2014.1.1 (פברואר 2015)

מסך Welcome Screen חדש

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

העדכון האחרון למהדורת Dreamweaver CC 2014 של Dreamweaver מספק גישה מהירה מהמסך Welcome Screen לסרטוני וידאו (כולל תכונות חדשות), ערכות לימוד מפורטות, שיטות עבודה, עצות ועוד.

Welcome Screen
Welcome Screen

הערה:

המסך Welcome Screen החדש זמין למשתמשים במדינות דוברות אנגלית בלבד. למשתמשים במדינות אחרות מוצגים הסיורים המפורטים של Dreamweaver CC 2014.1 במסך Welcome Screen וב-New Features.

שיפורים בחלונית Extract

הסמלים Live Guides ו-Element Quick View מופיעים כעת ב-Live View בעת גרירת תמונות מהחלונית Extract. כלים חזותיים אלו עוזרים לך למקם את התמונה במיקום הנדרש במהירות ובאופן מדויק.

החלונית Extract
החלונית Extract

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

גרירה ושחרור של רכיבים

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

בחירה באמצעות הכלי Marquee

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

הערה:

רק פעולות שנתמכות על-ידי הדפדפן נתמכות עבור בחירה באמצעות הכלי Marquee ב-Live View.

שיפורים ב-Element Display

Element Display מציג כעת את טקסט העזרה 'Class/ID', כדי לציין בבירור שניתן להגדיר class או ID.

בנוסף, השינויים שנעשים ב-Element Display נשמרים בעת לחיצה על '+'. ניתן גם להקיש על Enter או על Return כדי לשמור שינויים, כמו בגרסאות קודמות של Dreamweaver. 

ערכות נושא חדשות ב-Code View

ב-Code View נוספו עשר ערכות צבע חדשות:

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

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

שיפורים ב-CSS Designer

עדכון זה כולל מספר שינויים בממשק המשתמש של CSS Designer, ושינוי בהגדרת ברירת המחדל של תיבת הסימון Show Set.

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

להלן השינויים בממשק המשתמש:

  • החלונית CSS Designer נגללת בעת הוספת מאפיין: בעת לחיצה על '+' במקטע Properties, החלונית נגללת כך שהשורה Add Property מגיעה כמעט למרכז החלונית Properties. אם המקטע Properties קטן מדי, החלונית נגללת כך שהשורה Add Property מופיעה בחלק התחתון של המקטע.
  • סימון רקע: כאשר תיבת הטקסט Add New Property פעילה, השורה מסומנת ברקע אפור. 
  • מיקום הלחצן '+' והלחצן '-': הלחצן '+' והלחצן '-', שמופיעים בכל מקטע של החלונית CSS Designer (‏Source, ‏Selectors, ‏Media query ו-Properties), הועברו שמאלה מהקצה הימני כדי להפוך אותם לגלויים יותר לעין.
  • הקטגוריה Custom נקראת כעת More

איתור באגים מרחוק של Live View

כעת באפשרותך לאתר באגים מרחוק במסמכי Dreamweaver הפתוחים ב-Live View באמצעות Google Chrome DevTools. ב-Google Chrome, באפשרותך להשתמש ביציאה 5471, שאותה ניתן להפעיל על-ידי ביצוע השלבים הבאים:

  1. הפעל את Dreamweaver על-ידי הפעלת הפקודה הבאה:

    • Windows:‏ <installation_path> -enableRemoteDebugging
    • Mac:‏ open <installation_path> --args -enableRemoteDebugging

    הערה: הקלד שני מקפים לפני args

  2. בתיבת הדו-שיח שמופיעה המציינת כי היציאה 5471 מופעלת לאיתור באגים, לחץ על OK.

    Dreamweaver מופעל.

    לחץ על OK בתיבת הדו-שיח כדי להפעיל את Dreamweaver
    לחץ על OK בתיבת הדו-שיח כדי להפעיל את Dreamweaver

  3. פתח את המסמכים שבהם ברצונך לאתר באגים ב-Live View.

  4. כדי להתחיל באיתור הבאגים, פתח את Google Chrome ועבור אל localhost:5471. מוצגת רשימה של קישורים לכל המסמכים הפתוחים ב-Dreamweaver. 

    הערה: מכיוון שהמסך Welcome Screen החדש והחלונית Extract משתמשים ב-Chromium Embedded Framework ‏(CEF), תראה גם רשומות הקשורות לתכונות אלה.

    כעת באפשרותך להשתמש ב-Google Chrome DevTools כדי לאתר באגים במסמכים הדרושים.

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

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

שינויים בתהליכי העבודה של איפוס ההעדפות

כעת, בעת איפוס ההעדפות באמצעות קיצורי מקשים, גיבוי של ההעדפות נוצר על-ידי Dreamweaver בתיקייה Adobe Dreamweaver CC 2014.1 Backups. תיקייה זו נוצרת באופן אוטומטי באותה התיקייה שבה נמצאת תיקיית ההעדפות המקורית של Dreamweaver ב-Windows וב-Mac.

הנתיב המלא של תיקיית הגיבוי מוצג בתיבת הדו-שיח של איפוס ההעדפות.

איפוס העדפות והגדרות
איפוס העדפות והגדרות

שינויים במצב התצוגה של מסמכים דינמיים

מסמכים דינמיים, כגון PHP‏, CFM ו-ASP, לא נפתחים עוד ב-Code View כברירת מחדל. הם נפתחים במצב של המסמך האחרון שנסגר (Code/Live/Split‎), או במצב של המסמך האחרון שהיה פעיל.

Adobe Dreamweaver CC 2014.1 (אוקטובר 2014)

Extract ב-Dreamweaver

השילוב של Extract ב-Dreamweaver מאפשר למפתחי ומעצבי אתרים להחיל נתוני עיצוב ולחלץ משאבים ממוטבים לאינטרנט ישירות בתוך סביבת כתיבת הקודים. Extract מספק פתרון מקיף ועצמאי לחילוץ נתוני עיצוב ומשאבים מקומפוזיציות PSD ומפחית את הצורך במעברים הלוך ושוב בין Photoshop ל-Dreamweaver‏.

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

  • גישה ישירה לקובצי ה-PSD שלך ב-Creative Cloud ולקובצי ה-PSD המשותפים בתיקיית השיתוף
  • השלמת קודים לפי הקשר המאפשרת להגדיר בקלות גופנים, צבעים ומעברי צבע ב-CSS‏
  • תמיכה בגרירה ושחרור ליצירת תגי תמונות משכבות PSD
  • הדבקת סגנונות הישר ב-Live View‏ (לדוגמה, CSS Designer ו-Element Display‏)

בסביבת העבודה המוגדרת כברירת מחדל ב-Dreamweaver (בשם Extract) החלונית Extract מוצגת בצד שמאל, כדי לאפשר לך להתחיל בעבודה במהירות. עם ההפעלה הראשונה של Dreamweaver, החלונית Extract מציגה ערכת לימוד פשוטה המסייעת ללמוד על תהליכי העבודה של Extract‏. לחץ על Get Started כדי להתחיל להשתמש ב-Extract‏.

סביבת העבודה המוגדרת כברירת מחדל של החלונית Extract
החלונית Extract

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

ארכיטקטורת 64 סיביות

גרסת 64 סיביות של Dreamweaver זמינה כעת והיא תומכת בכל התכונות הנתמכות בגרסת 32 סיביות. תוספת זו מאפשרת לך להוריד את המבנים הבאים של Dreamweaver מהיישום Adobe Creative Cloud:

OS מיקום ההתקנה המוגדר כברירת מחדל התיקייה Application Preferences
גרסת 32 סיביות של Windows C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 ‎%appdata%/Adobe/Adobe Dreamweaver CC 2014.1
גרסת 64 סיביות של Windows C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 ‎%appdata%/Adobe/Adobe Dreamweaver CC 2014.1
גרסת 64 סיביות של Mac /Applications/Adobe Dreamweaver CC 2014.1 ‎~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

שאלות נפוצות

  • האם יישום בגרסת 64 סיביות יפעל בגרסת 32 סיביות של Windows? - לא
  • האם ניתן להתקין גם גרסת 32 סיביות וגם גרסת 64 סיביות באותו מחשב עם מערכת הפעלה של Windows? - לא
  • כיצד אוכל לבדוק אם במערכת שלי מופעלת גרסת 32 סיביות או 64 סיביות של Dreamweaver?
    • Windows: הפעל את Dreamweaver. פתח את מנהל המשימות וחפש את ההליך של Dreamweaver. אם המבנה של Dreamweaver שהופעל הוא מבנה של 64 סיביות, שם ההליך יהיה Dreamweaver.exe. אם המבנה שהופעל הוא מבנה של 32 סיביות, שם ההליך יהיה Dreamweaver.exe *32.
    • Mac: פתח את Activity Monitor ועבור אל View‏ > Columns‏ > Kind. חפש את Dreamweaver ב-Activity Monitor והבט בעמודה Kind. אם מדובר בגרסת 64 סיביות של Dreamweaver, בעמודה Kind יוצג הכיתוב 64‎ bit.

התקנה של Dreamweaver בגרסת 64 סיביות

  1. ודא שבמחשב שלך פועלת מערכת הפעלה של 64 סיביות:

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

  2. הורד את גרסת 64 סיביות של Dreamweaver מ-Creative Cloud והתקן אותה.

שיפורים ב-Live View

מחווני Live Guide

מחווני Live Guide מהווים משוב חזותי בתצוגת Live המציין מיקומים אפשריים להוספת רכיב בתרחישים הבאים:

  • בעת גרירה מהחלונית Insert‏
  • בעת גרירה מהחלונית Asset‏‏
  • בגרירה (הזזה) של רכיבים בתוך תצוגת Live.

הערה:

מחווני Live Guides אינם נתמכים במסמכי Fluid Grid.

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

  • מעל ומתחת - מוצג בעת ריחוף מעל כל סוגי הרכיבים/תגים, למעט תגים בתוך שורה. ריחוף עם סמן העכבר מעל 50% העליונים של רכיב יגרום להצגת מחוונים מעל אותו רכיב. ריחוף עם סמן העכבר מעל 50% התחתונים של רכיב יגרום להצגת מחוונים מתחת לאותו רכיב.
מחווני Live Guide מעל ומתחת לרכיבים שמעליהם מרחפים
מחווני Live Guide מעל ומתחת לרכיבים שמעליהם מרחפים

  • מימין ומשמאל - מוצג בעת ריחוף מעל תגים בתוך שורה, לדוגמה <a>‏, <span> או מעל תגים שהוגדר להם 'מאפיין ציפה'.
מחווני Live Guide מימין ומשמאל לרכיבים שמעליהם מרחפים
מחווני Live Guide מימין ומשמאל לרכיבים שמעליהם מרחפים

הוספת רכיב מבני במיקום מדויק

ניתן להשתמש ב-Element Quick View בשילוב עם מחווני Live Guides כדי להוסיף רכיב HTML למבנה המסמך באופן מדויק יותר.  

כשאתה משתהה לזמן מה לפני שחרור רכיב, מוצג לך הסמל של Element Quick View‏ (</>) כאשר אתה מרחף עם סמן העכבר מעל סמל זה, Element Quick View נפתח ויש לך אפשרות לשחרר את הרכיב בתוך Element Quick View.

סמל Element Quick View
הסמל של Element Quick View, המסייע להוספה במיקום מדויק יותר

תפריט תלוי הקשר ב-Live View

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

הערה:

ניתן גם להשתמש בקיצורי מקשים (לדוגמה, ב-Windows,‏ Ctrl+x‏, ctrl+c‏, Ctrl+v,‏ Ctrl+d ומקש Delete) בתצוגת Live.

ראשית בחר רכיב ב-Live View כדי להציג את Element Display. לאחר מכן, לחץ לחיצה ימנית בתוך אזור התג, כדי שיוצגו לך האפשרויות הכלולות בתפריט תלוי ההקשר המוצג לעיל. ניתן להפעיל את האפשרויות ברמת התג. 

שינויים ב-Element Display

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

האפשרויות CSS Source ו-Media Query ב-Element Display
האפשרויות CSS Source ו-Media Query ב-Element Display

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

כעת ניתן גם ללחוץ לחיצה ימנית על בורר מוחל כדי לעבור לקוד המתאים (אפשרות Go To Code‏) או להדביק סגנונות שהועתקו (אפשרות Paste Styles‏).

האפשרויות Go To Code ו-Paste Styles ב-Element Display
האפשרויות Go To Code ו-Paste Styles ב-Element Display

הערה:

האפשרות Go To Code מציגה אפשרויות משנה אם אותו בורר מתווסף לשאילתות מדיה מרובות. האפשרות Paste Styles מציגה אפשרויות משנה אם הבוררים שהועתקו הם בוררים מדומים או מורכבים.

הזזת רכיבים ב-Live View

כעת, Dreamweaver תומך בהזזת רכיבים (ברמת התג) ב-Live View. ניתן לבחור רכיב ב-Live View, לגרור אותו ולשחרר אותו בכל מיקום אחר.

  1. לחץ על הרכיב שברצונך להזיז, וכאשר Element Display (תיבה כחולה המקיפה את הרכיב) מוצג, גרור את הרכיב. בעת הפעלת אפשרות הגרירה, צורתו של סמן העכבר משתנה כדי להצביע על כך שהרכיב מוכן להזזה.

  2. הרכיב המשמש להתייחסות (הרכיב שביחס אליו ברצונך להציב את הרכיב הנגרר) מסומן בגבול כחול. מחווני Live Guides (בירוק) מוצגים כדי לציין את המיקומים האפשריים שבהם ניתן לשחרר את הרכיב ביחס לרכיב המשמש להתייחסות.

הערה:

ניתן להזיז רכיבים סטאטיים בלבד ב-Live View. לא ניתן להזיז תגים של תוכן דינמי כגון PHP.

כשאתה משתהה לזמן מה לפני שחרור רכיב, מוצג לך הסמל של Element Quick View‏ (</>) כאשר אתה מרחף עם סמן העכבר מעל סמל זה, Element Quick View נפתח ויש לך אפשרות לשחרר את הרכיב בתוך Element Quick View. 

ניווט בעזרת המקלדת ב-Live View

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

  • במקש החץ למעלה ובמקש החץ למטה כדי לנווט בין רכיבים בדף. ניווט בעזרת המקלדת ב-Live View מאפשר לגשת בקלות לרכיבים מקוננים ולרכיבים מוקפים.
  • במקש Tab כדי לעבור בין הבוררים ב-Element Display

לקבלת מידע נוסף, ראה ניווט בעזרת המקלדת ב-Live View.

Quick Tag Editor ב-Live View

הקשה על Ctrl+T ב-Windows או על Cmd+T ב-Mac ב-Live View מעלה כעת Quick Tag Editor עבור הרכיב שנבחר. ל-Quick Tag Editor יש שלושה מצבים: Edit Tag‏, Wrap Tag ו-Insert HTML‏. ניתן לעבור בין המצבים בהקשה על Ctrl/Cmd + T‏.

Quick Tag Editor ב-Live View
Quick Tag Editor ב-Live View

שינויים בסביבת העבודה של Dreamweaver

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

נערכו שינויים בסרגל הכלים Document וכעת השימוש בו פשוט.

  • האפשרויות Design ו-Live View ממוזגות תחת פקד יחיד (תפריט נפתח).
האפשרויות Design ו-Live View ב-Dreamweaver CC‏ (אוקטובר 2014)
אפשרויות Design ו-Live View בעדכון האחרון של Dreamweaver CC‏ (אוקטובר 2014)

לחצני Design ו-Live View בסרגל הכלים Document בגרסאות קודמות
לחצני Design ו-Live View בסרגל הכלים Document בגרסאות קודמות

  • השדה Document Title הועבר ל-Property Inspector.
סרגל הכלים Document ב-Dreamweaver CC (אוקטובר 2014)
סרגל הכלים Document בעדכון האחרון - Dreamweaver CC‏ (אוקטובר 2014)

השדה Document Title הועבר ל-Property Inspector ב-Dreamweaver CC (אוקטובר 2014)
השדה Document Title הועבר ל-Property Inspector בעדכון האחרון של Dreamweaver CC‏ (אוקטובר 2014)

השדה Title בסרגל הכלים Document בגרסאות קודמות
השדה Title בסרגל הכלים Document בגרסאות קודמות

  • הלחצנים Inspect ו-Live Code הוחלפו בסמלים.
הסמלים Live Code ו-Inspect ב-Dreamweaver CC‏ (אוקטובר 2014)
הסמלים Live Code ו-Inspect בעדכון האחרון של Dreamweaver CC‏ (אוקטובר 2014)

הלחצנים Live Code ו-Inspect בגרסאות קודמות
הלחצנים Live Code ו-Inspect בגרסאות קודמות

  • האפשרויות Back‏, Forward ו-Refresh קובצו בשילוב עם סרגל הכתובות והוצבו במרכז סרגל הכלים Document.
סרגל הכתובות והאפשרויות Back‏, Forward ו-Refresh ב-Dreamweaver CC (אוקטובר 2014)
סרגל הכתובות והאפשרויות Back‏, Forward ו-Refresh בעדכון האחרון של Dreamweaver CC‏ (אוקטובר 2014)

סרגל הכתובות והאפשרויות Back‏, Forward ו-Refresh בגרסאות קודמות
סרגל הכתובות והאפשרויות Back‏, Forward ו-Refresh בגרסאות קודמות

  • האפשרויות Preview/‏Debug in Browser‏, Live View והסמלים של File Management קובצו יחד ויושרו בצדו הימני של סרגל הכלים Document.
האפשרויות Preview‏, Debug In Browser‏, Live View והסמלים של File Management ב-Dreamweaver CC (אוקטובר 2014)
האפשרויות Preview‏, Debug In Browser‏, Live View והסמלים של File Management בעדכון האחרון של Dreamweaver CC‏ (אוקטובר 2014)

האפשרויות Preview‏, Debug In Browser‏, Live View והסמלים של File Management בגרסאות קודמות
האפשרויות Preview‏, Debug In Browser‏, Live View והסמלים של File Management בגרסאות קודמות

שינויים בסביבת העבודה המוגדרת כברירת מחדל

סביבות עבודה מוכנות לשימוש הזמינות ב-Dreamweaver השתנו וכעת הן נראות כך:

  • Code
  • Design
  • Extract
סביבות עבודה
סביבות עבודה

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

סביבת העבודה של Extract
סביבת העבודה של Extract

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

  • PHP
  • תבנית PHP ‏(Example.dwt.php)
  • ASP
  • תבנית ASP ‏(Example.dwt.asp)
  • JSP
  • תבנית JSP ‏(Example.dwt.jsp)
  • CFM
  • תבנית CFM ‏(Example.dwt.php)
התצוגה המוגדרת כברירת מחדל עבור מסמכי HTML שמוצגים ב-Live View ו-Code View
התצוגה המוגדרת כברירת מחדל עבור מסמכי HTML המציגים את Live View ו-Code View

התצוגה המוגדרת כברירת מחדל עבור מסמכים דינמיים המציגים תצוגת Code View מלאה
התצוגה המוגדרת כברירת מחדל עבור מסמכים דינמיים המציגים תצוגת Code View מלאה

עצה: כדי לעבור לתצוגת Design, לחץ על הרשימה הנפתחת בסמוך ל-'Live' ולחץ על Design. כדי להפוך פיצול אופקי לפיצול אנכי, בחר View‏ > Split Vertically. תצוגת Live/Design מופיעה כעת בצד שמאל. כדי לקבל את תצוגת Live/Design מימין, בטל את בחירת האפשרות View ‏> Live View On Left או Design View On Left.

Dreamweaver זוכר כעת את מצב תצוגת Live שבחרת עבור מסמך HTML‏, ולאחר מכן מחיל תצוגה זהה על כל מסמכי ה-HTML שאתה פותח בהמשך. לדוגמה, נניח ש-HTML1 הוא המסמך שפתחת ראשון. תצוגת המסמך מפוצלת עם Code View ו-Live View‏. נניח ששינית את תצוגת המסמך לתצוגת Live View מלאה. המסמך הבא שתפתח, לדוגמה HTML2‎‏, מוצג בתצוגת Live View מלאה.  

שינויים במסמכי Fluid Grid

תמיכה בעריכה ב-Live View

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

התכונות הבאות מסייעות לך לערוך מסמכי Fluid Grid ב-Live View:

כעת ניתן גם להציג באופן חזותי את מבנה HTML DOM של מסמך Fluid Grid באמצעות Element Quick View.

הערה: Element Quick View בפריסות Fluid Grid אינו מאפשר להעתיק, להדביק, לשכפל או לסדר מחדש את רכיבי ה-HTML.

ממשק המשתמש המשמש להצגה ועריכה של מסמכי Fluid Grid השתנה כדי שיתאים לתכונות העריכה ב-Live View. כעת, כאשר אתה בוחר רכיב במסמך Fluid Grid‏, Element Display מוצג יחד עם פקדים נוספים כגון Hide Elements ו-Start A New Row‏.

אפשרויות Fluid Grid בגרסאות קודמות
אפשרויות Fluid Grid בגרסאות קודמות

אפשרויות Fluid Grid עם Element Display ב-Dreamweaver CC (אוקטובר 2014)
אפשרויות Fluid Grid עם Element Display בעדכון האחרון של Dreamweaver CC‏ (אוקטובר 2014)


בנוסף, כעת מסמכי Fluid Grid נפתחים ישירות ב-Live View. כבר לא ניתן להציג או לערוך מסמכי Fluid Grid בתצוגה Design.

סרגל הכלים Document ב-Dreamweaver CC (אוקטובר 2014)
סרגל הכלים Document בעדכון האחרון - Dreamweaver CC‏ (אוקטובר 2014)

סרגל הכלים Document במסמך Fluid Grid בגרסאות קודמות
סרגל הכלים Document במסמך Fluid Grid בגרסאות קודמות

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

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

כעת, תיבת הדו-שיח Insert המיועדת למסמכי Fluid Grid כוללת אפשרויות 'סיוע במיקום'. הסיוע במיקום מאפשר לך למקם את הרכיב שאתה מוסיף לפני, אחרי או בתוך הרכיב המסומן (ב-Live View). לקבלת מידע נוסף על רכיבי Fluid Grid‏, ראה הוספת רכיבי Fluid Grid‏.

שינויים באפשרות Manage Hidden Elements

האפשרות Manage Hidden Elements (לחצן העין בסרגל הכלים Document‏) הועברה לתפריט תלוי ההקשר במסמך Fluid Grid.


כדי שתוכל לנהל רכיבים מוסתרים, לחץ לחיצה ימנית בדף Fluid Grid ובחר באפשרות Manage Hidden Elements על מנת להציג רכיבים מוסתרים. כדי להסתיר רכיבים אלה ניתן ללחוץ על סמל העין ב-HUD. 

האפשרות Manage Hidden Elements בתפריט המוצג בלחיצה ימנית ב-Dreamweaver CC (אוקטובר 2014)
האפשרות Manage Hidden Elements בתפריט המוצג בלחיצה ימנית בעדכון האחרון של Dreamweaver CC‏ (אוקטובר 2014)

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

ערכות נושא של צבעים המוכנות לשימוש מיידי בתצוגה Code

כעת ניתן לבחור אחת מערכות הנושא הבאות של צבעים הזמינות לשימוש עבור התצוגה Code:

  • Classic (ברירת המחדל; זהה לערכה שהייתה בגרסה הקודמת של Dreamweaver)
  • Raven
  • Slate
  • Blanche
  • Geneva
ערכות הנושא Classic‏, Raven‏, Slate‏, Blanche ו-Geneva
ערכות הנושא Classic‏, Raven‏, Slate‏, Blanche ו-Geneva

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

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

כל ההגדרות בערכת נושא שעברו התאמה אישית נשמרות בעת לחיצה על Apply וערכת הנושא שנערכו בה התאמות אישיות זמינה לשימוש בכל ההפעלות של Dreamweaver.

הערה:

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

סנכרון בין התצוגה Code ל-Live View

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

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

  • פעולות המתבצעות בטקסט, כגון גזירה/העתקה/הדבקה/מחיקה, ביטול/ביצוע מחדש.
  • הזזת רכיבים ב-Element Quick View תוך התמקדות בתצוגה Code.
  • הקלדה ב-Code View.
  • הפעולות Delete/Duplicate/Copy/Paste ב-Element Quick View (אפשרויות המוצגות בלחיצה ימנית).
  • פעולות ב-Property Inspector, כגון שינוי תבניות הטקסט - המאפיינים Bold/Italic‏, Changing Class‏, ID‏, Format‏, Page והחלת גופנים.
  • הוספה/מחיקה של מחלקות או מזהים בעזרת השלמות קוד בתצוגה Code.
  • הוספת רכיבים כגון קובץ Div, תמונה, היפר-קישור ורכיבים מבניים מהחלונית Insert לתצוגה Code.
  • הוספה/עריכה של סגנונות CSS בתג <style>. 
  • עריכת קוד בקובצי CSS.

הערה:

לאחר כל שינוי בקוד JavaScript יש לבצע רענון מלא או טעינה מחדש של הדף כדי לשקף את השינוי ב-Live View. 

החלונית Assets ב-Live View

החלונית Assets ‏(Window‏ > Assets) זמינה כעת ב-Live View. באמצעות החלונית Assets ניתן לבצע בקלות את המשימות הבאות:

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

הערה: באפשרותך לגרור משאבים מחלונית התצוגה המקדימה ב-Mac בלבד.

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

הערה:

 

  • כיוון שהקטגוריות Scripts,‏ Template ו-Library רלוונטיות יותר בתצוגה Code, הם הוסתרו בחלונית Assets ב-Live View.
  • במהדורה הנוכחית של Dreamweaver CC, הקטגוריות Flash ו-Movies שולבו לקטגוריה יחידה שנקראת Media.
         

החלונית Assets ב-Live View
החלונית Assets ב-Live View

החלונית Assets בתצוגות Design ו-Code
החלונית Assets בתצוגות Design ו-Code


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

תבניות Starter חדשות

כעת Dreamweaver כולל תבניות Starter חדשות ומהירות תגובה המסייעות לך להתחיל לעצב אתרים מהירי תגובה במהירות רבה יותר. תוכל לבחור אחת מהתבניות הבאות מתוך תיבת הדו-שיח New Document‏ (File‏ > New‏ > Starter Templates):

  • About Page
  • Blog Post
  • eCommerce
  • Email
  • Portfolio‏
תבניות Starter חדשות ומהירות תגובה
תבניות Starter חדשות ומהירות תגובה

כאשר אתה בוחר תבנית ולוחץ על Create בתיבת הדו-שיח New Document‏, Dreamweaver מנחה אותך לשמור את המסמך החדש. שמירת המסמך יוצרת עותק של התבנית, שלאחר מכן תוכל לבצע בו התאמות אישיות כך שיתאים לצרכיך.

איפוס של ההעדפות בעת הפעלה

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

Reset Preferences
Reset Preferences

ניתן לפתוח את תיבת הדו-שיח Reset Preferences על-ידי לחיצה ממושכת על קיצורי המקשים הבאים תוך הפעלה של Dreamweaver‏:

  • (Win‏) מקש Windows + Ctrl + Shift
  • (Mac‏) Cmd + Option + Shift

הערה:

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

ב-Mac‏, הקש ממושכות על Cmd‏ + Option‏ + Shift בעת הפעלת Dreamweaver ‏(על-ידי לחיצה על סמל Dreamweaver ב-Dock‏).

ב-Windows‏, בצע את השלבים הבאים:

  1. עבור לתיקיית ההתקנה, אתר את קובץ Dreamweaver.exe ולחץ עליו.

  2. הקש ממושכות על מקש Windows ‏+ מקשי Ctrl‏ + Shift ולחץ לחיצה כפולה על Dreamweaver.exe‏.

הקפד להחזיק את מקשי הקיצור המוזכרים לעיל גם כאשר תיבת הדו-שיח 'בקרת חשבון משתמש' (UAC) מופיעה. 

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

שינויים בהגדרות הסנכרון

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

ייבוא הגדרות מגרסאות קודמות של Dreamweaver
ייבוא הגדרות מגרסאות קודמות של Dreamweaver

כמו כן, ממהדורה זו ואילך, בנוסף להגדרות אשר סונכרנו בגרסאות קודמות, ההגדרות הבאות מסונכרנות גם הן עם Creative Cloud:‏

שינויים ב-CSS Designer‏

גרסה זו של Dreamweaver מציעה שיפורים רבים בחוויית המשתמש של CSS Designer‏. החלונית CSS Designer כוללת גם חוויה המיועדת למשתמשים חדשים כדי לסייע להם להתחיל להשתמש במהירות בתהליכי העבודה.

שינויים במסך Welcome

האפשרות Site Templates במסך Welcome הוחלפה כעת ב-Starter Templates‏. ניתן לגשת ל-Site Templates בתיבת הדו-שיח New Document‏ (File >‏ New‏).

עדכונים בגרסת jQuery

Dreamweaver כולל כעת את ספריות jQuery המעודכנות הבאות:

  • jQuery ‏- 1.8.3 עד jQuery - 1.11.1
  • jQuery UI ‏- 1.9.2 עד jQuery UI - ‏1.10.4

דפי Starter של jQuery הוסרו. 

עדכון ל-PhoneGap

השילוב הישיר של Dreamweaver עם PhoneGap Build לאריזת יישומים אינו נתמך בעדכון האחרון של מהדורת 2014 של Dreamweaver CC (אוקטובר 2014), ואילך.

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

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

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