How to create navigation bar in dreamweaver

To create a Dreamweaver navigation bar, follow these steps: Create an HTML document and insert a navigation container DIV (class="nav-container"). Create unordered lists and list items in containers and add anchor elements containing links. Style navigation bar containers, lists, and links in CSS style sheets.

Create a navigation bar in Dreamweaver

Step 1: Create a new HTML document

1. In Dreamweaver, select File > New > HTML.
2. Enter the desired file name in the New HTML Document dialog box and click Create.

Step Two: Insert Navigation Container

1. Place the cursor at the desired location in the HTML code.
2. In the "Insert" menu, select "General" > "DIV".
3. In the Insert DIV dialog box, enter the CSS class "nav-container" and click OK.

Step 3: Create navigation links

1. In the "nav-container" DIV, insert an unordered list (
   ).
   • Add list items (
   • ), each list item corresponds to a navigation link.
   • In each list item, insert an anchor () element that contains the link address and display text.

<code class="html"><div class="nav-container">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div></code>

Step 4: Set the navigation bar style

1. In the CSS style sheet, add styles for the "nav-container" class, including The overall appearance of the navigation bar (such as background color, font, and text size).
2. Add styles to the "nav-container ul" and "nav-container li" classes to specify the style of the navigation link.
3. Add a style to the "nav-container a" class and set the style of the navigation link, including the hover state and active state.

Example CSS Style

<code class="css">.nav-container {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.nav-container ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

.nav-container li {
  padding: 0 20px;
}

.nav-container a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s ease-in-out;
}

.nav-container a:hover {
  color: #ccc;
}

.nav-container a.active {
  color: #000;
  background-color: #ccc;
}</code>

The above is the detailed content of How to create navigation bar in dreamweaver. For more information, please follow other related articles on the PHP Chinese website!