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.
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.
- 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
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 .
- Select the appropriate tool and click and drag the pointer over the image that you want to create as the hotspot
The image on the left has been defined as a hotspot
Once the hotspot has been created, the Property Inspector displays the 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
- Select the hotspot to be moved
- Drag-and-drop the hotspot to the new location
- Hold down the Shift key together with the arrow keys to move the hotspot by 10 pixels in the required direction
- 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