Creating a Navbar with Menus in Webstyle
Webstyle makes a breeze of creating a
customized web page navigation bar with cascading menus
(like the example at the top of this page). This usually
very tricky task takes just a few simple steps to complete
in Webstyle.
Step 1 - Choosing
the graphic type and selecting a design
To start I select the type of graphic
I want to create, in this case a NavBar & menu.
Now I can see all of the NavBar designs
available in Webstyle. I can simply scroll through the
choices by clicking the arrows at the top right-hand
side of the dialog box. Since I am going to add a menu
to my NavBar, I want to chose a simple design.
Now I can edit my graphic by clicking
the buttons down the left hand side, which will open
the editing dialogs. As I make changes the image will
be instantly updated in the preview window, making experimentation
easy.
Step
2 - Customizing the button text and colors
of the Navbar buttons
To start creating my custom
NavBar I want to change the appearance of the font and
the color of my buttons, so I click Text which
opens the text editing dialog. To change the font, simply
select the text to change, then select the new font.
The Advanced Text Dialog gives complete control over
the position of the text, tracking, line spacing and
aspect ratio.
Changing the colors is just
as easy. Simply click Color, select the part
of the graphic to change, then choose the new colors.
It's the same procedure for all of the elements of a
graphic. Also, all of the changes take place instantly
and can be viewed in the preview window.
Step 3 - Adding
buttons and menus to my NavBar
Next I want to add some buttons, change
the button text and create some new menus. So I click
NavBars.
To create a New button, I simply double-click
the blue 'Click to Add Button' text and type my button
text. A new button will automatically be created. I
can do the same to create menus and sub-menus. At any
time, I can re-arrange the ordering of the buttons or
the menus simply by dragging and dropping them to a
new location or I can delete them by selecting the button
or menu and clicking Delete.
I can change the button text by double
clicking and simply typing in the new text. URLs,
target windows and Alt text can be added in the same
way, simply double click and type.
Step 4 - Customizing
Menus
The controls for the menu text and
behavior are located in the Menu Properties
area. Here, I can set the menu font (as a brief technical
aside, the text on menus is different from the text
on buttons. The buttons in our NavBar are graphics
whereas the menus are purely HTML - which means that
the fonts you can use for a menu are limited to a
short list of 'browser safe' fonts, which are shown
in this drop down menu). I can also set the font size, bold or italic, menu spacing, the direction the menu will open and how fast it appears and transparency. And I can add borders and separators to the menus.
Step 5 - Exporting
the finished NavBar
Once I have completed the changes to
my NavBar, it's time to export it. To save my NavBar
and menus I just select the Save option. Webstyle
optimizes the graphics to be as small as possible
and displays the size in both pixels and k. The Advanced
Save Dialog also has options to change the number
of colors, dithering and transparency. It's interactive
and instant - the size figures and the image update
as the settings are altered. No more trial and error!
I can preview my NavBar in a browser at this point
if I want to or simply export it. It will be automatically
saved with all the necessary HTML and Javascript.
And that's it, I've created my own custom
NavBar with menus and it only took a couple of minutes.
Here it is, saved out at only 16 colors!
To see more examples of the ease and
power of Xara Webstyle, check out our website at www.xara.com
____________
|
