2 Domain Hosting

Working with Images

This page introduces you to the techniques available within Dreamweaver for working with images. Topics include the following:

• Adding Images
• Assigning Alternate Text for Images
• Deleting Images
• Moving Images
• Linking 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 with your website, copy or move the image into the collection before completing the following steps. Refer to the Windows Explorer documentation to find your file.

1. Set your insertion point where you want the image to appear
2. From the Insert menu, select Image
   OR
   From the Insert pane, in the Common tab, click IMAGE
   The Select Image Source dialog box appears.
3. Using the Look in pull-down list, locate and select the image to insert
4. Click OK
   The image appears in the document.
5. Continue with Assigning Alternate Text for Images

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 in 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 the 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 your insertion point where you want the image to appear
2. From the Insert menu, select Image
   OR
   From the Insert pane, in the Common tab, click IMAGE
   The Select Image Source dialog box will appear.
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 shouldn't 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
   NOTE: Since the image is not a part of your collection, it may not display properly in Dreamweaver. You can test your page using Netscape or Internet Explorer to verify that the image is appearing correctly.
5. Continue with Assigning Alternate Text for Images

Assigning Alternate Text for Images

Alternate text for images is what appears when the image is not loaded (generally due to customized browser settings but also for text-based browsers). Image alternate text is also essential for the sight-impaired. Instead of "seeing" the screen, it is read to them.

1. Select the image by clicking it
2. From the Properties pane, in the Alt text box, type the appropriate alternate text
   
3. Press [Enter]

Deleting 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]

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 large distance 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. Click and hold the mouse within the graphic
3. Drag to the new location
4. Release the mouse button

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 you want the image to appear
4. From the Edit menu, select Paste
   OR
   Press [Ctrl] + V

Linking with Images

You can create a hyperlink for images just as you did for text. You can also establish a link for the image using the Image Properties dialog box.

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
3. Press [Enter]