במסמך Dreamweaver, הצב את נקודת ההכנסה במיקום שבו תרצה שהתמונה תופיע, ובצע אחת מהפעולות הבאות:
עודכן לאחרונה בתאריך
25 באפריל 2024
השתמש ב-Fireworks וב-Dreamweaver לקבלת תהליך עבודה יעיל של עריכה, מיטוב והצבת גרפיקה לאינטרנט בדפי HTML.
פתק
התכונה אינה נתמכת בגרסאות של Adobe Dreamweaver.
הוספת תמונה של Fireworks
Dreamweaver ו-Fireworks מזהים ומשתפים הליכים רבים ודומים לעריכת קבצים, כולל שינויים בקישורים, מפות תמונה, פרוסות טבלה ועוד. יחדיו, שני היישומים מספקים תהליך עבודה יעיל לעריכה, למיטוב ולמיקום של קובצי גרפיקה לאינטרנט בדפי HTML.
ניתן למקם גרפיקה שיוצאה מתוך Fireworks ישירות במסמך Dreamweaver באמצעות הפקודה Insert Image, או ליצור גרפיקת Fireworks חדשה מתוך מציין מיקום של תמונת Dreamweaver.
בחר Insert > Image.
בקטגוריה Common של החלונית Insert, לחץ על הלחצן Image או גרור אותו אל המסמך.
נווט אל הקובץ הרצוי שייצאת מתוך Fireworks ולחץ על OK (Windows) או על Open (Macintosh).
פתק
אם קובץ Fireworks לא נמצא באתר Dreamweaver הנוכחי, תופיע הודעה השואלת אם ברצונך להעתיק את הקובץ אל תיקיית השורש. לחץ על Yes.
עריכת תמונה או טבלה של Fireworks מתוך Dreamweaver
בעת פתיחה או עריכה של תמונה או פרוסת תמונה שהיא חלק מטבלת Fireworks, Dreamweaver מפעיל את Fireworks, שפותח את קובץ PNG שממנו יוצאה התמונה או הטבלה.
פתק
זאת בהנחה ש-Fireworks מוגדר כעורך התמונות החיצוני העיקרי של קובצי PNG. לעתים קרובות, Fireworks מוגדר גם כעורך ברירת המחדל לקובצי JPEG ו-GIF, למרות שייתכן שתרצה להגדיר את Photoshop כעורך ברירת המחדל לסוגי קובץ אלה.
כשהתמונה היא חלק מטבלת Fireworks, תוכלו לפתוח את כל טבלת ה-Fireworks לעריכה, כל עוד <!--fw table--> ההערה קיימת בקוד ה-HTML.אם ייצאת את קובץ PNG המקורי מ-Fireworks לאתר Dreamweaver באמצעות ההגדרה Style HTML And Images של Dreamweaver, ההערה של טבלת Fireworks נוספת באופן אוטומטי לקוד HTML.
ב-Dreamweaver, פתח את מפקח המאפיינים (Window > Properties), אם הוא אינו פתוח עדיין.
לחץ על התמונה או על פרוסת התמונה כדי לבחור בה.
כשתבחר בתמונה שיוצאה מ-Fireworks, מפקח המאפיינים מזהה את הבחירה כתמונה או כטבלה של Fireworks ומציג את השם של קובץ PNG המקורי.
כדי להפעיל את Fireworks לביצוע שינויי עריכה, בצע אחת מהפעולות הבאות:
ב-Property inspector, לחץ על Edit.
הקש Control (Windows) או Command (Macintosh) ולחץ פעמיים על התמונה שנבחרה.
לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על התמונה שנבחרה ובחר Edit With Fireworks מתוך התפריט תלוי-ההקשר.
פתק
אם Fireworks לא יכול לאתר את קובץ PNG המקורי, תתבקש לאתר אותו. בעבודה בקובץ המקור של Fireworks, השינויים נשמרים הן בקובץ המקור והן בקובץ המיוצא; אחרת, יעודכן רק הקובץ המיוצא.
ב-Fireworks, ערוך את קובץ PNG המקורי ולחץ על Done.
Fireworks שומר את השינויים בקובץ PNG, מייצא את התמונה המעודכנת (או HTML ותמונות) ומחזיר את המיקוד אל Dreamweaver. ב-Dreamweaver, מופיעה התמונה או הטבלה המעודכנת.
לקבלת ערכת לימוד לגבי שילוב Dreamweaver ו-Fireworks, ראה www.adobe.com/go/vid0188_il.
מיטוב תמונת Fireworks מתוך Dreamweaver
ניתן להשתמש ב-Dreamweaver לביצוע שינויים מהירים בתמונות ובהנפשות של Fireworks. תוך Dreamweaver, ניתן לשנות את הגדרות המיטוב, הגדרות ההנפשה ואת הגודל והאזור של התמונה המיוצאת.
ב-Dreamweaver, בחר את התמונה הרצויה ובצע אחת מהפעולות הבאות:
בחר Command > Optimize Image.
לחץ על הלחצן Edit Image Settings ב-Property inspector.
בצע את שינויי העריכה בתיבת הדו-שיח Image Preview:
לעריכה של הגדרות המיטוב, לחץ על הכרטיסייה Options.
כדי לערוך את הגודל והאזור של התמונה המיוצאת, לחץ על הכרטיסייה File.
לסיום, לחץ על OK.
שימוש ב-Fireworks לשינוי של מצייני מיקום תמונה של Dreamweaver
ניתן ליצור מציין מיקום של תמונה במסמך Dreamweaver ולאחר מכן להפעיל את Fireworks כדי לעצב תמונה גרפית או טבלת Fireworks שתחליף אותו.
כדי ליצור תמונה חדשה מתוך מציין מיקום של תמונה, Dreamweaver ו-Fireworks צריכים להיות מותקנים במחשב.
ודא שכבר הגדרת את Fireworks כעורך התמונות לקובצי PNG.
בחלון המסמך, לחץ על מציין מיקום התמונה כדי לבחור בו.
הפעל את Fireworks במצב Editing From Dreamweaver, באחת מהדרכים הבאות:
ב-Property inspector, לחץ על Create.
הקש Control (Windows) או Command (Macintosh) ולחץ פעמיים על מציין מיקום התמונה.
לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על מציין מיקום התמונה, ולאחר מכן בחר Create Image In Fireworks.
השתמש באפשרויות של Fireworks לעיצוב התמונה.
Fireworks מזהה את ההגדרות הבאות של מצייני מיקום תמונה, שייתכן שהגדרת בעת העבודה עם מציין מיקום התמונה ב-Dreamweaver: גודל תמונה (התואם לגודל בד הציור של Fireworks), מזהה תמונה (המשמש את Fireworks כברירת מחדל לשם מסמך בקובץ המקור ובקובץ המיוצא שאתה יוצר) ויישור טקסט. Fireworks מזהה גם קישורים והתנהגויות מסוימות (כגון Swap Image, Pop‑up Menu, ו-Set Text) שצירפת למציין מיקום התמונה במהלך העבודה ב-Dreamweaver.
פתק
על אף ש-Fireworks לא מציג קישורים שהוספת למציין מיקום תמונה, הקישורים נשמרים. אם אתה מצייר נקודה חמה ומוסיף קישור ב-Fireworks, הקישור שהוספת למציין מיקום התמונה לא יימחק ב-Dreamweaver; עם זאת, אם אתה גוזר פרוסה בתמונה החדשה ב-Fireworks, Fireworks מוחק את הקישור במסמך Dreamweaver כשאתה מחליף את מציין מיקום התמונה.
Fireworks לא מכיר את ההגדרות של מצייני מיקום התמונה הבאים: יישור תמונה, צבע, Vspace ו-Hspace ומפות. הגדרות אלה אינן פעילות ב-Property inspector של מציין מיקום התמונה.
לסיום, לחץ על Done כדי להציג את בקשת השמירה.
בתיבת הטקסט Save In, בחר את התיקייה שהגדרת כתיקיית האתר המקומי שלך ב-Dreamweaver.
אם נתת שם למציין מיקום התמונה בעת הוספתו למסמך Dreamweaver, Fireworks ממלא שם זה בתיבה File Name. ניתן לשנות את השם.
לחץ על Save כדי לשמור את הקובץ כקובץ PNG.
תיבת הדו-שיח Export מופיעה. השתמש בה כדי לייצא את התמונה כקובץ GIF או JPEG, או כ-HTML ותמונות במקרה של תמונות שנפרסו.
בתיבה Save In, בחר את תיקיית האתר המקומי של Dreamweaver.
התיבה Name מציגה באופן אוטומטי את השם שבו השתמשת לקובץ PNG. ניתן לשנות את השם.
באפשרות Save As Type, בחר את סוג הקובץ או הקבצים שברצונך לייצא; למשל Images Only לתמונות בלבד או HTML And Images ל-HTML ותמונות.
לחץ על Save כדי לשמור את הקובץ המיוצא.
הקובץ נשמר והמיקוד חוזר אל Dreamweaver. במסמך Dreamweaver, הקובץ המיוצא או טבלת Fireworks מחליפים את מציין מיקום התמונה.
אודות תפריטים נפתחים של Fireworks
Fireworks מאפשר ליצור בקלות ובמהירות תפריטים נפתחים מבוססי CSS.
בנוסף להיותם ניתנים להרחבה ולהורדה מהירה, התפריטים הנפתחים שתיצור ב-Fireworks מעניקים את היתרונות הבאים:
מנועי חיפוש יכולים למפתח את פריטי התפריט.
קוראי מסך יכולים להקריא את פריטי התפריט ובכך להפוך את הדפים לנגישים יותר.
הקוד ש-Fireworks יוצר תואם לתקנים וניתן לאימות.
ניתן לערוך את התפריטים הנפתחים של Fireworks ב-Dreamweaver או ב-Fireworks, אך לא בשניהם. שינויים המבוצעים ב-Dreamweaver לא נשמרים ב-Fireworks.
עריכת תפריטים נפתחים של Fireworks ב-Dreamweaver
ניתן ליצור תפריט נפתח ב-Fireworks 8 ואילך ולאחר מכן לערוך אותו ב-Dreamweaver או ב-Fireworks (בעריכה דו-כיוונית), אך לא בשניהם. אם אתה עורך את התפריטים שלך ב-Dreamweaver ולאחר מכן עורך אותם שוב ב-Fireworks, תאבד את כל השינויים הקודמים שביצעת, פרט לתוכן הטקסט.
אם אתה מעדיף לערוך את התפריטים שלך ב-Dreamweaver, תוכל להשתמש ב-Fireworks ליצירת התפריט הנפתח ולאחר מכן להשתמש ב-Dreamweaver בלבד כדי לערוך ולהתאים את התפריט.
אם אתה מעדיף לערוך את התפריטים ב-Fireworks, תוכל להשתמש בתכונת העריכה הדו-כיוונית ב-Dreamweaver, אך אל תערוך את התפריטים ישירות ב-Dreamweaver.
ב-Dreamweaver, בחר את טבלת Fireworks המכילה את התפריט הנפתח ולחץ על Edit ב-Property inspector.
קובץ PNG המקורי נפתח ב-Fireworks.
ב-Fireworks, ערוך את התפריט עם Pop‑up Menu Editor. לסיום, לחץ על Done בסרגל הכלים של Fireworks.
Fireworks שולח את התפריט הנפתח שערכת בחזרה ל-Dreamweaver.
אם יצרת תפריט נפתח ב-Fireworks MX 2004 או בגרסה מוקדמת יותר, ניתן לערוך אותו ב-Dreamweaver באמצעות תיבת הדו-שיח Show Pop‑Up Menu, הזמינה מהחלונית Behaviors.
עריכת תפריט נפתח שנוצר ב-Fireworks MX 2004 או בגרסה מוקדמת יותר
ב-Dreamweaver, בחר את הנקודה החמה או התמונה המפעילה את התפריט הנפתח.
בחלונית Behaviors (Shift+F3), לחץ פעמיים על Show Pop‑Up Menu ברשימה Actions.
בצע את השינויים הרצויים בתיבת הדו-שיח Pop‑Up Menu ולחץ על OK.
ציון העדפות הפעלה-ועריכה לקובצי מקור של Fireworks
כשמשתמשים ב-Fireworks לעריכת תמונות, Fireworks בדרך כלל מייצא את התמונות שבדפי האתר שלך מקובץ מקור בתבנית PNG. בעת פתיחת קובץ תמונה לעריכה ב-Dreamweaver, Fireworks פותח באופן אוטומטי את קובץ PNG המקורי ומבקש ממך לאתר אותו, אם הוא לא נמצא. לחלופין, ניתן להגדיר העדפות ב-Fireworks שייגרמו ל-Dreamweaver לפתוח את התמונה שאתה מוסיף, או להורות ל-Fireworks לאפשר לך להשתמש בקובץ התמונה שאתה מוסיף או בקובץ המקור של Fireworks בכל פעם שאתה פותח תמונה ב-Dreamweaver.
פתק
Dreamweaver מזהה את העדפות ההפעלה והעריכה של Fireworks רק במקרים מסוימים. בפרט, עליך לפתוח ולמטב תמונה שאינה חלק מטבלת Fireworks ושמכילה נתיב נכון של Design Notes אל קובץ מקור בתבנית PNG.
ב-Fireworks, בחר Edit > Preferences (Windows) או Fireworks > Preferences (Macintosh) ולאחר מכן לחץ על הכרטיסייה Launch And Edit (Windows) או בחר בפריט Launch And Edit מתוך התפריט הנפתח (Macintosh).
ציין את אפשרויות ההעדפות שישמשו בעריכה או במיטוב של תמונות Fireworks שמוקמו ביישום חיצוני:
Always Use Source PNG
פותחת באופן אוטומטי את קובץ PNG של Fireworks, המוגדר ב-Design Note כמקור התמונה שתמקם. עדכונים יבוצעו בקובץ PNG המקורי ובתמונה התואמת שתמקם.
Never Use Source PNG
פותחת באופן אוטומטי את תמונת Fireworks שתמקם, בין אם קיים קובץ מקור בתבנית PNG ובין אם לאו. עדכונים יבוצעו רק בתמונה שתמקם.
Ask When Launching
מציגה הודעה השואלת האם לפתוח את קובץ המקור בתבנית PNG. מתוך הודעה זו ניתן לציין גם העדפות הפעלה-ועריכה כוללות.
הוספת קוד HTML של Fireworks למסמך Dreamweaver
ניתן להשתמש בפקודה Export מתוך Fireworks כדי לייצא קובצי תמונות ו-HTML ממוטבים ולשמור אותם במיקום מסוים בתיקייה של אתר Dreamweaver. לאחר מכן ניתן להוסיף את הקובץ ב-Dreamweaver. Dreamweaver מאפשר להוסיף למסמך קוד HTML שנוצר ב-Fireworks, כולל תמונות, פרוסות וקוד JavaScript המשויכים לו.
במסמך Dreamweaver, הצב את נקודת ההכנסה במקום שבו תרצה להוסיף קוד HTML של Fireworks.
יש לבצע אחת מהפעולות הבאות:
בחר Insert > Image Objects > Fireworks HTML.
בקטגוריה Common של החלונית Insert, לחץ על הלחצן Images ובחר Insert Fireworks HTML מהתפריט הנפתח.
לחץ על Browse כדי לבחור בקובץ HTML של Fireworks.
אם אין בכוונתך להשתמש בקובץ בעתיד, בחר באפשרות Delete File After Insertion. לבחירה באפשרות זו אין כל השפעה על קובץ PNG המקורי המשויך לקובץ HTML זה.
פתק
אם קובץ HTML זה נמצא בכונן רשת, הוא נמחק לצמיתות ולא מועבר ל-Recycle Bin או ל-Trash.
לחץ על OK כדי להוסיף למסמך Dreamweaver את קוד HTML, כולל התמונות, הפרוסות וקוד JavaScript המשויכים לו.
הדבקת קוד HTML של Fireworks אל Dreamweaver
דרך מהירה למקם ב-Dreamweaver תמונות וטבלאות שנוצרו ב-Fireworks היא להעתיק ולהדביק קוד HTML של Fireworks ישירות במסמך Dreamweaver.
העתקת קוד HTML של Fireworks והדבקתו ב-Dreamweaver
ב-Fireworks, בחר Edit > Copy HTML Code.
בצע את הוראות האשף המדריך אותך בהגדרות לייצוא HTML ותמונות. כשתתבקש לעשות זאת, ציין את התיקייה של אתר Dreamweaver כיעד לתמונות המיוצאות.
האשף מייצא את התמונות ליעד שציינת ומעתיק את קוד HTML אל הלוח.
במסמך Dreamweaver, הצב את נקודת ההכנסה במקום שבו תרצה להדביק את קוד HTML שהעתקת, ובחר Edit > Paste Fireworks HTML.
כל קוד HTML ו-JavaScript המשויך לקובצי Fireworks שייצאת מועתק למסמך Dreamweaver וכל הקישורים לתמונות מתעדכנים.
ייצוא קוד HTML של Fireworks והדבקתו ב-Dreamweaver
ב-Fireworks, בחר File > Export.
ציין את התיקייה של אתר Dreamweaver כיעד לתמונות המיוצאות.
בתפריט הנפתח Export, בחר HTML And Images.
בתפריט הנפתח HTML, בחר Copy To Clipboard ולאחר מכן לחץ על Export.
במסמך Dreamweaver, הצב את נקודת ההכנסה במיקום שבו תרצה להדביק את קוד HTML שייצאת ובחר Edit > Paste Fireworks HTML.
כל קוד HTML ו-JavaScript המשויך לקובצי Fireworks שייצאת מועתק למסמך Dreamweaver וכל הקישורים לתמונות מתעדכנים.
עדכון קוד HTML של Fireworks הממוקם ב-Dreamweaver
ב-Fireworks, הפקודה File > Update HTML מספקת חלופה לשיטת ההפעלה והעריכה לעדכון קובצי Fireworks שמוקמו ב-Dreamweaver. פקודה זו מאפשרת לערוך ב-Fireworks תמונת מקור בתבנית PNG ולאחר מכן לעדכן באופן אוטומטי כל קוד HTML וקובצי תמונה שיוצאו ומוקמו במסמך Dreamweaver. הפקודה מאפשרת לעדכן קובצי Dreamweaver גם כאשר Dreamweaver לא פועל.
ב-Fireworks, פתח את קובץ PNG המקורי ובצע את שינויי העריכה.
בחר File > Save.
ב-Fireworks, בחר File > Update HTML.
נווט לקובץ Dreamweaver המכיל את קוד HTML שברצונך לעדכן ולחץ על Open.
נווט לתיקיית היעד שבה ברצונך למקם את קובצי התמונה המעודכנים ולחץ על Select (Windows) או על Choose (Macintosh).
Fireworks מעדכן את קוד HTML ו-JavaScript במסמך Dreamweaver. בנוסף, Fireworks מייצא את תמונות מעודכנות המשויכות לקוד HTML וממקם את התמונות בתיקיית היעד שצוינה.
אם Fireworks לא מוצא קוד HTML תואם לצורך העדכון, הוא מאפשר לך להוסיף קוד HTML חדש למסמך Dreamweaver. Fireworks ממקם את מקטע JavaScript של הקוד החדש בתחילת המסמך ואת טבלת HTML או קישור לתמונה בסופו.
יצירת אלבום תמונות באינטרנט
התכונה Create Web Photo Album הושמטה מ-Dreamweaver CS5.
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
