Creating Buttons for Your Sections Page

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 that describes your region (Example: Northeast, etc.) 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 click the word Home to select it. You can see the effect dialog box below.
  • Click on the effect tab on the Properties Panel.
  • 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.

Export your button to your student folder.

Continue creating buttons for all your sections. Don't forget to make a home button that will return viewers to the home2.html.