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/go/learn_dw_spryaccordion_custom_cn。
下列主题中的所有 CSS 规则都是指 SpryAccordion.css ⽂件中的默认规则。每当您创建 Spry 折叠构件时，Dreamweaver 都会将SpryAccordion.css ⽂件保存到您的站点的 SpryAssets ⽂件夹中。此⽂件还包含有关适⽤于该构件的各种样式的注释信息，因此，您可能会发现参考该⽂件也会有所帮助。
尽管可以直接在 CSS ⽂件中⽅便地编辑折叠构件的规则，但您也可以使⽤“CSS 样式”⾯板来编辑折叠构件的 CSS。“CSS 样式”⾯板对于查分配给构件不同部分的 CSS 类⾮常有⽤，在使⽤⾯板的“当前”模式时尤其如此。
设置折叠构件⽂本的样式
以通过设置整个折叠构件容器的属性，或分别设置构件的各组件的属性来设置折叠构件的⽂本样式。
要更改折叠构件的⽂本样式，请使⽤下表来查相应的 CSS 规则，然后添加⾃⼰的⽂本样式属性和值：
要更改的⽂本相关 CSS 规则要添加的属性和值的⽰例
整个折叠构件（包括选项卡和内容⾯板）中的⽂本.Accordion 或 .AccordionPanelfont: 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;（这
是默认值。）
⿏标悬停在其上的⾯板选项卡的背景颜⾊.AccordionPanelTabHovercolor: #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/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:
html ul标签#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/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;（这是默认值。）
仅限内容⾯板中的⽂本.CollapsiblePanelContentfont: 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;（这
是默认值。）

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