元素。12．重复执行第8～ll步，创建“IntheCommunity”的内容区域。
完成后．全部3个列表现在都包含在jQueryAccordion构件内，并且所有空的
13．保存文件。
出现一个对话框，报告将把多个jQuery资源文件复制到站点中，以支持Accordion构件的功能。
14.单击“确定”按钮。
你创建了一jQueryAccordion构件并添加了内容。
尽管在这个练习中添加的内容已经在页面上，显然也可以直接在内容面板中输入和编辑内容。
也可以从其他源（比如MicrosoftWord、TextEdit和“记事本”等）复制材料。
在下一个练习中，你将学习如何为jQueryAccordion构件自定义样式。
10.4.2自定义jQueryAccordion构件
像Dreamweaver提供的其他构件一样，jQueryAccordion构件通过它自己的CSS和JavaScript文件进行格式化。
如果查看文档窗口顶部显示的相关文件，将会看到有3个新的样式表和两个新的.js文件附加到这个页面上，用于格式化和控制构件的行为（如下图所示）。
jQuery样式表非常复杂，应该避免使用，除非你知道自己在做什么。
作为替代，在这个练习中，你将学习如何使用现有的站点样式表和你已经知道的技能，对Accordion构件应用站点设计主题。
1．在标记为“AtHome”的选项卡中插入光标，并检查标签选择器的名称和顺序。
选项卡由3个主要元素组成：
、
但是，这只是表面现象。
在幕后，jQuery函数正在操纵HTML和CSS，产生各种控制Accordion构件的行为。
当把鼠标移到选项卡上并单击它们时，将动态更改类属性，产生悬停效果和动画式面板。
如你在前面所学到的，超链接展示4种基本行为：
链接、已访问、悬停和活动。
jQuery正在利用这些默认状态来应用多种不同的效果。
你的工作将是创建多个新规则，它们将重写iQuery样式，并代之以应用GreenStart主题。
第一步是格式化选项卡的默认状态。
2．如果必要，就切换到“设计”视图。
在出现在关闭的内容面板上方的选项卡之一中插入光标。
关闭的面板上方的选项卡被视作是默认状态，因为一次只能打开一个选项卡。
3．选择关闭的选项卡的
标签选择器，在“CSS设计器”的“源”窗格中，选择mygreen_styles.css，然后单击“添加选择器”图标。
此时将打开一个新的选择器名称框，其中将自动填充以默认选项卡为目标的后代选择器。
该选择器还包括.container和.content类，指示Accordion构件出现在Web页面的元素内（如下图所示）。
可以在名称中保留这两个类，使这个选择器比jQuery样式表中包含的选择器更具体，但是这有点矫枉过正。
4．从选择器名称中删除.container类（如下图所示）。
一旦编辑完成，可以按下Esc键，然后按下Enter/Return键关闭名称。
可能需要把“CSS设计器”打开得更宽一些，以显示完整的选择器名称。
5．在“属性”窗格中创建以下规范：
font-size：
120%
background-color:
#090
background-image:
background.png
background-position:
0%0%。
background-repeat:
repeat-x
loorder-loottom-color:
#060
border-bottom-width:
3px
border-bottom-style:
solid
margin-bottom：
0px
如下图所示
这种样式将应用于Accordion选项卡的默认状态，然后通过继承自动应用于所有其他的状态。
通过从这种状态开始，只需对希望通过用户交互改变的行为编排样式。
像所有的超链接一样，文本颜色是由元素控制的。
6．选择关闭的选项卡的标签。
在“CSS设计器”的“源”窗格中，选择mygreen_styles．css，然后单击“添加选择器”图标。
出现一个用于元素的新选择器名称。
7．从选择器名称中删除.container类，成为
.content#Accordion1.ui-helper-reset.ui-state-defaulta
8．在“属性”窗格中创建以下规范：
color:
#FFC。
选项卡中的文本将以淡黄色显示（如图下图所示）。
接下来，将处理超链接的a:
hover状态。
9．在mygreen_styles.css中，复制．content#Accordionl.ui-helper-reset.ui-state-defaulta规则。
10.编辑选择器名称，给它添加：
hover状态，比如：
.content#Accordionl.ui-helper-reset.ui-state-defaulta:
hover。
11.把颜色规范改为：
color:
#0F0（如下图所示）。
这样就完成了Accordion构件的基本设计，现在可以添加一点样式。
12．在打开的内容面板上方的选项卡中插入光标。
打开的选项卡和关闭的选项卡之间的格式化效果可能有所不同。
通过使用不同的背景图形和颜色，用户可以轻松地找到他们正在寻找的信息。
13.选择打开的选项卡的
标签选择器。
然后在“源”窗格中选择mygreen_styles.css，并单击“添加选择器”图标。
出现一个新的选择器名称：
.container.content#Accordion1.ui-helper-reset.ui-state-default.ui-state-active
14．从选择器名称中删除.container类，变为
.content#Accordion1.ui-helper-reset.ui-state-default.ui-state-active
15．创建以下规范（如下图所示）：
background-image:
background2.png
background-position:
0%0%
background-repeat:
repeat-x
最后一步是格式化打开的选项卡的文本颜色，该颜色是由元素控制的。
16.在Accordion构件的打开的选项卡中插入光标，并选择打开的选项卡的标签选择器。
在“源”窗格中选择mygreen_styles.css，并单击“添加选择器”图标。
出现一个新的选择器名称：
.container.content#Accordionl.ui-helper-reset.ui-state-default.ui-state-activea。
17.从选择器名称中删除.container。
18．在“属性”窗格中创建以下规范（如下图所示）：
color：
#FFF
text-shadow:
0px0px15px#000
在“设计”视图中将不能看到背景图像或阴影效果。
19.保存所有文件，并在“实时”视图中预览文档。
然后测试并检查Accordion构件的行为。
水平选项卡将显示悬停行为，而关闭的面板中的文本将变为霓虹绿色。
打开的面板中的文本出现在优美的阴影之上，并且不会因为悬停效果而改变，这指示面板已经是打开的。
唯一有损于总体效果的是内容窗口都具有相同的大小，使得在其中两个面板中留下了太多的空白空间。
在jQuery构件中可以轻松地修正这一点。
20.切换回正常的“设计”视图，并在Accordion构件中插入光标，然后选择出现在构件上方的蓝色选项卡。
“属性”检查器将显示jQueryAccordion构件的多种规范。
在这个界面中，可以轻松地添加新的内容窗口和删除现有的内容窗口以及控制其他重要的属性，而不必访问HTML或CSS代码。
高度样式目前被设置为auto，这使得每个面板都具有相同的大小（如下图所示）。
21．在“属性”检查器中，打开HeightStyle弹出式菜单，并选择content进项（如下图所示）：
22.保存所有文件，并在“实时”视图中预览文档，然后测试并检查Accordion构件的行为。
面板现在将缩放到它们的实际内容的高度。
你成功地对Accordion构件应用了格式化效果，使之匹配Web站点的配色方案，并且调整了组件的高度，以允许内容更高效地显示。
Accordion构件只是Dreamweaver提供的33种jQuery构件和组件之一，它们允许在网站中纳入高级功能，而几乎或者根本不需要编程技能。
所有这些组件都可以通过“插入’菜单或面板访问。
在下面的课程中，你将学习如何使用更多的Dreamweaver内置的jQuery组件。
作业：
请参考tips_finished.html与travel_finished.html要求，完成tips.html与travel.html。
升级会员 