Dreamweavercs4cs5spry菜单栏使用教程详细教程超好珍藏.docVIP

spry菜单栏使用教程 关于 Spry 框架 Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和 JavaScript 基础知识的用户使用。 Spry 框架主要面向专业 Web 设计人员或高级非专业 Web 设计人员。它不应当用作企业级 Web 开发的完整 Web 应用框架（尽管它可以与其它企业级页面一起使用）。 关于 Spry 构件 Spry 构件 是一个页面元素，通过启用用户交互来提供更丰富的用户体验。Spry 构件由以下几个部分组成： 构件结构 用来定义构件结构组成的 HTML 代码块。 构件行为 用来控制构件如何响应用户启动事件的 JavaScript。 构件样式 用来指定构件外观的 CSS。 Spry 框架支持一组用标准 HTML、CSS 和 JavaScript 编写的可重用构件。您可以方便地插入这些构件（采用最简单的 HTML 和 CSS 代码），然后设置构件的样式。框架行为包括允许用户执行下列操作的功能：显示或隐藏页面上的内容、更改页面的外观（如颜色）、与菜单项交互等等。 Spry 框架中的每个构件都与唯一的 CSS 和 JavaScript 文件相关联。CSS 文件中包含设置构件样式所需的全部信息，而 JavaScript 文件则赋予构件功能。当您使用 Dreamweaver 界面插入构件时，Dreamweaver 会自动将这些文件链接到您的页面，以便构件中包含该页面的功能和样式。 与给定构件相关联的 CSS 和 JavaScript 文件根据该构件命名，因此，您很容易判断哪些文件对应于哪些构件。（例如，与折叠构件关联的文件称为 SpryAccordion.css 和 SpryAccordion.js）。当您在已保存的页面中插入构件时，Dreamweaver 会在您的站点中创建一个 SpryAssets 目录，并将相应的 JavaScript 和 CSS 文件保存到其中。 关于折叠构件 折叠构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态。下例显示一个折叠构件，其中的第二个面板处于展开状态： ? A. 折叠式面板选项卡 B. 折叠式面板内容 C. 折叠式面板（打开） 折叠构件的默认 HTML 中包含一个含有所有面板的外部div标签以及各面板对应的div标签，各面板的标签中还有一个标题div和内容div。折叠构件可以包含任意数量的单独面板。在折叠构件的 HTML 中，在文档头中和折叠构件的 HTML 标记之后还包括script标签。 自定义折叠构件 尽管使用属性检查器可以简化对折叠构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改折叠构件的 CSS 规则，并创建根据自己的喜好设置样式的折叠构件。有关样式任务的更高级列表，请访问 /go/learn_dw_spryaccordion_custom_cn。 下列主题中的所有 CSS 规则都是指 SpryAccordion.css 文件中的默认规则。每当您创建 Spry 折叠构件时，Dreamweaver 都会将 SpryAccordion.css 文件保存到您的站点的 SpryAssets 文件夹中。此文件还包含有关适用于该构件的各种样式的注释信息，因此，您可能会发现参考该文件也会有所帮助。 尽管可以直接在 CSS 文件中方便地编辑折叠构件的规则，但您也可以使用“CSS 样式”面板来编辑折叠构件的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式时尤其如此。 设置折叠构件文本的样式 ? 以通过设置整个折叠构件容器的属性，或分别设置构件的各组件的属性来设置折叠构件的文本样式。 ?要更改折叠构件的文本样式，请使用下表来查找相应的 CSS 规则，然后添加自己的文本样式属性和值： 要更改的文本 相关 CSS 规则 要添加的属性和值的示例 整个折叠构件（包括选项卡和内容面板）中的文本 .Accordion 或 .AccordionPanel font: Arial; font-size:medium; 仅限折叠式面板选项卡中的文本 .AccordionPane