Dreamweaver Web page Production Tutorial: Creating a navigation bar

Source: Internet
Author: User
Tags insert dreamweaver
dreamweaver| Create | navigation | tutorials | Web page

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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.