1. 准备工作：创建站点和基本页面。
  2. 第一部分：基础文本导航栏 - 快速搭建,无样式。
  3. 第二部分：CSS 样式导航栏 - 让导航栏变得美观、专业。
    • 水平导航栏（无序列表法）
    • 垂直导航栏
  4. 第三部分：交互式导航栏 - 添加悬停效果和当前页面高亮。
  5. 第四部分：制作下拉式导航菜单 - 更高级的交互效果。

准备工作：创建站点和页面

在开始之前，请确保你已经安装了 Adobe Dreamweaver，并创建一个本地站点，这有助于 Dreamweaver 管理你的文件和链接。

dreamweaver导航栏制作教程
（图片来源网络，侵删）
  1. 打开 Dreamweaver，点击顶部菜单的 站点 -> 新建站点。
  2. 站点名称：给你的项目起个名字，"我的网站"。
  3. 本地站点文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为网站根目录（D:\myWebsite）。
  4. 点击 “保存”,站点就创建好了。

在这个站点中创建一个新 HTML 页面：

  • 在 文件 面板中,右键点击你的站点文件夹。
  • 选择 新建文件，将其命名为 index.html。
  • 再创建几个页面，如 about.html, services.html, contact.html。

第一部分：基础文本导航栏

这是最简单的导航栏,只包含文本和链接。

  1. 打开 index.html 文件。
  2. 在设计视图中，输入你的导航菜单项，
    首页 | 关于我们 | 服务 | 联系我们
  3. 选中这些文本，在 属性 面板中，为每个文本项创建链接：
    • 选中 "首页"，在 链接 框中输入 index.html。
    • 选中 "关于我们"，输入 about.html。
    • 依此类推。

现在你就有了一个功能完整的文本导航栏,但它看起来非常朴素。

第二部分：CSS 样式导航栏

专业的导航栏都是用 CSS 来美化的，我们将使用最标准、最推荐的 无序列表 方法来构建导航栏，因为它对搜索引擎更友好,结构也更清晰。

dreamweaver导航栏制作教程
（图片来源网络，侵删）

步骤 1：使用无序列表构建 HTML 结构

  1. 删除之前创建的文本导航栏。

  2. 在设计视图中，点击 插入 -> 结构化数据 -> 列表/项目列表（或者直接切换到代码视图，手动输入）。

  3. 你会得到一个无序列表，在列表项中输入你的导航文字，并为每个 <li> 中的 <a> 标签添加链接。

    <ul>
  <li><a href="index.html">首页</a></li>
  <li><a href="about.html">关于我们</a></li>
  <li><a href="services.html">服务</a></li>
  <li><a href="contact.html">联系我们</a></li>
</ul>

步骤 2：创建 CSS 样式

我们将使用 Dreamweaver 的 CSS 设计器 来创建样式。

dreamweaver导航栏制作教程
（图片来源网络，侵删）
  1. 打开 CSS 设计器 面板（通常在右侧）。
  2. 点击 “源” 下的 号，选择 “创建新的 CSS 文件”。
  3. 给文件命名，style.css，并选择将其链接到 index.html，Dreamweaver 会自动在 <head> 部分添加一个 <link>
  4. 开始为导航栏添加样式。

A. 美化无序列表 (ul)

  • 在 CSS 设计器 中，点击 “选择器” 下的 “添加选择器”。
  • 输入选择器名称：nav ul (或者更精确的 #mainNav ul，如果我们将导航栏放在一个 id 为 mainNav 的 div 中，这是更好的做法)。
  • 在 属性 区域，进行如下设置：
    • Box:
      • Margin: 0 (清除默认的外边距)
      • Padding: 0 (清除默认的内边距)
      • List-style-type: none (去掉列表项前面的点)
    • Display:
      • Display: 选择 Flex (这是创建水平导航栏最现代、最简单的方法)

B. 美化列表项 (li)

  • 添加新选择器：nav li (或 #mainNav li)。
  • Box:
    • Margin: 可以设置 0 10px 来给每个菜单项之间添加一些间距。
    • Padding: 10px 15px (给菜单文字上下左右添加内边距，让它看起来更舒适)。

C. 美化链接 (a)

  • 添加新选择器：nav a (或 #mainNav a)。
  • Text:
    • Text-decoration: none (去掉链接下划线)
    • Color: 设置一个你喜欢的颜色，#333333 (深灰色)
  • Background:
    • Background-color: 可以设置一个背景色，#f0f0f0 (浅灰色)
  • Box:
    • Display: block (让链接充满整个 li 的区域,这样鼠标悬停在整个方块上都会有效果)
    • Text-align: center (文字居中)

你的水平导航栏应该已经有了一个基本的样子，你可以根据需要调整颜色、间距等。

如何制作垂直导航栏？

制作垂直导航栏非常简单,只需要修改一个地方：

  • 在 nav ul 的样式中，不要使用 Flex 布局。
  • 将 Display 属性改回默认的 block。
  • 你可以给 nav li 添加一个 float: left; 来让它垂直排列，或者直接调整 margin 来控制间距。

第三部分：交互式导航栏

导航栏通常需要两个关键交互效果：

  1. 悬停效果：鼠标放上去时改变颜色或背景。
  2. 当前页面高亮：告诉用户他现在在哪个页面上。

添加悬停效果

  • 在 CSS 设计器 中，为新选择器 nav a:hover 添加样式。
  • Text:
    • Color: 改成另一个颜色，#ffffff (白色)
  • Background:
    • Background-color: 改成一个醒目的颜色，#007bff (蓝色)

当你把鼠标移到导航链接上时,它就会变色。

高亮当前页面

这个需要一点小技巧，因为每个页面的“当前页面”是不同的。

  • 方法：修改 HTML 这是最简单直接的方法，你在 index.html 页面，就把“首页”的链接用一个 <span> 或其他标签包裹起来，并给它一个特殊的 class，active。

    <!-- 在 index.html 中 -->
<ul>
  <li><a href="index.html" class="active">首页</a></li>
  <li><a href="about.html">关于我们</a></li>
  ...
</ul>

  • 创建 CSS 样式 在你的 style.css 文件中，为 .active 添加样式。

    • 添加新选择器：.active

    • Background:

      • Background-color: 设置一个和高亮悬停效果相似或不同的颜色，#0056b3 (深蓝色)。

    • Text:

      • Color: #ffffff (白色)

    • 你还可以让 .active 和 a:hover 的样式保持一致,这样看起来更统一。

注意：你需要为每个页面（about.html, services.html 等）都手动修改 HTML，给对应的链接加上 class="active"。

第四部分：制作下拉式导航菜单

下拉菜单更复杂一些，需要 HTML 和 CSS 的紧密配合。

修改 HTML 结构

我们需要在“服务”菜单项下添加一个子列表。

<ul id="mainNav">
  <li><a href="index.html">首页</a></li>
  <li><a href="about.html">关于我们</a></li>
  <li>
    <a href="services.html">服务</a>
    <!-- 这是下拉菜单部分 -->
    <ul class="sub-menu">
      <li><a href="web-design.html">网站设计</a></li>
      <li><a href="app-dev.html">应用开发</a></li>
      <li><a href="seo.html">SEO 优化</a></li>
    </ul>
  </li>
  <li><a href="contact.html">联系我们</a></li>
</ul>

添加 CSS 样式

我们需要用 CSS 来控制这个子列表的显示和隐藏。

  • 隐藏子菜单：

    • 添加新选择器：.sub-menu
    • Position:
      • Position: absolute (让子菜单相对于它的父元素 li 进行定位)
    • Display:
      • Display: none (默认隐藏子菜单)
    • Box:
      • Margin-top: 10px (调整与父级菜单的距离)

  • 当鼠标悬停在父级菜单时显示子菜单：

    • 添加新选择器：#mainNav li:hover > .sub-menu
      • 这个选择器的意思是：当 #mainNav 下的 li 被悬停时，其内部的、直接子级的 .sub-menu 元素...
    • Display:
      • Display: block (显示子菜单)

  • 美化子菜单：

    • 你可以像美化主菜单一样，为 .sub-menu li 和 .sub-menu a 添加样式，比如调整宽度、背景色等。

当你把鼠标移到“服务”上时,下拉菜单就会出现了。

总结与提示

  • 使用 Flexbox：对于现代布局，Flexbox 是创建水平导航栏的首选，比 float 更灵活、更强大。
  • 响应式设计：一个好的导航栏还应该在手机上显示为“汉堡菜单”，这通常需要结合媒体查询（Media Queries）来实现，Dreamweaver 的 CSS 设计器也支持媒体查询功能。
  • 善用代码提示：Dreamweaver 的代码视图有强大的代码提示功能，可以帮助你快速准确地编写 HTML 和 CSS。
  • 多练习：尝试组合不同的 CSS 属性,创造出属于你自己的独特导航栏样式。

希望这份详细的教程能帮助你掌握在 Dreamweaver 中制作导航栏的技巧！