Inserting Images

Contact Us or call 1-877-932-8228
Inserting Images

Inserting Images

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, which allows you to navigate to your image:

As with links, this dialog 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, you can drag it from the Files panel to the location on your page where you want the image to appear.

Accessibility Attributes

After selecting the image, the Image Tag Accessibility Attributes dialog will appear:

Alternate Text

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 dropdown. Here are some guidelines:

  1. If the only purpose of the image is to provide a design impact, you should select "<empty>".
  2. If the image contains instructive text (e.g, "Enter Store" or "Go"), you should write that text as the value.

Long Description

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.

Watch as your instructor adds the world.gif image from the Images folder to ClassFiles/Dreamweaver/Solutions/hello-world.html and makes it a link to the Hello World Wikipedia page.

Image Properties

You can use the Properties Inspector to modify the properties of the image:

  1. You can change the source, link URL, and alternate text using the Src, Link and Alt fields.
  2. W and H stand for width and height.
  3. 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.
  4. We will discuss ID and Class when we discuss CSS later in the course.
  5. (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.

Next