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.
- Add images to your pages.
- Make your images link to other pages.
- Add accessibility attributes to your images.
- Create image rollovers with Dreamweaver.
- Create image maps with Dreamweaver.
- Add PSD images to pages from within Dreamweaver.
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.
After selecting the image, the Image Tag Accessibility Attributes dialog will appear:
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:
- If the only purpose of the image is to provide a design impact, you should select "<empty>".
- If the image contains instructive text (e.g, "Enter Store" or "Go"), you should write that text as the value.
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.
Watch as your instructor adds the world.gif image from the Images folder to ClassFiles/Dreamweaver/Solutions/hello-world.html and makes it a link to the Hello World Wikipedia page.
You can use the Properties Inspector to modify the properties of the image:
- You can change the source, link URL, and alternate text using the Src, Link and Alt fields.
- W and H stand for width and height.
- 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.
- We will discuss ID and Class when we discuss CSS later in the course.
- (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.
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:
- Select the image.
- 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.
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.
Watch as your instructor adds a rollover image by following the steps below. You can follow along in ClassFiles/Dreamweaver/Exercises/index.html or you can wait until the next exercise in which you will add additional rollover images.
- Open ClassFiles/Dreamweaver/Demos/index-rollovers.html in Dreamweaver.
- Delete all the links in the navigation menu.
- 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.
- 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:
- Click on Live View in the Document toolbar.
- Point your mouse at the Home image. You should see it change:
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/Exercises/index.html or you can wait until the next exercise in which you will complete the image map.
- Open ClassFiles/Dreamweaver/Demos/index-image-map.html in Dreamweaver.
- Replace the RunnersHome.gif image with image-map.gif.
- Click on the image and name the image map "navigation":
- In the Properties Inspector, click the Rectangle Hotspot Tool and draw a rectangle around the word "Home":
- 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.
- 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:
- Again, make sure to add the alternate text.
- Save the page and open it in the browser.
- 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:
- Open ClassFiles/Dreamweaver/Exercises/hello-word-with-psd.html in Dreamweaver.
- Insert ClassFiles/Dreamweaver/Images/world.psd beneath the "Hello world!" heading. The Image Optimization dialog will come up:
- 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.