网页制作项目10使用时间轴制作动画

XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务（一）课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。

本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。

（二）课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程,学生可以掌握以下技能和知识：1.掌握网站的开发流程，如建站规划、效果图制作、建立站点、发布网站等相关知识。

2.掌握各种网页元素在DremweaverCS3中的使用。

例如，文本、表格、图像、超级链接、层、框架和表单等。

3.掌握HTM1,理解各种标记的功能和用法。

4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。

5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。

6.能够解决一些网页设计中的常见问题。

（三）本课程的特点1.课程注重实际应用，即实践性强。

2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件，是“网页三剑客”之一，具有较强的实践性，学习难度不大。

3.突出理论联系实际，实作课时占总课时的50%以上，实际应用知识占课程总知识量的80%以上。

（四）与相关课程的衔接、配合、分工先修课程：“计算机应用基础”、“图形图像处理（FireWorkS或PhotoShop）"、"F1ash动画制作”等。

二、课程目标本课程的基本目标是：使学生通过本课程的学习，掌握DreanIWeaVerCS3的使用方法，学会使用DreamweaverCS3制作Web网页的技术。

本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。

实验九时间轴一、认识时间轴面板打开时间轴面板，认识行为通道、帧标尺、动画通道，认识当前帧指针、播放进程控制按钮（前进、后退、退到开始），播放参数设置选项。

二、时间轴动画的创建和基本控制∙在页面绘制一个层，里面插入图片，调整层的长度、高度尺寸，使之恰好放入图片。

∙分别利用右键菜单、鼠标拖动、“修改”主菜单操作将该层添加到时间轴。

∙此时在时间轴timeline1的动画通道上，增加了15帧？哪些帧是关键帧（空心圆圈）？哪些帧是普通帧（直线）？∙选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？为什么？（有，因为帧已经规定好了位置）∙选第15帧，按住左键向右拖动到第30帧松开，而后选中层，将其移动较大距离到一个新位置。

而后再选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？（有）判断一下，这一段动画可播放几秒钟？（6（5/30））∙按下F12，在浏览器中预览，可以看到动画效果吗？为什么？（不能，没有设置自动播放）∙要想在浏览器中看到刚才的动画效果，应该设置哪一个播放参数（自动播放）？设置后再次预览。

测试一下自己当初预计的播放时间是否正确。

（正确）∙对刚才这一段动画，要加快/ 减慢动画播放速度（在时间轴中改变FPS的参数），或减少/ 延长播放时间（用鼠标拖动或右击增加或减少帧），怎么办？有几种做法？三、帧、通道的编辑∙删除普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“移除帧”，观察该动画总帧数的变化。

（减少了一个普通帧）∙添加普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“添加帧”，观察该动画总帧数的变化。

（增加了一个普通帧）∙将普通帧转化为关键帧：将播放指针移到中间某普通帧，先左键选中再右键单击，在菜单中选择“增加关键帧”，观察该动画通道上的标志有何变化。

总帧数增加了吗？（没有增加，它只是把普通帧转化为了关键帧）∙将关键帧转化为普通帧：先用左键选中再右键单击上面的关键帧，在菜单中选择“移除关键帧”，观察该动画通道上的标志有何变化。

1.要一次选择整个列，在标签检查器中选择标签()。

A.tableB.trC.tdD.tp答案：C2.如果要给图像添加文字说明，需要填写图像属性面板的()选项。

A.边框B.目标C.替代D.地图答案：C3.关于超级链接的说法正确的一项是()。

A.一个超级链接是由被指向的目标和指向目标的链接指针组成B.超链只能是文本内容C.超链的目标可以是不同网址、同一文件的不同部分、多媒体信息，但不能是应用程序D.当单击超链时，浏览器将下载Web地址答案：A4.下列关于CSS的说法错误的是()。

A.CSS的全称是CascadingStyleSheets，中文的意思是“层叠样式表”B.CSS的作用是精确定义页面中各元素以及页面的整体样式C.CSS样式不仅可以控制大多数传统的文本格式属性，还可以定义一些特殊的HTML 属性D.使用DW只能可视化创建CSS样式，无法以源代码方式对其进行编辑答案：D5.在水平线属性面板中，不能设置水平线的()。

A.宽度B.高度C.阴影D.颜色答案：D6.域名服务器上存放着Internet主机的()。

A.域名B.电子邮箱地址C.域名与IP地址的对应表D.IP地址答案：C7.定义表格中行的标签是()。

A.tableB.trC.tdD.th答案：B8.在表单中需要把用户的数据以密码的形式接受，应该定义的表单元素是()。

A.<input type=text>B.<input type=password>C.<input type=checkbox>D.<input type=radio>答案：B9.用于同一个网页内容之间相互跳转的超链接是()。

A.图像链接B.空链接C.电子邮件链接D.锚点链接答案：D10.标记br的作用是()。

A.画一条水平线B.显示粗体文字C.预排版D.文字转行答案：D11.下列文件属于静态网页的是()。

A.Index.aspB.index.jspC.index.htmlD.index.php答案：C12.Dreamweaver用时间轴制作动画，关于时间轴，下列说法错误的是()。

实训七利用时间轴制作动画设计目标：创建时间轴动画，使飞行器图像在页面上自由飞行，效果如下图所示。

相关知识点：创建时间轴动画在时间轴面板中添加关键帧控制动画速度改变图像和图层属性实训内容：一、准备工作（一）复制文件把“实训七利用时间轴制作动画\实训”中的“materials”文件夹复制到D：盘根目录。

（二）新建站点站点名称：利用时间轴制作动画站点根文件夹：D:\ materials二、创建时间轴动画（一）一个简单的直线运动的时间轴动画实例1．建立一个做直线运动的时间轴动画操作步骤如下：（1）打开ex9_1.html文档。

（2）在页面中添加一个新图层，在层中插入图像img9_1.gif，然后将图层移动到文档的右上方（动画的起始位置）。

（3）在菜单栏中选择“窗口”→“时间轴”命令打开时间轴面板。

（4）选择要创建动画的图层，用鼠标拖动图层到时间轴的第一帧处。

（5）当第一次在时间轴中添加对象时，会弹出提示框，告诉你可以改变该层的大小，位置，层顺序，以及可见性。

单击“确定”按钮，这时在时间轴通道中将出现一个紫色动画条，动画条中显示了图层的名称，如下图所示。

动画条（6）拖动动画条尾部的关键帧位置到100帧处（注意播放头也跟着移动到该处），将动画图层移动到文档的左上方（动画结束的位置），这时从动画起始位置到结束位置有一条线显示，这就是图层的的运动轨迹，如下图所示。

（7）单击播放按钮，可直接在网页中预览时间轴动画。

（8）选中“自动播放”复选框。

保证浏览器中的动画能自动播放。

（9）选中“循环”复选框。

保证动画在浏览器中能循环播放。

（10）预览网页。

2．将做直线运动的时间轴动画，改为做曲线运动操作步骤如下：（1）打开ex9_1.html，将文件另存为ex9_2.html。

（2）在时间轴面板中，选中动画条的第35帧，单击鼠标右键从弹出的快捷菜单中选择“增加关键帧”。

（3）在第35帧处，向下移动图层使运动轨迹呈现曲线状。

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告知（教学内容、目的）告知：本次课的教学内容：动态效果制作篇教学目的：要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。

Photoshop 网页设计普通图层时间轴动画
普通图层的时间轴动画主要是针对位置、不透明度与样式效果，既可以单独创建，也可以同时创建。

其效果与帧动画中的过渡动画相似。

比如，位置时间轴动画的创建。

当画布中存在图像时，执行【窗口】|【动画】命令，并且切换到【动画（时间轴）】模式中。

确定【当前时间指示器】位置后，单击【位置】属性的【时1-变化秒表】，创建第1个关键帧，调整该关键帧中对象的属性，如图1-39所示。

图1-39 创建第1个关键帧
向右拖动【当前时间指示器】，确定第2个关键帧位置，单击【添加/删除关键帧】图标，创建第2个关键帧，并且移动对象位置，如图1-40所示。

图1-40 创建第2个关键帧
这时，位置效果的时间轴动画创建完成，单击面板底部的【切换洋葱皮】按钮后，移动【当前时间指示器】，发现不同时间效果不同。

如图1-41所示，表示了对象移动走向。

图1-41 切换洋葱皮
式时间轴动画，如图1-42所示。

图1-42 创建样式时间轴动画
单击面板底部的【切换洋葱皮】按钮后，移动【当前时间指示器】查看时间轴动画
图1-43 切换洋葱皮效果。

网页设计复习题一、填空题1.一个行为是由时间和动作两部分组成。

2.行为可以绑定到连接、图像、表单元素或者多种其他HTML元素中的任何一种，但是不能将行为绑定到文本。

3。

动作是一段预先编写好的 JavaScript 源程序。

4.若要在调整图像尺寸时保持其宽高比,在拖动图像右下角点的同时,按住Ctrl 键。

5.表格一般被划分为单元格、行和列 3部分。

6.框架是由两种元素框架和框架集组成。

7.网页制作中有些需要经常更新的页面元素,在各个页面中的摆放位置可能不同，但内容是一致的，这时可以把它们制作成库项目以提高制作和维护的效率。

8。

在Dreamweaver中,通常将放置在层内部的层称作嵌套层或子层。

9。

表单的提交方法有两种 POST 和GET。

10.控制时间轴动画需要使用行为播放时间轴、停止时间轴来实现。

11.样式表CSS包涵三种类型类样式、标签样式和高级样式。

12.。

在网页中使用的图像格式主要有。

gif 、。

jpg 和。

png3种.13.制作框架网站，除保存框架中包含的网页文件,还需保存框架集文件. 14。

设置远程服务器的时候,可以选择远程服务器WebDA V（基于Web的分布式创作和版本控制)，如果要选择此类服务器，必须要先安装IIS 和Apache Web 服务器。

15。

在Dreamweaver,插入换行符的快捷键是 Shift + Enter 。

16.文本列表有有序列表和无序列表两种形式。

17.CSS样式选择器类型有类、标签和高级三种形式。

18。

在Dreamweaver中设置连接的路径包括绝对路径、相对路径和文档相对路径。

19.通过链接的方式可以把各个网页联系起来，使网站中众多的页面构成一个整体，使访问者能够在各个页面之间进行跳转.20.超链接是由两个部分组成的，一部分是在浏览页面时看到的部分，称为超链接载体,另一部分是超链接所链接的目标。

21。

创建超链接可以链接到不同的目标,在网页中创建超链接的目标有网页、图片、视频和音频和电子邮件地址。

实验1 插入层1、打开index.htm页面，将光标停留在页面中要插入层的位置（页面左上方），选择“插入”中的“布局”快捷栏，单击左侧第3个“描绘层”按钮；2、在网页编辑窗口中，拖动光标即可绘制出一个层，若按住Ctrl键的同时拖动可以连续绘制多个层。

实验2 设置层1、打开index_ori.htm页面，页面排版已经完成，我们要为这个页面添加层自动溢出的效果；2、选择“插入”中的“布局”快捷栏，单击左侧第三个“描述层”按钮，在网页编辑窗口中上方中间的位置，拖动光标即可绘制出一个层；3、在层的属性面板中，设置层距左侧320px，距离上部164px，宽度172px，高度124px，然后将溢出设置为auto，auto使浏览器仅在需要时（即当层的内容超过其边界时）才显示层滚动条；4、按下F12键，预览。

实验3 显示隐藏层1、打开index_ori.htm页面，单击“插入”的“布局”快捷栏中的“层”按钮，然后在文档窗口中绘制一个层；2、然后在层中放置显示一张图象，这里为images文件夹下的tel.jpg；3、在层面板中单击层前面的眼睛图标，将层的属性设为隐藏；4、选中页面中的Enter图片，打开行为面板，单击加号按钮并从“动作”弹出式菜单中选择“显示-隐藏层”；5、在“显示-隐藏层”对话框中“命名的层”列表中选择要更改其可见性的层，这里选择Layer1，单击“显示”按钮以显示该层；6、单击“确定”按钮后，将显示层的鼠标事件设定为onMouseOver，表示当鼠标上滚动到图片上时，显示该层；7、再次选择Enter图片，单击行为面板中的加号按钮并从“动作”弹出式菜单中选择“显示-隐藏层”；8、在对话框中单击“隐藏”按钮以隐藏该层；9、单击“确定”按钮后，将隐藏层的鼠标事件设定为onMouseOut，意为当鼠标从图片上移动的时候，隐藏该层；10、此时，该特效已经添加完毕，保存文档并在浏览器中预览，可以看到显示-隐藏层的效果。