"Active" Web Page

So I'm working on a new 3 page website and have designed my own nav tabs for each page. What I want to accomplish is rather simple, just need a push in the proper direction and here's what I need to happen. I need the tab in each page to show as "active" when a visitor is on each page. In other words, I have a Hotel, Flights, and Cars page with buttons linked to each page respectively. When someone clicks on the "Cars" page, I need the tab on that page to show as "Active" (highlighted to be different than the other tabs.) I' know that I will need another tab for each page that will show the highlighted and active state, and I'm sure that it will be accomplished with a mouseover, but I'm not quite sure how to effectively use the mouseover in WD6.

Any ideas? Thanks so much.

Hi PixelPusher,

In Web Designer 6 the active page will be "highlighted" by default when you use the Create Navbar feature.

If you want the Active look of the buttons to be different than the mouse over state you can add a mousedown layer. WD6 will use the mouse down state as the image for the currently active page.

The attached .web file contains a simply 3 state menu. The pages within the file only contain the navbar, however the buttons are work for all the pages.

The thumbnail image shows the 3 button states. Mouse Off is at the top, Mouse Over is in the center, and Mouse Down is at the bottom.

Let me rephrase:

I have two images. I want one to be the mouseoff and the other to be the mouseover. Obviously the mouseoff will be a link to another page. The mouseover state will become the highlighted nav on the corresponding page and the mouseoff will then become the mousover... does that make sense?

What is the easiest way to make that happen?

I think that is what Bill is referring to.

You want the nav buttons to also reflect the current page and this is something WD 6 does.

Prior to WB 6 and you can still do this, I would build two sets of buttons. One set was the buttons for the site that I would copy to all pages.

The second set was a high lighted button, which I would replace on the appropriate page. See the secondary pages on www.gwpriester.com

It is not automatic, but it works just fine.

A word of warning, if you use the Arrange > Repeat on All Pages to copy the buttons on each page, do not use Arrange > Update Repeating Items because this will really mess up your custom buttons.

Thank you for the responses. Where I seem to be having trouble is in the layers galley. Do I need to create a new layer for each of the images and if so, how do I link those images to the appropriate layer in the layer gallery, thus creating my mouseover state?

There are slide show templates that allow you to import a set of images and create an automatic slide show. (Designs Gallery > Photo Galleries).

There is supposedly a way to import a set of photos and automatically replace the ones in the template. I did not have any success with this. However, you can drag and drop a photo onto one of the thumbnail photos to replace it. When you are done you have a slide show (there are quite a few different templates) without having to worry about layers, linking, etc.

You can also create your own slide show from scratch. Create a separate layer for each photo and place each photo on the appropriate layer. Then link the appropriate button to the appropriate layer. These layers are pop up layers and you can link to them either as a direct link (Links > Link to Popup Layer) or as a MouseOver effect, (Mouseover > Link to Popup Layer).

Sorry, but you lost me with that response. I'm not creating a slideshow, I'm creating a three button navigation and need to know exactly how to bring my images in to use as a nav button with a rollover effect.

See attached.

That's it, but I need an explanation to know how it was done. I'm adding buttons to an existing page (two for flights, two for hotels, and two for cars.) One will be for the mouseoff and the other for the mouseover. A total of 6.

Open the Page & Layer gallery and study the layer layout, then select a tab (on the page design) and look at the Navigation Bar Properties ;)

I really appreciate the help, but so far I have not had any luck achieving the desired rollover effect using my own images. There really should be a more intuitive way to do this. Perhaps I'm over thinking the process, but I cannot get it to work. I've imported my own images, grouped them, un-grouped them, placed them on mouseoff and mouseover layers... nothing works or makes any sense to me. A straight on tutorial is what I need I guess.

Quote:

---

I need an explanation to know how it was done

---

Step by step.

Create 3 page document and name each page as you want.
Create 3 states of one button. The off state, the mouseover state and the state that will represent the currently selected tab.
Each state has to be a group (Ctrl+G) that contains a text and some graphics.
Place the off state on the MouseOff layer.
Place the hover state on the MouseOver layer just on top of the off state.
Create "MouseDown" layer just on top of the "MouseOff" alyer and place your selected state on it.
Select all three groups and soft-group them (Ctrl+Alt+G).
Now with this soft group selected go to main menu "Arrange / Create Navigation Bar...".
Check the "Site navigation bar" box an click OK.

Now you have tabs for every page and the navbar is added to all pages.

Here is a thread that deals with the same question. At this post I've provided an attachment with a complete description of what goes on which layers.

Why not attach your xara file to your next post. I'll be glad to take a look. =)

Tried but with no success. The site currently has buttons, but with no rollover effect. Sorry, but this is really frustrating as it is probably so simple and I am making it so hard. The file is attached.

I really really appreciate those trying to steer me in the right direction.

Hi Pixelpusher, does this help ? (assuming you are using XWD6)

Quote:

---

Originally Posted by Pixelpusher

The site currently has buttons, but with no rollover effect.

---

Drwyd's explanation should give you a good idea of how I redid your buttons with regards to the MouseOff and MouseOver layers. Next, I softgrouped each button pair and then all 3 button pairs by selecting Arrange/Apply Soft Group, gave it a name (Repeating:navbar) by selecting Utilities/Names and, finally, had the navbar repeated on all pages by selecting Arrange/Repeat on all pages.

Take a look at the file. Hope this helps...

That is exactly what I have been trying to achieve! I'm still not sure how you got them on the layers, but I intend to study them and get a grip on this.

Thanks so very much.

Quote:

---

Originally Posted by Pixelpusher

I'm still not sure how you got them on the layers, but I intend to study them and get a grip on this.

---

Very simple: I copied the individual button elements from wherever they were placed and pasted them into the appropriate layers one at a time. Using Solo mode (the 'S' button on the Page & Layer Gallery) can help you with this.

Thank you again for helping with this. I'm going to play with it until I master it. I absolutely love WD6 and I will master it the same as I've mastered Dreamweaver and Expression. Just have to rethink as WD6 presents a different way of creating websites... and I love the new freedom that I have found!