|
 THE Button and Navbar Tool allows you to create button bars for web pages. This tutorial shows you how to create a static button bar - a separate JavaScript rollover tutorial covers the creation of rollover states for this bar.
I've already drawn a button and I've decided I'd like a back bar for my design (it's optional) - in this case I'm going to use a simple black square with a bevel, and I've positioned it behind my green button.
So first thing is to select the Navbar Tool, then marquee select the entire graphic and click New on the infobar.
This opens the dialog box that lets you control the look and layout of the button bar.
| |
|
Notes:
- Button stretching: selects how the buttons stretch when you enter text - normally you would probably want them to extend (stretch from the middle) or scale, but you can set them to remain static (that is not stretch at all when you add text)
These are all one-button NavBars. On the left is the original button; the other buttons show the different options. Notice the different shape of the rounded ends for Extends and Scales
- Buttons are all: selects whether all of the buttons stretch together when you add text to one (a great time saver; it means you don't have to manually alter the button sizes individually to keep them all an equal size) or whether you want to be able to alter them independently)
On the left a NavBar with Equal size; on the right, Independent sizes
- Groups do not stretch: allows you to exclude parts of the design from the stretching. This isn't normally an issue, but you can imagine certain designs where you might want a part of the button not to stretch even when the rest does. In such a case make the non-stretching part a group and select 'groups do not stretch'
The blue arrow is a group. On the left groups stretch; on the right, no stretching.
|
| |
Click 'Create' - and there, we've created a 4-button bar.
If you don't quite like the final result you can do some post-creation editing as well, for example changing the number of buttons to three:
Notice how the back bar re-scales automatically.
You can change the color of all the buttons very easily - you don't have to edit them individually. The button design has some shading over the top - you could, for example, change its color to yellow:
you can then use the new design to change the other buttons:
Changing the text on the buttons is just as easy. Select the Text Tool, click on the button and start typing. Notice how all the buttons and back bar automatically stretch with the text - you don't have to redraw anything!
You can also add a hyperlink to the button. Simply right click over the button, choose Web Address from the menu....
....and enter the URL (web address).
| 
