Page 58 - Xara Web Designer Premium

58 Getting Started

The MouseOff and MouseOver Layers
All the main objects on your website are placed on the bottom layer, usually called
MOUSEOFF. Buttons that highlight when you move the mouse over them on the web page
have an alternative graphic on the layer called MOUSEOVER.

If you open the PAGE & LAYER GALLERY you can show or hide any layer by checking or
un-checking the visibility icon (the eye symbol). This is a way of showing what your
MouseOver elements will look like on your page.

The current layer is always indicated with an arrow in the PAGE & LAYER GALLERY - the
MouseOff layer in the above diagram - and this is the layer that all new objects are drawn
on. To place objects on any other layers just click the required layer in the PAGE & LAYER
GALLERY, ensure the eye and the lock icon are open for that layer.
Note: The MouseOver layer must always be above, that is on top of, the MouseOff layer,
as shown in the above example.

To edit the objects on a layer both the 'eye' and 'lock' icons have to be open - this means
you can see and edit the layer (as shown above in the MouseOff layer).

Mouseover (Rollover) Buttons
Almost all the ready-made buttons from the ONLINE CONTENT CATALOG have a mouseover
effect in Web Designer Premium. These are created by having two versions of each
button, the main one on the MouseOff layer and a 'highlight' one on the MouseOver
layer.

Normally you do not need to know or care about this because both buttons behave as
one - the changes you make to one, such as editing the label text, are reflected on the
other version. If you move, drag or resize a button on the MouseOff layer, the other
version on the MouseOver layer will change as well, even if you can't see it. This is done
using Soft Groups (on page 118).