creating web buttons in fireworks - for merge

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.

6. Use the rulers to define an area where you will draw your slices.

Tutorial © Jenni Cheeseman 2005E: [email protected]

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

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…


Work area with rulers placed as guidelines for slices

Work area with slices created over each text area.

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.


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)

4. Uncheck the box “Include areas without slices”.


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.

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

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.

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.

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.

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

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


Make sure the “To Canvas” button is not checked when you do this!

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.

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:

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.

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.

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.htmEQUIPMENT coffee/equipment.htmPROCEDURES coffee/procedures.htm

GENERAL INFORMATION info.htmTHE MUSEUM museum.htmTHE FOUNDER founder.htm

OUR SHOP TEAS & COFFEES teascoffees.htmEQUIPMENT equipment.htmSOUVENIRS souvenirs.htmPUBLICATIONS 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.


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.
