Section 13th create a navigation bar

Source: Internet
Author: User
Tags insert dreamweaver
Create

In many cases, different pages of a Web site use the same navigation bar. Navigation bar is generally composed of several images, click on different images, will link to different pages of the site. Through the unified navigation bar method, we can achieve the unity of the website style, at the same time also facilitates the visitor to jump between different pages.
A more complex navigation bar can be made using Dreamweaver. The navigation bar consists of one or several parts, each of which is made up of images and linked to different page pages. Each part, can be set up to four state of the image, beginning is an initial image, when the mouse moved to this part of the display of another image, can also be set when the mouse clicks the initial image, and mouse clicks when the mouse moved again to this part of the image. Although it can be quite complicated, it is recommended that only one or two states of the image be set for each location in general. Too many images can affect the speed of Web page access.
To set the navigation bar, you first have to prepare the images for each part, each state, and then move the cursor to the location where you want the navigation bar. Click on the icon on the objects panel directly, or click on the Insert/navigation bar in the menu bar to pop up a dialog box.

(Insert navigation Bar dialog box)

A detailed explanation is given below.
Set the first part, and then fill in the name of the location after the element name. You can also not fill in, then Dreamweaver will automatically name it.
Then is the up image, which is the initial image of that part. Then fill in the address of the image you have prepared, or click Browse ... Button selection. Each part can only set up image, the following over image, down image and over while down image three can not be set.
The following is over image, the image that is displayed when the mouse moves to this part.
Below is down image, the mouse clicks on the site after the initial image displayed.
There is also a over while down image, is the mouse click when the mouse moved again to this part of the image displayed.
After the image setup is complete, you can set up a hyperlink to the location. After the clicked Go URL, fill in the address of the file you are linking to, or click Browse ... Button selection. Followed by a Drop-down marquee, which sets the target for the hyperlink.
Then there are options, there are preload images and show "down Image" initially two items.
If the selection box before preload images is selected, all images will be downloaded at the same time as the page is downloaded, although the entire page will be open more slowly, but there will be no delay between the images. If you remove the selection of the preload images, download the original image at the same time, the other images in the turn of the display to start downloading, so that the entire page open faster, but the conversion between the images will be delayed.
If you select the box before initially, the down image is set to the original image. The corresponding over as down image changed to the mouse to move to the location of the image displayed, up to the mouse click on the site after the initial image displayed, over image changed to mouse click when the mouse moved to this part of the image displayed.
Next, the Insert selection box has horizontally and vertically two options. Select horizontally is the navigation bar horizontal expand, select Vertically is the navigation bar to expand vertically.
Finally, a use table is selected, which means that Dreamweaver automatically generates HTML code to separate the navigation bar from the table.
A part of the set up, to add parts, you can click on the top of the dialog box "+" button, then you can follow the previous steps to set up the new parts. To subtract a part, select it in the nav Bar elements selection box, and then click the "-" button above the dialog box.
Each part of the navigation bar is arranged in the page from left to right or from top to bottom, in the order that it is up and down in the selection box in the nav bar elements. To change the order in which they are arranged on the page, first change the order in which they are arranged in the Nav Bar elements selection box. In the Nav Bar elements selection box, select the part where you want to change the order, click on the arrow in the direction of the dialog box to move the position up and click the downward arrow to move down.



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.