Site hosted by Angelfire.com: Build your free website today!

Project 3 - Class Page

Sample Notes

Project 3 is the Class Page. We've made a sample page where students can talk about themselves, their school and teacher, their hobbies and the place they live. It's a little more complicated than Project 2, as some of the second level pages (the ones you get to when you click on choices from the Homepage) have more options. This kind of site needs a bit of planning - it's best to do it on paper before you start making it - to make sure that people can navigate the pages easily and logically. To personalise this sample, just change the descriptions and the names, and find some photos of your region and city. Don't forget to change the e-mail address in the Write to Us option.

As well as the normal text links, there are also image links, and an image map. An image map is a large image which has defined clickable areas on it (in this example it's a photo of some students) - when you click on a certain area of the image, you go to a certain page. You can find out more about image maps in the HTML Reference Library from TUCOWS.

To make an image map, you need to open an image in Paintshop Pro and, using the pointing tool, make a note of the co-ordinates of areas you want to be clickable - these areas are then used to define the image map in the HTML page. Each image map clickable link should look something like this:

<AREA SHAPE="RECT" COORDS="10,10,49,49" HREF="john.htm">

This defines a rectangle on the image, starting in the top left corner at 10,10 and ending in the bottom right corner at 49,49. When someone moves their mouse over this part of the image, they see the hand icon and can click on the image. When they do, john.htm is opened. No problem!