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; |
仅限折叠式面板选项卡中的文本 | .AccordionPanelTab | font: Arial; font-size:medium; |
仅限折叠式内容面板中的文本 | .AccordionPanelContent | font: Arial; font-size:medium; |
| | |
更改折叠构件的背景颜
要更改折叠构件不同部分的背景颜，请使用下表来查相应的 CSS 规则，然后添加或更改背景颜的属性和值：
要更改的构件部分 | 相关 CSS 规则 | 要添加或更改的属性和值的示例 |
折叠式面板选项卡的背景颜 | .AccordionPanelTab | background-color: #CCCCCC;（这是默认值。） |
mcu解密折叠式内容面板的背景颜 | .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 文件。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议