Tables and Image Maps in FrontPage

CS 102

Oct. 28, 1998

This exercise will introduce you to the basics of tables and image maps in FrontPage. Tables are an HTML mechanism for controlling the relative placement of objects on a page. They can also be used to temporarily change the background color --- say, if, you want a rectangle of blue on your yellow background.

Image maps are a way of associating URLs to ``hotspots'' within an image, just like links associate URLs to phrases in the text of a web page.

Tables

1. Open your homepage web site and create a new web page within the site.

2. Follow the exercise on pp. 78--82 in the FrontPage text, creating the tables in the web page you created in the previous step.

3. When you've finished, call me over to have a look. I'll also show you how to select rows and columns of cells and demonstrate some of the table and cell properties.

Image Maps

1. We'll continue to use the page you created for this exercise. Temporarily return to FrontPage Explorer and make sure that the righthand window pane is set to Folder view.

2. Using Internet Explorer, go to the location
   http://phoenix.goucher.edu/~kelliher/cs102/GoucherSports.gif. Drag that image into the Folder view pane.

3. Review the material on pp. 99--101 of the FrontPage text regarding image maps.

4. Insert the Goucher Sports image into your web page.

5. There are four buttons on the left. Using the rectangular hotspots tool, make the following hotspots/URLs associations:
   1. Goucher Athletics: http://www.goucher.edu/athletics/Goucher_Athletics.htm

   2. Men's Sports: http://www.goucher.edu/athletics/Men_Sports.htm

   3. Women's Sports: http://www.goucher.edu/athletics/Women_Sports.htm

   4. Scoreboard: http://www.goucher.edu/athletics/Scoreboards/Score_New.htm

   Now, use the irregular hotspots tool to make the Field House and tennis courts a link to Goucher's homepage.

6. Save the page. Preview it in Internet Explorer, ensuring that all the hotspots work.

Cleaning Up

Once you've finished, return to the Folder view of your homepage site in FrontPage Explorer and delete all the files associated with this exercise. Be careful --- don't delete any of your homepage files!!