7.0

Mouseover (Rollover) Buttons
You will have noticed that most buttons highlight as you move the mouse pointer over them in your
browser. This is called a mouseover, or sometimes a rollover effect. This is all automatic for most buttons
used in the templates or from the Button section of the Designs Gallery
.
For the more advanced user: this mouseover effect is created using Named Layers. In fact the buttons
are Soft Groups that consist of two styles, the mouse-off and the mouse-over styles on separate layers.
The Soft Group means that both layers are changed at the same time when you do anything to the button,
such as change the text, or move or resize it. See the Layers
section below for more detail.
Adding New Buttons
In the Designs Gallery
, each Theme has a collection of button graphics that you can just drag onto the page. Typically there are
two types of button. The ones called Stretch Button will elongate to accommodate the button label text.
In addition there is a Buttons category that has a set of general button designs that can be added to your
page in the same way.
Or you can copy any existing button - this is probably the best way for adding more buttons to a
navigation bar. You can copy / paste, but a much quicker shortcut is to drag with the right mouse button
held down. (This is a general shortcut to copy any object). You can now just edit the text and link as
required.
Tip
: If you hold the "Ctrl" key while dragging it will constrain the drag to be perfectly horizontal or vertical,
making it really easy to create a row or column of buttons.
Button Bars (NavBars)
Most websites, and so most of the template designs we provide, have a row or column of buttons to
navigate around the website or to other places. This is called a Navigation Bar and Xara Web Designer 7
Premium includes special support for these bars. To edit a navbar, double click on it, or right-click and
choose Edit Navigation bar
from the context menu. The Navigation bar dialog opens. Here you can change the button labels, links
and tooltips, add and delete buttons, re-order and even add menus and sub-menus.
When you double-click on the URL field in the dialog, a Link dialog opens which is the same dialog used
to set links on normal objects, as described earlier in this chapter and in detail in the Web Properties
Dialog chapter. Because you can't apply a transition effect to a navigation bar link, the Link transition
controls are grayed out.
In the Navigation Bar Properties dialog you can also turn on the Site navigation bar
option. This makes your bar automatically appear on new pages you add to your site and buttons/links
are added to the bar automatically for each new page. However you can't edit your bar on canvas when
this option is turned on ? you can only edit it using this dialog.
To update a navigation bar across all pages, if it's not an automatic site navigation bar, just right click and
choose Repeat on all pages
. This will make the button bar a repeating object and copy it from the current page onto all other pages.
Read the Navigation Bars Chapter
for full details about Navigation Bars.
Page 143