第十课添加交互性.docx
- 文档编号:16190934
- 上传时间:2023-07-11
- 格式:DOCX
- 页数:19
- 大小:2.26MB
第十课添加交互性.docx
《第十课添加交互性.docx》由会员分享,可在线阅读,更多相关《第十课添加交互性.docx(19页珍藏版)》请在冰点文库上搜索。
第十课添加交互性
第十课添加交互性
对应教材第11课。
本文档中章节序号10.1-9.4对应将教材中11.1-11.4等。
因为在DreamweaverCC中已经放弃Spry,故教材中11.4节不用去看,请看本课件10.4。
本文档内容为教材补充。
凡教材中提到的DreamweaverCS5,均改为DreamweaverCC。
凡教材中提到的站点名DW-CIB,均改为DW-CC(或者是你自己取的站点名称)。
凡教材中提到的lesson11文件夹,均改为lesson10文件夹。
以下不再赘述。
把本课中的所有“Spry”改为:
jQueryAccordion。
10.1了解Dreamweaver行为
请见教材p224-225。
内置行为33种。
10.2预览已完成的文件
请见教材p225-226
10.3使用Dreamweaver行为
请见教材p226-232。
P227第4项替换文本:
Steamlocomotivesarenotverygreen
P227第10项修改如下:
10.在travel.html中选取主标题占位符“Addmainheadinghere”,并输入“GreenTravel”替换它。
选取标题占位符“Addsubheadinghere”,并输入“Eco-Touring”替换它
选取文本“Addcontenthere”的标签选择器
,然后按下Ctrl+V组合键粘帖旅行文本。
将显示来自travel-text.html文件中的内容。
它假定通过你在第7课“处理文本、列表和表格”中创建的样式表为文本和表格应用默认的格式化效果。
P228第12项修改其中的:
ID“Travel”为:
ID“SideAd”。
图像的“替换”框中输入文本“Eco-TourofParis”
10.3.1应用行为
P228第2项修改前半句如下:
2.在文本“TourEiffel”中插入光标
P229第9项修改后一句如下:
把光标定位在文本“TourEiffel”上。
10.3.2应用“恢复交换图像”的行为
P230第1项修改后一半句如下:
1.在标题“TourEiffel”中插入光标,
P230第3项修改后一半句如下:
2.并检查用于文本“TourEiffel”的标记。
10.3.3删除应用的行为
P230第1项修改后一半句如下:
1.然后在文本“TourEiffel”中插入光标。
10.3.4给超链接添加行为
P231第1项修改前一句如下:
1.选取
元素内的文本“TourEiffel”。
P231第5项修改前一句如下:
5.选取文本“ParisUnderground”。
对应选取的图像为underground.jpg
P231第6项修改前一句如下:
6.为文本“SeineRiverDinnerCruise”.对应选取的图像为cruise.jpg
P232第7项修改前一句如下:
7.为文本“ChampsElysees”对应选取的图像为champs.jpg
P232第8项修改后一句如下:
8.在mygreen_styles.css样式表中选择.contentsectionh2规则,然后单击“添加选择器”图表。
P232第9项修改为:
9.创建.contentsectionh3选择器。
创建以下属性与规范:
margin-top:
0px;
margin-bottom:
5px;
创建.contentsectionh3a选择器。
创建以下属性与规范:
font-size;140%;
color:
#090;
10.4使用jQueryAccordion构件
jQueryAccordion构件允许把许多内容组织进一个紧凑的空间中。
在Accordion构件中,各个选项卡是堆叠起来的;在打开时,它们将垂直展开,而不会并排显示。
当单击一个选项卡时,将用一个流畅的动作滑动打开面板。
面板被设置为特定的高度,如果面板内的内容高于或宽于面板本身,将自动出现滚动条。
让我们预览完成的布局。
1.在“文件”面板中,从Lesson10文件夹中选择tips_finished.html,并在主浏览器中预览它。
页面内容划分在jQueryAccordion构件中的三个面板中。
2.依次单击每个面板,打开并关闭它们。
面板将打开和关闭,呈现绿色提示的项目列表。
Accordion构件允许在一个更小、更高效的空间里显示更多的内容(如下图)。
3.关闭浏览器,并返回到Dreamweaver。
10.4.1插入jQueryAccordion构件
在下面这个练习中,将把jQueryAccordion构件纳入到现有的布局中。
1.打开tips.html。
该页面包含由
标题分隔开的3个项目列表,让我们首先在第一个前面插入一个jQueryAccordion构件。
2.在标题“AtHome”中插入光标,并选择
3.在“插入”面板的jQueryUI类别中,选择Accordion。
Dreamweaver将插入jQueryAccordion构件元素。
初始元素是包含3个面板的Accordion构件,并且会打开上方的面板。
带有标题“jQueryAccordion:
Accordionl”的蓝色选项卡出现在新对象上方(如下图所示)。
4.选取占位符文本“部分1”,并输入“AtHome”替换它。
5.向下滚动,在项目列表的第一项“Washclothesincoldwater”中插入光标,并选择
- 标签选择器,然后按下Ctrl+X组合键剪切整个列表。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第十 添加 交互
6.在
标题“AtHome”中插入光标,并选择标签选择器,然后按下Delete键。删除空的元素。
7.在顶部的Accordion构件面板中的文本“内容1”中插入光标,并选择
标签选择器。
然后选择“编辑”-->“粘贴”或者按下Ctrl+V组合键粘贴项目列表。
在“设计”视图中,项目列表出现在第一个内容面板中(如下图所示)。
8.把光标定位在显示文本“部分2”的栏上,如果必要,可单击眼睛(黼蘸)图标,打开面板2。
面板2打开后,面板1将自动关闭(如下图所示)。
9.将光标放到“AtWork”下的列表区域,选取
元素,并剪切。然后删除包含标题“AtWork”的空元素。
10.选取文本“部分2”,并输入“AtWork”。
11.选取包含文本“内容2”的
元素,并粘贴
元素。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个主要元素组成:
、和(如图10-24所示)。但是,这只是表面现象。
在幕后,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。
冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
删除空的
7.在顶部的Accordion构件面板中的文本“内容1”中插入光标,并选择
标签选择器。
然后选择“编辑”-->“粘贴”或者按下Ctrl+V组合键粘贴项目列表。
在“设计”视图中,项目列表出现在第一个内容面板中(如下图所示)。
8.把光标定位在显示文本“部分2”的栏上,如果必要,可单击眼睛(黼蘸)图标,打开面板2。
面板2打开后,面板1将自动关闭(如下图所示)。
9.将光标放到“AtWork”下的列表区域,选取
- 元素,并剪切。
然后删除包含标题“AtWork”的空
10.选取文本“部分2”,并输入“AtWork”。
11.选取包含文本“内容2”的
元素,并粘贴
- 元素。
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个主要元素组成: