1分钟内使用Adobe Dreamweaver CS5建立导航菜单

1、第一步，打开Adobe Dreamweaver CS5，如下图。

2、新建立一个站点。选择站点下的新建站点，如下图所示。

3、输入数据如下所示。

4、点击保存，如下图，可以看到建立了一个DW站点。

5、在该站点下，建立一个文件，文件名叫tree.html，然后打开该文件，如下图所示。

6、选择【插入】【Spry】【Spry 菜单】，选择插入水平菜单，如下图所示。

效果如下：

最后在IE中预览效果，如下：

生成的代码目录下载地址：https://files.cnblogs.com/song555/web.rar

下面我们来简单分析一下tree.html中的代码，如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">项目 1</a>
    <ul>
      <li><a href="#">项目 1.1</a></li>
      <li><a href="#">项目 1.2</a></li>
      <li><a href="#">项目 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">项目 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">项目 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">项目 3.1</a>
        <ul>
          <li><a href="#">项目 3.1.1</a></li>
          <li><a href="#">项目 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">项目 3.2</a></li>
      <li><a href="#">项目 3.3</a></li>
    </ul>
  </li>
  <li><a href="#">项目 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

可以发现，整体导航菜单是一个UL标签，如果一个菜单下没有任何子菜单，则此菜单为一个LI标签；否则为一个UL标签。
我们可以通过修改现有的CSS和JS来改变菜单的显示样式，以及添加相应的事件，并且可以通过程序迭代标签来生成动态菜单。