Adobe Dreamweaver CS3
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, 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.
-
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, select Images
» Image
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.
-
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.
-
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, select Images» 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. -
Click OK
-
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 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.
-
Select the image by clicking it
-
From the Properties pane, in the Alt text box, type 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]
Your image is deleted from your document.
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
-
Drag to the new location
-
Release the mouse button at the new insertion point
The image is placed in its new location.
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]
The image is placed in its new location.
Linking 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.
-
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]
