Sunday, December 28, 2014

How to create Navigation bars in Dreamwaver?


           A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site.
            Before using the Insert Navigation Bar common, create a set of images for the display states of each navigation element. (It can be helpful to think of a navigation bar element as a button, because when clicked, it takes the user to another page.)

A navigation bar element can have four states:
      ·                    Up: the image that appears when the user hasn’t yet clicked or interacted with the element.
·                    Over: the image that appears when the pointer is moved over the Up image. The element’s appearance changes (for example, it may get lighter) to let users know they can interact with it.
·                    Down: the image that appears after the element has been clicked. Fox example, when a user clicks an element, a new page loads and the navigation bar is still displayed, but the clicked element is darkened to show that it’s been selected.
·                    Over while Down: the image that appears when the pointer is rolled over the Down image after the element has been clicked.
You don’t have to include navigation bar, copy it to other pages in your site, use it with frames, and edit the page behaviors to show different states as pages are accessed.

To create a navigation bar:
1.              Do one of the Following:
·                    Choose Insert > Interactive Images > Navigation Bar.
·                    Select the common tab of the insert bar, and then click the Insert Navigation Bar button.
The Insert Navigation Bar dialog box appears.

Macromedia Dreamweaver, Inserting navigatior bar.

2.                    Give required element name for the first button.
3.                    Insert all images using brose button. All these images must be the same size.
4.                    Enter or Browse hyperlink in the When clicked, Go to URL box.
5.                    Check the preload images box, if you want the images to be automatically preloaded.
6.                    Add additional buttons by clicking the plus button and repeating the steps 3 to 6.
Note: You can also rearrange the order of the buttons with the help of arrow buttons. Use minus button to delete a button.
7.                    At the bottom of the dialog box, choose either horizontally or vertically to insert the navigation bar. Select the Use Tables check box if you would like the navigation bar created in a table.
8.                    Finally click on OK.

To modify a navigation bar:
1.                  Choose modify > Navigation Bar.
The modify Navigation Bar dialog box appears.
2.                  In the Nav Bar Elements list, select the element you want to edit.
3.                  Make changes as necessary.
4.                  Click OK.