2. DREAMWEAVER MX 2004 Chapter 4 Working with Images
Copyright 2005, Paradigm Publishing Inc.

3. Performance Objectives
Understand the different types of images suitable for Web page use.
Insert images in Web page documents.
Create accessible images.
Create a D link (description link).
Use image placeholders in the page-design process.
Use the Image Property inspector and Tag Editor – Img dialog box to modify image properties.
Create image links.
Copyright 2005, Paradigm Publishing Inc.

4. Performance Objectives…/2
Create image maps.
Perform simple image editing tasks within the Dreamweaver MX 2004 environment.
Insert page background images.
Insert table and table cell background images.
Create rollovers.
Build a Web photo album.
Work with tracing images.
Use the Assets panel to store and manage images.
Copyright 2005, Paradigm Publishing Inc.

5. Understanding Images Web page images are located in separate files.
The image tag and source attribute directs the browser to an image file location.
Image file sizes should be kept relatively small.
A single Web page should be no larger than 100 kilobytes.
If the same image is repeated on a page, it does not increase loading time.
Copyright 2005, Paradigm Publishing Inc.

6. Understanding Images…/2
HTML document
with image tag
and SRC
image file
Copyright 2005, Paradigm Publishing Inc.

7. Image Formats There are many different digital image formats.
The ideal format uses a compression technique that produces small image files and is supported by all browsers.
The three image formats that meet these requirements are:
GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Copyright 2005, Paradigm Publishing Inc.

8. GIF Images GIF images are the most commonly used on the Web.
They support only 256 colors.
These images are the best format for displaying drawings or illustrations.
The GIF format has several variations.
One variation allows interlacing and transparency.
Another variation produces animated graphics.
Copyright 2005, Paradigm Publishing Inc.

9. Understanding Interlacing
Interlacing allows images to be displayed gradually.
Copyright 2005, Paradigm Publishing Inc.

10. Understanding Transparency
Transparency allows the background color of a Web page to show through an image.
normal
GIF image
transparent
GIF image
Copyright 2005, Paradigm Publishing Inc.

11. JPEG Images JPEG images support more than 16 million colors.
These images are the best format for photographs.
A JPEG file will be smaller than a comparable GIF file because of the compression technology used.
Copyright 2005, Paradigm Publishing Inc.

12. PNG Images PNG images offer interlacing and transparency.
They produce smaller file sizes than the GIF or JPEG formats.
Currently PNG images are supported only by browser versions 4.0 and above.
It is better to use GIF and JPEG image files in most circumstances.
Copyright 2005, Paradigm Publishing Inc.

13. Inserting Images     click Insert click Image OR
click the Images button
down-pointing arrow 
click Image
Copyright 2005, Paradigm Publishing Inc.

14. Inserting Images…/2 The Select Image Source dialog box opens.
Copyright 2005, Paradigm Publishing Inc.

15. Inserting Images…/3
The Select Image Source dialog box can be used to specify the following properties:
Select file name from File system or Data Sources
Look in
File name
Files of type
URL
Relative to
Copyright 2005, Paradigm Publishing Inc.

16. Inserting Images…/4
After completing the information in the dialog box and clicking the OK button, Dreamweaver MX 2004 inserts an image tag and source attribute at the insertion point.
Copyright 2005, Paradigm Publishing Inc.

17. Ensuring Image Accessibility
If Images has been selected in the Accessibility Category list box, an Image Tag Accessibility Attributes dialog box will appear.
Copyright 2005, Paradigm Publishing Inc.

18. Ensuring Image Accessibility…/2
An alternate text description will be interpreted by screen readers and will appear as a descriptive tooltip.
tooltip
Copyright 2005, Paradigm Publishing Inc.

19. Ensuring Image Accessibility…/3
A long description is used to indicate a path to a file containing a description of the image.
long description
Copyright 2005, Paradigm Publishing Inc.

20. Ensuring Image Accessibility…/4
A D link (description link) is a hyperlink linking to a long description file.
D link
Copyright 2005, Paradigm Publishing Inc.

21. Creating a D Link 
create the file with a long description and save it 
type D
Copyright 2005, Paradigm Publishing Inc.

22. Creating a D Link…/2   select the D
use the Property inspector Point to File or Browse for File buttons to create a link
Copyright 2005, Paradigm Publishing Inc.

23. Inserting Image Placeholders
click Insert 
point to Image Objects 
click Image Placeholder OR 
click the Images button
down-pointing arrow 
click Image Placeholder
Copyright 2005, Paradigm Publishing Inc.

24. Inserting Image Placeholders…/2
enter image placeholder details
Copyright 2005, Paradigm Publishing Inc.

25. Changing Image Placeholder Dimensions
Select the image and then drag a resize handle.
Another method is to enter new values in the Image Property inspector or Tag Editor – Img dialog box.
When a placeholder is replaced by an image, the image is inserted in its actual dimensions.
Copyright 2005, Paradigm Publishing Inc.

26. Replacing an Image Placeholder with an Image
double-click the image placeholder
Copyright 2005, Paradigm Publishing Inc.

27. Replacing an Image Placeholder with an Image…/2
browse and locate the image that will replace the placeholder
Copyright 2005, Paradigm Publishing Inc.

28. Defining Image Properties
Image properties can be modified using the Image Property inspector or the Tag Editor – Img dialog box.
The Image Property inspector contains abbreviated descriptions while the Tag Editor – Img dialog box contains full descriptions.
A few image properties are unique to one or the other.
Start by selecting an image.
Copyright 2005, Paradigm Publishing Inc.

29. Using the Image Property Inspector
When an image is selected, the fully expanded Image Property inspector displays image properties.
Copyright 2005, Paradigm Publishing Inc.

30. Using the Tag Editor – Img Dialog Box
click Modify 
click Edit Tag 
click
General
Copyright 2005, Paradigm Publishing Inc.

31. Image Property inspector Tag Editor – Img dialog box
Width and Height
The width and height of an image in pixels are automatically displayed.
A browser will display an image without this information, but it might take longer.
Image Property inspector
Tag Editor – Img dialog box
Copyright 2005, Paradigm Publishing Inc.

32. Width and Height…/2
Changing the specifications in an image tag, or resizing using the resize handles, does not affect the file’s size in bytes and can lead to image distortion.
distorted
image
Copyright 2005, Paradigm Publishing Inc.

33. Image Path
The Source (Src) text box contains the path to the selected image.
Type a new path or use the Point to File and Browse for File buttons (Image Property inspector) or Browse button (Tag Editor – Img dialog box).
Image Property
inspector
Tag Editor – Img
dialog box
Copyright 2005, Paradigm Publishing Inc.

34. Image Property inspector Tag Editor – Img dialog box
Alternate Text
Alternate text should be less than 50 characters, and consist of a concise description.
Longer descriptions can be contained in D links.
Image Property inspector
Tag Editor – Img dialog box
Copyright 2005, Paradigm Publishing Inc.

35. Image Property inspector
CSS Class Style
Displays the CSS class style if a style is applied to the selected image.
The Class list box is only available in the Image Property inspector.
Image Property inspector
Copyright 2005, Paradigm Publishing Inc.

36. Image Link An image can function as a link.
The link target path can be typed, or it can be located using the Point to File or Browse for File buttons in the Image Property inspector.
Image Property
inspector
Copyright 2005, Paradigm Publishing Inc.

37. Horizontal and Vertical Space
Use to add space between an image and any adjacent text or page elements.
Image Property inspector
Tag Editor – Img dialog box
Copyright 2005, Paradigm Publishing Inc.

38. Horizontal and Vertical Space…/2
Copyright 2005, Paradigm Publishing Inc.

39. Target Browser Window
If the image is being used as a link, the browser window that the link target opens in can be specified in the Image Property inspector.
Image Property
inspector
drop-down list
options
Copyright 2005, Paradigm Publishing Inc.

40. Image Property inspector Tag Editor – Img dialog box
Image Border
Entering a value creates a black border around an image measured in pixels.
Higher border value produce thicker borders.
Image Property inspector
Tag Editor – Img dialog box
Copyright 2005, Paradigm Publishing Inc.

41. Image Alignment
The options can be used to align an image in relation to the other elements.
Image Property
inspector
Tag Editor – Img
dialog box
Copyright 2005, Paradigm Publishing Inc.

42. Image Alignment Examples
Copyright 2005, Paradigm Publishing Inc.

43. Low Source Image
Used to indicate a path to a lower resolution copy of the main image that will load first.
Type a new path or use the Point to File and Browse for File buttons (Image Property inspector) or Browse button (Tag Editor – Img dialog box).
Image Property
inspector
Tag Editor – Img
dialog box
Copyright 2005, Paradigm Publishing Inc.

44. Low Source Image…/2
A low source image is usually a black-and-white version of the main image.
Copyright 2005, Paradigm Publishing Inc.

45. Image Maps and Hotspot Buttons
Image maps are images containing hotspots that link to other documents when clicked.
The hotspot buttons are used to create image hotspots.
Click and drag the crosshairs to create the desired shape.
Use the Pointer Hotspot Tool to move a hotspot.
The Hotspot Property inspector displays Link, Target, and Alt text boxes.
Copyright 2005, Paradigm Publishing Inc.

46. Image Maps and Hotspot Buttons…/2
Hotspot Property inspector
hotspot tools
Copyright 2005, Paradigm Publishing Inc.

47. Image Name
The Name text box is used to type a name for identifying an image in the HTML code for a page.
Image Property
inspector
Tag Editor – Img
dialog box
Copyright 2005, Paradigm Publishing Inc.

48. Brightness and Contrast
Image Editing Buttons
The Image Property inspector includes a number of image editing buttons.
Edit
Optimize in Fireworks
Crop
Resample
Brightness and Contrast
Sharpen
Copyright 2005, Paradigm Publishing Inc.

49. Edit Button
Select an image and click the Edit button to open an image editor.
If an image placeholder is selected, the Edit button appears as the Create button.
Select image editor preferences in the Preferences dialog box.
Copyright 2005, Paradigm Publishing Inc.

50. Using an External Image Editor
click Edit 
click Edit with
External Editor
Copyright 2005, Paradigm Publishing Inc.

51. Optimize in Fireworks Button
Fireworks must be installed on the computer or local network.
The Fireworks Optimize dialog box can be used to perform a number of different image editing functions.
Editing functions are aimed at optimizing images so that they contain the right mix of color, compression, and quality.
An optimized image will appear the same as it did previously, but its file size usually will be smaller.
Copyright 2005, Paradigm Publishing Inc.

52. Fireworks Optimize Dialog Box
Copyright 2005, Paradigm Publishing Inc.

53. Crop Button
Select the image, click the Crop button, and then use the crop handles to move the crop bounding image.
Double-clicking, clicking the Crop button again, or pressing Enter crops the picture by removing the portion that lies outside the crop bounding image.
Cropping will permanently change an image.
Copyright 2005, Paradigm Publishing Inc.

54. Crop Button…/2 crop handles crop bounding image
Copyright 2005, Paradigm Publishing Inc.

55. Resample Button
Click the Resample button to make the actual size of a selected resized image match its visual size.
Resampling can be undone.
The Resample button is faded and inoperative unless a resized image is selected.
Copyright 2005, Paradigm Publishing Inc.

56. Brightness and Contrast Button
Click the Brightness and Contrast button to open the Brightness/Contrast dialog box.
Click and drag the scale indicators to change the values.
New values can also be type directly into the text boxes.
Copyright 2005, Paradigm Publishing Inc.

57. Sharpen Button
Sharpening increases the number of pixels around an image’s edge.
Click the Sharpen button to open the Sharpen dialog box.
Click and drag the scale indicator to change the value.
A new value can also be typed directly into the text box.
Copyright 2005, Paradigm Publishing Inc.

58. Creating a Page Background Image
A background image fills an entire page.
If the image is not large enough to fill the entire page, it will tile.
An image should be at least 1,000 pixels wide and 600 pixels high to avoid tiling.
Ensure that the image file size is as small as possible, and choose an image that allows the page content to be easily read.
The Page Properties dialog box can be used to insert a background image.
Copyright 2005, Paradigm Publishing Inc.

59. Creating a Page Background Image…/2
click Modify 
click Page Properties 
click Appearance 
click to open the Select Image Source dialog box
Copyright 2005, Paradigm Publishing Inc.

60. Creating Table and Table Cell Background Images
select the table or cell 
use the Image Property inspector Point to File or Browse for File buttons to locate the desired background image
the selected table cell will have its own background image that overrides the parent and nested table background images
Copyright 2005, Paradigm Publishing Inc.

61. Applying Behaviors to Images
Behaviors allow users to create interactive Web pages.
JavaScript code is used to create behaviors.
A behavior event is used in conjunction with an action.
Three behaviors are associated with images: preload images, swap image, and swap image restore.
Behaviors can be used to create rollovers, navigation bars, and other image effects.
Copyright 2005, Paradigm Publishing Inc.

62. Creating Rollover Images
Rollover images are images that change when the mouse pointer is moved across the image when viewed.
The change is accomplished by using two images: a primary image and a secondary image.
A common use for rollovers is to create buttons that appear to be illuminated or dimmed when clicked.
Copyright 2005, Paradigm Publishing Inc.

63. Creating Rollover Images…/2
click Insert 
point to Image Objects 
click Rollover Image OR 
click the Images button
down-pointing arrow 
click Rollover Image
Copyright 2005, Paradigm Publishing Inc.

64. Creating Rollover Images…/3
The Insert Rollover Image dialog box opens.
secondary image
primary image
Copyright 2005, Paradigm Publishing Inc.

65. Creating a Web Photo Album
A Web photo album consists of a Web page with thumbnail image links.
Clicking a thumbnail opens a new page containing a larger copy of the image.
Dreamweaver MX 2004 opens Fireworks MX 2004 to create the thumbnails and larger images.
A source images folder containing all of the images must be chosen.
Copyright 2005, Paradigm Publishing Inc.

66. Creating a Web Photo Album…/2
Web photo album page
Copyright 2005, Paradigm Publishing Inc.

67. Creating a Web Photo Album…/3
click Commands 
click Create Web Photo Album
Copyright 2005, Paradigm Publishing Inc.

68. Creating a Web Photo Album…/4
The Create Web Photo Album dialog box opens.
The dialog box is used to set the properties.
Copyright 2005, Paradigm Publishing Inc.

69. Using Tracing Images
Tracing images is a method that facilitates the transition from prototype layout to actual page.
Any GIF, JPEG, or PNG image can be used as a tracing image.
Hand sketches can be scanned and saved for use as a tracing image.
The tracing image process should be completed before inserting a background image.
Copyright 2005, Paradigm Publishing Inc.

70. Tracing Image Example
this tracing image is assisting with the drawing of a table and table cells
Copyright 2005, Paradigm Publishing Inc.

71. Inserting Tracing Images
click Modify 
click Page Properties 
click Tracing Image  
adjust the degree of transparency using the slider
click to locate and select the tracing image
Copyright 2005, Paradigm Publishing Inc.

72. Inserting Tracing Images…/2
Tracing images can also be inserted using the View menu. 
click View 
point to Tracing Image 
click Load
Copyright 2005, Paradigm Publishing Inc.

73. Inserting Tracing Images…/3
The Select Image Source dialog box opens and can be used to locate and select the tracing image.
Copyright 2005, Paradigm Publishing Inc.

74. Adjusting Tracing Image Position
click View 
point to Tracing Image 
click Adjust Position
Copyright 2005, Paradigm Publishing Inc.

75. Adjusting Tracing Image Position…/2
The Adjust Tracing Image Position dialog box opens.
The dialog box can be used to enter x and y coordinates to move the tracing image.
Use the arrow keys to move it 1 pixel.
Hold down the Shift key while pressing an arrow key to move it 5 pixels.
Copyright 2005, Paradigm Publishing Inc.

76. Resetting Tracing Image Position
The original x and y coordinates are 0,0. 
click View 
point to Tracing Image 
click Reset Position
Copyright 2005, Paradigm Publishing Inc.

77. Aligning a Tracing Image with a Selected Page Element
Tracing images can be made to line up with a selected page element (such as a table, layer, or image). 
click View 
point to Tracing Image 
click Align with Selection
Copyright 2005, Paradigm Publishing Inc.

78. Using the Assets Panel to Manage Images
Dreamweaver MX 2004 automatically stores all of the images used in the current site in the Assets panel. 
click the Images button 
click the Site radio button
click an image to display its thumbnail
Copyright 2005, Paradigm Publishing Inc.

79. Using the Assets Panel to Insert Images
Images listed in the Assets panel can be inserted into a current document by clicking the image listing and dragging it to the document.
Another method is clicking the image listing, and then clicking the Insert button at the bottom of the panel.
Copyright 2005, Paradigm Publishing Inc.

80. Using the Assets Panel Favorites List
The Assets panel Favorites list is used to save frequently used assets, including images.
The Favorites list works just like the Site list, but it is more manageable because you can control the content.
Copyright 2005, Paradigm Publishing Inc.

81. Adding Images to the Favorites List
right-click the image 
click Add to Image Favorites
Copyright 2005, Paradigm Publishing Inc.

82. Adding Images to the Favorites List…/2
Another method to add images is to select the image and use the Assets panel (Site list view). 
click the Add to Favorites button
Copyright 2005, Paradigm Publishing Inc.

83. Using Favorites List Folders
Use Favorites list folders to categorize images.
Favorites folders
Remove from Favorites button
New Favorites Folder button
Copyright 2005, Paradigm Publishing Inc.

84. COMMANDS REVIEW    How do you add a background image? click Modify
click Page Properties 
click Appearance
Copyright 2005, Paradigm Publishing Inc.

85. COMMANDS REVIEW…/2
How do you adjust image brightness and contrast? 
click Modify 
point to Image 
click Brightness/Contrast
Copyright 2005, Paradigm Publishing Inc.

86. COMMANDS REVIEW…/3    How do you adjust tracing image position?
click View 
point to Tracing Image 
click Adjust Position
Copyright 2005, Paradigm Publishing Inc.

87. COMMANDS REVIEW…/4    How do you align a tracing image? click View
point to Tracing Image 
click Align with Selection
Copyright 2005, Paradigm Publishing Inc.

88. COMMANDS REVIEW…/5    How do you create a navigation bar?
click Insert 
point to Image Objects 
click Navigation Bar
Copyright 2005, Paradigm Publishing Inc.

89. COMMANDS REVIEW…/6    How do you create a rollover image?
click Insert 
point to Image Objects 
click Rollover Image
Copyright 2005, Paradigm Publishing Inc.

90. COMMANDS REVIEW…/7   How do you create a Web photo album?
click Commands 
click Create Web Photo Album
Copyright 2005, Paradigm Publishing Inc.

91. COMMANDS REVIEW…/8    How do you crop an image? click Modify
point to Image 
click Crop
Copyright 2005, Paradigm Publishing Inc.

92. COMMANDS REVIEW…/9   How do you insert an image? click Insert
click Image
Copyright 2005, Paradigm Publishing Inc.

93. COMMANDS REVIEW…/10    How do you insert an image placeholder?
click Insert 
point to Image Objects 
click Image Placeholder
Copyright 2005, Paradigm Publishing Inc.

94. COMMANDS REVIEW…/11    How do you make tracing images visible?
click View 
point to Tracing Image 
click Show
Copyright 2005, Paradigm Publishing Inc.

95. COMMANDS REVIEW…/12    How do you optimize an image in Fireworks?
click Modify 
point to Image 
click Optimize Image in Fireworks
Copyright 2005, Paradigm Publishing Inc.

96. COMMANDS REVIEW…/13    How do you resample an image? click Modify
point to Image 
click Resample
Copyright 2005, Paradigm Publishing Inc.

97. COMMANDS REVIEW…/14    How do you reset tracing image position?
click View 
point to Tracing Image 
click Reset Position
Copyright 2005, Paradigm Publishing Inc.

98. COMMANDS REVIEW…/15    How do you sharpen an image? click Modify
point to Image 
click Sharpen
Copyright 2005, Paradigm Publishing Inc.

99. COMMANDS REVIEW…/16   How do you use an external image editor?
click Edit 
click Edit with
External Editor
Copyright 2005, Paradigm Publishing Inc.

100. COMMANDS REVIEW…/17    How do you work with a tracing image?
click View 
point to Tracing Image 
click Load
Copyright 2005, Paradigm Publishing Inc.

101. COMMANDS SUMMARY Add background image
Modify, Page Properties, Appearance category
Adjust image brightness and contrast
Modify, Image, Brightness/Contrast
Adjust tracing image position
View, Tracing Image, Adjust Position
Align tracing image
View, Tracing Image, Align with Selection
Create navigation bar
Insert, Image Objects, Navigation Bar
Create rollover image
Insert, Image Objects, Rollover Image
Create Web photo album
Commands, Create Web Photo Album
Crop an image
Modify, Image, Crop
Copyright 2005, Paradigm Publishing Inc.

102. COMMANDS SUMMARY…/2 Insert image Insert, Image
Insert image placeholder
Insert, Image Placeholder
Make tracing images visible
View, Tracing Image, Show
Optimize an image in Fireworks
Modify, Image, Optimize Image in Fireworks
Resample an image
Modify, Image, Resample
Reset tracing image position
View, Tracing Image, Reset Position
Sharpen an image
Modify, Image, Sharpen
Use an external image editor
Edit, Edit with External Editor
Work with a tracing image
View, Tracing Image, Load
Copyright 2005, Paradigm Publishing Inc.