跟我学Dreamweaver Spry设计工具创建横向或纵向的网页下拉或弹出菜单Word格式.docx
《跟我学Dreamweaver Spry设计工具创建横向或纵向的网页下拉或弹出菜单Word格式.docx》由会员分享，可在线阅读，更多相关《跟我学Dreamweaver Spry设计工具创建横向或纵向的网页下拉或弹出菜单Word格式.docx（18页珍藏版）》请在冰豆网上搜索。
并且所生成的菜单栏组件由标准的HTML标签（由<
ul>
、<
li>
和<
a>
标签）所构成。
2、首先新建一个页面文件，并保存它
3、选择“插入”>
“Spry工具条”中的“Spry菜单栏”组件
杨教授工作室，版权所有，XX，2/19页
将弹出下面形式的对话框
选择“水平”或“垂直”等所需要的菜单形式，并最后单击“确定”按钮，本示例选择“水平菜单”。
Dreamweaver将自动地创建出下面形式的“水平菜单”。
也可以使用“插入记录”主菜单栏中的“Spry”子菜单，然后插入菜单栏组件的方式创建。
4、保存页面文件及所生成的CSS和JavaScript文件
（1）确认保存所需要的各个相关的资源文件
杨教授工作室，版权所有，XX，3/19页
（2）在当前站点的根目录中自动地创建出SpryAssets目录
Dreamweaver会在保存页面时自动
在站点中包括所需的SpryJavaScript
和CSS文件，并自动地创建出
SpryAssets目录。
而与给定Spry组件相关联的CSS和JavaScript文件则是根据该Spry组件的类型命名的，因此，很容易判断哪些文件对应于哪些Spry组件。
例如，与折叠Spry组件关联的文件称为SpryAccordion.css和SpryAccordion.js。
（3）各种类型的文件的主要作用
其中的HTML文件定义组件的结构，而响应用户启动事件的JavaScript脚本代码用来控制行为，CSS样式文件用来指定组件的外观。
（4）更改默认的Spry资源文件目录位置
由于默认时，Dreamweaver会在当前的站点中自动地创建出一个SpryAssets目录，并将相应的JavaScript和CSS文件保存到其中。
如果希望将Spry的各个资源文件保存到其它的目录位置，其实是可以更改的。
选择“站点”>
“管理站点”，在“管理站点”对话框中选择本站点并单击其中的“编
辑”按钮。
杨教授工作室，版权所有，XX，4/19页
在“站点设置”对话框中，展开“高级设置”并选择“Spry”类别。
输入想要用于Spry
资源的文件夹的路径并单击“确定”按钮（也还可以单击文件夹图标浏览到其他的文
件目录位置）。
（6）预览现在的效果
杨教授工作室，版权所有，XX，5/19页
5、修改由Dreamweaver所创建的水平菜单为自己所需要的内容——采用可视化方式进行修改
（1）修改水平主菜单项目和其中的子菜单项目为所需要的文字
（2）添加或删除菜单和子菜单
首先选中Spry菜单组件（将看到的蓝色选项卡式轮廓），然后使用属性检查器（“窗口”>
“属性”）
（2）增加或者删除主菜单项目或者子菜单项目
只需要在“文档”窗口中选择一个菜单栏构件，在属性检查器中，可以向菜单栏组件中添加菜单项或从其中删除特定的菜单项。
只需要选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。
杨教授工作室，版权所有，XX，6/19页
（3）修改菜单项目的文本和目标超链接
在“文档”窗口中选择一个菜单栏组件，在属性检查器中，单击第一列上方的加号按钮。
而如果需要重命名新菜单项，可以采用更改“文档”窗口或属性检查器“文本”框中的默认文本的方式实现。
要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。
（4）更改菜单项的顺序
在“文档”窗口中选择一个菜单栏组件，在属性检查器（“窗口”>
“属性”）中，选择要对其重新排序的菜单项的名称。
单击向上箭头或向下箭头可以向上或向下移动该菜单项。
6、修改由Dreamweaver所创建的水平菜单为自己所需要的内容——直接修改所生成的HTML页面
（1）进入“代码”视图，然后进行修改
（2）了解菜单的层次结构关系
菜单栏组件中的HTML中包含一个外部<
标签，该标签中对于每个顶级菜单项。
其中包一定数量的<
li>
标签，而顶级菜单项（<
标签）又包含用来为每个菜单项定义子菜单的<
和<
标签，子菜单中同样可以包含子菜单。
顶级菜单和子菜单可以包含任意多个子菜单项。
由于Dreamweaver在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。
（3）为每个菜单项目定义对应的超链接
由于Dreamweaver生成的是标准的HTML标签和CSS样形文件，因此可以直接在源文件视图中修改菜单项目的文字和目标超链接。
只需要在“文档”窗口中选择一个菜单栏组件，在属性检查器（“窗口”>
“属性”）中，选择要应用链接的菜单项的名称。
在“链接”文本
杨教授工作室，版权所有，XX，7/19页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料框中键入链接，或者单击文件夹图标以浏览到相应的文件。
采用无序列表ul和li组成菜单结构，并设置li中的a的display为block。
、可以在属性面板中修改相关的CSS属性项目和显示的风格7
8、为各个菜单项添加动态帮助提示信息（ToolTip帮助信息）
“属性”）中，选择要为其创建工具提示的菜单项的名称。
在“标题”文本框中键入工具提示的文本。
杨教授工作室，版权所有，XX，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.MenuBarHorizontalli项目，然后在下面的属性面板中，点击float项右边的下拉列
表，将left换为right——将每个菜单项目“右对齐”。
杨教授工作室，版权所有，XX，9/19页
再修改ul.MenuBarHorizontal的显示风格为“右对齐”——新增一个“float:
right;
”
项目
ul.MenuBarHorizontal{
margin:
0;
padding:
list-style-type:
none;
font-size:
100%;
cursor:
default;
width:
auto;
float:
}
（2）再测试修改后的效果——现在菜单被对齐到页面的右边了
杨教授工作室，版权所有，XX，10/19页
当然，也可以双击ul.MenuBarHorizontalli，在打开的CSS规则面板中设置菜单项的格式。
3、改变页面刚加载时的超链接的文本的颜色的实现示例
1）需要修改"
ul.MenuBarHorizontala."
属性项目的定义（
而如果想修改当鼠标移到连接上时连接的背景和文本颜色，那么应该修改"
ul.MenuBarHorizontala.MenuBarItemHover,ul.MenuBarHorizontala.Menu„."
属性项目的定义。
当然，如果所建立的是垂直的菜单，那么MenuBarHorizontal将是MenuBarVertical。
（2）默认文本的颜色主要是由“ul.MenuBarVerticala”或者“ul.MenuBarHorizontala”属性项目控制定义
默认的值为“color:
#333;
text-decoration:
”，修改该值就可以达到改变菜单的文本的颜色。
（3）修改当鼠标指针移过文本上方时文本的颜色
主要是由“ul.MenuBarVerticala:
hover”或者“ul.Men
升级会员 