Navigation

Also to create a navigation bar, we use different graphics whose view changes, depending on the action the user performs.

A button in the navigation bar can be found in four positions, so I have to download the file for each of the four hits for the button.

Up: This image is displayed when there is no user interaction on this button.

Over: This image is displayed when the user moves the mouse over the button.

Down: the image that appears when the user presses the button.

 

Over while down: this image appears when the user is on this page of our site.

I have saved all these buttons in the “images” folder subdirectory “buttons” of the sitemap “Electro_GC_03”.

 

 

 

Up                                  Over                                 Down                          Over down

                                    

To add a navigation bar, we first place the cursor on the place where we want in the page.

Click the “Insert” button in the menu bar, choose “Image Objects” and click “Navigation”.
This opens the navigation pane “Insert Navigation”. This seems rather complicated, but nothing is less true. Piece of cake.

The first is what we enter in the “Element Name:” a name for the first button.

In this case, the “Home” button, so I type “Home”, what did you think?

In the box below (“Up Image”), we select, by clicking the “Browse” button, the image to be displayed when this switch is on “standby” position. In other words, if no interaction from the visitor has taken place.
So the image “Home_up.jpg”.

In the box below (“Over Image”), we select, by clicking the “Browse” button, the image will be displayed when the visitor’s mouse, I mean his computer mouse, moves over the button.
So the image “Home_over.jpg”.

In the box below (“Down Image”), we select, by clicking the “Browse” button, the image to be displayed when the visitor clicks on this button.

In the box below (“Over While Down Image”), we select, by clicking the “Browse” button, the image to be displayed when the visitor on this page of our site.

 

In the next section a possible alternative text for the visitor with the “Show Pictures” option in his browser disabled.

 

And the box “When clicked, Go to URL:” we keep it blank for this page. It is the Home page in which I am adding the navigation, that is why.

 

We already discussed the “Preload Images”.

 

And the “Show Down image initially”, select the button when you are setting this page to represent where you are working. In other words, make the visitor clear that this button is not clickable again, as long as he is in this part of the site.

I am currently adding the navigation bar to the index page of the site, that is the Home page, so Dreamweaver image on this page is in the “image down” view.

For the “Insert” box, choose the “Horizontal” or “Vertical” option, depending on how you want the navigation bar. In this case, “horizontal”.

And finally we have the checkbox “Use Tables”.

When you check this box, the various buttons in different cells of a table.

Repeat these steps for all the buttons you want to add the navigation bar, by clicking the + button at the top of the dialog.

By clicking on the – button you can remove buttons from the navigation bar. Select it first in the “Navigation Elements”.

By selecting a button in the “Navigation Elements” and clicking on the buttons with the arrow pointing up or down, you can change the order of the buttons.

Click OK when you’re done.

Now you do not have to repeat these operations for each page.

Select all the buttons in the navigation bar, click the Ctrl + C on your keyboard.

Open the page where you want to insert the navigation bar. Select the location on your page where you’d like to have.

And click the buttons Ctrl + V on your keyboard.

This places the navigation on this page.

What you should do is 1, for the button that is ‘down’, remove the link to this page and select the “Show Down image initially” box.

And 2, for the disabled button, enter the “When clicked, Go to URL:” field and uncheck the box “Show Down image initiaaly”.

Click on the “Change” button in the menu bar and select “Change Navigation” in the drop-down menu.

Attention,when the different pages are in different directories, you will more than likely need to enter different views of images.

 

 

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats