Adobe Fireworks CS3 Tutorials
Button Symbols / Creating Navigation Bars
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Button Symbols / Creating Navigation Bars)
In this movie, I demonstrate how to create Navigation Bars in Fireworks CS3. A navigation bar, or Nav Bar is a group of buttons that provide links to different areas or pages of a Website. Nav bars generally remain consistent throughout a site, providing a constant method of navigation no matter where the user is within your site. This is great because then the user only needs to remember or learn one navigation system. The Nav Bar looks the same from Web page to Web page, but in some cases, the links may be specific to the function of each page. Here's an example of two Nav Bars, and what's great about the nav bars in Fireworks CS3 is notice that they communicate to each other, so, in this nav bar, the Down State is a brown, so notice that at any one time as I press on the buttons in the nav bar, only one of the buttons can be brown. So here, in this case, Page 2 is brown, but if I press on Page 3, it tells Page 2 to go ahead and go to the Up State. Now what's great is that I'll have two nav bars on this page and both of them will communicate to each other, so although right now I have Page 3 in the Down State, if I click on this button here, the second button of my first nav bar, notice that Page 3 has been changed into the Up State, so with these two nav bars, at any one time, I can only have one button that's in the Down State, indicating to the user which page they are currently residing, or which button they've currently pressed. And notice only one button can be pressed at a time. So this is a pretty nice feature. Let me demonstrate how to create these nav bars in this movie. Let's start by creating a New Blank canvas. And now let's draw out a rectangle on the canvas, and let's convert this rectangle into a button symbol by selecting it and then choosing from the Main menu, Modify, Symbol, Convert to Symbol. Let's choose Button as a symbol. Let's label this "button 1," like so. click OK. Notice that I get a slice automatically placed over that button, but if I double-click on the button that'll bring me into the Button Editor. Let's go ahead and go to the Over State and let's make a copy of the Up State button and let's change the color. And now let's go to the Down State; I'm going to need three states here to really demonstrate these nav bars. Let's copy the Over graphic, and also change the color again, so I have an Up button, and Over button color, and a Down button color. Let's change that Down button color so it's a little bit different, so I can really see this animation as it's going. Let's go ahead and select the graphic and let's go with a dark green like so. So, let's click on Done, and there is my button. Let's go to the Preview pane, and notice that it changes blue when I roll over it, and it changes green when I press it. Let's go back to the original tab here. Now what I need to do is Clone this button, or make copies of it, and luckily Fireworks has a command just to do this. If we select the button and then choose from the Main menu, Edit, Clone, down here at the bottom of the menu, it creates a copy of that button. Now what I can do is just drag it down below the other button, and let's go ahead and make another clone of the button, so now I have three buttons in my nav bar, and because they're based on the same symbol, if I go now to the Preview, notice they all animate as buttons, and if I click on a button, it changes green to the Down State, and what's great is automatically these buttons communicate to each other so I can only have one button pressed at any one time. These are kind of like a radio button you have on your car radio in that you can only have one station playing on your radio at one time, so if my first button is clicked and I click on the second button, the first button will become unclicked. Now, if I were to create an additional button and then clone it again to create a different nav bar, let's say that these two nav bars are on the same page, they would, in fact behave, just like these two nav bars and they would communicate to each other so that at any one time, I only have one nav bar in the Down State. That's just a great way of indicating to your visitors what page they're on, no matter how many of these nav bars and how many buttons are in your nav bar, it'll tell them, based on the color, that they're on page 2, or page 1 or so on. And the last thing you'll probably want to do is select each of the buttons in the nav bar. Let me go back to the original tab here. Select each of the buttons and then go ahead, here in the Link box, add a unique URL to that button. You could also add unique labels by applying text over each of the buttons to complete your nav bar. Let me now move on to the next movie and demonstrate how to create pop-up menus.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
