目录1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 (2)1.1.1Spry菜单栏 (2)1.1.2自定义菜单栏组件的显示风格（修改CSS文件） (9)1.1.3更改菜单栏组件的方向 (15)1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单1.1.1Spry菜单栏Spry 框架是一个JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web 页。
有了Spry，就可以使用HTML、CSS 和极少量的JavaScript 将XML 数据合并到HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。
在设计上，Spry 框架的标记非常简单且便于那些具有HTML、CSS 和JavaScript 基础知识的用户使用。
1、菜单栏组件是一组可导航的菜单按钮当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。
使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。
Dreamweaver 允许Web开发人员插入两种菜单栏组件：垂直组件和水平组件。
并且所生成的菜单栏组件由标准的HTML标签（由<ul>、<li> 和<a> 标签）所构成。
2、首先新建一个页面文件，并保存它3、选择“插入”>“Spry工具条”中的“Spry菜单栏”组件将弹出下面形式的对话框选择“水平”或“垂直”等所需要的菜单形式，并最后单击“确定”按钮，本示例选择“水平菜单”。
Dreamweaver将自动地创建出下面形式的“水平菜单”。
也可以使用“插入记录”主菜单栏中的“Spry”子菜单，然后插入菜单栏组件的方式创建。
4、保存页面文件及所生成的CSS和JavaScript文件（1）确认保存所需要的各个相关的资源文件（2）在当前站点的根目录中自动地创建出SpryAssets目录Dreamweaver 会在保存页面时自动在站点中包括所需的Spry JavaScript 和CSS 文件，并自动地创建出SpryAssets目录。
而与给定Spry组件相关联的CSS和JavaScript 文件则是根据该Spry组件的类型命名的，因此，很容易判断哪些文件对应于哪些Spry组件。
例如，与折叠Spry组件关联的文件称为SpryAccordion.css 和SpryAccordion.js。
（3）各种类型的文件的主要作用其中的HTML文件定义组件的结构，而响应用户启动事件的JavaScript脚本代码用来控制行为，CSS样式文件用来指定组件的外观。
（4）更改默认的Spry 资源文件目录位置由于默认时，Dreamweaver 会在当前的站点中自动地创建出一个SpryAssets 目录，并将相应的JavaScript和CSS 文件保存到其中。
如果希望将Spry的各个资源文件保存到其它的目录位置，其实是可以更改的。
选择“站点”>“管理站点”，在“管理站点”对话框中选择本站点并单击其中的“编辑”按钮。
在“站点设置”对话框中，展开“高级设置”并选择“Spry”类别。
输入想要用于Spry 资源的文件夹的路径并单击“确定”按钮（也还可以单击文件夹图标浏览到其他的文件目录位置）。
（6）预览现在的效果5、修改由Dreamweaver所创建的水平菜单为自己所需要的内容——采用可视化方式进行修改（1）修改水平主菜单项目和其中的子菜单项目为所需要的文字（2）添加或删除菜单和子菜单首先选中Spry菜单组件（将看到的蓝色选项卡式轮廓），然后使用属性检查器（“窗口”>“属性”）（2）增加或者删除主菜单项目或者子菜单项目只需要在“文档”窗口中选择一个菜单栏构件，在属性检查器中，可以向菜单栏组件中添加菜单项或从其中删除特定的菜单项。
只需要选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。
（3）修改菜单项目的文本和目标超链接在“文档”窗口中选择一个菜单栏组件，在属性检查器中，单击第一列上方的加号按钮。
而如果需要重命名新菜单项，可以采用更改“文档”窗口或属性检查器“文本”框中的默认文本的方式实现。
要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。
（4）更改菜单项的顺序在“文档”窗口中选择一个菜单栏组件，在属性检查器（“窗口”>“属性”）中，选择要对其重新排序的菜单项的名称。
单击向上箭头或向下箭头可以向上或向下移动该菜单项。
6、修改由Dreamweaver所创建的水平菜单为自己所需要的内容——直接修改所生成的HTML页面（1）进入“代码”视图，然后进行修改（2）了解菜单的层次结构关系菜单栏组件中的HTML 中包含一个外部<ul>标签，该标签中对于每个顶级菜单项。
其中包一定数量的< li>标签，而顶级菜单项（<li> 标签）又包含用来为每个菜单项定义子菜单的<ul>和<li>标签，子菜单中同样可以包含子菜单。
顶级菜单和子菜单可以包含任意多个子菜单项。
由于Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。
（3）为每个菜单项目定义对应的超链接由于Dreamweaver生成的是标准的HTML标签和CSS样形文件，因此可以直接在源文件视图中修改菜单项目的文字和目标超链接。
只需要在“文档”窗口中选择一个菜单栏组件，在属性检查器（“窗口”>“属性”）中，选择要应用链接的菜单项的名称。
在“链接”文本框中键入链接，或者单击文件夹图标以浏览到相应的文件。
采用无序列表ul和li组成菜单结构，并设置li中的a的display为block。
7、可以在属性面板中修改相关的CSS属性项目和显示的风格8、为各个菜单项添加动态帮助提示信息（ToolTip帮助信息）在“文档”窗口中选择一个菜单栏组件，在属性检查器（“窗口”>“属性”）中，选择要为其创建工具提示的菜单项的名称。
在“标题”文本框中键入工具提示的文本。
9、测试现在的效果（1）允许浏览器执行其中的JavaScript脚本程序（2）最终的结果如下由于Spry 菜单栏组件使用DHTML层实现将菜单显示在其它的HTML标签实体所代表的内容的上方。
如果页面中包含有Flash内容，可能会出现问题。
因为Flash影片总是显示在所有其它DHTML 层的上方，此问题的解决方法是，更改Flash 影片的参数，让其使用wmode="transparent"。
1.1.2自定义菜单栏组件的显示风格（修改CSS文件）1、可以直接对SpryMenuBarHorizontal.css文件进行修改满足项目的特殊要求尽管使用属性检查器可以简化对菜单栏构件的编辑，但是属性检查器并不支持自定义的样式设置任务。
但可以通过修改菜单栏组件的CSS文件中特定的样式规则，并创建根据自己的喜好、设置菜单栏的样式。
基本的实现原理也就是修改SpryMenuBarHorizontal.css 或SpryMenuBarVertical.css 文件中的默认定义的规则。
2、改变菜单的对齐形式的实现示例（1）水平菜单省缺是放置在页面的左边的如果希望将它放到页面的右边对齐。
在CSS视图窗口中可以点击：ul.MenuBarHorizontal li项目，然后在下面的属性面板中，点击float项右边的下拉列表，将left换为right——将每个菜单项目“右对齐”。
再修改ul.MenuBarHorizontal的显示风格为“右对齐”——新增一个“float:right;”项目ul.MenuBarHorizontal{margin: 0;padding: 0;list-style-type: none;font-size: 100%;cursor: default;width: auto;float:right;}（2）再测试修改后的效果——现在菜单被对齐到页面的右边了当然，也可以双击ul.MenuBarHorizontal li，在打开的CSS规则面板中设置菜单项的格式。
3、改变页面刚加载时的超链接的文本的颜色的实现示例（1）需要修改"ul.MenuBarHorizontal a."属性项目的定义而如果想修改当鼠标移到连接上时连接的背景和文本颜色，那么应该修改"ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.Menu…."属性项目的定义。
当然，如果所建立的是垂直的菜单，那么MenuBarHorizontal将是MenuBarVertical。
（2）默认文本的颜色主要是由“ul.MenuBarVertical a”或者“ul.MenuBarHorizontal a”属性项目控制定义默认的值为“color: #333; text-decoration: none;”，修改该值就可以达到改变菜单的文本的颜色。
（3）修改当鼠标指针移过文本上方时文本的颜色主要是由“ul.MenuBarVertical a:hover”或者“ul.MenuBarHorizontal a:hover”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
（4）修改具有焦点的文本的颜色主要是由“ul.MenuBarVertical a:focus”或者“ul.MenuBarHorizontal a:focus”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
（5）修改当鼠标指针移过菜单栏项上方时菜单栏项的颜色主要是由“ul.MenuBarVertical a.MenuBarItemHover”或者“ul.MenuBarHorizontal a.MenuBarItemHover”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
（6）修改当鼠标指针移过子菜单项上方时子菜单项的颜色主要是由“ul.MenuBarVertical”和“ a.MenuBarItemSubmenuHover”或者“ul.MenuBarHorizontal”和“a.MenuBarItemSubmenuHover”属性项目控制定义，默认的值为“color: #FFF;”，修改该值就可以满足要求。
4、改变页面刚加载时的超链接的文本背景颜色的实现示例（1）修改默认的背景颜色主要是由“ul.MenuBarVertical a”或者“ul.MenuBarHorizontal a”属性项目控制定义，默认的值为“background-color: #EEE;”，修改该值就可以满足要求。