הפעל את Dreamweaver על-ידי הפעלת הפקודה הבאה:
- Windows: <installation_path> -enableRemoteDebugging
- Mac: open <installation_path> --args -enableRemoteDebugging
הערה: הקלד שני מקפים לפני args
העדכונים האחרונים למהדורת 2014 של Dreamweaver CC כוללים שילוב עם Extract כדי לסייע לך לבנות אתרים למחשבים שולחניים וניידים מקומפוזיציית PSD ישירות ב-Dreamweaver. מחווני Live Guide חדשים מקלים עליך למקם ולארגן מחדש רכיבי HTML במדויק, ותכונות העריכה המשופרות של תצוגת Live מאפשרות לערוך שינויים בזמן אמת.
מאמר זה מציג את התכונות החדשות הללו וכן מספר שיפורים אחרים, והוא כולל קישורים למשאבים לקבלת סיוע ולמידה נוספת.
האם זו הפעם הראשונה שבה אתה משתמש ב-Dreamweaver? האם השתמשת ב-Dreamweaver בעבר ואתה מעוניין לשפר את הכישורים שלך? האם אתה רוצה לדעת מהם השינויים בגרסה הנוכחית בהשוואה לגרסה הקודמת? בין אם אתה משתמש מתחיל ובין אם אתה בעל ניסיון, או אם אתה מעוניין להעריך את הגרסה החדשה של Dreamweaver, כעת ניתן לגשת לכל משאבי הלימוד החיוניים ישירות מהמסך Welcome Screen.
העדכון האחרון למהדורת Dreamweaver CC 2014 של Dreamweaver מספק גישה מהירה מהמסך Welcome Screen לסרטוני וידאו (כולל תכונות חדשות), ערכות לימוד מפורטות, שיטות עבודה, עצות ועוד.
המסך Welcome Screen החדש זמין למשתמשים במדינות דוברות אנגלית בלבד. למשתמשים במדינות אחרות מוצגים הסיורים המפורטים של Dreamweaver CC 2014.1 במסך Welcome Screen וב-New Features.
הסמלים Live Guides ו-Element Quick View מופיעים כעת ב-Live View בעת גרירת תמונות מהחלונית Extract. כלים חזותיים אלו עוזרים לך למקם את התמונה במיקום הנדרש במהירות ובאופן מדויק.
כעת ניתן להזיז רכיבים ב-Live View על-ידי גרירת שם התג המשויך להם. בעת הריחוף עם העכבר מעל שם התג, מופיע סמן היד המציין כי ניתן לגרור את הרכיב. ניתן לשחרר את הרכיבים הנגררים בעזרת מחווני Live Guide, שמציינים באופן חזותי את מיקום הרכיב לאחר השחרור.
כעת ניתן לבחור טקסט, תמונות או רכיבים אחרים בתג, על-ידי לחיצה וגרירה בכל מקום בתוך תג (בחירה באמצעות הכלי Marquee). בחירה באמצעות הכלי Marquee עוזרת לך לבחור בקלות רכיבים מרובים בתוך תג.
רק פעולות שנתמכות על-ידי הדפדפן נתמכות עבור בחירה באמצעות הכלי Marquee ב-Live View.
Element Display מציג כעת את טקסט העזרה 'Class/ID', כדי לציין בבירור שניתן להגדיר class או ID.
בנוסף, השינויים שנעשים ב-Element Display נשמרים בעת לחיצה על '+'. ניתן גם להקיש על Enter או על Return כדי לשמור שינויים, כמו בגרסאות קודמות של Dreamweaver.
ב-Code View נוספו עשר ערכות צבע חדשות:
לקבלת מידע נוסף על ערכות הנושא ב-Code View, ראה הגדרת ערכת הנושא של צבעים ב-Code View.
עדכון זה כולל מספר שינויים בממשק המשתמש של CSS Designer, ושינוי בהגדרת ברירת המחדל של תיבת הסימון Show Set.
בעת ההפעלה, תיבת הסימון Show Set מסומנת כברירת מחדל, ושינוי אפשרות זו יישמר בהפעלות הבאות של Dreamweaver. לדוגמה, אם תבטל את הסימון של אפשרות זו, ההגדרה תישמר בהפעלה הבאה של Dreamweaver והאפשרות תוצג ללא סימון.
להלן השינויים בממשק המשתמש:
כעת באפשרותך לאתר באגים מרחוק במסמכי Dreamweaver הפתוחים ב-Live View באמצעות Google Chrome DevTools. ב-Google Chrome, באפשרותך להשתמש ביציאה 5471, שאותה ניתן להפעיל על-ידי ביצוע השלבים הבאים:
הפעל את Dreamweaver על-ידי הפעלת הפקודה הבאה:
הערה: הקלד שני מקפים לפני args
בתיבת הדו-שיח שמופיעה המציינת כי היציאה 5471 מופעלת לאיתור באגים, לחץ על 'אשר'.
Dreamweaver מופעל.
פתח את המסמכים שבהם ברצונך לאתר באגים ב-Live View.
כדי להתחיל באיתור הבאגים, פתח את Google Chrome ועבור אל localhost:5471. מוצגת רשימה של קישורים לכל המסמכים הפתוחים ב-Dreamweaver.
הערה: מכיוון שהמסך Welcome Screen החדש והחלונית Extract משתמשים ב-Chromium Embedded Framework (CEF), תראה גם רשומות הקשורות לתכונות אלה.
כעת באפשרותך להשתמש ב-Google Chrome DevTools כדי לאתר באגים במסמכים הדרושים.
כדי להפסיק לאתר באגים ולפתוח את Dreamweaver במצב רגיל, צא מ-Dreamweaver והפעל אותו שוב.
כעת, בעת איפוס ההעדפות באמצעות קיצורי מקשים, גיבוי של ההעדפות נוצר על-ידי Dreamweaver בתיקייה Adobe Dreamweaver CC 2014.1 Backups. תיקייה זו נוצרת באופן אוטומטי באותה התיקייה שבה נמצאת תיקיית ההעדפות המקורית של Dreamweaver ב-Windows וב-Mac.
הנתיב המלא של תיקיית הגיבוי מוצג בתיבת הדו-שיח של איפוס ההעדפות.
מסמכים דינמיים, כגון PHP, CFM ו-ASP, לא נפתחים עוד ב-Code View כברירת מחדל. הם נפתחים במצב של המסמך האחרון שנסגר (Code/Live/Split), או במצב של המסמך האחרון שהיה פעיל.
השילוב של Extract ב-Dreamweaver מאפשר למפתחי ומעצבי אתרים להחיל נתוני עיצוב ולחלץ נכסים ממוטבים לאינטרנט ישירות בתוך סביבת כתיבת הקודים. Extract מספק פתרון מקיף ועצמאי לחילוץ נתוני עיצוב ונכסים מקומפוזיציות PSD ומפחית את הצורך במעברים הלוך ושוב בין Photoshop ל-Dreamweaver.
בעזרת החלונית Extract ב-Dreamweaver, תוכל לחלץ CSS, תמונות, גופנים, צבעים, מעברי צבע ומידות ישירות לתוך דף אינטרנט. בנוסף לתכונות עיקריות אלה של Extract, Dreamweaver מספק גם את התכונות הייחודיות הבאות:
בסביבת העבודה המוגדרת כברירת מחדל ב-Dreamweaver (בשם Extract) החלונית Extract מוצגת בצד שמאל, כדי לאפשר לך להתחיל בעבודה במהירות. עם ההפעלה הראשונה של Dreamweaver, החלונית Extract מציגה ערכת לימוד פשוטה המסייעת ללמוד על תהליכי העבודה של Extract. לחץ על Get Started כדי להתחיל להשתמש ב-Extract.
לקבלת מידע נוסף על תהליכי העבודה של Extract ב- Dreamweaver, ראה שילוב של Dreamweaver עם Extract.
גרסת 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 סיביות:
כדי לבדוק אם מערכת ההפעלה במחשב שלך היא של 64 סיביות, בצע את השלבים המפורטים במאמרים שלהלן:
הורד את גרסת 64 סיביות של Dreamweaver מ-Creative Cloud והתקן אותה.
מחווני Live Guide מהווים משוב חזותי בתצוגת Live המציין מיקומים אפשריים להוספת רכיב בתרחישים הבאים:
מחווני Live Guides אינם נתמכים במסמכי Fluid Grid.
מחווני Live Guides מוצגים כאשר אתה מעביר את הסמן של העכבר מעל רכיבים שונים בדף לפני שחרור רכיב. הם יכולים להופיע מעל הרכיב שמעליו אתה מרחף, מתחתיו, מימינו או משמאלו.
ניתן להשתמש ב-Element Quick View בשילוב עם מחווני Live Guides כדי להוסיף רכיב HTML למבנה המסמך באופן מדויק יותר.
כשאתה משתהה לזמן מה לפני שחרור רכיב, מוצג לך הסמל של Element Quick View (</>) כאשר אתה מרחף עם סמן העכבר מעל סמל זה, Element Quick View נפתח ויש לך אפשרות לשחרר את הרכיב בתוך Element Quick View.
כעת ניתן לגזור, להעתיק, להדביק ולמחוק רכיבים בתצוגת Live בעזרת תפריט תלוי הקשר המוצג בלחיצה ימנית. ניתן גם לשכפל רכיבים, או לבחור את תג ההורה או הצאצא באמצעות התפריט תלוי ההקשר בתצוגת Live.
ניתן גם להשתמש בקיצורי מקשים (לדוגמה, ב-Windows, Ctrl+x, ctrl+c, Ctrl+v, Ctrl+d ומקש Delete) בתצוגת Live.
ראשית בחר רכיב ב-Live View כדי להציג את Element Display. לאחר מכן, לחץ לחיצה ימנית בתוך אזור התג, כדי שיוצגו לך האפשרויות הכלולות בתפריט תלוי ההקשר המוצג לעיל. ניתן להפעיל את האפשרויות ברמת התג.
לא זו בלבד שניתן להחיל בוררים על רכיבים, אלא ניתן גם ליצור בורר במקור ה-CSS הרצוי ולהקצות שאילתת מדיה באמצעות Element Display. כאשר לוחצים על בורר אשר אינו קיים בשום גיליון סגנונות ומקישים Enter, Element Display מספק את האפשרויות לבחור מקור CSS ושאילתת מדיה.
אם אינך מעוניין לבחור מקור CSS או שאילתת מדיה, הקש על Esc כדי לבטל את האפשרויות.
כעת ניתן גם ללחוץ לחיצה ימנית על בורר מוחל כדי לעבור לקוד המתאים (אפשרות Go To Code) או להדביק סגנונות שהועתקו (אפשרות Paste Styles).
האפשרות Go To Code מציגה אפשרויות משנה אם אותו בורר מתווסף לשאילתות מדיה מרובות. האפשרות Paste Styles מציגה אפשרויות משנה אם הבוררים שהועתקו הם בוררים מדומים או מורכבים.
כעת, Dreamweaver תומך בהזזת רכיבים (ברמת התג) ב-Live View. ניתן לבחור רכיב ב-Live View, לגרור אותו ולשחרר אותו בכל מיקום אחר.
לחץ על הרכיב שברצונך להזיז, וכאשר Element Display (תיבה כחולה המקיפה את הרכיב) מוצג, גרור את הרכיב. בעת הפעלת אפשרות הגרירה, צורתו של סמן העכבר משתנה כדי להצביע על כך שהרכיב מוכן להזזה.
הרכיב המשמש להתייחסות (הרכיב שביחס אליו ברצונך להציב את הרכיב הנגרר) מסומן בגבול כחול. מחווני Live Guides (בירוק) מוצגים כדי לציין את המיקומים האפשריים שבהם ניתן לשחרר את הרכיב ביחס לרכיב המשמש להתייחסות.
ניתן להזיז רכיבים סטאטיים בלבד ב-Live View. לא ניתן להזיז תגים של תוכן דינמי כגון PHP.
כשאתה משתהה לזמן מה לפני שחרור רכיב, מוצג לך הסמל של Element Quick View (</>) כאשר אתה מרחף עם סמן העכבר מעל סמל זה, Element Quick View נפתח ויש לך אפשרות לשחרר את הרכיב בתוך Element Quick View.
כעת Dreamweaver תומך בניווט בין רכיבים בדף בעזרת המקלדת כדי להקל על משתמשים המעדיפים את השימוש במקלדת וכדי להאיץ את תהליך העיצוב לאינטרנט. ניתן להשתמש:
לקבלת מידע נוסף, ראה ניווט בעזרת המקלדת ב-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.
נערכו שינויים בסרגל הכלים Document וכעת השימוש בו פשוט.
סביבות עבודה מוכנות לשימוש הזמינות ב-Dreamweaver השתנו וכעת הן נראות כך:
סביבת העבודה המוגדרת כברירת מחדל היא Extract כעת. סביבת עבודה זו מציגה את חלונית Extract משמאל ואת דף האינטרנט מימין. עם ההפעלה הראשונה של Dreamweaver, החלונית Extract מציגה ערכת לימוד פשוטה המסייעת ללמוד על תהליכי העבודה של Extract. כדי להתחיל להשתמש ב-Extract, לחץ על Get Started.
התצוגה המוגדרת כברירת מחדל עבור מסמכי HTML היא כעת תצוגת Split View, המפוצלת בצורה אופקית כדי להציג את Live View ו-Code View. קבצים דינמיים כגון אלו המפורטים ברשימה להלן נפתחים ב-Code View כברירת מחדל. בעת פיצול התצוגה, המסמכים הללו מוצגים ב-Design וב-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 מלאה.
יכולות עריכה חדשות ב-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 נפתחים ישירות ב-Live View. כבר לא ניתן להציג או לערוך מסמכי Fluid Grid בתצוגה Design.
לקבלת מידע נוסף על מסמכי Fluid Grid, ראה יצירת עיצוב מגיב בעזרת פריסות Fluid Grid.
כעת, תיבת הדו-שיח Insert המיועדת למסמכי Fluid Grid כוללת אפשרויות 'סיוע במיקום'. הסיוע במיקום מאפשר לך למקם את הרכיב שאתה מוסיף לפני, אחרי או בתוך הרכיב המסומן (ב-Live View). לקבלת מידע נוסף על רכיבי Fluid Grid, ראה הוספת רכיבי Fluid Grid.
האפשרות Manage Hidden Elements (לחצן העין בסרגל הכלים Document) הועברה לתפריט תלוי ההקשר במסמך Fluid Grid.
כדי שתוכל לנהל רכיבים מוסתרים, לחץ לחיצה ימנית בדף Fluid Grid ובחר באפשרות Manage Hidden Elements על מנת להציג רכיבים מוסתרים. כדי להסתיר רכיבים אלה ניתן ללחוץ על סמל העין ב-HUD.
כעת ניתן לבחור אחת מערכות הנושא הבאות של צבעים הזמינות לשימוש עבור Code View::
השתמש בהעדפות לצבעי קוד כדי לציין ערכת נושא עבור התצוגה Code. ניתן לבצע התאמה אישית של ערכת הנושא על-ידי בחירת תבניות צביעה שונות עבור רקעים, צבעי חזית ותווים מוסתרים.
בכל סוג מסמך רשום, ניתן לבצע התאמה אישית של צבעים עבור קטגוריות שונות של תגים ורכיבי קוד, כגון תגים הקשורים לטפסים או מזהים של JavaScript. לדוגמה, אם תחיל את ערכת הצבעים Raven על כל סוגי המסמכים, תוכל לבחור לסמן תגים הקשורים לטפסים בצבע כחול רק במסמכי HTML.
כל ההגדרות בערכת נושא שעברו התאמה אישית נשמרות בעת לחיצה על Apply וערכת הנושא שנערכו בה התאמות אישיות זמינה לשימוש בכל ההפעלות של Dreamweaver.
באפשרותך לסנכרן את ערכות הנושא המותאמות אישית של הקוד בין מופעי Dreamweaver באמצעות האפשרות Sync Settings ב-Preferences. לקבלת מידע נוסף, ראה סנכרון הגדרות של Dreamweaver עם Creative Cloud.
לקבלת מידע נוסף, ראה הגדרה של ערכת נושא לצבעים ב-Code View.
סנכרון בין Code View ל-Live View מאפשר לך להציג באופן מיידי תצוגה מקדימה של שינויים שאתה מבצע בקוד ב-Live View. שלא כמו בגרסאות קודמות של Dreamweaver, אין צורך ללחוץ על לחצן הרענון כדי להציג תצוגה מקדימה של שינויים ב-Live View.
תוכל לראות כיצד פועל הסנכרון בין Code View ל-Live View בתהליכי העבודה הבאים (כאשר ההתמקדות היא ב-Code View):
לאחר כל שינוי בקוד JavaScript יש לבצע רענון מלא או טעינה מחדש של הדף כדי לשקף את השינוי ב-Live View.
החלונית Assets (Windows > Assets) זמינה כעת ב-Live View. באמצעות החלונית Assets ניתן לבצע בקלות את המשימות הבאות:
הערה: באפשרותך לגרור נכסים מחלונית התצוגה המקדימה ב-Mac בלבד.
לקבלת הוראות מפורטות על אופן השימוש בחלונית Assets, ראה עבודה עם Assets.
כעת Dreamweaver כולל תבניות Starter חדשות ומהירות תגובה המסייעות לך להתחיל לעצב אתרים מהירי תגובה במהירות רבה יותר. תוכל לבחור אחת מהתבניות הבאות מתוך תיבת הדו-שיח New Document (File > New > Starter Templates):
כאשר אתה בוחר תבנית ולוחץ על Create בתיבת הדו-שיח New Document, Dreamweaver מנחה אותך לשמור את המסמך החדש. שמירת המסמך יוצרת עותק של התבנית, שלאחר מכן תוכל לבצע בו התאמות אישיות כך שיתאים לצרכיך.
לעתים, לצורך פתרון בעיות ב-Dreamweaver יש למחוק את תיקיית ההעדפות הכוללת את כל ההגדרות שביצעת התאמה אישית שלהן. במהדורות קודמות, היה עליך לנווט ידנית לתיקיית ההעדפות במחשב ולמחוק אותה. במהדורה זו קיימת אפשרות למחוק את ההעדפות בלחיצה אחת באמצעות תיבת דו-שיח:
ניתן לפתוח את תיבת הדו-שיח Reset Preferences על-ידי לחיצה ממושכת על קיצורי המקשים הבאים תוך הפעלה של Dreamweaver:
השתמש באפשרות Reset Preferences בשיקול דעת. בעת איפוס העדפות והגדרות, יאבדו כל ההגדרות המותאמות אישית בסביבת העבודה, קיצורי המקשים, ההרחבות והעדפות היישומים.
ב-Mac, הקש ממושכות על Cmd + Option + Shift בעת הפעלת Dreamweaver (על-ידי לחיצה על סמל Dreamweaver ב-Dock).
ב-Windows, בצע את השלבים הבאים:
עבור לתיקיית ההתקנה, אתר את קובץ Dreamweaver.exe ולחץ עליו.
הקש ממושכות על מקש Windows + מקשי Ctrl + Shift ולחץ לחיצה כפולה על Dreamweaver.exe.
הקפד להחזיק את מקשי הקיצור המוזכרים לעיל גם כאשר תיבת הדו-שיח 'בקרת חשבון משתמש' (UAC) מופיעה.
ניתן כעת לייבא הגדרות מהגרסה הקודמת של Dreamweaver אשר נשמרו ב-Creative Cloud באמצעות תיבת הדו-שיח Preferences. כל ההגדרות המקומיות יוחלפו בהגדרות המיובאות מהענן, והן ייכנסו לתוקף בהפעלה הבאה של Dreamweaver.
כמו כן, ממהדורה זו ואילך, בנוסף להגדרות אשר סונכרנו בגרסאות קודמות, ההגדרות הבאות מסונכרנות גם הן עם Creative Cloud:
גרסה זו של Dreamweaver מציעה שיפורים רבים בחוויית המשתמש של CSS Designer. החלונית CSS Designer כוללת גם חוויה המיועדת למשתמשים חדשים כדי לסייע להם להתחיל להשתמש במהירות בתהליכי העבודה.
האפשרות Site Templates במסך Welcome הוחלפה כעת ב-Starter Templates. ניתן לגשת ל-Site Templates בתיבת הדו-שיח New Document (File > New).
Dreamweaver כולל כעת את ספריות jQuery המעודכנות הבאות:
דפי Starter של jQuery הוסרו.
השילוב הישיר של Dreamweaver עם PhoneGap Build לאריזת יישומים אינו נתמך בעדכון האחרון של מהדורת 2014 של Dreamweaver CC (אוקטובר 2014), ואילך.
אך קיימת אפשרות גישה ישירה לשירות PhoneGap Build המקוון, המאפשר להשתמש בעדכוני התכונות האחרונים לאריזת יישומי האינטרנט שלך כיישומים מקוריים למכשירים ניידים.
כניסה לחשבון