A web page is pure text and is 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.

Dreamweaver Assets panel (Window – Assets) can also be used to insert images. 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. While holding down the Shift key, 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.)

The term rollover image refers to the effect where an image 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 where you want the image to go, then choose Insert – Interactive Images – Rollover Image.

2. Type in a name for the image.

3. Click the Browse button next to Original Image, then locate and double-click the appropriate image.

4. Repeat the above step for Rollover Image.

5. The final step is to create a hyperlink by clciking on the Browse button next to When Clicked Go To URL then locating and double-clicking the linked file.

The writer of this article is a trainer and developer with Macresource Computer Training, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.