אודות תמונות

לקבצים גרפיים יש סוגי תבניות רבים ושונים, אולם בעמודי אינטרנט בדרך כלל משמשות שלוש תבניות של קבצים גרפיים — GIF, ‏JPEG ו- PNG. התמיכה בתבניות הקובץ GIF ו- JPEG היא הטובה ביותר וניתן להציגן ברוב הדפדפנים.

GIF ‏(Graphic Interchange Format)

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

JPEG ‏(Joint Photographic Experts Group)

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

PNG ‏(Portable Network Group)

תבנית הקובץ PNG היא תחליף שאינו רשום כפטנט לקובצי GIF, הכולל תמיכה בצבעי אינדקס, בגווני אפור ובתמונות true-color, וכן תמיכה בערוץ אלפא לצורך שקיפות. PNG היא תבנית הקובץ הרגילה של Adobe® Fireworks®‎. קובצי PNG שומרים על השכבה, הווקטור, הצבע והמידע על אפקטים (כגון הצללות) המקוריים שלהם, וניתן לערוך את כל הרכיבים שלהם בכל עת. על מנת ש- Dreamweaver יזהה קבצים כקובי PNG, חייבת להיות להם סיומת ‎.png

הוספת תמונה

בהוספת תמונה למסמך Dreamweaver, נוצרת הפניה לקובץ התמונה בקוד המקור של HTML. כדי להבטיח שההפניה תהיה נכונה, קובץ התמונה צריך להימצא באתר הנוכחי. אם הוא לא נמצא באתר הנוכחי, Dreamweaver ישאל אותך אם להעתיק את הקובץ לאתר.

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

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

לעיון בערכת לימוד בנושא הוספת תמונות, ראה הוספת תמונות.

  1. הצב את נקודת ההכנסה במקום הרצוי להופעת התמונה בחלון Document, ובצע אחת מהפעולות והבאות:

    • בקטגוריה Common בחלונית Insert, לחץ על הסמל Images .
    • בקטגוריה Common של החלונית Insert, לחץ על הלחצן Images ובחר בסמל Image. כאשר הסמל Image מופיע בחלונית Insert, ניתן לגרור את הסמל לחלון Document (או לחלון של תצוגת Code, אם אתם עובדים בקוד).
    • בחר Insert >‏ Image.
    • גרור תמונה מהחלונית Assets ‏(Window ‏> Assets) למיקום הרצוי בחלון המסמך; לאחר מכן דלג לשלב 3.
    • גרור תמונה מהחלונית Files למיקום הרצוי בחלון Document; לאחר מכן דלג לשלב 3.
    • גרור תמונה משולחן העבודה למיקום הרצוי בחלון Document; לאחר מכן דלג לשלב 3.
  2. בתיבת הדו-שיח שתופיע, בצע אחת מהפעולות הבאות:
    • בחר File System כדי לבחור בקובץ תמונה.
    • בחר Data Source כדי לבחור במקור תמונה דינמי.
    • לחץ על הלחצן Sites And Servers כדי לבחור בקובץ תמונה הנמצא בתיקייה מרוחקת של אחד מאתרי Dreamweaver.
  3. נווט אל התמונה או אל מקור התוכן שברצונך להוסיף ובחר בהם.

    בעבודה במסמך שלא נשמר, Dreamweaver יוצר הפניית file://‎ לקובץ התמונה. כשתשמור את המסמך במיקום כלשהו באתר, Dreamweaver ימיר את ההפניה לנתיב יחסי למסמך.

    הערה:

    בעת הוספת תמונות, ניתן גם להשתמש בנתיב מוחלט לתמונה הנמצאת בשרת מרוחק (כלומר, שאינה זמינה בדיסק הקשיח המקומי). עם זאת, אם תיתקל בבעיות ביצועים במהלך העבודה, נסה לבטל את הבחירה באפשרות Commands ‏> Display External Files כדי לבטל את הצגת התמונה בתצוגת Design.

  4. לחץ על OK. תיבת הדו-שיח Image Tag Accessibility Attributes מופיעה אם הפעלת את תיבת הדו-שיח ב- Preferences ‏(Edit >‏ Preferences).

  5. הזן ערכים בתיבות הטקסט Alternate Text ו- Long Description, ולחץ על OK.
    • בתיבה Alternate Text, הזן שם או תיאור קצר של התמונה. קוראי מסך יקריאו את המידע שתזין כאן. הגבל את הטקסט שתזין לכ- 50 תווים. להזנת תיאורים ארוכים יותר, שקול להוסיף בתיבת הטקסט Long Description קישור לקובץ שיספק מידע נוסף על התמונה.
    • בתיבה Long Description, הזן את מיקום הקובץ שיוצג כאשר המשתמש ילחץ על התמונה, או לחץ על סמל התיקייה כדי לנווט אל הקובץ. תיבת הטקסט מספקת קישור לקובץ המתייחס לתמונה או שמספק יותר מידע עליה.

    הערה:

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

    הערה:

    אם תלחץ על Cancel, התמונה תופיע במסמך אך Dreamweaver לא ישייך אליה תגי נגישות או תכונות נגישות.

  6. במפקח המאפיינים (Window ‏> Properties), הגדר מאפיינים לתמונה.

הגדרת מאפייני תמונה

מפקח מאפייני התמונה מאפשר להגדיר מאפיינים לתמונה. אם אינך רואה את כל מאפייני התמונה, לחץ על חץ ההרחבה בפינה הימנית התחתונה.

מאפייני תמונה במפקח המאפיינים.
  1. בחר Window ‏> Properties כדי להציג את מפקח המאפיינים של התמונה שנבחרה.

  2. בתיבת הטקסט שתחת התמונה הממוזערת, הזן שם על מנת שתוכל להפנות לתמונה בעת השימוש בהתנהגות של Dreamweaver (כגון Swap Image) או בשפת סקריפט כגון JavaScript או VBScript.
  3. הגדר כל אחת מאפשרויות התמונה.

    W ו- H

    הרוחב (W) והגובה (H) של התמונה, בפיקסלים. עם הוספת תמונה לעמוד, Dreamweaver מעדכן באופן אוטומטי תיבות טקסט אלה למידות המקוריות של התמונה.

    אם תגדיר ערכי W ו- H שלא תואמים לרוחב ולגובה האמיתיים של התמונה, ייתכן שהדפדפן לא יציג את התמונה כראוי (כדי לשחזר את הערכים המקוריים, לחץ על התוויות של תיבות הטקסט W ו- H או על הלחצן Reset image size המופיע לימין תיבות הטקסט W ו- H בהזנת ערך חדש).

    הערה:

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

    Src

    מציין את קובץ המקור של התמונה. לחץ על סמל התיקייה כדי לנווט אל קובץ המקור או הקלד את הנתיב.

    Link

    מציין היפר-קישור לתמונה. גרור את הסמל Point-To-File לקובץ בחלונית Files, לחץ על סמל התיקייה כדי לנווט למסמך באתר שלך או הקלד כתובת URL באופן ידני.

    Alt

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

    הכלים Map Name ו- Hotspot

    מאפשרים להוסיף תווית וליצור מפת תמונה בצד הלקוח.

    Target

    מציין את המסגרת או החלון שבהם ייטען העמוד המקושר (אפשרות זו לא זמינה כאשר התמונה לא מקושרת לקובץ אחר). שמות כל המסגרות בערכת המסגרות הנוכחית מופיעים ברשימה Target. ניתן גם לבחור מבין שמות היעד השמורים הבאים:

    • _blank טוען את הקובץ המקושר בחלון חדש ללא שם של הדפדפן.

    • ‎_parent טוען את הקובץ המקושר בערכת האב של המסגרות או בחלון של המסגרת הכוללת את הקישור. אם המסגרת שכוללת את הקישור אינה מקוננת, הקובץ המקושר ייטען בחלון המלא של הדפדפן.

    • ‎_self טוען את הקובץ המקושר באותה מסגרת או באותו חלון כמו הקישור. יעד זה הוא אפשרות ברירת המחדל, כך שבדרך כלל אין צורך לציינו.

    • ‎_top טוען את הקובץ המקושר בחלון מלא של הדפדפן ומסיר את כל המסגרות.

    Edit

    מפעיל את עורך התמונה שציינת בהעדפות External Editors ופותח את התמונה שנבחרה.

    Update from original

    כשתמונת האינטרנט (כלומר התמונה בעמוד של Dreamweaver) אינה מסונכרנת עם קובץ Photoshop המקורי, Dreamweaver מאתר שקובץ המקור עודכן, ומציג אחד מהחצים של סמל העצם החכם באדום. אם תבחר בתמונת האינטרנט בתצוגת Design ותלחץ על הלחצן Update from Original ב- Property Inspector, התמונה תתעדכן אוטומטית ותשקף את השינויים שהוכנסו בקובץ Photoshop המקורי.

    עריכת הגדרות תמונה

     פותח את תיבת הדו-שיח Image Optimization ומאפשר לך למטב את התמונה.

    Crop

     קוטם את גודל התמונה ומסיר אזורים לא רצויים מהתמונה שנבחרה.

    Resample

     דוגם מחדש תמונה שגודלה השתנה ובכך משפר את איכות התמונה בהתאם לגודלה ולצורתה החדשים.

    Brightness ו- Contrast

     מתאים את הגדרות הבהירות והניגודיות של התמונה.

    Sharpen

     מתאים את חדות התמונה.

עריכת תכונות נגישות לתמונות בקוד

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

  1. בחלון Document, בחר בתמונה.
  2. בצע אחת מהפעולות הבאות:
    • ערוך את תכונות התמונה הרצויות בתצוגת Code.
    • לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה ‏(Macintosh) ובחר Edit Tag.
    • ערוך את הערך Alt במפקח המאפיינים.

שינוי גודל חזותי של תמונה

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

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

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

שינוי גודל חזותי של רכיב

  1. בחר ברכיב (לדוגמה, תמונה או קובץ SWF) בחלון המסמך.

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

  2. שנה את גודל הרכיב באחת מהפעולות הבאות:
    • כדי להתאים את רוחב הרכיב, גרור את נקודת האחיזה שמימין.
    • כדי להתאים את גובה הרכיב, גרור את נקודת האחיזה התחתונה.
    • כדי להתאים את הרוחב והגובה של הרכיב בו זמנית, גרור את נקודת האחיזה הפינתית.
    • כדי לשמור על הפרופורציות של הרכיב (היחס בין רוחבו לגובהו) במהלך התאמת המידות, גרור את נקודת האחיזה הפינתית תוך כדי הקשת Shift.
    • כדי להתאים את הרוחב והגובה של רכיב לגודל מסוים (לדוגמה, 1 x ‏1 פיקסל), השתמש במפקח המאפיינים להזנת ערך מספרי. המידה הקטנה ביותר שאליה ניתן לשנות את הגודל של רכיבים באופן חזותי היא 8 x ‏8 פיקסלים.
  3. כדי להשיב רכיב ששינית את גודלו למידותיו המקוריות, מחק את הערכים בתיבות הטקסט W ו- H שבמפקח המאפיינים, או לחץ על הלחצן Reset Size במפקח מאפייני התמונה.

השבת תמונה לגודלה המקורי

  1. לחץ על הלחצן Reset Size במפקח מאפייני התמונה.

דגימה מחדש של תמונה שגודלה השתנה

  1. שנה את גודל התמונה כמתואר לעיל.
  2. לחץ על הלחצן Resample במפקח מאפייני התמונה.

    הערה:

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

הוספה של מציין מיקום תמונה

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

  1. בחלון המסמך, הצב את נקודת ההכנסה במקום שברצונך להוסיף בו מציין מיקום לגרפיקה.
  2. בחר Insert >‏ Image Objects >‏ Image Placeholder.

  3. בתיבת הטקסט Name (Optional)‎, הזן טקסט שברצונך להציג כתווית למציין מיקום התמונה. אם אינך רוצה להציג תווית, השאר את תיבת הטקסט ריקה. השם חייב להתחיל באות והוא יכול להכיל אותיות ומספרים בלבד; אין להשתמש ברווחים ובתווי ASCII גבוהים.
  4. בתיבות Width (Required)‎ ו- Height (Required)‎, הקלד מספר להגדרת גודל התמונה בפיקסלים.
  5. בתיבה Color (Optional)‎, בצע אחת מהפעולות הבאות כדי להחיל צבע:
    • השתמש בדוגם הצבע כדי לבחור בצבע.
    • הזן את הערך ההקסדצימלי של הצבע (לדוגמה, ‎#FF0000).
    • הזן שם של צבע מתאים לאינטרנט (לדוגמה, red).
  6. בתיבה Alternate Text (Optional)‎, הזן טקסט שיתאר את התמונה למשתמשים בדפדפן של טקסט בלבד.

    הערה:

    תג image מתווסף באופן אוטומטי לקוד HTML, כשהוא מכיל תכונת src ריקה.

  7. לחץ על OK.

    הצבע, תכונות הגודל והתווית של מציין המיקום נראים כך:

    מציין מיקום תמונה עם תכונות.

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

החלפה של מציין מיקום תמונה

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

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

  1. בצע אחת מהפעולות הבאות בחלון Document:
    • לחץ פעמיים על מציין מיקום התמונה.
    • לחץ על מציין מיקום התמונה כדי לבחור אותו; לאחר מכן, במפקח המאפיינים (Window ‏> Properties), לחץ על סמל התיקייה ליד תיבת הטקסט Src.
  2. בתיבת הדו-שיח Image Source, נווט אל התמונה שברצונך שתחליף את מציין מיקום התמונה ולחץ על OK.

הגדרת מאפיינים של מציין מיקום תמונה

להגדרת מאפיינים של מציין מיקום תמונה, בחר את מציין המיקום בחלון Document ולאחר מכן בחר Window ‏> Properties כדי להציג את מפקח המאפיינים. כדי להציג את כל המאפיינים, לחץ על חץ ההרחבה בפינה הימנית התחתונה.

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

רכיב Property Inspector של מציין מיקום תמונה.

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

  1. הגדר כל אחת מהאפשרויות הבאות:

    W ו- H

    מגדירות את הרוחב (W) והגובה (H) של מציין מיקום התמונה, בפיקסלים.

    Src

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

    Link

    מציינת היפר-קישור למציין מיקום התמונה. גרור את הסמל Point-to-File לקובץ בחלונית Files, לחץ על סמל התיקייה כדי לנווט למסמך באתר שלך או הקלד כתובת URL באופן ידני.

    Alt

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

    Create

    מפעילה את Fireworks ליצירת תמונה חלופית. הלחצן Create פעיל רק אם Fireworks מותקן גם כן במחשב שלך.

    Update from original

    כשתמונת האינטרנט (כלומר התמונה בעמוד של Dreamweaver) אינה מסונכרנת עם קובץ Photoshop המקורי, Dreamweaver מאתר שקובץ המקור עודכן, ומציג אחד מהחצים של סמל העצם החכם באדום. אם תבחר בתמונת האינטרנט בתצוגת Design ותלחץ על הלחצן Update from Original ב- Property Inspector, התמונה תתעדכן אוטומטית ותשקף את השינויים שהוכנסו בקובץ Photoshop המקורי.

    Color

    מציינת צבע למציין מיקום התמונה.

עריכת תמונות ב- Dreamweaver

ניתן לדגום מחדש, לחתוך, למטב ולחדד תמונות ב- Dreamweaver. ניתן גם להתאים את הבהירות והניגודיות שלהן.

תכונות לעריכת תמונות

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

הערה:

על מנת שתוכל להשתמש בתכונות לעריכת תמונה של Dreamweaver, אין צורך להתקין את Fireworks או יישומים אחרים לעריכת תמונות במחשב שלך.

  1. בחר Modify ‏> Image. הגדר כל אחת מהתכונות הבאות של Dreamweaver לעריכת תמונות:

    Resample

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

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

    Crop

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

    Brightness ו- Contrast

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

    Sharpen

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

    הערה:

    תכונות עריכת התמונות של Dreamweaver חלות רק על תבניות קובץ תמונה מסוג JPEG, ‏GIF ו- PNG. לא ניתן לערוך בתכונות אלה תבניות קובץ אחרות של תמונות bitmap.

חיתוך תמונה

Dreamweaver מאפשר לחתוך (או לקטום) תמונות Bitmap.

הערה:

בחיתוך תמונה, קובץ התמונה המקורי משתנה בדיסק. לכן מומלץ לשמור עותק גיבוי של קובץ התמונה, למקרה שיהיה עליך לחזור לתמונה המקורית.

  1. פתח את העמוד המכיל את התמונה שברצונך לחתוך, בחר בתמונה ובצע אחת מהפעולות הבאות:
    • לחץ על הסמל Crop Tool במפקח המאפיינים של התמונה.
    • בחר Modify >‏ Image >‏ Crop.
    • נקודות חיתוך מופיעות סביב התמונה שנבחרה.
  2. התאם את נקודות החיתוך, עד שתיבה תוחמת תקיף את האזור בתמונה שתרצה לשמור.
  3. לחץ פעמיים בתוך התיבה התוחמת או הקש Enter כדי לחתוך את הבחירה.
  4. תיבת דו-שיח תודיע לך שקובץ התמונה שאתה עומד לחתוך ישתנה בדיסק. לחץ על OK. כל הפיקסלים שנמצאים מחוץ לתיבה התוחמת בתמונה שנבחרה יוסרו, אולם שאר האובייקטים בתמונה יישמרו.
  5. הצג את התמונה בתצוגה מקדימה וודא שהיא עונה על הציפיות שלך. אם אינך מרוצה מהתמונה, בחר Edit ‏> Undo Crop כדי לחזור לתמונה המקורית.

    הערה:

    באפשרותך לבטל את השפעת הפקודה Crop (ולחזור לקובץ התמונה המקורי) עד שתסגור את Dreamweaver, או עד שתערוך את הקובץ ביישום חיצוני לעריכת תמונות.

מיטוב תמונה

באפשרותך למטב תמונות בעמודי האינטרנט שלך מתוך Dreamweaver.

  1. פתח את העמוד המכיל את התמונה שברצונך למטב, בחר את התמונה ובצע אחת מהפעולות הבאות:
    • לחץ על הלחצן Edit Image Settings במפקח המאפיינים של התמונה.
    • בחר Modify >‏ Image >‏ Optimize.
  2. בצע את שינויי העריכה בתיבת הדו-שיח Image Optimization ולחץ על OK.

חידוד תמונה

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

  1. פתח את העמוד המכיל את התמונה שברצונך לחדד, בחר בתמונה ובצע אחת מהפעולות הבאות:
    • לחץ על הלחצן Sharpen במפקח המאפיינים של התמונה.
    • בחר Modify >‏ Image >‏ Sharpen.
  2. ניתן לציין את דרגת החידוד ש- Dreamweaver מחיל על התמונה על-ידי גרירת המחוון או הזנת ערך בין 0 ל- 10 בתיבת הטקסט. בשעת ההתאמה של חדות התמונה בתיבת הדו-שיח Sharpness, ניתן להציג תצוגה מקדימה של השינויים בתמונה.
  3. לכשתהיה מרוצה מהתמונה, לחץ על OK.
  4. שמור את השינויים על-ידי בחירת File >‏ Save, או חזור לתמונה המקורית על-ידי בחירת Edit >‏ Undo Sharpen.

    הערה:

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

התאמת הבהירות והניגודיות של תמונה

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

  1. פתח את העמוד המכיל את התמונה שברצונך להתאים, בחר בתמונה ובצע אחת מהפעולות הבאות:
    • לחץ על הלחצן Brightness/Contrast  במפקח המאפיינים של התמונה.
    • בחר Modify >‏ Image >‏ Brightness/Contrast.
  2. גרור את המחוונים Brightness ו- Contrast כדי להתאים את ההגדרות. הערכים האפשריים נעים בטווח שבין 100 ל- 100.
  3. לחץ על OK.

יצירת תמונה אינטראקטיבית

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

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

תמונות אינטראקטיביות מוגדרות להגיב באופן אוטומטי לאירוע onMouseOver. ניתן להגדיר תמונה כך שתגיב לאירוע אחר (לדוגמה, לחיצת עכבר) או שתשנה תמונה אינטראקטיבית.

  1. בחלון Document, הצב את נקודת ההכנסה במקום שבו ברצונך להציג רכיב אינטראקטיבי.
  2. הוסף את הרכיב האינטראקטיבי באחת מהשיטות הבאות:
    • בקטגוריה Common של החלונית Insert, לחץ על הלחצן Images ובחר בסמל Rollover Image. כשהסמל Rollover Image מוצג בחלונית Insert, ניתן לגרור את הסמל לחלון Document.
    • בחר Insert >‏ Image Objects >‏ Rollover Image.
  3. הגדר את האפשרויות ולחץ על OK.

    Image Name

    שם התמונה האינטראקטיבית.

    Original image

    התמונה שברצונך להציג כשהעמוד נטען. הזן את הנתיב בתיבת הטקסט או לחץ על Browse ובחר בתמונה.

    Rollover Image

    התמונה שברצונך להציג כאשר המצביע עובר מעל התמונה המקורית. הזן את הנתיב או לחץ על Browse כדי לבחור בתמונה.

    Preload Rollover Image

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

    Alternate Text

    (אופציונלי) טקסט שיתאר את התמונה למשתמשים בדפדפן של טקסט בלבד.

    When clicked, Go to URL

    הקובץ שברצונך לפתוח כאשר המשתמש לוחץ על התמונה האינטראקטיבית. הזן את הנתיב או לחץ על Browse ובחר בקובץ.

    הערה:

    אם לא תגדיר קישור לתמונה, Dreamweaver יוסיף קישור ריק (#) בקוד המקור של HTML שאליו מצורפת התנהגות הרכיב האינטראקטיבי. אם תסיר את הקישור הריק, התמונה האינטראקטיבית תחדל מלפעול.

  4. בחר File >‏ Preview in Browser או הקש F12.

  5. בדפדפן, העבר את המצביע מעל לתמונה המקורית על מנת לראות את התמונה האינטראקטיבית.

    הערה:

    לא ניתן לראות את ההשפעה של תמונה אינטראקטיבית בתצוגת Design.

שימוש בעורך תמונות חיצוני

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

באפשרותך להגדיר את Fireworks כעורך החיצוני העיקרי שלך. ניתן גם להגדיר אילו סוגי קובץ ייפתח כל עורך; כמו כן ניתן לבחור במספר עורכי תמונות. לדוגמה, ניתן להגדיר העדפות להפעלת Fireworks לעריכה של קובץ GIF ולהפעלת עורך תמונות אחר לעריכה של קובץ JPG או JPEG.

הפעלת עורך התמונות החיצוני

  1. בצע אחת מהפעולות הבאות:
    • לחץ פעמיים על התמונה שברצונך לערוך.
    • לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על התמונה שברצונך לערוך ולאחר מכן בחר Edit With ‏> Browse ובחר בעורך.
    • בחר בתמונה שברצונך לערוך ולחץ על Edit במפקח המאפיינים.
    • לחץ פעמיים על קובץ התמונה בחלונית Files כדי להפעיל את עורך התמונות העיקרי. אם לא ציינת עורך תמונות, Dreamweaver יפעיל את עורך ברירת המחדל של סוג קובץ זה.

    הערה:

    בפתיחת תמונה מהחלונית Files, תכונות השילוב עם Fireworks לא פועלות; Fireworks לא פותח את קובץ PNG המקורי. על מנת להשתמש בתכונות השילוב עם Fireworks, פתח תמונות מחלון Document.

    אם לא תראה תמונה מעודכנת לאחר החזרה לחלון Dreamweaver, בחר את התמונה ולחץ על הלחצן Refresh במפקח המאפיינים.

הגדרת עורך תמונה חיצוני לסוג קובץ קיים

ניתן לבחור בעורך תמונה לפתיחה ולעריכה של קבצים גרפיים.

  1. פתח את תיבת הדו-שיח File Types/Editors Preferences באחת מהדרכים הבאות:
    • בחר Edit >‏ Preferences ‏(Windows) או Dreamweaver >‏ Preferences ‏(Macintosh) ובחר File Types/Editors ברשימה Category משמאל.
    • בחר Edit >‏ Edit with External Editor ובחר File Types/Editors.
  2. ברשימה Extensions, בחר בסיומת הקובץ שברצונך להגדיר לה עורך חיצוני.
  3. לחץ על הלחצן Add (+)‎ שמעל לרשימה Editors.
  4. בתיבת הדו-שיח Select External Editor, נווט ליישום שברצונך להפעיל כעורך לסוג קובץ זה.

  5. בתיבת הדו-שיח Preferences, לחץ על Make Primary אם ברצונך שעורך זה ישמש כעורך העיקרי לקבצים מסוג זה.

  6. אם ברצונך להגדיר עורך נוסף לסוג קובץ זה, חזור על שלבים 3 ו- 4.

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

הוספת סוג קובץ חדש לרשימה Extensions.

  1. פתח את תיבת הדו-שיח File Types/Editors Preferences באחת מהדרכים הבאות:

    • בחר Edit >‏ Preferences ‏(Windows) או Dreamweaver >‏ Preferences ‏(Macintosh) ובחר File Types/Editors ברשימה Category משמאל.
    • בחר Edit >‏ Edit with External Editor ובחר File Types/Editors.
  2. בתיבת הדו-שיח File Types/Editors Preferences, לחץ על הלחצן Add (+)‎ שמעל לרשימה Extensions.

    תיבת טקסט מופיעה ברשימה Extensions.

  3. הקלד את הסיומת של סוג הקובץ שברצונך להפעיל בשבילו עורך.
  4. כדי לבחור בעורך חיצוני לסוג קובץ זה, לחץ על הלחצן Add (+)‎ שמעל לרשימה Editors.
  5. בתיבת הדו-שיח שמופיעה, בחר ביישום שבו תרצה להשתמש לעריכת תמונות מסוג זה.
  6. אם ברצונך שעורך זה ישמש כעורך העיקרי לקבצים מסוג זה, לחץ על Make Primary.

שינוי העדפות של עורך קיים

  1. פתח את תיבת הדו-שיח File Types/Editors Preferences באחת מהדרכים הבאות:

    • בחר Edit >‏ Preferences ‏(Windows) או Dreamweaver >‏ Preferences ‏(Macintosh) ובחר File Types/Editors ברשימה Category משמאל.
    • בחר Edit >‏ Edit with External Editor ובחר File Types/Editors.
  2. בתיבת הדו-שיח File Types/Editors Preferences, ברשימה Extensions, בחר את סוג הקובץ שאתה משנה כדי להציג את העורכים הקיימים.

  3. ברשימה Editors, בחר בעורך הרצוי ובצע אחת מהפעולות הבאות:
    • לחץ על הלחצנים Add (+)‎ או Delete (–)‎ שמעל לרשימה Editors, כדי להוסיף או להסיר עורך.
    • לחץ על הלחצן Make Primary כדי להחליף את עורך ברירת המחדל.

החלת התנהגויות על תמונות

ניתן להחיל התנהגות זמינה כלשהי על תמונה או על נקודה חמה של תמונה. בעת החלת התנהגות על נקודה חמה, Dreamweaver מוסיף את קוד המקור של HTML לתג area. יש שלוש התנהגויות שחלות במיוחד על תמונות: Preload Images, ‏Swap Image ו- Swap Image Restore.

Preload Images

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

Swap Image

מחליפה תמונה אחת באחרת תוך שינוי התכונה SRC של התג img. השתמש בפעולה זו ליצירת לחצנים אינטראקטיביים ואפקטי תמונה אחרים (כולל החלפה של יותר מתמונה אחת בכל פעם).

Swap Image Restore

משחזרת את הערכה האחרונה של תמונות שהוחלפו לקובצי המקור הקודמים שלהן. כברירת מחדל, פעולה זו נוספת באופן אוטומטי בכל פעם שתצרף את הפעולה Swap Image לאובייקט; אין צורך לבחור בה באופן ידני.

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

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

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