Lesson 2: Web Page Design in the FrontPage Editor

Creating Image Maps

In the first lesson, you learned how easy it is to place images on Web pages. Now you will create an image map -- an image with one or more hyperlinks.

When an image is formatted as an image map, a user can click on certain regions of the image and trigger image "hotspots." These hotspots launch the hyperlinks that have been added to the HTML by the FrontPage Editor.

Before you can create an image map, you must first insert the image that you will use.

To Insert an Image

1. Press the DOWN ARROW key to move the insertion point to the blank line below the feedback hyperlink.
   
   
2. On the FrontPage Editor's Insert menu, choose Image.

   The Image dialog box is displayed.

   

   Figure 1. The File button

3. In the Image dialog box, click the File button.

   The image file you want to insert is named blackbrd.gif.

4. In the Select File dialog box, navigate to the following folder (assuming you installed FrontPage in the \Program Files folder on your C:\ drive):

   C:\Program
           Files\Microsoft FrontPage\tutorial\
   

   If you changed the default installation drive or folder during FrontPage Setup, you'll need to adjust the path accordingly.

5. Select the file blackbrd.gif, then click OK.

   The blackboard image is displayed on the page.

The blackboard image you placed on the current page has a black background, which does not fit the theme's light background image. You will now make the image border color transparent, so it will blend in with the white background color of the Tutorial Practice page.

To Make an Image Color Transparent

1. Click the image of the blackboard to select it.

   An image is selected when it is outlined with rectangular file handles. When you select an image, the image toolbar is activated.

   

   Figure 2. The Make Transparent button

2. Next, click the Make Transparent button on the image toolbar.
   
   
3. Move the mouse pointer over the image.

   The pointer changes to a pencil eraser.

4. Click the left mouse button anywhere on the black background behind the blackboard in the image.

   The background of the blackboard image is now transparent, allowing the white background of the page to show through.

Click image to enlarge

Figure 3. Image with a transparent background

Now you will create the hotspots on the image to complete the image map.

To Create Image Hotspots

1. Click the image of the blackboard to select it.
   

   Figure 4. The Rectangle button

2. Next, click the Rectangle button on the image toolbar.

   The Rectangle button creates a rectangular "hotspot" on an image. A hotspot is an area on an image that contains a hyperlink.

3. Move the mouse pointer over the image.

   The pointer becomes a pencil.

4. Move the pencil to the upper-left corner of the words "Interests."
   
   
5. Click and hold the left mouse button, then drag the rectangle until it outlines the words "Interests."

   When you let go of the mouse button, the Create Hyperlink dialog box is displayed. If you let go of the mouse button too soon, you can always adjust the hotspot region after completing the remaining steps.

6. In the Create Hyperlink dialog box, select the file interest.htm, then click OK.

   The text "Interests" on the blackboard image is now a hyperlink.

   Click image to enlarge

   Figure 5. Adding a linked hotspot to an image

FrontPage Tip: Hotspots Can Be Resized
If you want to adjust the size and position of the hotspot, move the mouse over the hotspot borders until you see the resize pointer (a double-headed arrow). You can then click and drag the hotspot borders into position. The associated hyperlink will be retained.

Now experiment on your own and create additional image map hyperlinks from the remaining two lines of text on the blackboard image.

Create a hyperlink from the words "Photo Album" to the page called photo.htm, and a hyperlink from the word "Favorites" to the page called favorite.htm.

Later in this lesson, you will view the Tutorial Practice page in a Web browser, where you will be able to test the image map.

Before continuing, it is a good idea to save your work. You have imported the blackbrd.gif image from your local file system onto a page. FrontPage will save this image to the FrontPage Web so it will be available later when the Personal Web is published in Lesson 3.

To Save the Current Page and Image

Figure 6. The Save button

1. On the FrontPage Editor's toolbar, click the Save button.
   
   
2. In the Save Embedded Files dialog box, click OK to save the image you inserted.

   The blackboard image you have placed on your current page is added to your FrontPage Web and the current page is saved.