Macromedia Dreamweaver 8
Working with Images
This page introduces you to the techniques available within Dreamweaver for working with images.
Adding Images
When you add an image to a web page, you have 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.
-
Set the insertion point where the image is to appear
-
From the Insert menu, select Image
OR
From the Insert bar, in the Common tab, click IMAGES
The Select Image Source dialog box appears.
-
From the Look in pull-down list, locate and select the image to insert
-
Click OK
The Image Tag Accessibility Attributes dialog box appears.
-
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.
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.
-
Set the insertion point where the image is to appear
-
From the Insert menu, select Image
OR
From the Insert bar, in the Common tab, click IMAGE
The Select Image Source dialog box appears. -
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. -
Click OK
The Image Tag Accessibility Attributes dialog box appears. -
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.
-
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.
Assigning 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 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 which is located in the Properties pane.
-
Select the image by clicking it
-
From the Properties pane, in the Alt text box, text that describes the image
-
Press [Enter]
Deleting Images
If you no longer want an image to appear on your page, you can remove it by following these steps:
-
Select the image by clicking it
-
Press [Delete]
Moving 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
-
Select the image by clicking it
-
Click and hold the mouse within the graphic
-
Drag to the new location
-
Release the mouse button
Moving Images: Cut and Paste
-
Select the image by clicking it
-
From the Edit menu, select Cut
OR
Press [Ctrl] + [X] -
Place the insertion point where the image is to appear
-
From the Edit menu, select Paste
OR
Press [Ctrl] + [V]
Linking with Images
You can create a hyperlink for images just as you do for text. You can also establish a link for the image using the Image Properties dialog box.
-
Select the image by clicking it
-
From the Properties pane, in the Link text box, type the complete URL of the page you wish to link to
-
Press [Enter]
