《Dreamweaver CS6 完全自学教程》笔记 第十七章：Spry 框架技术

Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以为站点访问者提供更丰富的 Web 效果。有了 Spry ，就可以使用 HTML、CSS 和极少量的 JS 创建构件（比如折叠构件和菜单栏）。在设计上，Spry 框架的标记非常简单，且便于那些具有 HTML、CSS 和 JS 基础知识的用户使用。

将光标放置在要插入位置，点击 插入 -> Spry -> Spry 菜单栏，或单击 “插入” 面板上的 “ Spry 菜单栏” ，打开 “ Spry 菜单栏” 对话框，在对话框中选择 “水平” 或 “垂直” 布局。

参数介绍：

插入 Spry 内容后，保存页面时，会弹出 “复制相关文件” 窗口，点击确定后，会自动复制到站点目录的 SpryAssets 文件夹内。

可以通过更改菜单项的 li 和 ul 标签的 width 属性，来更改菜单项的尺寸。打开 SpryAssets 文件夹中的 SpryMenuBarHorizontal.css 文件，找到 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 规则：

将 width 属性改为所需要的宽度，或更改为 auto 。然后添加 white-space: nowrap;。

将光标放置于要插入位置，点击 插入 -> Spry -> Spry 选项卡式面板 ，或点击 “插入” 面板上的 “ Spry 选项卡式面板” 按钮即可。

参数介绍：

在插入 Spry 选项卡式面板时，会自动创建 SpryTabbedPanels.css 文件，并保存到 SpryAssets 文件夹中。

默认情况下，Spry 选项卡式面板的宽度会显示为 100% ，但可以通过 CSS 样式中的 width 属性来限制其宽度。

打开 SpryTabbedPanels.css ，找到 .TabbedPanels 规则，然后在 Width 属性中进行调整。

点击 插入 -> Spry -> Spry 折叠式，或点击 “插入” 面板上的 “ Spry 折叠式” 按钮就即可。

参数介绍：

默认宽度显示为 100%，但可以通过设置 CSS 样式中的 width 属性来限制其宽度。

打开 SpryAccordion.css 找到 .Accordion 规则，添加 width 属性即可。

点击 插入 -> Spry -> Spry 可折叠面板，或点击 “插入” 面板上的 “ Spry 可折叠面板” 按钮即可。

参数介绍：

默认宽度显示为 100%，但可以通过设置 CSS 样式中的 width 属性来限制其宽度。

打开 SpryCollapsiblePanel.css 找到 .CollapsiblePanel 规则，添加 width 属性即可。

Spry 工具提示可以在鼠标滑过某网页对象时显示一段文字，并在滑开时隐藏。

将光标放置于要插入位置，点击 插入 -> Spry -> Spry 工具提示 即可。

参数介绍：