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

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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

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

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Image Alignment Examples Copyright 2005, Paradigm Publishing Inc.

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.

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

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.

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

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.

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.

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.

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

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.

Fireworks Optimize Dialog Box Copyright 2005, Paradigm Publishing Inc.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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

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

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.

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

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

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

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

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

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

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

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.

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

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

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

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

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

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.

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.