Inserting an image

When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

You can also insert images dynamically. Dynamic images are those images that change often. For example, advertising banner rotation systems need to randomly select a single banner from a list of potential banners, and then dynamically display the selected banner’s image when a page is requested. For more information, see Making images dynamic.

To insert an image:

1. Place the insertion point where you want the image to appear in the Document window, then do one of the following:
• In the Common category of the Insert bar, click the Image icon.
• In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window if you are working in the code).
• Select Insert > Image.
• Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.
• Drag an image from the Site panel to the desired location in the Document window; then skip to step 3.
• Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
2. In the dialog box that appears, do one of the following:
• Select File System to choose a graphic file.
• Select Data Source to choose a dynamic image source.
3. Browse to select the image or content source you want to insert.

If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

4. Click OK.

The Image Tag Accessibility Attributes dialog box appears if you have activated the dialog box in Preferences.

5. Enter values in the Alternative Text and Long Description text boxes, then click OK.

Note: You can enter information in one or both text boxes depending on your needs.

Setting the Image Tag Accessibility Attributes dialog box option

The purpose of this dialog box is to set image tag accessibility options. You can enter one or both attributes depending on your needs. The screen reader reads the Alt attribute for the image.

To set image tag accessibility options:

1. In the Alt text box, enter a name or brief description for the image.

The screen reader reads the information you enter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Long Description text box, to a file that gives more information about the image.

2. In the Long Description text box, enter the location of a file that displays when the user clicks the image or click the folder icon to browse to the file.

This text box provides a link to a file that is related to, or gives more information about, the image.

3. Click OK.

Note: If you press Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

.

The image appears in your document.

Note: If you click Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

6. In the Property inspector (Window > Properties), set properties for the image.

For more information, see Setting image properties.