Creating a Rollover Button for Your Sections Pages

Now you are going to replace the words that appear on your sections page with buttons. When creating your buttons keep in mind that you want to create a complimentary color theme for your entire website. Open your title made in Fireworks to plan out your color theme. Notice I used the same olives I used in my title on the button shown below.

When Fireworks opens start a new file with canvas dimensions of 150 pixels wide by 150 pixels high. You will trim the canvas later so this might seem a bit large for a button. Select transparent as your canvas color. You will select the rectangle or oval tool to draw the shape of your button. I choose a rectangle for this example:

Drawing the Button:

Click and drag your oval or rectangle to open it on your canvas. If your toolbar is not visible, click window on your standard toolbar then toolbars, and make sure that Tools is checked.

Applying a Stroke:

• On the Properties panel located at the bottom of your document window (if you don't see it click Window > Properties) click the stroke option list and a drop down menu and will appear to show all the different strokes available. Experiment with different stroke effects. Click next the pencil box to choose the color.

Fill Color:

You will now experiment with fill color using the fill toolbar which allows you to apply affect and texture to your button.

• Click the fill tab on the Properties panel to see the drop down menu. These are additional features you can use with your fill. Experiment with several of these fills. Notice that if you choose solid, you have the same color choices you have on your color palette on your canvas by clicking on the color swatch arrow, however, you have a choice of applying a texture to your color.
• If you did not have a color previously chosen, you will have to click the paint bucket to apply your fill.
• When applying texture, continue pouring from your paint can to see the effect the texture makes on your canvas. If you are not seeing a texture appear, make sure you don't have 0% displayed.
• Drop down your arrow and choose a number, the larger the number, the more texture will be applied. The fill I used was a pattern with the leaves format applied. You will need to play around with the different options until you get your desired effect.

Convert the Button to a Symbol:

• Select the button. To select the button, click the arrow tool the click on the shape. You will notice that four blue dots will appear.
• Click Modify > Symbol > Convert to Symbol.

• In the "Symbol Properties" window give your button a name (MyButton) and ensure that the "Button" radio button is checked.

• Hit OK.
  

Adding Text:

• Click the text button (the capital letter A) and type a word Home. Make sure you choose font color and size that will be easily displayed.
• You can also add an effect to the text. I used an inner bevel on the text.
  • First I selected the the word Home by clicking on it.
  • On the Properties Palette click on the filter tab.
  • Drop down your menu box. Check out what each of these items will do. If you choose the multiple tab, you can apply more than one effect to your button.

• You can also assign effects to the entire button. To do this you must select the button by clicking on it with the arrow tool. Then follow the directions above.
• You will now want the text aligned to the center on the button.
• Ensure that the main body of the button is selected (blue dots & lines) by clicking on it.
• Now select the text by clicking on the text while still holding down the "Shift" key.
• Once you have the text selected choose Modify>Align>Center Vertical.
• Now you want to make sure the text is aligned horizontally. Click Modify>Align>Center Horizontally.
• Fireworks has now taken your text and centralized it both vertically and horizontally on the face of your button.
  
• Once your have the text displayed the way you want it to look, you will now assign a behavior to the button that when clicked on it will take you back to your home page.

Create a Roll Over Image:

You are now going to create a "Roll Over" image for the button. Make sure you are viewing your button in "Original" mode as opposed to "Preview" and "Double Click" on it. This action will open a button editing window as shown below. You will notice that the text is not displayed. Don't worry about this right now.

• Hit the "Over" tab and you will be presented with a blank window. Click on the "Copy Up Graphic" button to recreate your blank button image in the "Over" window.

A word here about the Up and Over conditions. The "Up" condition is how your button will look just sitting on your web page. The "Over" condition is how it will look when you roll the mouse over it.

• Now that you have copied the "UP" button graphic into the the "Over" window, we will modify the "Over" image to give us a simple "Over" effect.
• Make sure the image is selected (blue dots) and go open the effect panel as shown below. On the Properties Panel change something on the button, different stroke color, different, fill color, add an effect, etc.

You can play around with different effects, or you can even change the color of the shape you chose to make the button.

• To save the change simply click Done or close the button editing window by clicking on the X in the right top corner.
• Go back to the "Original" view window. The text has reappeared on your button. Check the button out in "Preview" mode and you will see that the "Roll Over" effect kicks in when you pass the mouse over it.
• Click back on the "Original" view tab to add behaviors to your button.
  

Make sure the behavior toolbar is open (Window>Behaviors). You have already applied one behavior, a simple rollover. It is listed in your behavior palette shown below:

• At the behavior panel click the + arrow and select Set Text of Status Bar. In the Message text box type Your Company Name. You may be prompted if you want to include down or over state. Don't check either box. Click OK.

• Click OK to close the Set Text Status Bar dialog box.

Define a Link:

You will now need to define your link and alternate text in your object toolbar.

• Before you can assign a link to the button, you will need to insert a hotspot. Select the Rectangle Hotspot or Circle Hotspot tool from the Web section of the Tools panel.

• Drag the hotspot tool to draw a hotspot over the entire button. Hold down Alt (Windows) or Option (Macintosh) to draw from a center point.
• Your button should now look like the one below.

• We will now include a link to your home page. At the url panel (If you don't see the url toolbar on your canvas, select window on your standard toolbar, then choose url from the drop down list) .
• Click on the button in Fireworks to select it.
• Open the home page of Your Company copy the URL address by clicking in the location box, choose copy, the return to fireworks and click in the url toolbar, with the object tab selected, then click in the url link text area and paste the location in this box.

• Click the plus button shown above to load the link into the url library.

• On the Properties Panel, type in the name of your company in the Alt text box. Notice that your url now appears in the Link text box.

Trim the Canvas:

Getting rid of extra space is no problem in Fireworks. Simply Select Modify > Canvas > Trim Canvas or simply click Fit Canvas on the properties panel.

Save your button, then press F12 to view your button in a browser. Click on the button to see if it will take you to Your Company home page. Due to the restrictions of the server you may not be able to navigate to your page at this time. Continue to the next step of this activity to add your button to your six additional pages then test to see if it will open your home page.

Save as Gif, Png, and HTML:

Now you will place the button on all of your section pages. First you will save your button as a png file by clicking within Fireworks and clicking file>save. Saving as a png will allow you to change your button later. If you only save it as a gif, you will now be able to edit it later.

To save your file in html and gif format, choose File, then export. Save as a gif and html file by clicking in the Save as Type dialog box and select both .

Because you have assigned behaviors to your button, you will have to copy a JavaScript into you document. One JavaScript will be typed in your head section. one part will be added to the body tab and the actual button graphic JavaScript will be put just above the end of body tag (</body). By saving your file in html format, you can open the JavaScript in Wordpad or Notepad. The script will tell you where to copy and paste.

Below shows my JavaScript code. Look at the location in my notepad to see what you will be adding to your head section. Select it then copy the code (Edit > Copy):

Return one of section pages and just below your end of title tag (</title) and just above the end of head tag (</head) paste this code. Your category page should now look like this:

Now we need to copy the part of the body tag from your button html page and paste it into the body tag as shown below:

Now you will copy and paste the JavaScript into the body just above the end of body tag </body> and just below end of table tag </table>.

To align your button to the center place a paragraph tag above the last script with the command align=center. Make sure to end the paragraph tag below the javascript as shown below:

Save you document and view it in a browser. Check to see if your button works. You should have a button on all six category pages.