This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Working with Images

This page introduces you to the techniques available within Dreamweaver for working with images.

return to topAdding Images

When you add an image to a web page, there are two basic options: add an image from your web collection or create a link to an image on the Web. Instructions for both options are included here.

Inserting an Image from a File

If the image is already part of your website collection, you can insert the image as a file. If you have the image saved electronically but it is not saved in your collection, copy or move the image into your collection before completing the following steps. For more information, refer to the Windows Explorer documentation to find your file.

  1. Set the insertion point where the image is to appear

  2. From the Insert menu, select Image
    OR
    From the Insert bar, in the Common tab, select ImagesImage button» Image
    The Select Image Source dialog box appears.
    Select image source dialog box

  3. From the Look in pull-down list, locate and select the image to insert

  4. Click OK
    The Image Tag Accessibility Attributes dialog box appears. Image Tag Accessibility Attributes dialog box

  5. In the Alternate text text box, type text that describes the image
    For more information about alternate text, refer to Assigning Alternate Text for Images.

  6. Click OK
    The image appears on the page.

Creating a Link to an Image on the Web

In most cases it is not advisable to create a link to an image on the Web. Most sites will require you to save a copy of the image into your collection. Not only does this give you more control of the image (you do not have to worry about the image being renamed, moved, deleted, or physically changed in appearance), it will decrease the load time of your page. However, in some cases it is appropriate to link to an image. Either the site will require it or it is a core graphic for the website (e.g., the UWEC icon that is used as a return link). If you are using one of the graphics from the UWEC Web Graphics Collection or the UWEC Image Archive, you will want to link to the graphic.

  1. Set the insertion point where the image is to appear

  2. From the Insert menu, select Image
    OR
    From the Insert bar, in the Common tab, select ImagesImage button» Image
    The Select Image Source dialog box appears.
    Select image source dialog box

  3. In the URL text box, type the complete URL of the image
    HINT: To ensure the image is displayed properly within Dreamweaver, use an absolute URL.
    NOTE: If the URL is relative, the image will appear broken in Dreamweaver. If you set the height and width attributes of the image, this should not present a problem; however, if they are not set, the image may appear in Dreamweaver smaller than its actual size, which may distort your page layout.

  4. Click OK
    The Image Tag Accessibility Attributes dialog box appears. Image Tag Accessibility Attributes dialog box

  5. In the Alternate text text box, type text that describes the image
    For more information on alternate text, refer to Assigning Alternate Text for Images.

  6. Click OK

  7. To verify that the image is appearing correctly, test the page using your selected browser
    Warning: Since the image is not a part of your collection, it may not display properly in Dreamweaver.

return to topAssigning Alternate Text for Images

The alternate text for an image appears when the image is not loaded (generally due to customized browser settings but also for text-based browsers). Alternate text is also used to assist sight-impaired individuals. Instead of "seeing" the screen, it is read to them. The more descriptive the alternate text is, the more accessible the page is.
NOTE: If the Image Tag Accessibility Attributes dialog box does not appear when an image is inserted, alternate text can be added in the Alt text box located in the Properties pane.

  1. Select the image by clicking it

  2. From the Properties pane, in the Alt text box, type text that describes the image
    Image properties pane

  3. Press [Enter]

return to topDeleting Images

If you no longer want an image to appear on your page, you can remove it by following these steps:

  1. Select the image by clicking it

  2. Press [Delete]
    Your image is deleted from your document.

return to topMoving Images

Image placement may need to be adjusted for a variety of reasons: the content has been rearranged, flow of the images is no longer appropriate, etc. If the image is moving a short distance, you can use the drag-and-drop method. If it is moving a long distance up/down the page or to another web page, you will need to use the cut and paste method.

Moving Images: Drag-and-Drop

  1. Select the image by clicking it

  2. Drag to the new location

  3. Release the mouse button at the new insertion point
    The image is placed in its new location.

Moving Images: Cut and Paste

  1. Select the image by clicking it

  2. From the Edit menu, select Cut
    OR
    Press [Ctrl] + [X]

  3. Place the insertion point where the image is to appear

  4. From the Edit menu, select Paste
    OR
    Press [Ctrl] + [V]
    The image is placed in its new location.

return to topLinking with Images

Dreamweaver allows you to create a hyperlink for images just as you do for text. One way to establish a link for an image is to use the Properties pane.

  1. Select the image by clicking it

  2. From the Properties pane, in the Link text box, type the complete URL of the page you wish to link to
    Image properties pane

  3. Press [Enter]

Excellence. Our Measure. Our Motto. Our Goal.