使用DreamWeaver cs4创建Spry下拉菜单

运用Dreamweaver cs4创建Spry 下拉菜单
1. 打开Dreamweaver cs4,新建一HTML文档。
2. 点击 插入>Spry(s)>Spry菜单栏。

3. 在弹出的对话框中选择你想要的菜单项排列方式，是水平的还是垂直的。

4. 这样你就在页面上添加了一个Spry下拉菜单了，选择菜单，点击属性面板对菜单项进行设置，如下图：

这里有三个列表框，分别代表三级菜单项，最左边的列表框，是最高级别的菜单项，中间为第二级子菜单，右边是第三级子菜单。以下面这个菜单为例来看看这里的设置方法
点击左边的列表框中的“项目1”，然后在属性面板的右边的文本框中输入：“首页”，在下面的连接框中输入首页的地址，如：“index.html”


因为，首页菜单没有子菜单，所以将中间列表框中的项目删除，选中项目，点击列表框上面的“－”号。
现在选择左边列表框的“项目2”，将文本改为“我的博客”，选中中间列表框中“项目2.1”，将文本设为：个人日记“，设置连接属性。如果列表框中没有”项目2.1“”项目2.2“等 ，可点击列表框上面的”+“号来增加，如果列表框中的项目项多于你要的项目项，可选择多余的项目项，点击列表框上面的”－“号来删除。照这个方法将菜单的所有项目设置完成。

5. 点击　窗口>CSS样式，打开CSS样式面板，点击样式面板上的＂全部＂按钮，快速打开SpryMenuBarHorizontal.css．
6. 水平菜单省缺是放置在页面的左边的，如果你想将它放到页面的右边对齐，那么点击：ul.MenuBarHorizontal li,然后在下面的属性面板中，点击float项右边的下拉列表，将left换为right.现在菜单被对齐到页面的右边了．你也可以双击ul.MenuBarHorizontal li，在打开的CSS规则面板中设置菜单项的格式．

７.如果你想改变页面刚加载时的连接的背景和文本的颜色，那么你需要修改："ul.MenuBarHorizontal a."，如果你想修改当鼠标移到连接上时连接的背景和文本颜色，那么你应该修改："ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.Menu…."（注意如果你建立的是垂直的菜单，那么MenuBarHorizontal将是：MenuBarVertical）

８.Spry菜单省缺的字体是与boby或最近一层父级元素的字体是一样的．你可以修改"ul.MenuBarHorizontal."来设置．在CSS样式面板中双击"ul.MenuBarHorizontal."打开CSS规则设置面板，设置一个字体．


９.你可以通过修改："ul.MenuBarHorizontal li."来修改菜单项的宽度，省缺的宽度是８em，em是指的字母的宽度，用em作单位可以很好在让菜单项宽度去适应菜单项的内容．如果你的菜单项文字较多，你可以将宽度设大一点，使菜单项的内容排成一排．

１０.如果你

将主菜单的宽度调整成１０em的话，你应该将："ul.MenuBarHorizontal ul"和"ul.MenuBarHorizontal ul li." 中的宽度设为１０.２em，以保证子菜单与主菜单项一样宽．

差不多就这个样子了，其它的一些CSS样式你可以再设置看看．
点击＂实时视图＂按钮，你就可以测试你的菜单了：


在该网页相同目录下会产生一个SpryAssets目录，里面会有一个SpryMenuBarHorizontal.css文件，打开这个文件，可以进一步学习理解CSS网页设计．当然你也可以精简这个css文件，以优化网页的性能．