Create a Webpage for the Left Frame

The left frame webpage will include your buttons that you will create in Fireworks. You will need to go back to your map plan sheet and divide your region into sections and name them (example: North, Northeast, South, etc.) When you have your sections classified you will then create buttons that depict these areas. This time you will create two buttons with the same name because we will be making rollover buttons. The two buttons I created are shown below along with the rollover. You will need to create a home button in addition to your region areas. Also you will need to create a button that will open a page that will tell about the foods common to that region and a button that will open a page that contains a movie of the food you will be bringing to the Bon Appetite festival. You will need to create unique names for these buttons (European Foods, etc.) for your food description and (The History of Sushi, etc.) for your movie you will present at the festival. Make sure you save your buttons as png files in case you need to go back and edit them.

Button 1
Button 2
Home Button
Button 2
European Vacations

To insert the rollover image in Dreamweaver select Insert > Image Objects > Rollover Image:

Insert Rollover

This will bring up the Insert Image Dialog box. You will need to fill in the Image Name and Alternate Text. Make sure the Preload rollover image check box is checked. You will click the Browse buttons to browser to your button 1, button 2 and the webpage you want load when you click on it. Click OK to place your rollover button on the page.

Insert Rollover Image

The last thing you need to do is to indicate where you want the page to load, in this case in the mainFrame frame. On the properties panel with the button selected, from the Target dropdown menu select mainFrame.


View it in a browser to check and see if the rollover works and the pages open in the mainFrame.

Make sure that you add the same background color you used for your top frame page on this page so that it looks seamless. Notice that the button I created has the same pattern fill that my title graphic contains. Also to make your buttons appear closer together you can hold the shift key down while you press enter to place a line break instead of a paragraph break between your buttons. Your buttons should appear vertical down the left side of your page.