ב-Dreamweaver (תצוגת עיצוב או קוד), מקמו את נקודת ההכנסה בדף במקום בו אתם רוצים להכניס את התמונה.
עודכן לאחרונה בתאריך
27 באפריל 2021
למד כיצד Photoshop משולב עם Dreamweaver. עבוד עם אובייקטים חכמים בזרימות עבודה של Photoshop ו-Dreamweaver.
אודות שילוב עם Photoshop
פתק
תהליכי עבודה של אינטגרציית Photoshop הופסקו ב-Dreamweaver 21.0 ובגרסאות מאוחרות יותר.
אתם יכולים להוסיף קבצי תמונות Photoshop (בפורמט PSD) לדפי אינטרנט ב-Dreamweaver ולתת ל-Dreamweaver לבצע אופטימיזציה שלהם כתמונות מוכנות לאינטרנט (בפורמט GIF, JPEG ו-PNG). כאשר אתם עושים זאת, Dreamweaver מוסיף את התמונה כ-Smart Object ושומר על חיבור חי לקובץ ה-PSD המקורי.
אתם יכולים גם להדביק הכל או חלק מתמונת Photoshop רב-שכבתית או רב-פרוסה לדף אינטרנט ב-Dreamweaver. כאשר אתם מעתיקים ומדביקים מ-Photoshop, הקשר החי לקובץ המקורי לא נשמר. כדי לעדכן את התמונה, בצעו את השינויים שלכם ב-Photoshop, והעתיקו והדביקו שוב.
פתק
אם אתם משתמשים בתכונת האינטגרציה הזו לעתים קרובות, כדאי לכם לשמור את קבצי ה-Photoshop שלכם באתר Dreamweaver לגישה נוחה יותר. אם אתם עושים זאת, הקפידו לחסום אותם כדי למנוע חשיפה של הנכסים המקוריים, כמו גם העברות לא נחוצות בין האתר המקומי והשרת המרוחק.
לעיון בערכת לימוד בנושא שילוב של Photoshop עם Dreamweaver, ראה שילוב של Dreamweaver עם Photoshop.
אודות אובייקטים חכמים ותהליכי עבודה של Photoshop ו-Dreamweaver
ישנם שני תהליכי עבודה עיקריים לעבודה עם קבצי Photoshop ב-Dreamweaver: תהליך עבודה של העתקה/הדבקה ותהליך עבודה של Smart Objects.
תהליך עבודה של העתקה והדבקה
תהליך העתקה/הדבקה מאפשר לכם לבחור פרוסות או שכבות בקובץ Photoshop ואז להשתמש ב-Dreamweaver כדי להוסיף אותן כתמונות מוכנות לאינטרנט. אם ברצונכם לעדכן את התוכן מאוחר יותר, עליכם לפתוח את קובץ ה-Photoshop המקורי, לבצע את השינויים, להעתיק את הפרוסה או השכבה ללוח שוב ואז להדביק את הפרוסה או השכבה המעודכנת ל-Dreamweaver.תהליך העבודה הזה מומלץ רק כאשר אתם רוצים להוסיף חלק מקובץ Photoshop (למשל, קטע של עיצוב comp) כתמונה בדף אינטרנט.
תהליך עבודה עם עצמים חכמים
כאשר עובדים עם קבצי Photoshop מלאים, Adobe ממליצה על תהליך עבודה של Smart Objects. Smart Object ב-Dreamweaver הוא נכס תמונה שממוקם בדף אינטרנט ויש לו חיבור חי לקובץ Photoshop מקורי (PSD). בתצוגת עיצוב של Dreamweaver, Smart Object מסומן על ידי סמל בפינה השמאלית העליונה של התמונה.
כאשר תמונת האינטרנט (כלומר, התמונה בדף Dreamweaver) אינה מסונכרנת עם קובץ ה-Photoshop המקורי, Dreamweaver מזהה שהקובץ המקורי עודכן ומציג אחד מהחצים של סמל ה-Smart Object באדום. כאשר אתם בוחרים את תמונת האינטרנט בתצוגת עיצוב ולוחצים על לחצן העדכון מהמקור ב-Property inspector, התמונה מתעדכנת אוטומטית ומשקפת כל שינוי שביצעתם לקובץ ה-Photoshop המקורי.
כאשר אתם משתמשים בתהליך העבודה של Smart Objects, אינכם צריכים לפתוח את Photoshop כדי לעדכן תמונת אינטרנט.בנוסף, כל עדכון שאתם מבצעים ל-Smart Object ב-Dreamweaver אינו הרסני. כלומר, אתם יכולים לשנות את גרסת האינטרנט של התמונה בדף שלכם תוך שמירה על תמונת ה-Photoshop המקורית שלמה.
אתם יכולים גם לעדכן Smart Object מבלי לבחור את תמונת האינטרנט בתצוגת עיצוב. לוח הנכסים מאפשר לכם לעדכן את כל ה-Smart Objects, כולל תמונות שאולי לא ניתן לבחור בחלון המסמך (למשל, תמונות רקע CSS).
הגדרות מיטוב תמונה
בתהליך העבודה של העתקה והדבקה ובתהליך העבודה של אובייקטים חכמים, ניתן לציין הגדרות מיטוב בתיבת הדו-שיח Image Optimization. תיבת דו-שיח זו מאפשרת לך לציין את תבנית הקובץ ואיכות התמונה. אם אתה מעתיק פרוסה או שכבה, או מוסיף קובץ Photoshop כאובייקט חכם בפעם הראשונה, Dreamweaver מציג תיבת דו-שיח זו כדי שתוכל ליצור בקלות את תמונת האינטרנט.
אם אתה מעתיק ומדביק עדכון לפרוסה או לשכבה מסוימת, Dreameaver זוכר את ההגדרות ויוצר מחדש את תמונת האינטרנט עם הגדרות אלה. באופן דומה, כשמעדכנים עצם חכם במפקח התכונות, Dreamweaver משתמש באותן הגדרות שהשתמשת בהן כשהוספת בפעם הראשונה את התמונה. ניתן לשנות הגדרות תמונה בכל עת על-ידי בחירת תמונת האינטרנט בתצוגת Design ולחיצה על הלחצן Edit Image Settings במפקח התכונות.
אחסון קובצי Photoshop
אם הוספת תמונת אינטרנט ולא שמרת את קובץ Photoshop המקורי באתר של Dreamweaver, Dreamweaver יזהה את הנתיב לקובץ המקורי כנתיב קובץ מקומי מוחלט. (הדבר נכון לתהליך עבודה של העתקה והדבקה ולתהליך עבודה עם עצמים חכמים). לדוגמה, אם הנתיב לאתר Dreamweaver הוא C:\Sites\mySite, וקובץ Photoshop מאוחסן ב: C:\Images\Photoshop, Dreameaver לא יזהה את המשאב המקורי כחלק מהאתר הנקרא mySite. הדבר עלול לגרום לבעיות אם תרצה לשתף חברים בצוות בקובץ Photoshop, משום ש- Dreamweaver יזהה רק קובץ הזמין בכונן קשיח מקומי מסוים.
לעומת זאת, אם תשמור את קובץ Photoshop באתר, Dreamweaver יגדיר לקובץ נתיב יחסי לאתר. כל משתמש עם גישה לאתר יוכל למצוא את הנתיב הנכון לקובץ, בהנחה שסיפקת לו את הקובץ המקורי להורדה.
לעיון בערכת לימוד בנושא ביצוע עריכה דו-כיוונית בעזרת Photoshop, ראה ביצוע עריכה דו-כיוונית בעזרת Photoshop.
יצירת אובייקט חכם
כאשר אתם מוסיפים תמונת Photoshop (קובץ PSD) לדף שלכם, Dreamweaver יוצר Smart Object. Smart Object הוא תמונה מוכנה לאינטרנט ששומרת על חיבור חי לתמונת ה-Photoshop המקורית. בכל פעם שאתם מעדכנים את התמונה המקורית ב-Photoshop, Dreamweaver נותן לכם את האפשרות לעדכן את התמונה ב-Dreamweaver בלחיצת כפתור.
בחר Insert > Image.
פתק
אתם יכולים גם לגרור את קובץ ה-PSD לדף מתוך לוח הקבצים אם אתם שומרים את קבצי Photoshop שלכם באתר האינטרנט שלכם.במקרה כזה, דלג על השלב הבא.
אתר את קובץ PSD של תמונת Photoshop בתיבת הדו-שיח Select Image Source על-ידי לחיצה על הלחצן Browse וניווט לקובץ.
בתיבת הדו-שיח Image Optimization שמופיעה, התאם את הגדרות המיטוב לפי הצורך ולחץ על OK.
שמרו את קובץ התמונה המוכן לאינטרנט במיקום בתוך תיקיית הבסיס של אתר האינטרנט שלכם.
Dreamweaver יוצר את האובייקט החכם על בסיס הגדרות האופטימיזציה שנבחרו ומציב גרסה מוכנה לאינטרנט של התמונה בדף שלכם.האובייקט החכם מקיים חיבור חי לתמונה המקורית ומודיע לכם כאשר השניים אינם מסונכרנים.
פתק
אם תחליט מאוחר יותר לשנות את הגדרות המיטוב של תמונה הממוקמת בדפים שלך, תוכל לבחור את התמונה, ללחוץ על הלחצן Edit Image Settings ב-Property inspector ולבצע שינויים בתיבת הדו-שיח Image Optimization. השינויים המבוצעים בתיבת הדו-שיח Image Optimization הפיכים. Dreamweaver לעולם לא ישנה את קובץ Photoshop המקורי, אלא תמיד ייצור תמונת אינטרנט חדשה המבוססת על הנתונים המקוריים.
לעיון בערכת לימוד בנושא ביצוע עריכה דו-כיוונית בעזרת Photoshop, ראה ביצוע עריכה דו-כיוונית בעזרת Photoshop.
עדכון אובייקט חכם
אם אתם משנים את קובץ Photoshop שאליו מקושר האובייקט החכם שלכם, Dreamweaver מודיע לכם שהתמונה המוכנה לאינטרנט אינה מסונכרנת עם המקורית.ב-Dreamweaver, אובייקטים חכמים מסומנים באמצעות סמל בפינה השמאלית העליונה של התמונה.כאשר התמונה המוכנה לאינטרנט ב-Dreamweaver מסונכרנת עם קובץ Photoshop המקורי, שני החצים בסמל הם ירוקים.כאשר התמונה המוכנה לאינטרנט אינה מסונכרנת עם קובץ Photoshop המקורי, אחד מהחצים של הסמל הופך לאדום.
כדי לעדכן אובייקט חכם בתוכן העדכני של קובץ Photoshop המקורי, בחר את האובייקט החכם בחלון Document ולאחר מכן לחץ על הלחצן Update from Original במפקח המאפיינים.
פתק
אתם לא צריכים Photoshop מותקן כדי לבצע את העדכון מ-Dreamweaver.
עדכון אובייקטים חכמים מרובים
אתם יכולים לעדכן מספר אובייקטים חכמים בבת אחת באמצעות לוח הנכסים.לוח ה-Assets מאפשר לכם גם לראות Smart Objects שאינם ניתנים לבחירה בחלון המסמך (לדוגמה, תמונות רקע CSS).
בלוח הקבצים, לחצו על הלשונית 'נכסים' כדי להציג נכסים של האתר.
הקפד לבחור בתצוגת Images. אם היא לא נבחרה, לחץ על הלחצן Images.
בחר בכל משאב תמונה בחלונית Assets. כאשר אתם בוחרים אובייקט חכם, תראו את סמל האובייקט החכם בפינה השמאלית העליונה של התמונה.סמל זה לא מופיע בתמונות רגילות.
עבור כל אובייקט חכם שאתם רוצים לעדכן, לחצו לחיצה ימנית על שם הקובץ ובחרו 'עדכן מהמקור'.אתם יכולים גם ללחוץ על Control ולבחור מספר שמות קבצים ולעדכן את כולם בבת אחת.
פתק
אתם לא צריכים Photoshop מותקן כדי לבצע את העדכון מ-Dreamweaver.
שינוי גודל של אובייקט חכם
אתם יכולים לשנות גודל של אובייקט חכם בחלון המסמך בדיוק כמו כל תמונה אחרת.
בחרו את האובייקט החכם בחלון המסמך וגררו את ידיות שינוי הגודל כדי לשנות את גודל התמונה.אתם יכולים לשמור על יחסי הרוחב והגובה על ידי החזקת מקש Shift תוך כדי הגרירה.
לחץ על הלחצן Update from Original ב-Property inspector.
כאשר אתם מעדכנים את האובייקט החכם, התמונה באינטרנט מתעבדת מחדש בגודל החדש באופן לא הרסני, על בסיס התוכן הנוכחי של הקובץ המקורי והגדרות האופטימיזציה המקוריות.
לערוך קובץ Photoshop מקורי של אובייקט חכם
לאחר יצירת אובייקט חכם בדף Dreamweaver שלכם, אתם יכולים לערוך את קובץ ה-PSD המקורי ב-Photoshop.לאחר שתבצעו את השינויים שלכם ב-Photoshop, תוכלו לעדכן בקלות את התמונה באינטרנט ב-Dreamweaver.
פתק
ודאו ש-Photoshop מוגדר כעורך התמונות החיצוני הראשי שלכם.
בחר את האובייקט החכם בחלון המסמך.
לחץ על הלחצן Edit במפקח המאפיינים.
בצע את השינויים הרצויים ב- Photoshop ושמור את קובץ PSD החדש.
ב-Dreamweaver, בחר שוב את האובייקט החכם ולחץ על הלחצן Update from Original.
פתק
אם שינית את גודל התמונה ב-Photoshop, עליך להגדיר מחדש את גודל תמונת האינטרנט ב-Dreamweaver. Dreamweaver מעדכן אובייקט חכם רק לפי התוכן של קובץ Photoshop המקורי, ולא לפי גודלו. כדי לסנכרן את גודל תמונת האינטרנט עם הגודל של קובץ Photoshop המקורי, לחץ לחיצה ימנית על התמונה ובחר Reset Size To Original.
מצבים של אובייקטים חכמים
הטבלה הבאה מפרטת את המצבים השונים של Smart Objects.
|
מצב אובייקט חכם |
תיאור |
פעולה מומלצת |
|
תמונות מסונכרנות |
תמונת האינטרנט מסונכרנת עם התוכן הנוכחי של קובץ Photoshop המקורי. תכונות הרוחב והגובה בקוד HTML תואמות למידות של תמונת האינטרנט. |
None |
|
המשאב המקורי השתנה |
קובץ Photoshop המקורי השתנה לאחר יצירתה של תמונת האינטרנט ב- Dreamweaver. |
השתמש בלחצן Update From Original במפקח המאפיינים כדי לסנכרן בין שתי התמונות. |
|
המידות של תמונת האינטרנט שונות מהרוחב ומהגובה שנבחרו בקוד HTML |
תכונות הרוחב והגובה בקוד HTML שונות ממידות הרוחב והגובה של תמונת האינטרנט ש- Dreamweaver יצר בשעת ההוספה. אם המידות של תמונת האינטרנט קטנות מערכי הרוחב והגובה בקוד HTML, תמונת האינטרנט עלולה להופיע כמפוקסלת. |
השתמש בלחצן Update From Original במפקח המאפיינים כדי ליצור מחדש את תמונת האינטרנט מקובץ Photoshop המקורי. בשעת היצירה מחדש של התמונה, Dreamweaver משתמש במידות הרוחב והגובה הנוכחיות, כפי שצוינו בקוד HTML. |
|
המידות של המשאב המקורי קטנות מדי לרוחב ולגובה שנבחרו בקוד HTML |
תכונות הרוחב והגובה בקוד HTML גדולות ממידות הרוחב והגובה של קובץ Photoshop המקורי. תמונת האינטרנט עלולה להופיע כמפוקסלת. |
אין ליצור תמונות אינטרנט הגדולות יותר ממידותיו של קובץ Photoshop המקורי. |
|
המשאב המקורי לא נמצא |
Dreamweaver לא מוצא את קובץ Photoshop המקורי שצוין בתיבת הטקסט Original של מפקח המאפיינים. |
תקן את הנתיב בתיבת הטקסט Original של מפקח המאפיינים או העבר את קובץ Photoshop למיקום המוגדר כעת. |
העתיקו והדביקו בחירה מתוך Photoshop
תוכלו להעתיק את כל תמונת ה- Photoshop או חלק ממנה ולהדביק את הבחירה לתוך דף ה-Dreamweaver שלכם כתמונה מוכנה לאתר. תוכלו להעתיק Layer (שכבה) יחידה או קבוצת שכבות עבור אזור נבחר של התמונה או שתוכלו להעתיק הכלי פרוסה של התמונה. אולם כאשר עושים זאת, Dreamweaver לא יוצר Smart Object.
פתק
בעוד שהפונקציונליות של האפשרות Update from Original אינה זמינה לתמונות מודבקות, ניתן עדיין לפתוח ולערוך את קובץ Photoshop המקורי על-ידי בחירת התמונה המודבקת ולחיצה על הלחצן Edit במפקח המאפיינים.
ב- Photoshop, בצע אחת מהפעולות הבאות:
- העתק שכבה אחת במלואה או בחלקה באמצעות הכלי Marquee לבחירת המקטע שברצונך להעתיק, ולאחר מכן בחר Edit > Copy. פעולה זו מעתיקה אל הלוח רק את השכבה הפעילה של האזור הנבחר. אם קיימים בתמונה אפקטים מבוססי שכבה, הם לא יועתקו.
- העתק ומזג שכבות מרובות באמצעות הכלי Marquee לבחירת המקטע שברצונך להעתיק, ולאחר מכן בחר Edit > Copy Merged. פעולה זו משטחת ומעתיקה אל הלוח את השכבה הפעילה ואת כל השכבות הנמוכות של האזור הנבחר. אם קיימים בתמונה אפקטים מבוססי שכבה המשויכים לאחת משכבות אלה, הם יועתקו.
- העתק פרוסה באמצעות הכלי Slice Select לבחירת הפרוסה, ולאחר מכן בחר Edit > Copy. פעולה זו משטחת ומעתיקה ללוח את כל השכבות הפעילות והתחתונות של הפרוסה.
פתק
ניתן לבחור Select > All כדי להעתיק במהירות תמונה במלואה.
ב-Dreamweaver (תצוגת עיצוב או קוד), הניחו את נקודת ההוספה
בדף שלכם במקום בו אתם רוצים שהתמונה תיכנס.
בחר Edit > Paste.
בתיבת הדו-שיח Image Optimization, התאם את הגדרות המיטוב לפי הצורך ולחץ על OK.
שמרו את קובץ התמונה המוכנה לאינטרנט במיקום בתוך תיקיית השורש של האתר שלכם.
Dreamweaver מגדיר את התמונה לפי הגדרות המיטוב שלך וממקם בדף גרסה מוכנה לאינטרנט של התמונה. מידע על התמונה, כגון מיקומו של קובץ PSD המקורי, נשמר ב-Design Note גם אם בחרת שלא לשמור Design Notes לאתר שלך. Design Note זה מאפשר לך לשוב ולערוך את קובץ Photoshop המקורי מתוך Dreamweaver.
עריכת תמונות מודבקות
לאחר שתדביקו תמונות Photoshop ב- דפי ה-Dreamweaver שלכם, תוכלו לערוך את קובץ ה-PSD המקורי ב-Photoshop. כאשר משתמשים בתהליכי עבודה של העתקה/הדבקה, Adobe ממליצה תמיד לבצע את העריכות שלכם בקובץ ה- PSD המקורי (ולא בתמונה המוכנה לאתר עצמה), ואז להדביק שוב כדי לשמור על מקור יחיד.
פתק
ודאו שיש לכם את Photoshop מוגדר כעורך התמונות החיצוני הראשי עבור סוג הקובץ שאתם רוצים לערוך.
ב-Dreamweaver, בחרו
תמונה מוכנה לאתר שנוצרה במקור ב-Photoshop ובצעו
אחת מהפעולות הבאות:
- לחץ על הלחצן Edit ב-Property inspector של התמונה.
- לחצו על Control (Windows) או Command (Macintosh) תוך כדי לחיצה כפולה על הקובץ.
- לחצו לחיצה ימנית (Windows) או Control-לחיצה (Macintosh) על תמונה, בחרו Edit Original With מתפריט ההקשר, ואז בחרו Photoshop.
פתק
זה מניח ש-Photoshop מוגדר כעורך התמונות החיצוני הראשי עבור קובצי תמונת PSD.אולי תרצו גם להגדיר את Photoshop כעורך ברירת המחדל עבור סוגי קבצים של JPEG, GIF ו-PNG.
ערוך את הקובץ ב-Photoshop.
חזרו ל-Dreamweaver והדביקו את התמונה או
הבחירה המעודכנת לתוך הדף שלכם.
אם בשלב כלשהו תרצה למטב את התמונה מחדש, תוכל לבחור את התמונה וללחוץ על הלחצן Edit Image Settings ב-Property inspector.
הגדרת אפשרויות בתיבת הדו-שיח Image Optimization
בעת יצירת אובייקט חכם או הדבקת בחירה מתוך Photoshop, Dreamweaver מציג את תיבת הדו-שיח Image Optimization. (Dreamweaver מציג תיבת דו-שיח זו גם לסוגים אחרים של תמונות אם תבחר את התמונה ותלחץ על הלחצן Edit Image Settings ב-Property inspector.) תיבת דו-שיח זו מאפשרת לך להגדיר ולהציג הגדרות של תמונות מוכנות לאינטרנט בעירוב הנכון של צבע, דחיסה ואיכות.
תמונה מוכנה לאינטרנט היא תמונה שכל הדפדפנים המודרניים יכולים להציג, והיא נראית באופן זהה בכל מערכת ובכל דפדפן. באופן כללי, ההגדרות מספקות פשרה בין איכות הקובץ לגודלו.
פתק
ההגדרות שתבחר משפיעות רק על הגרסה המיובאת של קובץ התמונה. קובץ PSD המקורי של Photoshop או קובץ PNG המקורי של Fireworks נשארים תמיד ללא שינוי.
Preset
בחר קביעה מוגדרת מראש המתאימה ביותר לדרישות שלך. גודל הקובץ של התמונה משתנה בהתבסס על הקביעה המוגדרת מראש שנבחרה. תצוגה מקדימה מיידית של התמונה עם ההגדרה המיושמת מוצגת ברקע.
לדוגמה, עבור תמונות הדורשות תצוגה ברורה ביותר, בחר PNG24 for Photos (Sharp Details).בחרו GIF For Background Images (Patterns) אם אתם מכניסים תבנית שתפעל כרקע של הדף.
בעת בחירת קביעה מוגדרת מראש, מוצגות האפשרויות הניתנות להגדרה עבור הקביעה המוגדרת מראש. אם אתם רוצים להתאים אישית עוד יותר את הגדרות האופטימיזציה, שנו את הערכים עבור האפשרויות הללו.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
