Dreamweaver Tutorial: Creating a navigation bar

Create a navigation bar

If you do not use frames, you can set the navigation bar on each page and the navigation bar to set up a set of link buttons for viewers to choose to use. There are many forms of buttons, the following is introduced by the mouse through the image transformation button of the composition of the Navigation bar production: (navigation bar at the top of the page)

"Mouse over image" is the image that changes when the visitor points to the image with the mouse pointer.

"Mouse over image" consists of two pictures: The original image displayed when the page was originally loaded, and another image displayed when the visitor moved the mouse pointer over the original image.

Tip: Before you make a button image, make sure that each button's image has the same width and height (in pixels).

Do the following:

Open Homepage (index.htm)

In the document window, place the insertion point where you want the navigation bar to appear. Generally in the navigation bar above to place a banner image (logo), navigation bar is arranged in the bottom of the logo position.

Select Insert > Image object > Navigation bar. The pop-up dialog box is as follows:

In the Insert Navigation Bar dialog box, click the top Plus + button to fill in the corresponding text box as shown in the ①②③④⑤ above. That completes the addition of a button.

Then, click the Plus + button at the top of the page to add another button. Repeat the steps above until the button you want is complete.

Check "pre-loading images" and select "Horizontal" in the Insert menu at the bottom of the dialog box. Tick "Use Table".

Click OK to close the dialog box and create the navigation bar successfully.

Save the page.

Press F12, preview your navigation bar, if satisfied, you can put the page "Save As" other pages, specify a different name. For example: p1.htm, p2.htm ... Wait How many times you save depends on the number of buttons you have. Then, open the other pages to edit them separately.

"Note": the mouse pointer passes through the button, the image changes, only in the browser to see the effect.