To add an image place the cursor where you want the image to appear and do one of the following:
- Select Insert > Image:
- Select Images > Image from the Common Insert panel:
You will then be presented with the Select Image Source dialog box, which allows you to navigate to your image:
As with links, this dialog box gives you the option of jumping right to your website root by clicking on the Site Root button.
Rather than browsing to the image in the Select Image Source dialog box, you can drag it from the Files panel to the location on your page where you want the image to appear.
After selecting the image, make sure to set the Image Tag Accessibility Attributes:
Screen readers will use the Alternate text value when announcing the presence of the image. You should either write descriptive text or select "<empty>" from the drop-down. Here are some guidelines:
- If the only purpose of the image is to provide a design impact, you should select "<empty>".
- If the image contains instructive text (e.g., "Enter Store" or "Go"), you should write that text as the value.
The long description is used with images that tell a story (e.g., graphs and charts). The value for the Long description, if included, should be a URL pointing to a page that provides text telling the same story as the image.
To edit the source of the Long Description:
- Open the Quick Tag Editor for the IMG tag.
- Begin to type a "lo" and see the longdesc choice.
- Press the Enter key and type the source path.
You can use the Properties to modify the properties of the image:
- You can change the source, link URL, and alternate text using the Src, Link and Alt fields.
W and H stand for width and height.
- When you insert an image, Dreamweaver automatically sets the width and height to the actual dimensions of the image (in pixels). In most cases, you should not change this setting. If one of the values is different from the actual dimension, the value becomes bold and a Reset icon appears: Click that icon to reset the image dimensions.
- We will discuss ID and Class when we discuss CSS later in the course.
- (e.g., Photoshop).
Editing Images Directly in Dreamweaver
The Edit Image Settings
button allows for a small amount of image editing to be done without use of an external graphics program such as Adobe Photoshop.
Images can be cropped and brightness and contrast may be edited. Be aware, however, that if you change an image using Dreamweaver, you are changing the actual image file. If the image is used on any other pages, your changes will affect those pages.
In general, if you need to make changes to images, it is better to do so by going back to the original image in your graphics program.