2024年4月4日发(作者：)

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 文件根据该构件命名，因此，您很容易判断哪些文件对应于哪

些构件。（例如，与折叠构件关联的文件称为 和 ）。当您在已保存

的页面中插入构件时，Dreamweaver 会在您的站点中创建一个 SpryAssets 目录，并将相应的 JavaScript

和 CSS 文件保存到其中。

关于折叠构件

折叠构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板

上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时，折叠构件的面板会相

应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态。下例显示一个折叠构

件，其中的第二个面板处于展开状态：

A.

折叠式面板选项卡

B.

折叠式面板内容

C.

折叠式面板（打开）

折叠构件的默认 HTML 中包含一个含有所有面板的外部div标签以及各面板对应的div标签，各面板的

标签中还有一个标题div和内容div。折叠构件可以包含任意数量的单独面板。在折叠构件的 HTML 中，

在文档头中和折叠构件的 HTML 标记之后还包括script标签。

自定义折叠构件

尽管使用属性检查器可以简化对折叠构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可

以修改折叠构件的 CSS 规则，并创建根据自己的喜好设置样式的折叠构件。有关样式任务的更高级列表，

请访问 /go/learn_dw_spryaccordion_custom_cn。

下列主题中的所有 CSS 规则都是指 文件中的默认规则。每当您创建 Spry 折叠构件

时，Dreamweaver 都会将 文件保存到您的站点的 SpryAssets 文件夹中。此文件还

包含有关适用于该构件的各种样式的注释信息，因此，您可能会发现参考该文件也会有所帮助。

尽管可以直接在 CSS 文件中方便地编辑折叠构件的规则，但您也可以使用“CSS 样式”面板来编辑折叠构

件的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式

时尤其如此。

设置折叠构件文本的样式

以通过设置整个折叠构件容器的属性，或分别设置构件的各组件的属性来设置折叠构件的文本样式。

要更改折叠构件的文本样式，请使用下表来查找相应的 CSS 规则，然后添加自己的文本样式属性和值：

要更改的文本 相关 CSS 规则 要添加的属性和值的示例

font: Arial;

font-size:medium;

整个折叠构件（包括选项卡和内容面板）中的.Accordion

文本 或 .AccordionPanel

要更改的文本

仅限折叠式面板选项卡中的文本

相关 CSS 规则

.AccordionPanelTab

要添加的属性和值的示例

font: Arial;

font-size:medium;

仅限折叠式内容面板中的文本 .AccordionPanelContent font: Arial;

font-size:medium;

更改折叠构件的背景颜色

要更改折叠构件不同部分的背景颜色，请使用下表来查找相应的 CSS 规则，然后添加或更改背景颜色的

属性和值：

要更改的构件部分 相关 CSS 规则 要添加或更改的属性

和值的示例

折叠式面板选项卡.AccordionPanelTab

的背景颜色

background-color:

#CCCCCC;（这是默

认值。）

折叠式内容面板的.AccordionPanelContent

背景颜色

已打开的折叠式面.AccordionPanelOpen .AccordionPanelTab

板的背景颜色

background-color:

#CCCCCC;

background-color:

#EEEEEE;（这是默认

值。）

鼠标悬停在其上的.AccordionPanelTabHover

面板选项卡的背景

颜色

鼠标悬停在其上的.AccordionPanelOpen .AccordionPanelTabHover color: #555555;（这是

已打开面板选项卡

的背景颜色

默认值。）

color: #555555;（这是

默认值。）

限制折叠的宽度

默认情况下，折叠构件会展开以填充可用空间。但是，您可以通过设置折叠式容器的 width 属性来限制折

叠构件的宽度。

1. 打开 文件来查找 .Accordion CSS 规则。此规则可用来定义折叠构件的主容

器元素的属性。

查找规则的另一种方法是：选择折叠构件，然后在“CSS 样式”面板（“窗口”>“CSS”）中进行查找。请确保

该面板设置为“当前”模式。

1. 向该规则中添加一个 width 属性和值，例如width: 300px;。

关于菜单栏构件

菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子

菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站

点上提供的内容。

Dreamweaver 允许您插入两种菜单栏构件：

垂直构件和水平构件。

下例显示一个水平菜

单栏构件，其中的第三个菜单项处于展开状态：

查看完全大小图形

菜单栏构件（由