DREAMWEAVER – WORKING WITH IMAGES (Page 3)

Applying Background Images and Colours

A background colour or image can add interest to a web page. Remember to make the text on the page contrast strongly with the background. Illegible pages are unlikely to attract much traffic.

Background images should be kept very small so that the page does not take too long to load. If the page is larger than the picture, the image will be tiled across/down the page. It is quite common to use a small graphic a few pixels large to create a “textured” background.

You can use a background image and colour. The colour will display until the image is downloaded. If there are any transparent areas in the image, the colour will show through.

To set up a background image or colour

  • From the Modify menu, select Page Properties… (SpeedKey: Ctrl + J)

The Page Properties dialogue box is displayed.

  • To select a background image, click the Browse… button to the right of the Background Image field

The Select Image Source dialogue box is displayed.

unnamed-file-997 DREAMWEAVER - WORKING WITH IMAGES
       (Page 3)
Select Image Source dialogue box

  • Select the required image and click Select

The Page Properties dialogue box is re-displayed.

  • Click OK

The background image is applied.

  • To apply a background colour, click the Background colour box

The colour palette is displayed.

unnamed-file-999 DREAMWEAVER - WORKING WITH IMAGES
       (Page 3)
Colour palette

  • Select a colour from the palette
  • Click OK

Creating an Image Map

An image map is a graphic with discrete areas (hotspots) defined. Each hotspot can have a different action associated with it, typically to link to different pages.

To create an image map

  • Select the image that you want to turn into an image map
  • Click the expander arrow in the bottom right-hand corner of the Property Inspector to reveal all the options

unnamed-file-1000 DREAMWEAVER - WORKING WITH IMAGES
       (Page 3)
Expand the Property Inspector and name the Map

  • Click in the Map box and type in a name for the image

Note: Each map in the same document must have a unique name.

To define the map area you can use either the Circle tool, Rectangle tool or the Polygon tool image10 DREAMWEAVER - WORKING WITH IMAGES
       (Page 3) .

  • Select the appropriate tool and click and drag the pointer over the image that you want to create as the hotspot

unnamed-file-1002 DREAMWEAVER - WORKING WITH IMAGES
       (Page 3)
The image on the left has been defined as a hotspot

Once the hotspot has been created, the Property Inspector displays the hotspot properties.

unnamed-file-1005 DREAMWEAVER - WORKING WITH IMAGES
       (Page 3)
Hotspot Properties

  • Click the folder icon to the right of the Link field

The Select File dialogue box is displayed.

  • Select the file you want to link to and click Select
  • If required, in the Alt field, type in the text that you want displayed in text only browsers

Tip: In most browsers, ALT text is displayed as a ScreenTip when the user points to the link.

  • Create additional hotspots as required

To modify an image map

Once setup, the hotspots for an image map are stored with the image, which can be copied and pasted to other documents. You can modify the hotspots or add new ones.

To move a hotspot

  • Click the Pointer tool in the Property Inspector so that it appears pushed-in image13 DREAMWEAVER - WORKING WITH IMAGES
       (Page 3)
  • Select the hotspot to be moved
  • Drag-and-drop the hotspot to the new location

OR

  • Hold down the Shift key together with the arrow keys to move the hotspot by 10 pixels in the required direction

OR

  • Use the arrows keys to move the selected hotspot one pixel at a time in the required direction

To resize a hotspot

  • Click the Pointer tool in the Property Inspector
  • Select the hotspot to be resized
  • Drag any of the four hotspot handles to change the size of the hotspot