Section 15.1. Placing Images on the Page

15.1. Placing Images on the Page

Placing images on your page is easy. First, you click in the document window to set an insertion point (and delete any placeholder text for the image). Then you go to the Insert panel, and you click the Image icon. If the Image icon isn't visible, you choose it from its menu, as Figure 15-1 shows.

Figure 15-1. Choose the Image object from its menu on the Insert panel

The Select Image Source dialog box appears. Navigate to your images or img folder, and choose the image file that you want to place. Don't use an image from any other location! All the images for your site should be in this folder. If the image that you want isn't there, click Cancel, leave Dreamweaver for a minute, find the image file, and move it to your site's images folder.

Click OK, and Dreamweaver calls up the Image Tag Accessibility Attributes dialog box (see Figure 15-2). In the Alternate Text field, provide an accurate text description for the image. Don't cheap out here! To improve the usefulness of your images for those who can't see them, the words of your description should paint a clear mental picture of the graphic file. "Mars photo" says little. Try something like this: "In this photograph, the planet Mars shows rocky, rust-red surface features and a pink sky. A range of jagged mountains rolls off in the distance. The gray shadow of the Mars rover appears in the extreme foreground."

Figure 15-2. The Image Tag Accessibility Attributes dialog box

If you plan to make this image clickable, click the folder icon to the right of the Long description field, and navigate to the page to which you plan to link. The longdesc or long description attribute of the image tag gives the location of the page to which the image links. However, keep in mind that you aren't actually linking the image to the page at this stage. See Chapter 17 for information about that. Right now, you're simply embedding this information into the image tag for the benefit of accessibility software like screen readers and text-to-speech converters. You'll add the actual link at a later time. If you don't plan on making this image clickable, then leave the Long description field blank.

BEST BET

If you plan on making your image clickable, fill in the Long description field of the Image Tag Accessibility Attributes dialog box. Otherwise, leave this field blank.

Click OK, and Dreamweaver inserts your image at the insertion point, as Figure 15-3 shows.

Figure 15-3. Dreamweaver inserts the image