Create a new text file in Notepad to represent the Home page that will describe your travel business and a pitch of why someone 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. You will need to include a narrative description of why this vacation is a one in a lifetime adventure. You will use an image map of your region that will interact with visitors that will act as a link to your six additional pages. Web designers use hotspots to make small parts of a larger graphic interactive, linking areas of web graphics to a URL. You can create an image map in Fireworks by exporting HTML from a document that contains hotspots.

Your travel website will be divided into regions that you have planned out. For example, the United States is divided into the following six regions: Northeast, Southeast, Southcentral, Southwest, Northwest, and West. You will need to find a colorful map of your region because this is the first thing your viewers will see when they visit your page. Save the map to your student folder, then attach six hotspots to the regions so visitors can choose the area with a click of the mouse. Follow the directions below to create an image map that will display on your home page. I will use the United States as an example. Your regions will be different, but the construction of the image map will be the same.

• Save the map of your designated area to your student folder and then open it in Fireworks.
• Select the polygon hotspot tool then left click around one of your areas. Your map should look like the graphic below:

• Now you will need to add a hotspot to the selected region.
• Select Edit > Insert > Hotspot. If you selected more than one object, a message appears asking whether you want to create a single rectangular hotspot covering all objects or multiple hotspots, one for each object.

• Your image should now look like this:

• Now you will need to assign the url address to where you will go when the area is clicked on. Now would be a good time to create the additional pages that will showcase your attractions. You will do this for all your region areas. To create your section pages follow the instructions below:
  • Open a new notepad.
  • Type in the tags to create a web page:

• Save your page as a web page. File > Save As > All Files> Assign a Name followed by the extension .html.

• Make sure the area you want to add a link to is selected. You can use the Property inspector to assign URLs, alternate text, targets, and custom names to hotspots. You can also change the shape of your hotspot. If the Property inspector is minimized, click the expander arrow in the lower-right corner to see all properties.

• Click F12 to see how your page looks in a browser. Because this is saved to a temporary folder it will not link to your link page. Return to Fireworks and continue adding hotspots to the remaining five areas.
  
• Export your file as both html and images and name it imagemap by clicking File > Export.

• Assign the image map a name and select HTML and Images as Export Type:

Now place this image map, centered on the page, the image tag (<img src=nameofyourfile.gif>):

Go to your student folder and double click on your home page to open it.

• When the file opens your will see the image map but when you place your mouse over it nothing happens. Why? We now need to open the image map html file to copy and past the behavior created in Fireworks on your home page.
• Double click on your image map html page to open it.

• Next we need to get to the source file. Click File > View Source:

• This opens the source code that you will need for your page. Your are going to replace the <img src="imagemap_usa.gif"> with your code generated in Fireworks shown below. Your code will be similar but not exactly the same. Copy this code and paste it between the <p align=center> and </p> tags on your home page replacing your image code:

• Save your home page again then right click on your home page and select refresh.

• Now click on your regions to see if the hotspots take you to your external pages.