This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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.
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.
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