facebook google plus twitter
Webucator's Free Adobe Dreamweaver Tutorial

Lesson: Images

Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.

Modern browsers generally support three types of images: GIFs, JPEGs, and PNGs. The PNG and GIF are generally used for simple images such as drawings, whereas the JPEG format is used for more complicated images such as photographs. Dreamweaver makes it simple to add images to your page.

Lesson Goals

  • Learn to add images to your pages.
  • Learn to make your images link to other pages.
  • Learn to add accessibility attributes to your images.
  • Learn to create image rollovers with Dreamweaver.
  • Learn to create image maps with Dreamweaver.
  • Learn to add PSD images to pages from within Dreamweaver.

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: Insert Image
  • Select Images > Image from the Common Insert panel: Common Insert Panel Select Image

You will then be presented with the Select Image Source dialog box, which allows you to navigate to your image:Select Image Source Dialog Box

As with links, this dialog box 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 box, 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, make sure to set the Image Tag Accessibility Attributes: Accessibility Attributes

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 drop-down. 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.

To edit the source of the Long Description:

  1. Open the Quick Tag Editor for the IMG tag.Select Quick Tag Editor
  2. Begin to type a "lo" and see the longdesc choice. Autofill longdesc tag
  3. Press the Enter key and type the source path.Source Path

Image Properties

You can use the Properties to modify the properties of the image: Properties Panel

  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: Width and Height Fields 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 Edit Image Settings Iconbutton allows for a small amount of image editing to be done without use of an external graphics program such as Adobe Photoshop.Image Optimization Dialog Box

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.

In general, if you need to make changes to images, it is better to do so by going back to the original image in your graphics program.

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. Using CSS you may remove this border.

Adding Images to Your Page

Duration: 15 to 25 minutes.

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

  1. Open ClassFiles/dreamweaver-cc/Exercises/index.html in Dreamweaver if it's not already open.
  2. Add ClassFiles/dreamweaver-cc/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-cc/Images/Email.gif image. Make the image an email link to info@runnershome.com.
  4. Save your page and open it in the browser.

When you are done, your page should look like this: Welcome to Runners Home Page in Browser

You should have set the alternate text of the Runners Home image to "<empty>" and of the Email image to something like "Contact us at info@runnershome.com."

Make sure your email link works.

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-cc/Images folder you will see a Menu folder that looks like this: Example Menu Folder

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.

Watch as your instructor adds a rollover image by following the steps below. You can follow along in ClassFiles/dreamweaver-cc/Exercises/index.html or you can wait until the next exercise in which you will add additional rollover images.

  1. Open ClassFiles/dreamweaver-cc/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 CC 2017 select Insert > HTML > Rollover Image: Insert HTML Selection(You could also use the Common Insert panel.
  4. In the Insert Rollover Image dialog box enter the following:
    • Image name: Home (Image names cannot contain spaces).
    • Original image: Browse to ClassFiles/dreamweaver-cc/Images/Menu/home.gif
    • Rollover image: Browser to ClassFiles/dreamweaver-cc/Images/Menu/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).Insert Rollover Image Dialog Box

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

Duration: 10 to 15 minutes.

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

  1. Open ClassFiles/dreamweaver-cc/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?

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:Image Map Tools

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

Watch as your instructor adds an image map by following the steps below. You can follow along in ClassFiles/dreamweaver-cc/Exercises/index.html or you can wait until the next exercise in which you will complete the image map.

  1. Open ClassFiles/dreamweaver-cc/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": Image Map Name Field
  4. In the Properties Inspector, click the Rectangle Hotspot Tool and draw a rectangle around the word "Home": Rectangle in Place
  5. The Properties Inspector will now show hotspot properties:Properties Panel
    • 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:Using Pointer Hotspot Tool
  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

Duration: 10 to 15 minutes.

In this exercise, you will finish the image map.

  1. Open ClassFiles/dreamweaver-cc/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?

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-cc/Exercises/hello-world-with-psd.html in Dreamweaver.
  2. Insert ClassFiles/dreamweaver-cc/Images/world.psd beneath the "Hello world!" heading. The Image Optimization dialog box will come up, Click OK:Image Optimization Dialog Box
  3. Choose a place and a name for the imported image.Save Web Image
  4. The image will show up like this: Hello Word Image

If the original PSD file is changed, right-click on the image and select Update from Original to have the changes applied to the JPEG as well.Select Update From Original in Dropdown