Map 1 - sample hotspot graphic

A rectangle on the map corresponds to a web page. To demonstrate this, the graphic below is a clickable map. How can you tell? Drag the screen cursor slowly across the boxes above. Notice that the screen pointer changes to a hand when it is over a hotspot in image. The hand means that this is a spot linked to something else. This map has it worked out as to which boxes go with which files.

One of the black rectangles has not been linked to another web page. Can you find it?

In web speak, the picture above is a client side image map. Hotspots are areas within an image that link to something else, the same way that text links can connect with anything else on the web. That is, this is just one more example of ways to create links between information on the web. Any graphic image can have clickable hotspots added. Search for hotspots and image maps or image mapping if interested in learning more. The above image created in Clarisworks Draw was inserted into Adobe GoLive which was used to map sections of the image to other web pages. Some other web authoring programs which handle image mapping include Claris Home Page, Adobe PageMill, Dreamweaver and FrontPage (example help screen). [Optional and Extra Credit: To make one of your own, search the world for other related information on client side image maps and hotspots. In the web search engines use combinations of these keywords: tutorial client-side image maps.]

Map 2 - Your website map homework

Open and Print out this map. This second map was created using Microsoft Publisher:  websitemap2.jpg   In contrast to map one, map two is a kind of puzzle that needs solving. Which file names go with which boxes on the map? Once this map is printed out, use it as a worksheet. Above the rectangles on this map, write in the file names that were given to you. For example, the home page has this completed, with the filename of index.html above the top box. That is, make a match between the file names of the 14 web pages that will be in your Web folder and this map as you move through Creating section of activity in this chapter. For now, do not concern yourself with the two white colored boxes near the bottom of the map, the ones labeled "Graduate ERIC" and "unitview".

Refer to this map constantly as editing work is done on your web site. Add more boxes as needed as your web site grows in the chapters ahead.