Page 419 - Xara Web Designer Premium

Navigation Bars 419

immediately start editing the label for the new button. Press return to complete the label
edit, or click away from the label.

You can edit any button label by first clicking the appropriate row to select it and then
clicking again in the first column to start editing the label.
To set the link on a button, double click on the URL field, or if the row is already selected
you can just single click on it. The WEB PROPERTIES LINK DIALOG appears. This should
look familiar as it’s the same Link dialog (on page 301) that you use for adding other links
to your page, so you have the same link options available. A few options are disabled
because they are not applicable to NavBar and menu links, such as the pop-up photo
option which only works when applied to a photo.

You can also set the tooltip text for each button using the 3rd column. Edit the text the
same way as you edited the label text. In the exported web site the text entered appears
as a small pop-up tooltip when the mouse pointer is held over your button or menu entry.

Creating Your Own Mouseover Buttons
You can create your own mouseover buttons from scratch by drawing the necessary
elements from rectangles, text, etc. Just draw the main parts of the button on the
MouseOff layer (remember to group it (on page 45)) and place the corresponding
'highlight' version on the MouseOver layer. As long as the MouseOff version has a web
address link, then the MouseOver version will automatically be displayed as you move
the mouse over it on the web page. (The MouseOver layer must be on top of the
MouseOff layer).

In other words, you give the main object a web address using the link option, and
then select the MouseOver Layer in the PAGE & LAYER GALLERY, and place the
required mouseover versions of your button on this layer so it overlaps the linked
object.

Technical note: Any graphic object on the MouseOver layer will be displayed as long as
at least 50% overlaps with the object on the MouseOff layer. The two versions of
mouseover buttons are kept in sync by using the Soft Groups feature. When you select
the button on one layer, it automatically selects the Soft Grouped version on the other
layer, even if the layer is switched off. When you edit the text of the button on one layer,
it's automatically synced with the other version of the button.

To ensure the text on both the Off and Over states changes when you edit either, Soft
Group the buttons on both layers. To do this you will need to enable both layers in the
PAGE & LAYER GALLERY, and lasso select around both buttons. The status line should tell
you if you have everything selected. Select "ARRANGE" > "APPLY SOFT GROUP". Now when
you edit the text on the Off layer it will also change on the over layer, even if it's hidden.
(Note this only works if the Off and Over text are the same to start with, and relies on the
objects being Soft Grouped).
Once you have a working button, you can easily turn it into a navigation bar. Select the
button (along with its MouseOver state if it has one) and then choose "ARRANGE" >
"CREATE NAVIGATION BAR". The navigation bar dialog appears allowing you to configure