网页设计之行为与时间轴
南财-网页设计与制作练习4(附答案)
南京财经大学成人高等教育网络课程网页设计与制作单元练习4 ------------------------------------------------------------------------------------------------------------------------一、选择题1、网页上使用动画，最常用的格式是（）。
A、JpgB、GifC、TifD、bmp2、在网页中添加背景音乐最好是（）格式。
A、W A VB、MIDIC、MPEGD、CD3、嵌入多媒体标记中的loop属性是用来设置播放次数的，若要无限制地播放，属性值应设为（）A、0B、trueC、noD、-14、下面关于使用视频数据流的说法错误的是：（）A、浏览器在接收到第一个包的时候就开始播放B、都可以使用数据流的方式进行传输C、音频可以使用数据流的方式进行传输D、文本就不可以使用数据流的方式进行传输5、行为中的事件不能是（）A、鼠标移动B、打开网页C、保存网页D、关闭网页6、利用行为弹出的浏览器窗口（）A、大小可以提前设置B、必须与主页相同的背景C、不能呈现工具栏D、没有滚动条7、下列事件中表示打开网页的是（）A、onloadB、unonloadC、onhelpD、onkeyup8、以下几个事件中代表“鼠标滑到”的事件是（）。
A、OnMouse DownB、OnMouse OutC、OnMouse OverD、OnouseUp9、(行为、时间轴)当鼠标移动到文字链接上时显示一个隐藏层，这个动作的触发事件应该是（）A、onClickB、onDblClickC、onMouseOverD、onMouseOut10、关于层的使用，下列说法正确的是（）A、层中只能插入文字B、一个网页只能有一个层C、层不能插入表D、大小位置可以改变11、下列关于层的说法错误的是（）。
A、利用层可以实现网页中的图文混排B、层的位置可以任意移动C、层中即可以插入文字，也可以插入图片D、层位置一旦确定，不能更改12、下列表示层标记的是（）。
网页制作第6单元-表格、图层、行为、时间轴
第6单元表格、图层、行为、时间轴课程目标：●掌握在网页中插入表格方法●掌握网页中细线表格、立体表格等制作方法●掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例6.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
⑥边框：设置边框的宽度，单位是像素。
⑦类：使用CSS中定义的类（见有关CSS章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
网页设计与制作课程课程大纲
xxx学校课程大纲科目名称：《网页设计与制作》专业：计算机说明随着互联网的高速发展和广泛传播，对从事网页设计与制作的人员需求量也愈来愈多。
教材在教学过程中起着至关重要的作用，而缺乏优秀实用的网页设计与制作方面的教材是目前中职学校普遍存在的问题。
本书编者旨在为中职学校相关专业，以及对网页设计与制作有兴趣的人员提供一本实用教程。
本书是依据网页设计行业的业内制作标准和相关案例执行为范围编写的。
在编写过程中针对读者的特点，项目选择合理、针对性强、理论和实践有机融合；以实践为主，特别注重实用性，并注重融入先进的教学理念与方法，注重提高读者的学习能力。
全书从实用的网页设计制作项目入手，以任务驱动的方式系统地介绍了以下内容：网站的制作流程、使用HTML制作简单网页、认识Dreamweaver CS3、搭建与管理本地站点、网页元素的编辑、使用CSS控制页面元素、使用表格布局制作页面、使用框架布局制作网页、使用CSS+DIV布局页面、使用模板和库提高制作效率、使用JAVAScript制作网页特效、策划与制作个人艺术网站。
同时结合作者多年来积累的教学工作经验，以实践为主，理论融合其中，是帮助教师联想三大软件、提高学生实践力的有力助手。
通过课程学习，学生将具备网页设计与制作的基本技能，并帮助学生在从业道路上积累经验。
本教材还具备一下特点：1.任务明确；2.结构新颖；3.图文并茂，简洁易懂；4.与国家职业资格证接轨。
《网页设计与制作》课程教学大纲课程名称：《网页设计与制作》课程总学时：72一、教学目的和任务（一）目的《网页设计与制作》是计算机相关专业的一门应用性较强的选修课程。
通过对网页设计与制作的初步学习，使学生对网页设计与制作的各个环节有感性的认识并理性理解各个网页中各布局的功能和特点，学习网页设计与制作制作方法，为今后在网页设计与制作行业工作提供必要的基础知识，以便能够得心应手地使用好Dreamweaver软件，更好地使设计网页发挥作用。
微课比赛(网页设计与制作-教学设计)
《网页设计与制作》课程单元教学设计---《项目: 缥缈世界和小魔术》一、教案首页本次课标题任务10 利用图层、时间轴和行为三结合综合实现动态效果网页设计与制作所属学科理科专业计算机应用课程网页设计与制作授课班级11计算机应用适用对象计算机专业高职生上课时间15-20分钟上课地点理实一体化教室教学目的要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
教学目标能力目标知识目标素质目标1．能使用“图层”加载动态效果网中的对象2．能通过使用“时间轴”实现动态效果3．能灵活应用“行为”实现动态效果的控制1．动态效果网页制作“三元素”2．图层、时间轴和行为三者在实现动态效果网页的具体常规作用3．动态效果网页设计与制作三元素的使用规律或步骤1．培养学生理论联系实际的品质2．培养学生敏锐的洞察力和分析力4．培养学生举一反三设计与动手并重的素质任务与案例任务1：飘渺世界（任意飘动的对象能停能动；背景和文字颜色单击改变），此为目标任务任务2：小魔术，此为补充实例（分析+演示+总结）重点难点及解决方法重点：图层和时间轴用来实现动态效果难点：灵活应用行为实现控制动态效果解决方法：引导学生根据任务要求，在温故知新的前提下，让学生有意识挖掘理论知识点，通过补充案例的分析和现场演示，并整理要点规律，再而回到引导任务加以分析实现，完成目标任务的同时夯实了理论知识点的掌握，为将来的举一反三奠定了坚实的理论和操作基础。
学习环境选择与学习资源设计1. 学习环境选择（1）多媒体教室（2）普通教师（3）计算机实验机房（4）专业实训室2. 学习资源设计（1）多媒体课件（2）网页素材及补充实例资源库形式方法手段目标导入+实例展示、讲解+教师提问+案例分析与实现+学生代表分析、教师点评、讲解并总结参考资料1、《dreamwear mx网页设计与制作》2、《dreamwear 8网页设计与实训教程》3、网上资料二、教学设计序号步骤名称教学内容教师活动学生活动时间分配(分)工具与材料课内/课外1告知（教学内容、目的）告知：本次课的教学内容：动态效果制作篇教学目的：要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
网页制作-行为与时间轴及其应用
① 【时间轴列表】： 是时间轴选择列表，在同一个文档中可以设置多个
时间轴，当用户创建多个时间轴时，利用该下拉列表可 选择当前时间轴。
② 【播放控制选项】： 它的3个按钮的功能分别是切换到第一帧、切换到
当前帧的上一帧、切换到当前帧的下一帧，文本框中是 当前帧的序号。若输入某个帧序号值，便可切换到该帧。 单击、这2个按钮并按住鼠标左键不放，可预览动画效 果。
例2 双击层1，改变状态栏中显示的文字。
layer1
例3 拖动层。 选中整个<body>……</body>
9.2 Dreamweaver 8 内置的动作和事件
Dreamweaver 8中自带了很多动作，使用它们可以在 网页中设计出各种效果。在本节中列出的动作是Netscape 6.0、Internet Explorer 6.0及以上版本支持的动作。在 【行为】面板的【动作】菜单中各项的意义如下所述。
当用户调整浏览器窗口或框架的尺寸时， 将触发该事件。 当捆绑数据源的当前记录指针改变时，将
触发该事件。 当捆绑数据源的当前记录指针将要改变时,
触发该事件。 当用户拖动上、下滚动条时，触发该事件。 在文本区域选定文本时，触发该事件。 当编辑框中的内容开始循环时，触发该事件。 提交表单时，触发该事件。 离开页面时，触发该事件。
18 【跳转菜单】： 设计者通过选择【插入】｜【表单对 象】｜【跳转菜单】命令，可在网页上创建一个跳转菜单。若 要修改这个跳转菜单，可在【行为】面板中双击【跳转菜单】 动作，在【跳转菜单】对话框中修改跳转菜单的各项参数。
19 【跳转菜单开始】：可以给跳转菜单添加不同的事件。
20 【转到 URL】： 这个动作用于在当前窗口或指定的框架中 打开一个新的页面。
浅谈层与行为在网页设计中的应用研究
５ 】 周炯桀， 庞沁华， 等． 通信原理（ 第三版） 【 Ｍ】 ． 北京： 北京 邮电 者 这 个 实 物 制 作 …水 ， 但 是 只 要 给 充足 的实 验 条 件 ， 经 过 一 些 【 实验足 口 ｊ ’ 以做 …这个模型的。一些不足之处也可以想办法米
力 Ｉ １ 以改 善 的 ， 例 如 噪 声十 扰 的 问题 口 Ｊ ’ 以通过 力 Ｉ １ 滤 波 器 米 改善 ； 大 学 出版社 ， ２ ０ ０ ８ ．
国际生物医学工程杂志， ２ ０ ０ ６ （ ０ ６ ） ．
【 ７ 】 Ｎ ｅ ｄ Ｔ． Ｓ ａ ｈ ｉ ｎ ，Ｓ ｔ ｅ ｖ ｅ ｎ Ｐ ｉ ｎ ｋ ｅ ｒ ， Ｓ ｙ ｄ ｎ ｅ ｙ Ｓ ．Ｃ ａ ｓ ｈ ， Ｄｏ ｎ ａ ｌ ｄ
Ｓ ｃ ｈ ｏ ｍｅ ｒ ，Ｅ ｒ ｉ ｃ Ｈａ ｌ ｇ ｒ ｅ ｎｌ Ｓ ｅ ｑ ｕ ｅ ｎ ｔ ｉ ａ ｌ Ｐｒ ｏ ｃ ｅ ｓ ｓ ｉ ｎ ｇ ｏ ｆ Ｌｅ ｘ ｉ ｃ ａ ｌ ， Ｇｒ ａ ｍｍａ ｔ ｉ ｃ ａ ｌ ， ａ ｎ ｄ Ｐｈ ｏ ｎ ｏ ｌ ｏ ｇ ｉ ｃ ａ ｌ Ｉ ｎ ｆ ｏ ｒ ｍａ ｔ ｉ ｏ ｎ Ｗｉ ｔ ｈ ｉ ｎ Ｂｒ ｏ ｃ ａ ’ Ｓ Ａｒ ｅ ａ ． Ｓ ｃ ｉ ｅ ｎ ｃ ｅ １ ６ ， Ｏｃ ｔ ｏ ｂ ｅ ｒ ， ２ ０ ０ ９ ： ＤＯＩ ： １ ０ ． １ １ ２ ６ ／ ｓ ｃ ｉ ｅ ｎ ｃ ｅ ． １ 】 ７ ４ ４ ８１ ．
对象】 一【 层】 命令。
（ ２ ） 拖放层 ： 把捅入栏中的层按钮拖到文档编辑窗 口中 。
ｗ ｅ ｂ页实现人机对话 ， 从而 更改页面或引起某 些任 务的执行 。 行 为足事件和由该事件触发的动作构成 ，事件是浏览器生成
指示该页的访问者执行 的操作。 动作是 Ｄ ｒ ｅ ａ ｍ ｗｅ ａ ｖ ｅ ｒ （ ３ ） ｇ ｑ 建 多个层 ： 单击【 插入】 一【 布局对象卜－ ［ 层】 按钮， 按下 的消息 ，
网页设计与制作_第08章_使用行为和表单
图8-14 为网页添加“设置状态栏文本”行为效果
ห้องสมุดไป่ตู้
具体操作如下： 1）在Dreamweaver中，打开图8-8所示的网页文件。 2）选中整个文档，或在“代码”视图中选中<body>标签， 选择“窗口→行为”命令打开“行为”面板，单击面板中 的按钮，在弹出的菜单中选择“设置文本→设置状态栏文 本”命令，打开“设置状态栏文本”对话框，在文本框中 输入“欢迎来到我的书屋！”，如图8-15所示，单击【确 定】按钮。 4）保存文档，按下〈F12〉键在浏览器中预览设置效果。
图8-4 添加的弹出提示信息效果
在打开的“弹出信息”对话框中输入信息内容，如图8-6 所示，单击【确定】按钮。
图8-5 打开的网页
图8-6 “弹出信息”对话框
4）在“行为”面板中的行为列表中单击该行为的事件列， 选择“onMouseOver”选项。 5）选中图像下方的文本，在“行为”面板中单击“添加 行为”按钮，选择“转到URL”命令。 6）在打开的“转到URL”对话框中，设置要转到的目标 URL地址，这里选择图像的原图，然后单击【确定】按钮。 7）在行为列表中找到刚添加的行为，单击该行为的事件 列，在下拉列表中选择“onClick”选项。 8）保存网页文档，按下〈F12〉键在浏览器中预览网页效 果。
8.5.2 设置容器的文本
8.5.1 设置状态栏文本
“设置文本”行为包括4种类型，它们分别是设置状态栏文本、 设置容器的文本、设置文本域文本及设置框架文本。 “设置状态栏文本”行为可在浏览器窗口左下角处的状态栏 中显示文本消息。例如，可以使用此行为在状态栏中说明链 接的目标，而不是显示默认的URL。由于浏览者常常会忽略 或注意不到状态栏中的消息，可以使用弹出消息或 AP Div 元素显示。 “设置容器的文本”行为将页面上的现有容器（可以包含文 本或其它元素的任何网页元素）的内容和格式替换为指定的 内容。 “设置文本域文字”行为可用指定的内容替换表单文本域的 内容。
网页制作实验教程第十五章 创建时间轴
步骤4 选择［窗口］菜单栏的［时间轴］命令，打 开［时间轴］面板。 步骤5 将“earth”层移至动画开始的位置并选中 “earth”层，选择［修改］菜单栏的［时间轴］ 命令，点击其中的［增加对象到时间轴］命令， 这时［时间轴］面板就增加了一个关于“earth” 层的时间轴。 步骤6 将动画轴拖至第60帧，选中第15帧，然后点 击鼠标右键，从快捷菜单中选择［增加关键帧］ 命令，则在第15帧增加了一个“关键帧”。
学习与思考 根据本章所讲的时间轴功能，希望同 学们按照以下要求来完善你的个人主页: 1.为你的个人主页设置一个动态可漂浮的小 型广告牌。 2.为你的引导页设置一个多层显现的动态图 片。 3.为你的个人主页设置几幅动态的小图像。
实验四十一 通过拖动路径创建时 间轴动画
如果想创建具有复杂路径的动画，则可 以直接记录下拖动层时的路径，这会比单纯 地生成关键帧更为方便有效。
实验内容： 步骤1 创建一个新的HTML页面，将其命名为“地 球绕太阳公转”保存，将光标移至需要插入层处。 步骤2 选择［插入］工具栏的［布局］栏，单击其 中的 （层命令）按钮，鼠标变成“+”形。 步骤3 再选择［插入］工具栏的［布局］栏，单击 其中的 （层命令）按钮，鼠标变成“+”形。
实验目的： 要求同学们掌握利用增加关键帧的方 法来创建层移动的动画效果，熟悉时间轴 的基本属性。
实验原理： 时间轴是以根据时间的流逝移动图层 位置的方式显示动画效果的一种动画编辑 界面，其中包含了制作动画时所必需的各 种功能。
实验条件： 电脑操作系统Windows XP/2000/98、 Dreamweaver 8网页设计软件。
实验四十 通过增加关键帧创建时 间轴动画
实验内容： 步骤1 创建一个新的HTML页面，将其命名为“地球 绕太阳公转”保存，将光标移至需要插入层处。 步骤2 选择［插入］工具栏的［布局］栏，单击其中 的 （层命令）按钮，鼠标变成“+”形。 步骤3 再选择［插入］工具栏的［布局］栏，单击其 中的（层命令）按钮，鼠标变成“+”形。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 播放时间轴，停止时间轴 ： 允许用户通过某种事件来播放或停止播放时间轴
2020/8/14
21
四、时间轴应用实例
制作在网页上飘动的广告图片(gundong.html) 小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
一个单行可以包含多个代表不同对象的动画栏， 但是在同一帧中，不同的动画条不能控制相同 的对象。
5. 关键帧：
即动画栏中的小圆点。是动画栏中给某个对象 指定了属性（如位置）的帧
2020/8/14
14
6.总帧数（即长度）： 表示每个动画栏占有的帧数 。
后退和播放按钮之间的数字是当前播放帧
通过设置总帧数和每秒帧数（fps），可以控 制动画的持续时间及速度
7. 移动层，使运动轨迹呈曲线状
2020/8/14
19
（二）通过拖动路径创建时间轴动画
1. 插入一个层 2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。
2020/8/14
20
（三）控制时间轴
1. 选中层，在行为面板中单击加号按钮，选择 时间轴
2020/8/14
4
2、Dreamweaver 中可以添加的行为 动作 3、Dreamweaver中主要事件
4、内置行为的具体应用
2020/8/14
5
2020/8/14
6
交换图像:与鼠标经过的图像基本相同 拖动层 转到URL 播放声音 打开浏览器窗口 设置文本
2020/8/14
7
复习:
1.行为的重要组成部分是什么？
2020/8/14
12
•窗口时间轴 （打开时间轴面板 ） 1. 播放头： 2. 值是页面上当前显示的是时间轴的哪一帧
2. 时间轴弹出菜单： 指定当前文档的哪个时间轴显示在时间轴面板中。
3. 动画频道： 显示动画层和图像的栏
2020/8/14
13
4. 动画栏（条）：
即动画频道中的蓝色小条，显示每个对象的持 续时间。
2020/8/14
11
时间轴弹出菜单
当
前
回
播
每秒
首 后 放 播 播放
帧 退 帧 放 帧数
二 、时间轴面板
自动 循环 播放 播放
行为频道 播放头
动画频道
动画栏
帧数
关键帧
自 循播动动关 总动环 画键放画帧时 回后播播播 栏帧间首放头频数退放放 （轴：：帧： 条： 道弹选是使 ）：择出值 ： 表将动页：将“菜是 显 示面即播画自播单在动页 示 每栏放：放播浏画指中面 动 个头头放览频定给”器 道移上画动向当复某中动前当层画选左右打 的个到框文前和栏开 蓝移对，档时时 色使显图占动的象间， 小当哪示像有指一当 条轴前个定页前 ，的帧的时面时 显了首间是栏帧在间 示属轴帧载时数轴 每显性入可 个间。浏示（以 对览在轴如无象器时限的的位时间循持自置哪轴动环续面）开一播时板的始放间帧中播帧。放。时间轴
2020/8/14
8
8章 时间轴
2020/8/14
9
一、时间轴的概述
时间轴的基本原理： 使层中的内容在一定的时间内，按照设计好的路 线显示在页面中，在时间轴上显示的每一个层称 为一帧，整个时间轴就是由许多帧构成的，这些 帧在页面中的连续播放构成了时间轴动画。
2020/8/14
10
时间轴通过改变层在不同时间的 位置 大小 可见性和叠放顺序 来创建动画。
复习：
1. 模板文件的扩展名？ 库文件的扩展名？
2020/8/14
1
7章 行为
2020/8/14
2
1 1、行为动作和事件
行为就是以某种方式完成的动作。 行为的主要功能： 就是在网页中插入JavaScript程序而无需动手编写代码，这正是设 计者所需要的。用它可以轻松地做出许多网页特效。
行为是一种事件和动作的组合： 动作是指在浏览网页时可完成的一些特殊功能，如拖曳层、
2. 选择 窗口时间轴 ，打开时间轴面板
3. 选择要制作动画的层
4. 选择 修改时间轴添加对象到时间轴
或者直接把选定的对象拖入时间轴面板中
2020/8Байду номын сангаас14
18
5. 单击该动画栏最后关键帧标记（即第15帧），将 页面上的层移动到动画末尾时它所应该在的位置
6. 如果要让层按曲线移动，选择它的动画栏，按住 Ctrl键单击，再插入点位置添加一个关键帧 或在动画栏中间单击一帧，并从右键快捷菜单中 选择“增加关键帧”
公式：总帧数＝持续秒数×帧频率
2020/8/14
15
7. 回首帧：将播放头移动到时间轴的首帧
8. 后退：将播放头向左移动一帧。
9. 播放：将播放头向右移动一帧。
10. 自动播放： 选择“自动播放”复选框，使当前页面在载入 浏览器时自动开始播放时间轴
2020/8/14
16
11. 循环播放：
选择“循环”复选框，使页面在浏览器中打开 时，
隐藏和显示层、播放音乐、交换图像等； 事件是完成某一动作的具体方式，如onMouseOver(鼠标指
向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)等。
例：插入【交互式图像】就是一个典型的行为应用。
2020/8/14
3
事件
Onclick:单击图像链接按扭 onDblclick：双击对象 onError：载入错误 onFinish：所选内容完成一个循环 onHelp：单击help onKeyDown：按键 Onkeypress：按键并释放 onKeyUp：释放 onLoad：页面载入 onMouseDown：按下鼠标 onMouseMove：移动鼠标 onMouseOut：鼠标移出 onMouseOver：鼠标移入
当前时间轴可以无限循环播放
这实际上是在动画最后一帧后的行为通道中插入 了“转到时间轴帧”行为。双击此帧中的标记， 可以编辑行为的参数与改变循环次数
2020/8/14
17
三 、 创建时间轴动画的操作
(一)简单的时间轴应用： 1. 在页面添加层，在层中插入要移动的元素，然 2. 后将层移动到动画的起始位置
1. 在网页中插入一个层，在层中插入一幅广告图片
2. 选中图像，为其设置超级链接
3. 选中层 修改时间轴录制层路径
2020/8/14
22
4. 按住层不放，拖动层画出层的运动轨迹，在动画 结束的地方松开鼠标