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

1、跟我学Dreamweaver Spry设计工具创建横向或纵向的网页下拉或弹出菜单跟我学Dreamweaver Spry设计工具创建横向或纵向的网页下拉或弹出菜单杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 1.1 Dreamweaver Spry菜单栏创建横向或纵向的网页下拉或弹出菜单 .2 1.1.1 Spry菜单栏.2 1.1.2 自定义菜单栏组件的显示风格(修改CSS文件) .9 1.1.3 更改菜单栏组件的方向 .15 杨教授工作室，版权所有，XX， 1/19页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 1.1 Dreamweaver Spry菜单栏创建横向

2、或纵向的网页下拉或弹出菜单 1.1.1 Spry菜单栏 Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件(如折叠构件和菜单栏)，向各种页面元素中添加不同种类的效果。 在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和 JavaScript 基础知识的用户使用。 1、菜单栏组件是一组可导航的菜单按钮 当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜

3、单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。 Dreamweaver 允许Web开发人员插入两种菜单栏组件:垂直组件和水平组件。并且所生成的菜单栏组件由标准的HTML标签(由 、 和 标签)所构成。 2、首先新建一个页面文件，并保存它 3、选择“插入”“Spry工具条”中的“Spry菜单栏”组件 杨教授工作室，版权所有，XX， 2/19页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 将弹出下面形式的对话框 选择“水平”或“垂直”等所需要的菜单形式，并最后单击“确定”按钮，本示例选择“水平菜单”。Dreamweaver将自动地创建

4、出下面形式的“水平菜单”。 也可以使用“插入记录”主菜单栏中的“Spry”子菜单，然后插入菜单栏组件的方式创建。 4、保存页面文件及所生成的CSS和JavaScript文件 (1)确认保存所需要的各个相关的资源文件 杨教授工作室，版权所有，XX， 3/19页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 (2)在当前站点的根目录中自动地创建出SpryAssets目录 Dreamweaver 会在保存页面时自动在站点中包括所需的 Spry JavaScript 和 CSS 文件，并自动地创建出SpryAssets目录。而与给定Spry组件相关联的CSS和JavaScript 文件则是

5、根据该Spry组件的类型命名的，因此，很容易判断哪些文件对应于哪些Spry组件。 例如，与折叠Spry组件关联的文件称为 SpryAccordion.css 和 SpryAccordion.js。 (3)各种类型的文件的主要作用 其中的HTML文件定义组件的结构，而响应用户启动事件的 JavaScript脚本代码用来控制行为，CSS样式文件用来指定组件的外观。 (4)更改默认的 Spry 资源文件目录位置 由于默认时，Dreamweaver 会在当前的站点中自动地创建出一个 SpryAssets 目录，并将相应的 JavaScript和CSS 文件保存到其中。如果希望将Spry的各个资源文件保

6、存到其它的目录位置，其实是可以更改的。 , 选择“站点”“管理站点”，在“管理站点”对话框中选择本站点并单击其中的“编辑”按钮。 杨教授工作室，版权所有，XX， 4/19页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 , 在“站点设置”对话框中，展开“高级设置”并选择“Spry”类别。输入想要用于 Spry 资源的文件夹的路径并单击“确定”按钮(也还可以单击文件夹图标浏览到其他的文件目录位置)。 (6)预览现在的效果 杨教授工作室，版权所有，XX， 5/19页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 5、修改由 Dreamweaver所创建的水平菜单为自己所需要

7、的内容采用可视化方式进行修改 (1)修改水平主菜单项目和其中的子菜单项目为所需要的文字 (2)添加或删除菜单和子菜单 首先选中Spry菜单组件(将看到的蓝色选项卡式轮廓)，然后使用属性检查器(“窗口”“属性”) (2)增加或者删除主菜单项目或者子菜单项目 只需要在“文档”窗口中选择一个菜单栏构件，在属性检查器中，可以向菜单栏组件中添加菜单项或从其中删除特定的菜单项。只需要选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。 杨教授工作室，版权所有，XX， 6/19页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 (3)修改菜单项目的文本和目标超链接 在“文档”窗口中选择一个菜单

8、栏组件，在属性检查器中，单击第一列上方的加号按钮。而如果需要重命名新菜单项，可以采用更改“文档”窗口或属性检查器“文本”框中的默认文本的方式实现。 要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。 (4)更改菜单项的顺序 在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”“属性”)中，选择要对其重新排序的菜单项的名称。 单击向上箭头或向下箭头可以向上或向下移动该菜单项。 6、修改由 Dreamweaver所创建的水平菜单为自己所需要的内容直接修改所生成的HTML页面 (1)进入“代码”视图，然后进行修改 (2)了解菜

9、单的层次结构关系 菜单栏组件中的 HTML 中包含一个外部标签，该标签中对于每个顶级菜单项。其中包一定数量的标签， 而顶级菜单项( 标签)又包含用来为每个菜单项定义子菜单的和标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。 由于Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。 (3)为每个菜单项目定义对应的超链接 由于Dreamweaver生成的是标准的HTML标签和CSS样形文件，因此可以直接在源文件视图中修改菜单项目的文字和目标超链接。只需要在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”“属性”)

10、中，选择要应用链接的菜单项的名称。在“链接”文本杨教授工作室，版权所有，XX， 7/19页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 框中键入链接，或者单击文件夹图标以浏览到相应的文件。 采用无序列表ul和li组成菜单结构，并设置li中的a的display为block。 、可以在属性面板中修改相关的CSS属性项目和显示的风格 78、为各个菜单项添加动态帮助提示信息(ToolTip帮助信息) 在“文档”窗口中选择一个菜单栏组件，在属性检查器(“窗口”“属性”)中，选择要为其创建工具提示的菜单项的名称。 在“标题”文本框中键入工具提示的文本。 杨教授工作室，版权所有，XX， 8/1

11、9页 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 9、测试现在的效果 (1)允许浏览器执行其中的JavaScript脚本程序 (2)最终的结果如下 由于Spry 菜单栏组件使用DHTML层实现将菜单显示在其它的HTML标签实体所代表的内容的上方。如果页面中包含有Flash内容，可能会出现问题。因为Flash影片总是显示在所有其它 DHTML 层的上方，此问题的解决方法是，更改 Flash 影片的参数，让其使用 wmode=transparent。 1.1.2 自定义菜单栏组件的显示风格(修改CSS文件) 1、可以直接对SpryMenuBarHorizontal.css文件进行修改

12、满足项目的特殊要求 尽管使用属性检查器可以简化对菜单栏构件的编辑，但是属性检查器并不支持自定义的样式设置任务。但可以通过修改菜单栏组件的 CSS文件中特定的样式规则，并创建根据自己的喜好、设置菜单栏的样式。 基本的实现原理也就是修改SpryMenuBarHorizontal.css 或 SpryMenuBarVertical.css 文件中的默认定义的规则。 2、改变菜单的对齐形式的实现示例 (1)水平菜单省缺是放置在页面的左边的 , 如果希望将它放到页面的右边对齐。在CSS视图窗口中可以点击:ul.MenuBarHorizontal li项目，然后在下面的属性面板中，点击float项右边的下

13、拉列表，将left换为right将每个菜单项目“右对齐”。 杨教授工作室，版权所有，XX， 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)再测试修改后的效果现在菜单被对齐到页面的右边了 杨教授工作室，版

14、权所有，XX， 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.Men