הוספה ועריכה של תמונות ב-Dreamweaver

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

• בחלונית Insert, בחר HTML מהרשימה הנפתחת. לחץ על Image. לחץ פעמיים או גרור את הסמל לחלון Document (או לחלון של תצוגת Code אם אתה עובד באמצעות Code).

• בחר Insert >‏ Image.

• גרור תמונה מהחלונית Assets ‏(Window ‏> Assets) למיקום הרצוי בחלון המסמך; לאחר מכן דלג לשלב 3.

• גרור תמונה מהחלונית Files אל המיקום הרצוי בחלון Document; לאחר מכן דלג לשלב 3.

• יש לגרור תמונה משולחן העבודה למיקום הרצוי בחלון Document; אז יש לדלג לשלב 3.

• ב-Live View, גרור תמונה מהחלונית Extract או מהכרטיסיה Layers. שחרר את הרכיב בחלק העליון, התחתון, הימני או השמאלי של רכיב, בהתבסס על מחווני Live Guides. לחלופין, באפשרותך לשחרר את הרכיב במיקום מדויק במבנה המסמך על-ידי לחיצה על </> ושימוש ב-Element Quick View.

נווט אל התמונה או אל מקור התוכן שברצונך להוסיף ובחר בהם.

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

לחץ על OK. 

כדי להציג את Property Inspector עבור תמונה שנבחרה, לחץ על התמונה ובחר Window ‏> Properties.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בחלון המסמך, לחץ על התמונה או בחר את תג התמונה בקוד.

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

• יש לערוך את תכונות התמונה הרצויות בתצוגת Code.

• ערוך תכונות של תמונות ב-Live View באמצעות Quick Property Inspector.

• ערוך את הערך Alt ב-Property inspector.

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

• להתאמה של רוחב הרכיב יש לגרור את נקודת האחיזה שמימין.

• להתאמה של גובה הרכיב יש לגרור את נקודת האחיזה התחתונה.

• להתאמה של הרוחב והגובה של הרכיב בו זמנית, יש לגרור את נקודת האחיזה הפינתית.

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

• כדי להתאים את הרוחב והגובה של רכיב לגודל מסוים (לדוגמה, 1 x ‏1 פיקסל), השתמש ב-Property inspector. הזן ערך מספרי בשדות W ו-H. באפשרותך לשנות באופן חזותי גודל של רכיבים ל-8 x ‏8 פיקסלים לפחות.

כדי להחזיר רכיב ששינית את גודלו לממדים המקוריים שלו, ב-Property Inspector, מחק את הערכים בשדות W ו-H. באפשרותך גם ללחוץ על הלחצן Reset Size ב-Property Inspector של התמונה.

שנה את גודל התמונה כמתואר בסעיף שינוי גודל של תמונה.

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

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

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

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

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

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

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

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

פתח את הדף המכיל את התמונה שברצונך לחתוך, בחר בתמונה ובצע אחת מהפעולות הבאות:

• יש ללחוץ על הסמל Crop Tool  במפקח מאפייני התמונה.

• בחר Edit > Image > Crop.

• נקודות חיתוך מופיעות סביב התמונה שנבחרה.

תיבת דו-שיח מודיעה לך שקובץ התמונה שייחתך ישתנה בדיסק. לחץ על OK.

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

הצג את התמונה בתצוגה מקדימה וודא שהיא עונה על הציפיות שלך. אם אינך מרוצה מהתמונה, בחר Edit ‏> Undo Crop כדי לחזור לתמונה המקורית.

פתח את הדף המכיל את התמונה שברצונך למטב. בחר בתמונה ובצע אחת מהפעולות הבאות:

• לחץ על הלחצן Edit Image Settings ב-Property Inspector של התמונה.

• בחר Edit > Image > Optimize.

בצע את שינויי העריכה בתיבת הדו-שיח Image Optimization ולחץ על OK.

• לחץ על הלחצן Sharpen במפקח המאפיינים של התמונה.

• בחר Edit > Image > Sharpen.

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

שמור את השינויים על-ידי בחירת File >‏ Save, או חזור לתמונה המקורית על-ידי בחירת Edit >‏ Undo Sharpen.

• לחץ על הלחצן Brightness and Contrast  ב-Property Inspector של התמונה.

• בחר Edit > Image > Brightness/Contrast.

• בחלונית Insert, בחר HTML מהרשימה הנפתחת. בחר Rollover Image, מרשימת האפשרויות.

• בחר Insert > HTML > Rollover Image.

בתיבת הדו-שיח Insert Rollover Image, בחר את התמונות והגדר את המאפיינים עבור הרכיב האינטראקטיבי. ניתן להגדיר את המאפיינים הבאים:

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

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

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

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

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

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

כדי להציג בתצוגה מקדימה את התמונה האינטראקטיבית, בחר File > Real-time Preview, או הקש F12.

כדי לפתוח עורך חיצוני, בצע אחת מהפעולות הבאות:

• לחץ פעמיים על התמונה שברצונך לערוך.

• לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על התמונה שברצונך לערוך. לאחר מכן, לחץ על Edit With > Browse ובחר עורך.

• בחר בתמונה שברצונך לערוך ולחץ על Edit ב-Property Inspector.

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

אם לא תראה תמונה מעודכנת לאחר החזרה לחלון Dreamweaver, בחר את התמונה ולחץ על הלחצן Refresh ב-Property Inspector.

בחר Edit > Preferences‏ (Windows) או Dreamweaver > Preferences‏ (macOS), ובחר File Types/Editors מהרשימה Category בחלונית השמאלית.

ברשימה Extensions, בחר בסיומת שעבורה ברצונך להגדיר עורך חיצוני.

בתיבת הדו-שיח Select External Editor, עבור אל היישום שברצונך להפעיל כעורך עבור סוג קובץ זה.

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

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

בחר Edit > Preferences‏ (Windows) או Dreamweaver > Preferences‏ (macOS), ובחר File Types/Editors מהרשימה Category בחלונית השמאלית.

בתיבת הדו-שיח File Types/Editors Preferences, לחץ על הלחצן Add (+)‎ שמעל לרשימה Extensions.

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

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

כדי לבחור בעורך חיצוני עבור סוג הקובץ, לחץ על הלחצן Add (+) שמעל לרשימה Editors.

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

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

בחר Edit > Preferences‏ (Windows) או Dreamweaver > Preferences‏ (macOS), ובחר File Types/Editors מהרשימה Category בחלונית השמאלית.

בתיבת הדו-שיח File Types/Editors Preferences, ברשימה Extensions, בחר את סוג הקובץ שאתה משנה כדי להציג את העורכים הקיימים.

ברשימה Editors, בחר בעורך שעליו ברצונך להשפיע ובצע אחת מהפעולות הבאות:

• כדי להוסיף או להסיר עורך, לחץ על הלחצנים Add (+) או Delete (–) שמעל לרשימה Editors.

• כדי לשנות את העורך שמופעל כברירת מחדל עבור עריכה, לחץ על הלחצן Make Primary.