Creating Buttons for the Home Page

Last nine weeks you created an international business products website. The next step is to add an online order and customer survey form. First open your home page and replace your work links to your six additional pages with Fireworks buttons. You will also need to make a button for your online shopping form. Buttons do not have to be a shapes. Buttons can be text as well. Make sure you include a rollover effect and make sure the background is transparent. To create a text button follow the directions below:

Another good habit is to always trim your canvas. Fireworks makes this easy with the Modify>Trim canvas command. If you need to refresh your memory on Fireworks buttons, go back and revisit the project for last nine weeks.

Since your buttons will all look alike you will only need to paste the JavaScript tag in the head only one time. Make sure to include your onLoad command to your body tag. You will need to paste each button HTML script where your button will appear on your home page. The reason for this is that each button will have different URL addresses and text. Make sure that your buttons match the web site color theme. Insert the HTML code on your page the same way you did last nine weeks.

Another good web practice is the use of tables to display information that you want to appear a certain way. You can then have your buttons appear horizontally across the page you want them to appear. Assign the border the value of 0. This way it looks like the buttons are just on the page all lined up next to each other.

This is the script for the table I created above:

<table width="75%" border="0">
<tr>
<td width="23%">
<div align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but1','','petbut2.gif',1)"><img name="but1" border="0" src="petbut1.gif" width="100" height="50"></a></div>
</td>
<td width="18%"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but11','','petbut2.gif',1)"><img name="but11" border="0" src="petbut1.gif" width="100" height="50"></a></td>
<td width="18%"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but111','','petbut2.gif',1)"><img name="but111" border="0" src="petbut1.gif" width="100" height="50"></a></td>
<td width="18%"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but112','','petbut2.gif',1)"><img name="but112" border="0" src="petbut1.gif" width="100" height="50"></a></td>
<td width="16%"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but113','','petbut2.gif',1)"><img name="but113" border="0" src="petbut1.gif" width="100" height="50"></a></td>
<td width="7%"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('but114','','petbut2.gif',1)"><img name="but114" border="0" src="petbut1.gif" width="100" height="50"></a></td>
</tr>
</table>