跟我学Dreamweaver Spry设计工具——创建横向或纵向的网页下拉或弹出菜单

跟我学Dreamweaver Spry设计工具——创建横向或纵向的
网页下拉或弹出菜单
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
目录
1.1 Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜
单 .................2 1.1.1 Spry菜单栏...................................................................... ........................................2 1.1.2 自定义菜单栏组件的显示风格(修改CSS文件) .............................................9 1.1.3 更改菜单栏组件的方
向 ..................................................................... . (15)
杨教授工作室，版权所有，盗版必究， 1/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
1.1 Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单
1.1.1 Spry菜单栏
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菜单栏”组件
杨教授工作室，版权所有，盗版必究， 2/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
将弹出下面形式的对话框
选择“水平”或“垂直”等所需要的菜单形式，并最后单击“确定”按钮，本示例选择“水平菜单”。

Dreamweaver将自动地创建出下面形式的“水平菜单”。

也可以使用“插入记录”主菜单栏中的“Spry”子菜单，然后插入菜单栏组件的方式创建。

4、保存页面文件及所生成的CSS和JavaScript文件
(1)确认保存所需要的各个相关的资源文件
杨教授工作室，版权所有，盗版必究， 3/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
(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的各个资源文件保存到其它的目录位置，其实是可以更改的。

, 选择“站点”>“管理站点”，在“管理站点”对话框中选择本站点并单击其中的“编
辑”按钮。

杨教授工作室，版权所有，盗版必究， 4/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
, 在“站点设置”对话框中，展开“高级设置”并选择“Spry”类别。

输入想要用于 Spry
资源的文件夹的路径并单击“确定”按钮(也还可以单击文件夹图标浏览到其他的文
件目录位置)。

(6)预览现在的效果
杨教授工作室，版权所有，盗版必究， 5/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
5、修改由 Dreamweaver所创建的水平菜单为自己所需要的内容——采用可视化方式进行修改
(1)修改水平主菜单项目和其中的子菜单项目为所需要的文字
(2)添加或删除菜单和子菜单
首先选中Spry菜单组件(将看到的蓝色选项卡式轮廓)，然后使用属性检查器(“窗口”>“属性”)
(2)增加或者删除主菜单项目或者子菜单项目
只需要在“文档”窗口中选择一个菜单栏构件，在属性检查器中，可以向菜单栏组件中添加菜单项或从其中删除特定的菜单项。

只需要选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。

杨教授工作室，版权所有，盗版必究， 6/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
(3)修改菜单项目的文本和目标超链接
在“文档”窗口中选择一个菜单栏组件，在属性检查器中，单击第一列上方的加号按钮。

而如果需要重命名新菜单项，可以采用更改“文档”窗口或属性检查器“文本”框中的默认文本的方式实现。

要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。

(4)更改菜单项的顺序
在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”>“属性”)中，选择要对其重新排序的菜单项的名称。

单击向上箭头或向下箭头可以向上或向下移动该菜单项。

6、修改由 Dreamweaver所创建的水平菜单为自己所需要的内容——直接修改所生成的HTML页面
(1)进入“代码”视图，然后进行修改
(2)了解菜单的层次结构关系
菜单栏组件中的 HTML 中包含一个外部<ul>标签，该标签中对于每个顶级菜单项。

其中包一定数量的< li>标签，而顶级菜单项(<li> 标签)又包含用来为每个
菜单项定义子菜单的<ul>和<li>标签，子菜单中同样可以包含子菜单。

顶级菜单和子菜单可以包含任意多个子菜单项。

由于Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。

(3)为每个菜单项目定义对应的超链接
由于Dreamweaver生成的是标准的HTML标签和CSS样形文件，因此可以直接在源文件视图中修改菜单项目的文字和目标超链接。

只需要在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”>“属性”)中，选择要应用链接的菜单项的名称。

在“链接”文本
杨教授工作室，版权所有，盗版必究， 7/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料框中键入链接，或者单击文件夹图标以浏览到相应的文件。

采用无序列表ul和li组成菜单结构，并设置li中的a的display为block。

、可以在属性面板中修改相关的CSS属性项目和显示的风格 7
8、为各个菜单项添加动态帮助提示信息(ToolTip帮助信息)
在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”>“属性”)中，选择要为其创建工具提示的菜单项的名称。

在“标题”文本框中键入工具提示的文本。

杨教授工作室，版权所有，盗版必究， 8/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
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——将每个菜单项目“右对齐”。

杨教授工作室，版权所有，盗版必究， 9/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
, 再修改ul.MenuBarHorizontal的显示风格为“右对齐”——新增一个“float:right;”
项目
ul.MenuBarHorizontal{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
float:right;
}
(2)再测试修改后的效果——现在菜单被对齐到页面的右边了
杨教授工作室，版权所有，盗版必究， 10/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
当然，也可以双击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)修改当鼠标指针移过菜单栏项上方时菜单栏项的颜色
杨教授工作室，版权所有，盗版必究， 11/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
主要是由“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;”，修改该值就可以满足要求。

(2)修改当鼠标指针移过背景上方时背景的颜色
主要是由“ul.MenuBarVertical a:hover”或者“ul.MenuBarHorizontal
a:hover”属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。

3)修改具有焦点的背景的颜色 (
主要是由“ul.MenuBarVertical a:focus”或者“ul.MenuBarHorizontal
a:focus”属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。

(4)修改当鼠标指针移过菜单栏项上方时菜单栏项的背景颜色
主要是由“ul.MenuBarVertical a.MenuBarItemHover”或者
“ul.MenuBarHorizontal
a.MenuBarItemHover” 属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。

(5)修改当鼠标指针移过子菜单项上方时子菜单项的背景颜色
主要是由“ul.MenuBarVertical a.MenuBarItemSubmenuHover”或者
“ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover”属性项目控制定义，默认的值为“background-color: #33C;”，修改该值就可以满足要求。

5、修改菜单文字的字体的实现示例
(1)Spry菜单缺省的字体是与<boby>标签或最近一层父级标签元素的字体是一样的
杨教授工作室，版权所有，盗版必究， 12/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
但可以通过修改"ul.MenuBarHorizontal."属性项目重新设置，只需要在CSS
样式面板中双击"ul.MenuBarHorizontal."属性项目以打开CSS规则定义设置的面板，设置一个新的字体。

(2)如下图所示
6、调整菜单项的宽度实现的示例
(1)可以通过修改"ul.MenuBarHorizontal li."属性项目达到修改菜单项的宽度
可以通过更改菜单项的<li>和<ul>标签的width属性来更改菜单项尺寸，菜单项目缺省的宽度是8em(em是指的字母的宽度，用em作单位可以很好地让菜单项宽度去适应菜单项的内容)。

但如果菜单项中的文字较多，也可以将宽度设大一点，使菜单项的内容排成一排。

(2)实现的示例
比如，如果希望将主菜单的宽度(由“ul.MenuBarHorizontal li”属性项目控制)调整成10em，则应该要将:"ul.MenuBarHorizontal ul"和
"ul.MenuBarHorizontal ul li."属性项目中的宽度设为10.2em，以保证子菜单与主菜单项一样宽。

杨教授工作室，版权所有，盗版必究， 13/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
最终的结果如下
7、定位子菜单实现的示例
Spry 菜单栏子菜单的位置由子菜单<ul>标签的margin属性项目控制定义，只
需要找到“ul.MenuBarVertical ul”或“ul.MenuBarHorizontal ul”和
“ul.MenuBarHorizontal ul ul”属性项目的规则定义，将其中的默认值“margin: -5% 0 0 95%;”更改为所需的值。

杨教授工作室，版权所有，盗版必究， 14/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
1.1.3 更改菜单栏组件的方向
可以将菜单栏组件的方向从水平更改为垂直或者从垂直更改为水平，只需要修改菜单栏所对应的 HTML 代码并确保 SpryAssets 文件夹中有正确的 CSS 文件。

1、在 Dreamweaver 中打开包含水平菜单栏组件的页面
2、在系统中首先需要生成垂直菜单栏组件所需要的CSS样式文件
(1)在页面中插入垂直菜单栏组件
这可以通过插入垂直菜单栏组件(“插入”>“Spry”>“Spry 菜单栏”>“垂直”)并保存本页面，如下图所示。

(2)将产生出下面的结果
(3)然后再保存本页面，此步骤可确保在站点中包含与垂直菜单栏相对应的正确的 CSS 文件。

杨教授工作室，版权所有，盗版必究， 15/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
(4)最后将保存到磁盘中
(5)注意如果在本站点中的其它页面中已有由Dreamweaver生成的垂直菜单栏组件
则不必再插入新的垂直菜单栏组件，而只需将系统中已经生成的SpryMenuBarVertical.css文件附加到本页面中(方法是在“CSS 样式”面板——“窗口”>“CSS 样式”中单击“附加样式表”按钮)。

3、更改水平菜单栏的控制脚本程序为垂直菜单栏的控制脚本程序
(1)找到MenuBarHorizontal 类
在“代码”视图(“视图”>“代码”)中，找到 MenuBarHorizontal 类(注意MenuBarHorizontal 类是在菜单栏(<ul id="MenuBar1"
class="MenuBarHorizontal">的容器<ul>标签中定义的)，如下图所示。

杨教授工作室，版权所有，盗版必究， 16/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
(2)将其更改为 MenuBarVertical类名称
(3)在页面的最后部分查找到创建水平菜单栏脚本代码片段
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> 改变为下面的代码
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script>
当然，如果需要将垂直菜单栏转换为水平菜单栏，则应该要添加为前面形式的
脚本代码。

(4)修改<link>标签引用垂直菜单栏的CSS样式文件SpryMenuBarVertical.css
如果页面中不再包含任何其它水平菜单栏构件，请从文档头中删除指向先前
杨教授工作室，版权所有，盗版必究， 17/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
MenuBarHorizontal.css 类的链接
最后为下面的结果，并保存本页面及相关的CSS及JavaScript脚本文件。

也就是将页面中的如下的<link>标签<link
href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet"
type="text/css" /> 改变为:
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
(5)切换为设计视图，将发现水平菜单栏现在改变为垂直菜单栏
4、在浏览器中测试修改后的结果
杨教授工作室，版权所有，盗版必究， 18/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
5
、所生成的菜单的代码的兼容性比较好
在该网页相同目录下的SpryAssets目录中有一个SpryMenuBarHorizontal.css 文件，打开这个文件，可以进一步学习理解CSS网页设计。

也可以精简这个CSS文件，以优化网页的性能。

课后练习:
菜单组件应用到项目示例，优化导航菜单条。

将Spry。