Working With Images In Adobe Dreamweaver CS4

Web pages consist of textual markup and are therefore incapable of embedding images in the way that word processing documents can. Instead the page contains a reference to the image which enables the browser to locate and display the image when necessary. Images must be therefore be uploaded to the server along with the HTML pages. This can only take place properly if the images are located in Dreamweaver's local root folder. Whenever you insert a graphic which is not located in the root folder of the active site, Dreamweaver displays a dialogue offering you the opportunity of saving this image in the current root folder. When this message appears, you should click the Yes button and save the image somewhere in the current root folder.

Another way of inserting images is to use the Assets panel (Window - Assets). Basically, the Assets panel displays elements which have already been used within your Dreamweaver site(s). Assets are arranged according to category: to change the category, simply click on one of the icons on the left of the panel. Images can be found in the first category. All existing image assets are available for use within your documents by simply dragging them onto a page.

If you ever need to change an existing image for an alternative, simply double-click the existing image. A dialogue labelled Select Image Source appears. This is the same dialogue which appears when the Insert Image command is used. Locate and double-click the replacement image.

As a general rule, images should be saved at the size at which they need to appear on the web page. However, where the same image appears on different pages at different sizes, it is useful to import the same image each time and resize it as necessary. This works best if the image is saved at the largest size required and reduced in size on those pages where it needs to smaller. To resize an image:

1. Highlight the image.

2. With the Shift key held down, drag the bottom right corner handle towards or away from the centre of the image. (Holding down the Shift key retains the aspect ratio of the image.)

A rollover image is one which changes appearance when the mouse passes over it. This effect is created with JavaScript. However, Dreamweaver uses visual tools to generate the necessary code.

1. Position the cursor in the desired location then choose Insert - Interactive Images - Rollover Image.

2. Type in a name for the image.

3. Locate and double-click the appropriate image by clicking on the Browse button next to Original Image.

4. Repeat step 3 to locate the Rollover Image.

5. Finally, click on the Browse button next to When Clicked Go To URL then locate and double-click the linked file.