CREATING WEB BUTTONS IN FIREWORKS

This tutorial will teach you how to create various navigation elements in Fireworks
including:

• Simple Text Buttons

• Rollover Buttons
• Pop-up menus

CREATING SIMPLE TEXT BUTTONS

1. Open Fireworks and create a new file 400px x 200px with a white background.

2. Select the Text Tool (T) and choose Verdana, size 11, black, bold and type the
following text on the work area:

home | products | services | contact us

3. Open the Frames palette (Shift + F2) and create a duplicate frame by doing one of
the following:

Drag Frame 1 down on top of the New Frame icon

and release the mouse

OR

Click the Options pop-up menu and select

Duplicate Frame.

4. In Frame 2, select the text and change the colour to red.

5. Select Frame 1 again.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
6. Use the rulers to define an area where you will draw your slices.

Work area with rulers

placed as guidelines for
slices

7. Select the slice tool (K) and draw a slice over each area of text.

Work area with slices

created over each text
area.

8. Select each slice in turn and rename it in the Properties Inspector.

I called mine btn_home, btn_prod, btn_serv, btn_cont

9. Select the first buttons slice, and then click the round circle in the middle of the
slice.

From the menu, select Add Swap Image Behaviour…

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
10. In the dialogue box which opens, Frame 2 should be selected.

11. Click OK.

12. Repeat Steps 8, 9 & 10 for the remaining slices.

13. Switch to Preview mode to see the rollover.

14. Change back to Original view and click in the grey area to deselect anything that
may be selected.

15. In the Properties Inspector, select Fit Canvas.

16. Open the Optimize panel (F6) and choose a setting for your file.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
 I chose GIF with only 8 colours. As
the text only uses red and black
we can reduce the number of
colours to keep our file size nice
and small.

CREATE NEW FOLDERS FOR YOUR SITE

Before you export the file to Dreamweaver do the following:

1. Create a new folder in My Documents for your web site called Buttons.

2. Open this new folder and create another folder and call it slices.

EXPORTING THE BUTTONS FROM FIREWORKS TO DREAMWEAVER

1. In Fireworks, select File > Export.

2. In the Save In drop-down box, navigate to the Buttons folder

3. In the File name box, type buttons.htm

For Save as type: select HTML and images (default)

For HTML: select Export HTML File (default)

For Slices: select Export Slices (default)

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
 4. Uncheck the box “Include areas without slices”.

5. Check the box “Put images in subfolder”.

Click the Browse… button and select the “slices” folder.

6. Click Save.

INSERT THE FIREWORKS FILE INTO DREAMWEAVER

1. Open Dreamweaver and define a site with your Buttons folder as the root folder.

2. Create a new html page and save it as index.htm.

3. Insert a table with 3 columns and 3 rows.

4. Click inside one of the cells.

5. Select Insert > Image Objects > Fireworks HTML

6. In the dialogue box which opens, check the box “Delete file after insertion”.

7. Use the Browse button to navigate to the buttons.htm file.

8. Click OK

FINISH YOUR WEB PAGE IN DREAMWEAVER

With your Fireworks buttons now in place you can finish building your web page in
Dreamweaver.

Continue on to the next tutorial – Creating Rollover Buttons

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
CREATING ROLLOVER BUTTONS USING THE BUTTON EDITOR IN FW

1. Open Fireworks and create a new page 400px x 200px with a

white background.

2. Select the Rounded Rectangle tool.

Select a colour in the Properties Inspector and draw a

rectangle in the work area.

3. Change back to the Pointer Tool (V) and select the Rectangle.

4. Add a drop shadow to the button using the Effects menu in the
Properties Inspector.

Click here to open the effects menu.

5. With the button selected, select Modify > Symbol > Convert to Symbol (F8).

6. In the Symbol Properties dialogue box which opens, type button for the name and
select Button for the behaviour.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
7. A slice will be added to your button.

8. Double-click on the slice to enter Symbol Editing Mode.

(Click around the edge of the button, not in the centre)

9. Select the text tool, choose a suitable font and colour and check the centre
alignment button.

10. Type the word home on top of the button.

11. Shift select both the button and the text.

Use the Align panel to centre the text on the button.

12. Select the “Over" tab at the top of the work area.

13. Click the “Copy Up Graphic” at the bottom of the work area.

This places a duplicate of the button on the work area.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
 14. Select the text and change its colour via the Properties Inspector.

15. Click Done.

16. Back on the stage, select the button. (You’ll need to hide the Web layer to do this).

17. Hold down the ALT key, and drag and release the button on stage to create a copy
of it.

18. Repeat this 3 times until you have four copies of the button.

It doesn’t matter if your

buttons don’t quite fit on the
work area – we’ll fix this in a
minute.

19. Shift select all four buttons and use the Align panel to distribute them horizontally.

Make sure the “To

Canvas” button is not
checked when you do
this!

20. Select the second button and in the Properties Inspector, change the buttons Text
to “products”.

21. Repeat the previous step for the 2 remaining buttons – Services & Contact Us.

22. You should also rename the slices as we did in the previous tutorial.

23. Click the Fit Canvas button in the Properties Inspector to trim the canvas.

24. Check your buttons in Preview mode.

EXPORTING THE BUTTONS FROM FIREWORKS TO DREAMWEAVER

Repeat the same procedure for the previous tutorial to export your buttons for use in
Dreamweaver. You can use the same folders.

CREATING POP-UP MENUS IN FIREWORKS

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
For this tutorial you are going to create a pop-up menu for the Bramah Tea & Coffee
Museum site. View the finished site in the BramahFinished folder. Double-click the
index.htm file to open it. You will be creating the pop-up menu.

You will be using the Bramah site that you created in the previous Dreamweaver tutorial.

1. Open Fireworks and create a new file 400px x 400px.

2. Select the Text Tool (T) and choose Time New Roman, size 11, colour #DCAF78.

3. On the stage type the following text:

HOME

TEA

COFFEE

GENERAL

OUR SHOP

4.Drag the
Rulers on to
the stage and mark out even spacing between each
block of text.

5. Select the Rectangle Tool, choose no fill and a black

outline in the Properties Inspector and draw a
rectangle over each block of text.

6. Select the Slice Tool and draw a slice over each

block of text. Rename the slices in the
Properties Inspector.

7. Select the slice over the TEA text.

8. Right-click the button in the middle and select Add Pop-up Menu.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
 9. In the Pop-up Menu Editor, click twice in the box underneath the word Text and
type: HISTORY

10. Press the Tab key on your keyboard to move to the box under the word Link and
type: tea/history.htm.

11. Press the Tab key twice to add another word underneath HISTORY. (We’re leaving
the Target blank).

IMPORTANT

Note that I am deliberately typing capital letters for the Text name to match the links we
typed on our web page.

However the Link name needs to be typed in small (lowercase) letters as this is the URL of
the page we are linking to. In this case, our web pages are in a folder called tea, hence the
tea/history.htm.

Complete the Editor so yours looks like this:

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
 Click the Next button.

12. Now we set the appearance for our pop-up menu items.

Select HTML for the Cells.

Choose Times New Roman, Size 11 for the font.

Select #DCAF78 for the Up state Text colour and White for the Cell colour.

Reverse these choices for the Over State.

Your Menu Editor should now look like this:

13.Click Next.

14.For Border and Shadow

Colour choose Black.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
15. Click Next.

16. We don’t need to make any changes here so click Done.

17. Your TEA text will now have a blue outlined rectangular area over the top of it.

18. Place your mouse over the blue rectangles until the cursor changes to a hand
pointer.

19. Drag the blue rectangles until they are adjacent to the menu items.

20. Press F12 on your keyboard to test the Pop-up Menu in a browser.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
 21. If you are not happy with the placement of the Pop-up menu, make adjustments
and preview again. It may take a few adjustments until you are satisfied.

REPEAT STEPS 7 to 21 for the remaining menu items using the information below. You will
notice that you will not need to re-enter the colour & font information – this will be the
same in the Pop-up Menu Editor for each remaining menu item.

MENU ITEM DETAILS:

COFFEE HISTORY coffee/history.htm

EQUIPMENT coffee/equipment.htm
PROCEDURES coffee/procedures.htm

GENERAL INFORMATION info.htm

THE MUSEUM museum.htm
THE FOUNDER founder.htm

OUR SHOP TEAS & COFFEES teascoffees.htm

EQUIPMENT equipment.htm
SOUVENIRS souvenirs.htm
PUBLICATIONS pubs.htm

22. Trim the canvas and use the Optimise panel before exporting.

EXPORTING THE MENU FROM FIREWORKS TO DREAMWEAVER

23. Repeat the same procedure for the previous tutorial to export your buttons for use
in Dreamweaver.

Select File > Export and navigate to your Bramah folder to save your file in.

24. Name the file menu.htm and create a slices folder for the slices.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au
FINISH YOUR WEB PAGE IN DREAMWEAVER

With your Fireworks menu complete, you can finish building your web page in
Dreamweaver.

1. Open Dreamweaver and define a new site selecting the Bramah folder as your root
folder.

2. Open the index.htm file.

3. Click inside the cell you want to place the menu in.

4. Select Insert > Image Objects > Fireworks HTML.

Tutorial © Jenni Cheeseman 2005

E: jennic@willowtree.com.au