Creating the Home Frame
Create a new text file in Notepad to represent the Home page
that will describe the Haunted Bed and Breakfast Inns and a pitch of why you
would want to participate in this type of vacation as compared to other vacations.
Name this file home.html. You will use your creativity in designing the page,
and write a narrative description of why this vacation is a one in a lifetime
adventure. You will use an image map of the United States that will interact
with visitors that will act as a link to your four additional pages. The Haunted
Bed and Breakfast Inns are grouped according to region, Northeast, Southeast,
Southcentral, Southwest, Northwest, and West. You will save the map below to
your student folder, then attach six hotspots to the regions so visitors can
choose the area of the United States with a click of the mouse. Follow the directions
below to create an image map that will display on your home page:
- Save the map below to your student folder and then open
it in Fireworks.
- With the pencil tool, draw around the area you wish to
highlight. I highlighted the West area below. Don't worry about your line,
your next step will be to correct any lines that are not where you want them.
Your map should look like the graphic below:
- Notice that my lines are not exact. I can correct this
with the white arrow tool outlined above. You can drag the blue squares to
where you want your outline to be.
- Now you will need to add a hotspot to each of the outlines
above. First you must select all three areas by holding down the Shift key
and then left mouse click all lines till they are all selected, as shown above.
All three areas should be selected. You will insert a hotspot by clicking
Insert, then select Hotspot.
- You will then be prompted "Multiple items are selected.
Create one hotspot or multiple hotspots?", select multiple. For the rest
of the regions, you will select singe hotspots because you will only be outlining
one area. Your map should now look like the one below:
- Just like you did with the button in Just Plain Stupid,
you will need to give the url address to where you will go when the area is
clicked on. While you don't have the pages made
yet, look at the table below to get the name you will use. First make your
basic web page (<html>, <head>, <title>, </title>,
</head>, <body>, </body>, </html> and then between
the body tags type in "This is where my West area inns will go. You will
do this for all six pages.
|
Additional Pages
|
Save as HTML
|
| Northeast |
neinns.html |
| Southeast |
seinns.html |
| Southcentral |
scinns.html |
| Southwest |
swinns.html |
| Midwest |
mwinns.html |
| West |
westinns.html |
Here is a map that shows the regions in order to select the correct area:
- Make sure all three areas are selected. Open the objects
toolbar (Window>Objects). In the URL address type in the name of the page
you want to go to when the mouse is clicked, as in the example above I would
type in westinns.html. In the alt box I would type West Haunted Bed and Breakfast
Inns as shown below:
- Click F12 to see how your page looks in a browser. Return
to Fireworks and continue adding hotspots to the remaining five areas.
- Export your file as both html and images and name it imagemap.
Insert the code on your home page the same way you did for your button in
Just Plain Stupid.
