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
To add an image place the cursor where you want the image to appear and do one of the following:
You will then be presented with the Select Image Source dialog box, which allows you to navigate to your image:
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.
After selecting the image, make sure to set the Image Tag Accessibility Attributes:
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:
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:
You can use the Properties to modify the properties of the image:
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.
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.
Turning an image into a link is simple:
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.
In this exercise, you will add images to your page.
When you are done, your page should look like this:
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.
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:
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.
You can test the rollover effect in Live View:
In this exercise, you will change your menu in index.html to use all rollover images.
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.
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.
In this exercise, you will finish the image map.
Dreamweaver allows you to insert Photoshop PSD files directly into a page. Dreamweaver will watch the original document for changes. To illustrate:
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.