spry菜单栏(一)

spry菜单栏使用教程

关于 Spry 框架

Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和 JavaScript 基础知识的用户使用。

Spry 框架主要面向专业 Web 设计人员或高级非专业 Web 设计人员。它不应当用作企业级 Web 开发的完整 Web 应用框架（尽管它可以与其它企业级页面一起使用）。

关于 Spry 框架

Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和 JavaScript 基础知识的用户使用。

Spry 框架主要面向专业 Web 设计人员或高级非专业 Web 设计人员。它不应当用作企业级 Web 开发的完整 Web 应用框架（尽管它可以与其它企业级页面一起使用）。

A.

折叠式面板选项卡

B.

折叠式面板内容

C.

折叠式面板（打开）

折叠构件的默认 HTML 中包含一个含有所有面板的外部div标签以及各面板对应的div标签，各面板的标签中还有一个标题div和内容div。折叠构件可以包含任意数量的单独面板。在折叠构件的 HTML 中，在文档头中和折叠构件的 HTML 标记之后还包括script标签。

自定义折叠构件

尽管使用属性检查器可以简化对折叠构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改折叠构件的 CSS 规则，并创建根据自己的喜好设置样式的折叠构件。有关样式任务的更高级列表，请访问 www.adobe.com/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;
仅限折叠式面板选项卡中的文本	.AccordionPanelTab	font: Arial; font-size:medium;
仅限折叠式内容面板中的文本	.AccordionPanelContent	font: Arial; font-size:medium;

更改折叠构件的背景颜色

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

要更改的构件部分	相关 CSS 规则	要添加或更改的属性和值的示例
折叠式面板选项卡的背景颜色	.AccordionPanelTab	background-color: #CCCCCC;（这是默认值。）
折叠式内容面板的背景颜色	.AccordionPanelContent	background-color: #CCCCCC;
已打开的折叠式面板的背景颜色	.AccordionPanelOpen .AccordionPanelTab	background-color: #EEEEEE;（这是默认值。）
鼠标悬停在其上的面板选项卡的背景颜色	.AccordionPanelTabHover	color: #555555;（这是默认值。）
鼠标悬停在其上的已打开面板选项卡的背景颜色	.AccordionPanelOpen .AccordionPanelTabHover	color: #555555;（这是默认值。）

限制折叠的宽度

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

1. 打开 SpryAccordion.css 文件来查找 .Accordion CSS 规则。此规则可用来定义折叠构件的主容器元素的属性。

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

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

关于菜单栏构件

菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。

Dreamweaver 允许您插入两种菜单栏构件：垂直构件和水平构件。下例显示一个水平菜单栏构件，其中的第三个菜单项处于展开状态：

查看完全大小图形

菜单栏构件（由 <ul>、<li> 和 <a> 标签组成）

A.

菜单项具有子菜单

B.

子菜单项具有子菜单

菜单栏构件的 HTML 中包含一个外部ul标签，该标签中对于每个顶级菜单项都包含一个li标签， 而顶级菜单项（li标签）又包含用来为每个菜单项定义子菜单的ul和li标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。

添加或删除菜单和子菜单

使用属性检查器（“窗口”>“属性”），向菜单栏构件中添加菜单项或从中删除菜单项。

添加主菜单项

1. 在“文档”窗口中选择一个菜单栏构件。
2. 在属性检查器中，单击第一列上方的加号按钮。
3. （可选）重命名新菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。
4. 在“文档”窗口中选择一个菜单栏构件。
5. 在属性检查器中，选择要向其中添加子菜单的主菜单项的名称。
6. 单击第二列上方的加号按钮。
7. （可选）重命名新的子菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。

添加子菜单项

要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。

注： Dreamweaver 在“设计”视图中仅支持两级子菜单，但是在“代码”视图中可以添加任意多个子菜单。

删除主菜单项或子菜单项

1. 在“文档”窗口中选择一个菜单栏构件。

2. 在属性检查器中，选择要删除的主菜单项或子菜单项的名称，然后单击减号按钮。

指定菜单项的目标属性

目标属性指定要在何处打开所链接的页面。例如，可以为菜单项分配一个目标属性，以便在站点访问者单击链接时，在新浏览器窗口中打开所链接的页面。如果您使用的是框架集，则还可以指定要在其中打开所链接页面的框架的名称。

1. 在“文档”窗口中选择一个菜单栏构件。
2. 在属性检查器（“窗口”>“属性”）中，选择要分配目标属性的菜单项的名称。
3. 在“目标”框中输入以下四个属性之一：

_blank

在新浏览器窗口中打开所链接的页面。

_self

在同一个浏览器窗口中加载所链接的页面。这是默认选项。如果页面位于框架或框架集中，该页面将在该框架中加载。

_parent

在文档的直接父框架集中加载所链接的文档。

_top

在框架集的顶层窗口中加载所链接的页面。

关闭样式

您可以禁用菜单栏构件的样式，以便可以在“设计”视图中更清楚地查看构件的 HTML 结构。例如，当您禁用样式时，菜单栏项以项目符号列表形式显示在页面上，而不是显示为菜单栏中带样式的菜单项。

1. 在“文档”窗口中选择一个菜单栏构件。

2. 在属性检查器（“窗口”>“属性”）中单击“禁用样式”按钮。

更改菜单栏构件的方向

可以将菜单栏构件的方向从水平更改为垂直或者从垂直更改为水平。您只需修改菜单栏的 HTML 代码并确保 SpryAssets 文件夹中有正确的 CSS 文件。

下例将水平菜单栏构件更改为垂直菜单栏构件。

1. 在 Dreamweaver 中，打开包含水平菜单栏构件的页。
2. 插入垂直菜单栏构件（“插入”>“Spry”>“Spry 菜单栏”）并保存页面。此步骤可确保在站点中包含与垂直菜单栏相对应的正确的 CSS 文件。

注： 如果站点中的其它位置中已有垂直菜单栏构件，则不必插入新的垂直菜单栏构件， 只需将 SpryMenuBarVertical.css 文件附加到该页面，方法是在“CSS 样式”面板（“窗口”>“CSS 样式”）中单击“附加样式表”按钮。

1. 删除垂直菜单栏。
2. 在“代码”视图（“视图”>“代码”）中，找到 MenuBarHorizontal 类，将其更改为 MenuBarVertical。MenuBarHorizontal 类是在菜单栏 (<ul id="MenuBar1">) 的容器ul标签中定义的。
3. 在菜单栏的代码后面，查找菜单栏构造函数：
4. 从构造函数中删除imgDown预先加载选项（和逗号）:

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

注： 如果将垂直菜单栏转换为水平菜单栏，则添加imgDown预先加载选项和逗号。

1. （可选）如果页面中不再包含任何其它水平菜单栏构件，请从文档头中删除指向先前 MenuBarHorizontal.css 类的链接。
2. 保存该页面

自定义菜单栏构件

尽管使用属性检查器可以简化对菜单栏构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改菜单栏构件的 CSS 规则，并创建根据自己的喜好设置样式的菜单栏构件。有关样式任务的更高级列表，请访问 www.adobe.com/go/learn_dw_sprymenubar_custom_cn。

下列主题中的所有 CSS 规则都是指 SpryMenuBarHorizontal.css 或 SpryMenuBarVertical.css 文件（具体情况取决于您进行的选择）中的默认规则。每当您创建 Spry 菜单栏构件时，Dreamweaver 都会将这些 CSS 文件保存到您的站点的 SpryAssets 文件夹中。这些文件中还包括有关适用于该构件的各种样式的有用的注释信息。

尽管可以直接在相关联的 CSS 文件中方便地编辑菜单栏构件的规则，您还可以使用“CSS 样式”面板来编辑菜单栏的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式时尤其如此。

更改菜单项的文本样式

附加到 <a> 标签的 CSS 中包含有关文本样式的信息。还可以向与不同菜单状态有关的 <a> 标签附加多个相关的文本样式类值。

要更改菜单项的文本样式，请使用下表来查找相应的 CSS 规则，然后更改默认值：

要更改的样式	垂直或水平菜单栏的 CSS 规则	相关属性和默认值
默认文本	ul.MenuBarVertical a、ul.MenuBarHorizontal a	color: #333; text-decoration: none;
当鼠标指针移过文本上方时，文本的颜色	ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover	color: #FFF;
具有焦点的文本的颜色	ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus	color: #FFF;
当鼠标指针移过菜单栏项上方时，菜单栏项的颜色	ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover	color: #FFF;
当鼠标指针移过子菜单项上方时，子菜单项的颜色	ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	color: #FFF;

更改菜单项的背景颜色

附加到 <a> 标签的 CSS 中包含与菜单项的背景颜色有关的信息。还可以向与不同菜单状态有关的 <a> 标签附加多个相关的背景颜色类值。

要更改菜单项的背景颜色，请使用下表来查找相应的 CSS 规则，然后更改默认值：

要更改的颜色	垂直或水平菜单栏的 CSS 规则	相关属性和默认值
默认背景	ul.MenuBarVertical a、ul.MenuBarHorizontal a	background-color: #EEE;
当鼠标指针移过背景上方时，背景的颜色	ul.MenuBarVertical a:hover、ul.MenuBarHorizontal a:hover	background-color: #33C;
具有焦点的背景的颜色	ul.MenuBarVertical a:focus、ul.MenuBarHorizontal a:focus	background-color: #33C;
当鼠标指针移过菜单栏项上方时，菜单栏项的颜色	ul.MenuBarVertical a.MenuBarItemHover、ul.MenuBarHorizontal a.MenuBarItemHover	background-color: #33C;
当鼠标指针移过子菜单项上方时，子菜单项的颜色	ul.MenuBarVertical a.MenuBarItemSubmenuHover、ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	background-color: #33C;

更改菜单项的尺寸

可以通过更改菜单项的li和ul标签的 width 属性来更改菜单项尺寸。

1. 找到ul.MenuBarVertical li或ul.MenuBarHorizontal li规则。
2. 将 width 属性更改为所需的宽度（或者将该属性更改为auto以删除固定宽度，然后向该规则中添加white-space: nowrap;属性和值）。
3. 找到ul.MenuBarVertical ul或ul.MenuBarHorizontal ul规则。
4. 将 width 属性更改为所需的宽度（或者将该属性更改为auto以删除固定宽度）。
5. 找到ul.MenuBarVertical ul li或ul.MenuBarHorizontal ul li规则：
6. 向该规则中添加下列属性：float: none;和background-color: transparent;。
7. 删除width: 8.2em;属性和值。

定位子菜单

Spry 菜单栏子菜单的位置由子菜单ul标签的 margin 属性控制。

1. 找到ul.MenuBarVertical ul或ul.MenuBarHorizontal ul规则。
2. 将默认值margin: -5% 0 0 95%;更改为所需的值

关于可折叠面板构件

可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。下例显示一个处于展开和折叠状态的可折叠面板构件：

A. 已展开 B.已折叠

可折叠面板构件的 HTML 中包含一个外部div标签，其中包含内容div标签和选项卡容器div标签。在可折叠面板构件的 HTML 中，在文档头中和可折叠面板的 HTML 标记之后还包括脚本标签。

自定义可折叠面板构件

尽管使用属性检查器可以简化对可折叠面板构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改可折叠面板构件的 CSS，并创建根据自己的喜好设置样式的可折叠面板。有关样式任务的更高级列表，请访问 www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_cn。

下列主题中的所有 CSS 规则都是指 SpryCollapsiblePanel.css 文件中的默认规则。每当您创建 Spry 可折叠面板构件时，Dreamweaver 都会将 SpryCollapsiblePanel.css 文件保存到您的站点的 SpryAssets 文件夹中。此文件中还包括有关适用于该构件的各种样式的有用的注释信息。

尽管可以直接在相关联的 CSS 文件中方便地编辑可折叠面板构件的规则，您还可以使用“CSS 样式”面板来编辑可折叠面板的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式时尤其如此。

设置可折叠面板构件文本的样式

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

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

要更改的样式	相关 CSS 规则	要添加或更改的属性和值的示例
整个可折叠面板中的文本	.CollapsiblePanel	font: Arial; font-size:medium;
仅限面板选项卡中的文本	.CollapsiblePanelTab	font: bold 0.7em sans-serif;（这是默认值。）
仅限内容面板中的文本	.CollapsiblePanelContent	font: Arial; font-size:medium;

更改可折叠面板构件的背景颜色

要更改可折叠面板构件不同部分的背景颜色，请使用下表来查找相应的 CSS 规则，然后根据自己的喜好添加或更改背景颜色的属性和值：

要更改的颜色	相关 CSS 规则	要添加或更改的属性和值的示例
面板选项卡的背景颜色	.CollapsiblePanelTab	background-color: #DDD;（这是默认值。）
内容面板的背景颜色	.CollapsiblePanelContent	background-color: #DDD;
在面板处于打开状态时，选项卡的背景颜色	.CollapsiblePanelOpen .CollapsiblePanelTab	background-color: #EEE;（这是默认值。）
当鼠标指针移过已打开面板选项卡上方时，选项卡的背景颜色	.CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover	background-color: #CCC;（这是默认值。）

限制可折叠面板的宽度

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

1. 打开 SpryCollapsible Panel.css 文件来查找 .CollapsiblePanel CSS 规则。此规则为可折叠面板构件的主容器元素定义属性。

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

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

关于选项卡式面板构件

选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击他们要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内 容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。下例显示一个选项卡式面板构 件，第三个面板处于打开状态：

A.Tab B. 内容 C. 选项卡式面板构件 D. 选项卡式面板

选项卡式面板构件的 HTML 代码中包含一个含有所有面板的外部div标签、一个标签列表、一个用来包含内容面板的div和以及各面板对应的div。在选项卡式面板构件的 HTML 中，在文档头中和选项卡式面板构件的 HTML 标记之后还包括脚本标签.