Lesson: 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.

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.

Image Links

Turning an image into a link is simple:

1. Select the image.
2. Add the link in the same way you would with text selected.

Some browsers will place a blue border around a linked image to indicate that the image is a link. We will show how you can remove this border later in the course.

Adding Images to Your Page

In this exercise, you will add images to your page.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.
2. Add ClassFiles/Dreamweaver/Images/RunnersHome.gif to the home page after the level-one heading.
3. Replace "Contact us at info@runnershome.com." in the footer with the ClassFiles/Dreamweaver/Images/Email.gif image. Make the image an email link to info@runnershome.com.
4. Save your page and open it in the browser.

Solution:

Rollover Images

A rollover image is a linked image that changes when the user mouses over it and changes back when the user mouses off of it. Rollover images are commonly used in navigation menus. If you were hand-coding them, you would have to use JavaScript or CSS, but Dreamweaver does that magic for you.

To illustrate, let's change our menu on index.html to use rollover images:

In your ClassFiles/Dreamweaver/Images folder you will see a Menu folder that looks like this:

For each menu item (navigation link) there are two images: a normal image and an "on" image. We will show the normal images in the menu by default and show the "on" images when the user hovers over them.

1. Open ClassFiles/Dreamweaver/Demos/index-rollovers.html in Dreamweaver.
2. Delete all the links in the navigation menu.
3. With the cursor at the beginning of the page, in Dreamweaver CS6 select Insert > Image Objects > Rollover Image, in Dreamweaver CC select Insert > Image > Rollover Image: (You could also use the Common Insert panel.
4. In the Insert Rollover Image dialog enter the following:
   • Image name: Home (Image names cannot contain spaces).
   • Original image: Browse to ClassFiles/Dreamweaver/Images/home.gif
   • Rollover image: Browser to ClassFiles/Dreamweaver/Images/home-on.gif
   • Preload rollover image: checked. This forces the browser to preload the "on" images so that there is no delay in the rollover effect.
   • Alternate text: Home. This should be the same as the text on the image itself.
   • When clicked, Go to URL: Browse to index.html (or index-rollovers.html for this demo).

You can test the rollover effect in Live View:

1. Click on Live View in the Document toolbar.
2. Point your mouse at the Home image. You should see it change:

Adding Rollover Images

In this exercise, you will change your menu in index.html to use all rollover images.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.
2. Using the technique you just learned, change all the menu items to rollover images.
3. Save your page and open it in the browser.
4. Test your links. Do they still work? Do you get the rollover effect?

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Image Maps

You can turn sections of an image into links. These linked sections are called hotspots and an image with hotspots is called an image map.

When you select an image on a page in Dreamweaver, you will see the following image map tools in the Properties Inspector:

To create an image map, you need to name the map and then draw your hotspots (rectangles, circles, or polygons) on the image.

1. Open ClassFiles/Dreamweaver/Demos/index-image-map.html in Dreamweaver.
2. Replace the RunnersHome.gif image with image-map.gif.
3. Click on the image and name the image map "navigation":
4. In the Properties Inspector, click the Rectangle Hotspot Tool and draw a rectangle around the word "Home":
5. The Properties Inspector will now show hotspot properties:
   • Notice that the Pointer Hotspot Tool is active. This allows you to resize and move your hotspot.
   • Make sure to include appropriate alternate text in the Alt field.
6. In the Properties Inspector, click the Polygon Hotspot Tool and draw a polygon by clicking point by point around the words "Running Log." If you don't get it exactly right, you can use the Pointer Hotspot Tool to fix your points after:
7. Again, make sure to add the alternate text.
8. Save the page and open it in the browser.
9. Test your hotspots. Do they work?

Completing the Image Map

In this exercise, you will finish the image map.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.
2. If you haven't already, replace the RunnersHome.gif image with image-map.gif and name the map "navigation".
3. Add hotspots around each would-be link. Don't forget your alternate text.
4. Save the page and open it in the browser.
5. Test your hotspots. Do they work?

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Inserting Photoshop .psd documents directly - Photoshop Smart Objects

Dreamweaver allows you to insert Photoshop PSD files directly into a page. Dreamweaver will watch the original document for changes. To illustrate:

1. Open ClassFiles/Dreamweaver/Exercises/hello-word-with-psd.html in Dreamweaver.
2. Insert ClassFiles/Dreamweaver/Images/world.psd beneath the "Hello world!" heading. The Image Optimization dialog will come up:
3. Make any modifications you like and save the image as a JPEG in the Images folder. The image will show up like this:

The Image Optimizaton dialog box replaces the Image Preview dialog box in CS5.

If the original PSD file is changed, the top portion of the arrow (circled in the image above) will change from green to red. Right-click on the image and select Update from Original to have the changes applied to the JPEG as well.