搜索
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规则，并创建根据自己的喜好设置样式的折叠构件。有关样式任务的更高级列表，请访问。下列主题中的所有CSS规则都是指SpryAccordion.css文件中的默认规则。每当您创建Spry折叠构件时，Dreamweaver都会将SpryAccordion.css文件保存到您的站点的SpryAssets文件夹中。此文件还包含有关适用于该构件的各种样式的注释信息，因此，您可能会发现参考该文件也会有所帮助。尽管可以直接在CSS文件中方便地编辑折叠构件的规则，但您也可以使用“CSS样式”面板来编辑折叠构件的CSS。“CSS样式”面板对于查找分配给构件不同部分的CSS类非常有用，在使用面板的“当前”模式时尤其如此。设置折叠构件文本的样式可以通过设置整个折叠构件容器的属性，或分别设置构件的各组件的属性来设置折叠构件的文本样式。要更改折叠构件的文本样式，请使用下表来查找相应的CSS规则，然后添加自己的文本样式属性和值：要更改的文本相关CSS规则要添加的属性和值的示例整个折叠构件（包括选项卡和内容面板）中的文本.Accordion或.AccordionPanelfont:Arial;font-size:medium;仅限折叠式面板选项卡中的文本.AccordionPanelTabfont:Arial;font-size:medium;仅限折叠式内容面板中的文本.AccordionPanelContentfont:Arial;font-size:medium;更改折叠构件的背景颜色要更改折叠构件不同部分的背景颜色，请使用下表来查找相应的CSS规则，然后添加或更改背景颜色的属性和值：要更改的构件部分相关CSS规则要添加或更改的属性和值的示例折叠式面板选项卡的背景颜色.AccordionPanelTabbackground-color:#CCCCCC;（这是默认值。）折叠式内容面板的背景颜色.AccordionPanelContentbackground-color:#CCCCCC;已打开的折叠式面板的背景颜色.AccordionPanelOpen.AccordionPanelTabbackground-color:#EEEEEE;（这是默认值。）鼠标悬停在其上的面板选项卡的背景颜色.AccordionPanelTabHovercolor:#555555;（这是默认值。）鼠标悬停在其上的已打开面板选项卡的背景颜色.AccordionPanelOpen.AccordionPanelTabHovercolor:#555555;（这是默认值。）限制折叠的宽度默认情况下，折叠构件会展开以填充可用空间。但是，您可以通过设置折叠式容器的width属性来限制折叠构件的宽度。1.打开SpryAccordion.css文件来查找.AccordionCSS规则。此规则可用来定义折叠构件的主容器元素的属性。查找规则的另一种方法是：选择折叠构件，然后在“CSS样式”面板（“窗口”“CSS”）中进行查找。请确保该面板设置为“当前”模式。2.向该规则中添加一个width属性和值，例如width:300px;。关于菜单栏构件菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。Dreamweaver允许您插入两种菜单栏构件：垂直构件和水平构件。下例显示一个水平菜单栏构件，其中的第三个菜单项处于展开状态：查看完全大小图形菜单栏构件（由ul、li和a标签组成）A.菜单项具有子菜单B.子菜单项具有子菜单菜单栏构件的HTML中包含一个外部ul标签，该标签中对于每个顶级菜单项都包含一个li标签，而顶级菜单项（li标签）又包含用来为每个菜单项定义子菜单的ul和li标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。添加或删除菜单和子菜单使用属性检查器（“窗口”“属性”），向菜单栏构件中添加菜单项或从中删除菜单项。添加主菜单项1.在“文档”窗口中选择一个菜单栏构件。2.在属性检查器中，单击第一列上方的加号按钮。3.（可选）重命名新菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。添加子菜单项1.在“文档”窗口中选择一个菜单栏构件。2.在属性检查器中，选择要向其中添加子菜单的主菜单项的名称。3.单击第二列上方的加号按钮。4.（可选）重命名新的子菜单项，方法是更改“文档”窗口或属性检查器“文本”框中的默认文本。要向子菜单中添加子菜单，请选择要向其中添加另一个子菜单项的子菜单项的名称，然后在属性检查器中单击第三列上方的加号按钮。注：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样式”）中单击“附加样式表”按钮。3.删除垂直菜单栏。4.在“代码”视图（“视图”“代码”）中，找到MenuBarHorizontal类，将其更改为MenuBarVertical。MenuBarHorizontal类是在菜单栏(ulid=MenuBar1class=MenuBarHorizontal)的容器ul标签中定义的。5.在菜单栏的代码后面，查找菜单栏构造函数：varMenuBar1=newSpry.Widget.MenuBar(MenuBar1,{imgDown:SpryAssets/SpryMenuBarDownHover.gif,imgRight:SpryAssets/SpryMenuBarRightHover.gif});6.从构造函数中删除imgDown预先加载选项（和逗号）：varMenuBar1=newSpry.Widget.MenuBar(MenuBar1,{imgRight:SpryAssets/SpryMenuBarRightHover.gif});注：如果将垂直菜单栏转换为水平菜单栏，则添加imgDown预先加载选项和逗号。7.（可选）如果页面中不再包含任何其它水平菜单栏构件，请从文档头中删除指向先前MenuBarHorizontal.css类的链接。8.保存该页面。自定义菜单栏构件尽管使用属性检查器可以简化对菜单栏构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改菜单栏构件的CSS规则，并创建根据自己的喜好设置样式的菜单栏构件。有关样式任务的更高级列表，请访问。下列主题中的所有CSS规则都是指SpryMenuBarHorizontal.css或SpryMenuBarVertical.css文件（具体情况取决于您进行的选择）中的默认规则。每当您创建Spry菜单栏构件时，Dreamweaver都会将这些