跟我学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文件
spring framework(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)预览现在的效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。