Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------ Using both the House Style and Sketch Diagrams documents as your guide, this tutorial will show you, step-by-step, how to create a Navigation Bar using Macromedia Fireworks. While this tutorial details the creation of a specific navigation bar please feel free to substitute any of the settings for your own should you feel confident enough to experiment. That said, your navigation bar should match the settings detailed in your House Style and Sketch Diagrams documents. [A] Launching Macromedia Fireworks 1. Open Macromedia Fireworks. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 1

2. When Fireworks first loads you will be given 2 choices: (a) Open a recent item (b) Create new Unless you are editing an existing Navigation Bar project (in which case select Open and find your document) click Fireworks File under the Create New option. 3. The New Document dialogue box will open. You will then be asked to input a Canvas Size for the project. Bearing in mind the size of the Navigation Bar you have already specified in your Sketch Diagrams document, you will need to input a width and height large enough to surround the Navigation Bar when fully-extended. For example, if your Navigation Bar is made up of 5 buttons that are 120 pixels wide and 40 pixels high, then the total length would be 600 pixels (120 x 5 = 600) with a total height of 40 pixels. However, add to that a series of drop-down buttons of the same dimension (120 x 40) then the total height would increase by 40 pixels for each new drop-down button you add. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 2

The diagram below (Diagram 1) shows a navigation bar comprising of 5 buttons horizontally, with a further 3 drop-down buttons vertically. Each button is 120 pixels x 40 pixels and so the total area required for the navigation bar, when fully-extended, would be 600 pixels (120 x 5) by 160 pixels (40 x 4). (Diagram 1) In the example below (Diagram 2), I have added a 2 pixel space between each button which will increase the overall size required for the canvas. The space is not essential but it will enable your buttons to stand out from one another. (Diagram 2) Remembering the original size of the buttons (120 x 40) and now adding 2 extra pixels either end, top and bottom, and between each button, the canvas size is now made up of the following dimensions/pixels: 2 + 120 + 2 + 120 + 2 + 120 + 2 + 120 + 2 + 120 + 2 = 612 pixels (horizontal) 2 + 40 + 2 + 40 + 2 + 40 + 2 + 40 + 2 = 170 pixels (vertical) Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 3

It s important to remember that the canvas size must be large enough to contain all of the graphical items that go to make up your navigation bar. If the canvas is too small then some items will not be visible in the finished graphic. Once you are clear on the size of canvas required to contain your navigation bar, input the width and height in the boxes provided in the New Document dialogue box. Make sure the Resolution is set to 72 - Pixels/Inch The Canvas Color can be set to the same colour as your webpage background if the colour is solid. If the background colour of your webpage is patterned then set the Canvas Color to Transparent, that way the pattern will still show through. For this tutorial I want to use a background colour of white, so select the White option. Click OK. ------------------------------------------------------------------------------------------------------------------------- If you need more help understanding navigation bar dimensions or assistance calculating the size of your canvas then please ask your teacher for help. ------------------------------------------------------------------------------------------------------------------------- Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 4

[B] Canvas Area and Workspace Tools Layers Workspace Canvas The canvas area is the white section in the centre of the screen. The dimensions of the canvas are displayed in the bottom right-hand corner of the workspace (circled) The workspace is the area around your canvas. Image the workspace is a piece of card and that the canvas is hole cut out of it. The workspace sits in front of the canvas, and so the canvas is an area behind the workspace that is visible through the hole. Any items not place directly on the canvas will be hidden behind the workspace. In the example below, a circle has been created and placed slightly off the canvas in the bottom left-hand corner. Notice how the workspace covers the area of the circle not on the canvas. Important Any items placed off the canvas will be behind the workspace and will not appear in the finished graphic. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 5

[C] Creating shapes and positioning 4. Select the Rectangle tool button on the Vector tools section of the main Toolbar (left-hand side of the workspace). Note If the Rectangle tool is not showing then you must click and hold the button to display a list of available shapes. From the available list, click on the Rectangle tool to select it. Move the mouse pointer to the canvas area and draw an approximate shape for your button. Don t worry about the colour or getting the exact shape/size yet, we will fine-tune it next. With the rectangle shape drawn we now need to input the exact pixel values so that the button will be the right size for our navigation bar. With the rectangle selected (it will have blue squares in each corner as shown above) move your attention down to the Properties box at the bottom of the screen. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 6

The Properties panel allows you to change various things about the selected item. Size, colour, edge (the border around it), and texture, etc. Once you re a little more confident with Fireworks you may want to experiment with these settings. However, for now the only settings we need to change are the size and colour. The values shown in the example above (W:87 and H:25) will, no doubt, be different to the values shown in the properties for your rectangle. If the Properties panel does not look like the example above make sure the rectangle you created is selected. Input the width and height for the rectangle/button as decided previously in your Sketch Diagrams document. In the example below I have added the values mentioned earlier in this tutorial (120 x 40). Select the required colour for the rectangle/button from the Fill Colour menu. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 7

With the rectangle/button correctly formatted, it s now time to duplicate it (copy and paste) the required number of times to form the horizontal buttons that make up the navigation bar. You don t need to bother with the drop-down menus at this point as these are created differently. 5. Select the rectangle and click Edit > Copy (or use the [Ctrl] + [C] keyboard shortcut). With the rectangle copied, click Edit > Paste (or use the [Ctrl] + [V] keyboard shortcut). The newly pasted rectangle will be placed directly over the original and so it may look like nothing happened. Click and drag the rectangle to the upper-left hand corner of the canvas and then, using the [Directional Arrows] on the keyboard, position the rectangle so that it touches the top and left edges of the canvas/workspace. When positioned correctly there should be none of the white canvas visible above and to the left of the rectangle. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 8

Once positioned correctly, ensure the rectangle is still selected and then, using the [Directional Arrows] on the keyboard once more, move it to the right 2 pixels by clicking the [Right Arrow] twice, and then down 2 pixels by clicking the [Down Arrow] twice. Each click/press of the [Directional Arrows] is equal to 1 pixel. 6. Copy and paste the remaining 3 rectangles and then position them as detailed in Step 6 so that each rectangle/button is 2 pixels away from its neighbour and 2 pixels down from the top of the canvas. Example showing the correct position of all 5 rectangles with a 2-pixel space around all edges. ------------------------------------------------------------------------------------------------------------------------- Again, if you re creating a slightly different navigation bar to the one detailed, feel free to position your rectangles as and where you decided previously. ------------------------------------------------------------------------------------------------------------------------- 7. Save the Navigation Bar project as a Fireworks PNG (*.png) file to your Unit 21, AO3 folder using the name Navigation Bar. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 9

[D] Turning shapes (symbols) in buttons Okay, so you ve created and positioned all of the horizontal rectangles in readiness for your navigation bar. Now we must change each rectangle into a button so that users can interact with the navigation bar and can, in theory, access different areas of your website. Remember, you re not actually creating the website to accompany this navigation bar, but you are creating graphics that are usable. The 5 main buttons we re going to create are: Home Recycling (which will also be our drop-down menu) Forum History Contact Us 8. Select the upper-left rectangle and then click Modify > Symbol > Convert to Symbol (or use the [F8] keyboard shortcut). The Symbol Properties dialogue box will open. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 10

The Symbol Properties dialogue box. Other than naming it, you can also specify what type of symbol it is. There are 3 options: Graphic Animation Button Simply put, a Symbol in Fireworks is a graphical item that, once created, is stored in a Library of available symbols (graphics, animations and buttons) that can be used multiple times within the same project. Once created, symbols can easily be edited to create new graphical items. 9. Input the required name, Home and select the Button type. Working from left to right, modify all of the other rectangles so that they become buttons and are named as shown below. 10. With all rectangles modified into Buttons and named correctly, double-click the upper-left button, the Home button. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 11

11. The Button Editor will open. The Button Editor enables you to edit the various states of a button in Fireworks so that there is some interaction when a user clicks on it. There are 4 possible states: Up - the normal state of the button. Over the state when the cursor is over the button. Down the state when the button is pressed Over when down state when the button is down, and the cursor is over the button In this tutorial we will only use the UP, OVER and DOWN states. The changes to the button between up, over and down should not be huge; you re looking for small changes such as a colour change (text, button or an area of the button), or maybe a shadow appearing. Massive changes to the shape or position of the button simply don t work. For example, the images below show the three states of the button (up, over and down) where only subtle changes have taken place. Up Over Down Normal state of button Text changes colour Background changes colour Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 12

12. With the Button Editor open, we now have to edit each state, starting with the UP state. It s always an idea at this stage to double-check which button you re editing. If you turn your attention to the Tabs at the top of the Button Editor you will see the name of the button (as created by you in the Symbol Properties dialogue box previously). Select the Text tool button on the Vector tools section of the main Toolbar (left-hand side of the workspace), and then click somewhere on the button to open a text box. Don t worry about the position of the text box at this stage as we will align the text box and button shortly. Input the name for the button, in this case: Home Having created your House Style previously, now would be the time to make sure that the font, font colour and font size you choose were applied to the text. I ve chosen the following formatting for these buttons: Font... Arial Rounded MT Bold Colour... White Size... 16 Formatting changes are made using the Properties panel at the bottom of the screen. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 13

Aligning the text and button. 13. Make sure the text box still selected (it will have a blue box with squares down each side). Click Window > Align. The Align menu will open. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 14

The Align menu. Fig.1 Fig.2 Fig.3 Fig.4 The Align menu (Fig.1) allows you to specifically arrange items on the canvas. They can be arranged to the right, left, centre, top or bottom. Items can also be distributed across the canvas, which means selected items can be evenly spaced left to right, or top to bottom. Using the Align menu, arrange the text box as follows: Click the To Canvas button (Fig.2) ensure that the text box is aligned with the button Click the Align horizontal centre button (Fig.3) Click the Align vertical centre button (Fig.4) Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 15

The text box should now be in the exact centre of the button. Close the Align menu if it s in the way, although you will need to open it again later to arrange the other text boxes for the Recycling, Forum, History and Contact Us buttons. With the UP state created we can now move on to the OVER state. 14. Click on the Over tab. 15. Move your attention to the bottom right of the button workspace and click the button named Copy Up Graphic. This places a replica of the UP graphic in the centre of the workspace ready for editing. Change the colour of the text (double-click the text box to enable editing) to a bright yellow. With the OVER state created we can now move on to the DOWN state. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 16

16. Click on the Down tab. 17. Again, move your attention to the bottom right of the button workspace and click the button named Copy Over Graphic. This places a replica of the OVER graphic in the centre of the workspace ready for editing. Using the Properties panel, change the colour of the rectangle/background to a darker red. You may have to pick the Pointer tool first before the rectangle/background can be selected. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 17

With all 3 states created (UP, OVER and DOWN) click Done. The first button (Home) should now look like this: Repeat the process of creating the UP, OVER and DOWN states (Steps 10 to 17) for the remaining buttons Recycling, Forum, History and Contact Us. Once done, your canvas should look like the following example: Save the project, File > Save. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 18

[E] Drop-down menus Okay, you should now have an UP, OVER and DOWN state for all 5 of your buttons, so now it s time to create the drop-down menu for the Recycling button. 18. Select the Recycling button, and then click Window > Behaviors (or use the [Shift] + [F3] keyboard shortcut). The Behaviors window will open. Click on the, and then from the list that appears select Set Pop-Up Menu. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 19

The Pop-up Menu Editor dialogue box will open. The Content tab should be selected. Add the following text for the Recycling button: Because we re just creating the graphic and there isn t an actual website where the Navigation Bar will be used, there is no need to input any information in the Link and Target fields. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 20

Click on the Appearance tab. The Appearance menu will already have defaults in place, and so what is shown above are the settings I have selected. These are as follows: Cells... HTML Vertical Menu Font... Arial Rounded MT Bold (this will need to be typed in) Font Size... 16 Font Alignment... Centred Up State (Text)... White Up State (Cell)... Red Over State (Text)... Bright Yellow Over State (Cell)... Dark Red When creating your own drop-down menu please feel free to experiment with the settings found here, however, for this tutorial input the details exactly as shown. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 21

Click on the Advanced tab. Again, as with the Appearance menu, the Advanced menu will already have defaults in place, and so what is shown above are the settings I have selected. These are as follows: Cells width... 120 (pixels) Cell height... 40 (pixels) Cell padding... 10 Text indent... 0 Cell spacing... 2 Menu delay... 50 Pop-up borders... unchecked (tick removed) Cell width, cell height and cell spacing are set to match the original settings for the menu (button = 120 x 40, with a 2 pixels space between each button). Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 22

Click on the Position tab. Again, as with the Appearance and Advanced menus there will already be default settings in place, and so what is shown above are the settings I have selected. These are as follows: Menu position X:... 0 Menu position Y:... 44 The X value represents left to right, while the Y value is top to bottom. With a value of 44, the Y value places the drop-down menu below the Recycling button, 44 pixels from the top of the canvas. If you remember, the buttons are 120 x 40, and there is a 2 pixel gap above, below, to the left and to the right of each button. Placing the menu 44 pixels from the top of the canvas retains the 2-pixel spacing above and below the Recycling button (2 + 40 + 2 = 44). Click Done when finished. Press [F12] to preview your menu. Save the project, File > Save. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 23

[F] Exporting the Navigation Bar 19. Create a new folder called Navigation in your Unit 21, AO3 folder. 20. With your finished Navigation Bar open in Fireworks, click File > Export (or use the keyboard shortcut [Ctrl] + [Shift] + [R] ). Select the save location as the Navigation folder created in your Unit 21, AO3 folder, and then change the remaining settings (if necessary) to those shown above. Click Export. Your Navigation Bar, together with all necessary graphics, will be saved. Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Page: 24