Leaving XWD Because of Immense Frustration

[cursor]

PART 1
the .web file is attached to post #10

In this navbar tutorial there will be eight menu items, or buttons. We'll number the buttons 1 through 8, for simplicity. While buttons 1, 3, 4, 5 and 7 will have dropdown menus, buttons 2, 6 and 8 will not.

Each menu choice has a mouse-off (static/dormant) state and a mouse-over (highlight) state. The mouse-off state is what is what the user sees when the mouse cursor is not over the button. The mouse-over state is the highlighted state that the user sees when the mouse cursor is anywhereon the button.

In this primer, the mouse-off state and the mouse-over state each have a rectangle and a text string which are grouped togther.

For all buttons without dropdown menus, the mouse-off group will be placed on the MouseOff layer. The mouse-over group will be placed on the MouseOver layer.

For all buttons with dropdown menus, popup layers must be created and properly used. Additionally, each popup layer will have its own mouse-over layer.

Start by creating a set of new layers in the Layer Gallery. And for proper rollover effects, they will need to be ordered properly from bottom to top.

mouseOver_btn7
btn7
mouseOver_btn5
btn5
mouseOver_btn4
btn4
mouseOver_btn3
btn3
mouseOver_btn1
btn1
MouseOver
MouseOff

As was mentioned above, a pair of layers are required for each button that has a dropdown menu. Additional layers are not needed for buttons that have no dropdown menus. For this reason, you see no special layers for buttons 2, 6 or 8.

Note that for each popup layer (btn1, btn3, btn4, btn5 and btn7) there is a corresponding mouse-over layer directly above. The rollover layer name [i]absolutely must[i] have "mouseover" as its first eight letters (not case-sensitive).

Make the first button

• Make the MouseOff layer the current layer.
• Create a black rectangle (50x22) with no border.
• Add center-justified, 13pix, white text.
• Center the two items within selection bounds (use Ctrl+Shift+L).
• Group together (Ctrl+G) the rectangle and the white text.
• Clone the group (Ctrl+K).
• Using the Layer Gallery, make the MouseOver layer the current layer.
• With the cloned group selected, move it to the MouseOver layer by clicking the Move button at the top of the Layer Gallery.
• Hit ESC to deselect the group.
• Ctrl+click on the the rectangle portion of the button (not the text). The status line will read, "1 rectangle 'inside' on layer MouseOver".
• Right-mouse-click on any color (on the color bar) that you want to use for your mouse-over highlight, then select "Set fill color".
• With the first set of mouse-off and mouse-over button elements created and on proper layers, let's apply a soft-group. Marquee-select both objects. The status bar at the bottom left of your Web Designer window should read, "2 groups on 2 layers".
• Do an Arrange > Apply Soft Group. The status bar should read, "2 groups (Soft Group) on 2 layers".
• Right-mouse-click on the soft grouped button and open Web Properties. Click on the Link tab. In the Link to Web address field, type # (Shift+3). Click the Apply button. This applies a temporary link that will allow these soft-grouped elements to behave like a button. Leave the Web Properties dialog open.
• Test the button function by clicking the Preview button. Moving your mouse cursor across the button should stimulate the group on the MouseOver layer.

Duplicate the buttons

Now that we have a single, working button, we can move forward. Doing this first means that we don't have to run through this process for each and every button. (What a nightmare THAT would be ...)

Make sure that your button is where you want your first button to be on the web page. On the info bar, check the Position XY values. It's not a bad idea to edit those values so that they are integers.

Make sure that both the MouseOff and MouseOver layers are both visible and unlocked in the Layer Gallery.

Create your second button by selecting your button (soft-grouped) and typing Ctrl+K (this will make a clone of your button, in exactly the same position, and with its elements on precisely the same layers.) Shift the button to the right by holding down the Ctrl key and hitting the right arrow key 11 times (that's 55 pixels).

Marquee-select the two buttons, then hit Ctrl+K to create additional copies. Shift the buttons to the right by holding down the Ctrl key and hitting the right arrow key 22 times.

Do the same to create and position the last four buttons.

Edit the text string of each button. Note that because the buttons are soft-grouped, changing the text value on either layer will automatically change the text string on the other layer.