网页制作项目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网页的技术。
本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。
使用时间轴制作动画
flash与 DW8的时间轴的时间轴
一、创建动画操作步骤:
1、第一步：直线运动效果(基础操作)
① 在页面中添加层，在层中插入要移动的元素(如图像 或文字)，然后把层添加到时间轴（右击）。
② 一个带有两个关键帧的动画栏出现在时间轴的第一个 通道内，相应的层 名(Layer1)显示在该动画栏中.
③ 单击动画轨道最后关键帧标记( 注意播放头也跟着移 动到该处)，按鼠标左键不放拖动延长动画轨道.(如 延长至第50帧处)
④ 移动层，层的运动轨线显示出一条直线. ⑤ 将时间轴面板中的“自动播放”和“循环”勾选上。
⑥ 保存并预览(按F12键)，就会看到层沿直线运动.
第二步：添加曲线运动效果(重点和难点)
比如，将这些动画效果作为网页特效吸引浏 览者对该网站兴趣；或是将动画应用于商业网站， 作为浮动广告更能吸引浏览人群的关注。
在学校网站上设计本届校运会动态 广告效果
用Dreamweaver 8在素材文件夹里打开 “四职校网站”，设计制作一幅运动会的 图、文广告。
思考题
1.如要在页面载入完毕之后，打开一个广 告窗口，需使用什么动作，并且附加给 什么对象？
2.如何创建一个复杂路径的时间轴动画？ 3.如何改变动画的播放时间？
“时间轴”面版与动画制作
本节学习内容: 1、认识时间轴面板； 2、利用时间轴面板制作动画的操作方法；(教学重点) 3、复杂动画效果制作方法；(教学提升) 4、动画的实际应用(教学拓展) 。
一、认识时间轴面板 我们先来熟悉时间轴面板 在dreamweaver8中按Alt+F9或选择主菜单
中的“窗口/时间轴”打开时间轴面板
二、实现多张图像的动画效果(内容提升部分) 要想在网页中同ቤተ መጻሕፍቲ ባይዱ有几张图像浮动的效果，
网站网页设计实验指导实验九时间轴
实验九时间轴一、认识时间轴面板打开时间轴面板，认识行为通道、帧标尺、动画通道，认识当前帧指针、播放进程控制按钮（前进、后退、退到开始），播放参数设置选项。
二、时间轴动画的创建和基本控制∙在页面绘制一个层，里面插入图片，调整层的长度、高度尺寸，使之恰好放入图片。
∙分别利用右键菜单、鼠标拖动、“修改”主菜单操作将该层添加到时间轴。
∙此时在时间轴timeline1的动画通道上，增加了15帧？哪些帧是关键帧（空心圆圈）？哪些帧是普通帧（直线）？∙选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？为什么？（有，因为帧已经规定好了位置）∙选第15帧，按住左键向右拖动到第30帧松开，而后选中层，将其移动较大距离到一个新位置。
而后再选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？（有）判断一下，这一段动画可播放几秒钟？（6（5/30））∙按下F12，在浏览器中预览，可以看到动画效果吗？为什么？（不能，没有设置自动播放）∙要想在浏览器中看到刚才的动画效果，应该设置哪一个播放参数（自动播放）？设置后再次预览。
测试一下自己当初预计的播放时间是否正确。
（正确）∙对刚才这一段动画，要加快/ 减慢动画播放速度（在时间轴中改变FPS的参数），或减少/ 延长播放时间（用鼠标拖动或右击增加或减少帧），怎么办？有几种做法？三、帧、通道的编辑∙删除普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“移除帧”，观察该动画总帧数的变化。
（减少了一个普通帧）∙添加普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“添加帧”，观察该动画总帧数的变化。
（增加了一个普通帧）∙将普通帧转化为关键帧：将播放指针移到中间某普通帧，先左键选中再右键单击，在菜单中选择“增加关键帧”，观察该动画通道上的标志有何变化。
总帧数增加了吗？（没有增加，它只是把普通帧转化为了关键帧）∙将关键帧转化为普通帧：先用左键选中再右键单击上面的关键帧，在菜单中选择“移除关键帧”，观察该动画通道上的标志有何变化。
北京交通大学《网页设计与制作》20秋在线作业2-003答案
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帧处，向下移动图层使运动轨迹呈现曲线状。
使用时间轴来制作网页动画
在学生的回答中教师演示操作
学生上机操作
8.删除时间轴的方法
方法一：单击右键——删除
方法二：单击右键——移除时间轴
9.复杂层运动的方法——复制记录层路径
方法：添加一个动画对象——播放指针定位于需要对象开始运动的帧位置，选中新建层对象——修改——时间轴——复制路径——鼠标托拽目标层对象——松开鼠标按键。
课题
使用时间轴来制作网页动画
课时
1
课型
新授
目
的
要
求
知识目标：掌握网页制作中使用时间轴来制作网页动画的方法，可以自己创建一个简单的时间轴动画。
能力目标：在Dreamweaver中可以熟练的使用时间轴在自己的网页中创建一个美观的小动画。增强对Dreamweaver的了解和使用。
德育目标：培养学生与他人交流协作的意识和能力，培养学生观察能力和动手操作的能力，增强学生竞争的意识。
方法二：选中目标层对象——修改——时间轴——添加对象到时间轴。
在学生的回答中教师演示操作
在展示的实例中，以学生喜欢的素材出现，可以吸引学生的注意力。
播放第一段视频，根据视频内容提出问题。培养学生善于观察的能力。
加深学生对知识的记忆
开始播放第二段视频。
1’
1’
1’
1’
2’
教学内容
教法与学法
时间
4.延长动画时间的方法
重点
在网页中创建一个简单的位置移动时间轴动画
难点
改变位置移动动画的运动轨迹、插入关键帧的方法、（复制记录层路径）
关键
明确时间轴的含义和工具的使用
教具
计算机、教学光盘
教学内容
教法与学法
网页设计与制作课程课程大纲
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告知（教学内容、目的）告知：本次课的教学内容：动态效果制作篇教学目的：要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
网页制作项目10__使用时间轴制作动画--ppt(精)
网页设计与制作—— Dreamweaver 8
主讲：
使用时间轴制作动画
任务一 任务二 实训 小结
小结
本项目通过公园导游图动画介绍了时间轴的一些基 本功能和方法，同时也让读者对层这个概念有了更进一 步的了解。时间轴和层就像一对钥匙和锁，只有将它们 配成对，才能打开网页动画的大门。
网页设计与制作
Dreamweaver 8
项目十 使用时间轴制作动画
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务一 使用层设置公园背景和标题 任务二 使用时间轴设置运动效果
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务一 使用层设置公园背景和标题
任务一 任务二 实训 小结
3、快速创建一个复杂路径的时间轴动画的方法
如果需要创建具有复杂运动路径的动画，可以使用录制层路 径功能。首先在主菜单中选择【修改】／【时间轴】／【录制层路 径】命令，然后在文档中拖动层来录制路径，最后在动画要停止的 地方释放鼠标左键， 这时将自动在【时间轴】面板中添加对象， 并且较为合理地创建了一定数目的关键帧。也可以根据实际情况对 各关键帧的位置适当进行调整使其更为合理。
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务二 使用时间轴设置运动效果
网页设计(CS5)-第8讲-时间线动画
网页设计·第8讲
2 创建时间轴动画
关键帧方法
操作： （1）将层添加到时间轴上 （2）拖动右侧关键帧延长时间 （3）单击第二个关键帧后在编辑窗口拖动层
（4）在时间轴插入一关键帧
（5）在窗口的关键帧处拖拉层形成曲线轨迹。
网页设计·第8讲
2 创建时间轴动画
录制路径法
操作： （1）将层添加到时间轴上 （2）选中层在右键快捷菜单中单击【记录路径】命令项 （3）在编辑窗口中按住鼠标左键拖动层录制路径 （4）录制完成
若要让浏览器能够自动播放动画，则要选中【自动播放】复选框。
一般来说都将这一项选中。将【循环】复选框选中，就可以实现动画的 循环播放了。
网页设计·第8讲
2 创建时间轴动画
创建动画方法
时间轴的操作对象主要是层，若要实现对其他网页对象的动画设
置，必须先将对象放入一个层中，然后才能进行动画操作 。
创建时间轴动画，就是往时间通道上添加层，构建动画条，创建 关键帧，指定层在文档中处于关键帧时的位置，再串联播放，从而实 现动画。 利用时间轴和层创建动画有两种方法：关键帧方法和录制层路径 方法 。
动画的默认播放速率是每秒15帧，这是大多数浏览器的平均速率。
用户可以在【Fps】文本框中输入数值来改变播放速率。数字越大播放越 快，但并不是速率越快越好，有的浏览器达不到很高的速率时，就将高
出的速率忽略。
网页设计·第8讲
2 创建时间轴动画
六、删除动画 选中动画条，按Delete键即可将该动画删除。 七、自动播放和循环
一个画面串连起来播放，让人产生运动的错觉。时间轴就 是利用这个原理来实现页面中层的动画效果的的，它的基
本单位就是一个画面，或者叫做帧。在这些画面中有些画
Photoshop 网页设计 普通图层时间轴动画
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 切换洋葱皮效果。
网页设计与制作项目10 时间轴──制作航行动画
28.最后保存文档，同时在浏览器中预览其效果，如图所示。
任务二 使用时间轴制作运动效果
【操作步骤】 1.将鼠标光标置于层“seaLayer”中，然后在菜单栏中选择【插入】 ／【布局对象】／【层】命令，在层中插入一个嵌套层 “sailLayer”，其属性设置如图所示。
2.在层中插入图像“images/sail_2.gif”，在【属性】面板中设置 图像名称为“sail”，替换文本为“帆船”，如图所示。
18.选中刚添加的动画条，并向左拖动到时间轴的起始处，如图所示。
19.在时间轴中拖动动画条“sail”右侧的关键帧到125帧处，然后在第 65帧处增加一个关键帧，如图所示。
20.确认动画条“sail”第65帧处的关键帧仍然处于被选中状态，然后 在【属性】面板中将图像的源文件修改为“images/sail_1.gif”， 此时页面中的图像由向右航行的帆船转为向左航行的帆船，如 图所示。
25.在动画条“seaLayer”第115帧处增加一个关键帧，然后在【属性】面板 中，设置左边和上边的边距值分别为“3Leabharlann 0px”和“574px”，如图所示。
26.选中动画条“sail”第125帧处的关键帧，然后在【属性】面板中将图像的 源文件修改为“images/sail_1.gif”，此时页面中的图像由帆船向左航 行变为帆船向右行驶。 27.在【时间轴】面板中勾选【自动播放】和【循环】两个复选框，这样可 使时间轴动画在页面打开时能够自动循环播放，如图所示。
4.在层【属性】面板中，将层编号修改为“seaLayer”，设置左边距和上 边距均为“0px”，宽度为“1024px”，高度为“819px”，背景图像为 “images/sea.jpg”，如图所示。
5.将鼠标光标置于层“seaLayer”中，然后在菜单栏中选择【插入】／ 【布局对象】／【层】命令，在文档中插入一个嵌套层 “TitleLayer”，属性设置如图所示。
网页制作项目10使用时间轴制作动画--电子教案.
重点
难点
手动创建时间轴动画的基本方法
通过录制层路径创建时间ຫໍສະໝຸດ 动画的方法要求掌握的知识点和分析方法
要求掌握【时间轴】面板、增加对象到时间轴、控制动画播放、添加或删除帧、录制层路径、用时间轴改变图像与层的属性等知识点。
项目实现的是人沿着公园中的道路行走的效果，在Dreamweaver 8中需要通过层和时间轴的相互配合来制作。首先需要添加一个层，在其中插入人向右走的图像，然后将层添加到时间轴，添加多个关键帧，并移动层，使其沿道路移动，接着将层中的图像添加到时间轴，在最右侧拐弯处添加一个关键帧，并修改图像为人向左走的图像，在最后一个关键帧处，即人走到公园门口时，再将图像修改为人向右走的图像。
《中文Dreamweaver 8网页制作教程与上机实训》，魏聪等编著，机械工业出版社
《非常容易Dreamweaver 8网页制作》，导向科技编著，人民邮电出版社
备注
中等职业学校教案
教研室：
课程名称：网页设计与制作—Dreamweaver 8
任课教师：
XXXX学校教务处制
中等职业学校教案
第10次课2学时
章节
项目十使用时间轴制作动画
讲授主
要内容
1.时间轴面板的组成及其作用
2.在时间轴中编辑关键帧的方法
3.手动创建时间轴动画的基本方法
4.通过录制层路径创建时间轴动画的方法
授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置
DW网页设计与制作题库(单选题)
A
Timeline表示（）。
时间轴
样式表
层
行为
A
使用时间轴使一个对象具有移动动画效果，这个对象应该（）。
位于层中
位于表单中
位于帧中
位于表格中
A
利用时间轴做动画效果，如果想要一个动作在页面载入4秒后启动，并且是每秒15帧的效果，那么起始关键帧应该设置在时间轴的（）。
电子邮件链接
表单
锚点链接
外部链接
A
如果要实现页面上有跳转到页面首行的链接，应通过（）来设置。
锚点链接
表单
表格
外部链接
A
创建空链接使用的符号是
#
@
&
*
A
关于在网页中加入命名锚点来实现跳转的说法，不正确的是
只能跳转到其它页面的页首
在页面编辑时，需要使用“插入”面板中的“命名锚记”
可以实现同一页面中不同位置的跳转
限制行域
单行域
密码域
多行域
A
表单可以和（）放在一行。
这些选项都不能
文本
图像
表单
A
*下面关于设置文本域的属性说法错误的是（）。
通过设置可以控制单行文本域的高度
单行文本域只能输入单行的文本
通过设置可以控制输入单行文本域的最长字符数
密码域的主要特点是不在表单中显示具体输入内容，而是用*来替代显示
A
在Dreamweaver中，可利用表单与浏览者进行交流，在设计中要区分男女性别，通常采用（）。
在单元格中不可以设置背景图片
单元格可以相互合并
在表格中可以插入行
可以拆分单元格
A
在Dreamweaver中，下面关于导入和导出表格数据说法错误的是（）。
《网页设计》复习题(期中期末考试题库)2012.4.12
网页设计复习题一、填空题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、此时，该特效已经添加完毕，保存文档并在浏览器中预览，可以看到显示-隐藏层的效果。
第28讲 网页制作之时间轴
使用多个时间轴
一条时间轴可以控制32路动画通道。当时间轴 面板上有多路动画时显得繁琐复杂，可以利用多条 时间轴控制页面上不同区域的动画。 操作：菜单“修改>时间轴>添加时间轴”
课堂练习——茶艺人生网页
使用“时间轴”面板和“添加关键帧”命令制作叶子下落效果。
效果图
课堂案例——精品家居网
使用“绘制 AP Div”、“时间轴”面板制作忽隐忽现的动 画效果。使用“CSS样式”面板设置多变的鼠标指针效果。
时间轴动画
课程引导
• 时间轴也叫时间线。画一条直线，用它表示时间，直线 上不同的点表示不同的时刻，这就是时间轴。如果设置 一些不同的点对应不同的网页内容，当从时间轴零点开 始显示网页时，随着时间的移动，会看到不同的内容， 这就是动画。 时间轴用于表示网页显示期间发生的各种状态。通过往 时间轴上不同时间位置放置不同的内容，就可以实现网 页元素的动态效果。 利用时间轴构建动态网页，是通过Dreamweaver自动生 成JavaScript代码来实现的。
Hale Waihona Puke 效果图录制层路径如果想制作沿任意轨迹运动的动画，可以使用“录制层路径” 命令。 （1）在文档中插入一个层，并在层中插入一张图片。将层移 动至它在动画开始时应处于的位置。 （2）选择“修改 > 时间轴 > 录制AP元素路径”命令。在文 档中拖曳该层，拖曳的轨迹为层运动的路径。 （3）在动画停止的地方释放鼠标，“时间轴”面板中将自动 添加对象，并且较为合理地创建了一定数目的关键帧。 （4）按住“时间轴”面板中的“播放”按钮 不放，在页面 中预览动画。
添加、删除帧
添加帧 打开“时间轴”面板，将播放头移到要添加帧的位置，选择 “修改 > 时间轴 > 添加帧”命令，在播放头右侧加入一帧。 移除帧 打开“时间轴”面板，将播放头移到要删除帧的位置，选择 “修改 > 时间轴 > 移除帧”命令，在播放头右侧删除一帧。 增加关键帧 选择整个动画条，选择“修改 > 时间轴 > 增加关键帧”命 令，在当前的播放头位置加入关键帧。 移除关键帧 选中要删除的关键帧，选择“修改 > 时间轴 > 移除关键帧” 命令，将当前选中的关键帧删除。
YS - 《网页制作》复习题(单选题)
C.32位D.64位
★在URL的基本格式中，下列哪项表示访问信息的链接方式或所采用的通信协议
A.访问类型B.访问的主机
C.端口号D.访问的文件
★关于HTML说法错误的是
A.是一种程序设计语言B.是一种页面描述语言
C.浏览器解释HTML各种标记D.使用标记描述对象
★在网站的三级结构中，每个栏目的起始页是
C.目录的层次尽量深D.每个目录下都建立独立的images目录
★下列关于网页设计规则说法错误的是（）
A.要谨慎使用图片B.浏览者的需求应该被放在第一位
C.页面的布局保持统一性D.尽量多使用多媒体
★在HTML语言中，符号<pre>表示（）
A.预排版标记B.文字效果标记
C.特殊符号标记D.转行标记
★网页制作最重要的原则是( )
运行在互联网上用于www服务的协议是??ahttp???????bftp??csmtp???????dpop3??网页制作三剑客不包含以下哪个??adreamweaver?????bflash??coffice???????dfirework?html语言中标题字体的标记是??a
★运行在互联网上用于WWW服务的协议是
A.positionB.overflow
C.visibilityD.z-index
★<title></title>标记必须包含在什么标记中
A.<body></body>B.<table></table>
C.<head><head>D.<P></P>
★内部样式表CSS样式表驻留在文档的什么标记中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
任务一 任务二 实训 小结
3、快速创建一个复杂路径的时间轴动画的方法
如果需要创建具有复杂运动路径的动画，可以使用录制层路 径功能。首先在主菜单中选择【修改】／【时间轴】／【录制层路 径】命令，然后在文档中拖动层来录制路径，最后在动画要停止的 地方释放鼠标左键， 这时将自动在【时间轴】面板中添加对象， 并且较为合理地创建了一定数目的关键帧。也可以根据实际情况对 各关键帧的位置适当进行调整使其更为合理。
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务二 使用时间轴设置运动效果
使用时间轴设置运动效果操作动画
时间轴是与层密切相关的一项功能，它可以在 Dreamweaver中实现动画的效果。通过时间轴，可以让层的位 置、尺寸、可视性和重叠次序随着时间的变化而改变，从而创建 出具有Flash效果的动画。本任务主要是利用时间轴制作人沿着 公园道路前进的效果。
通过本任务的学习，需要掌握的内容有： 1、了解【时间轴】面板并掌握其使用方法
网页设计与制作
Dreamweaver 8
任务二 使用时间轴设置运动效果
2、添加对象到时间轴
项目十：
使用时间轴制作动画
在主菜单中选择【窗口】／【时间轴】命令打开【时间轴】
面板，然后选定对象，并在主菜单中选择【修改】／【时间轴】／ 【添加对象到时间轴】命令将对象添加到【时间轴】面板或者将对 象直接拖曳到【时间轴】面板。
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
任务一 使用层设置公园背景和标题
（2）在层“MapLayer”中插入一个嵌套层“TitleLayer”并进 行属性设置。
任务一 任务二 实训 小结
Байду номын сангаас
（3）设置CSS样式并输入文本“公园导游图”。
网页设计与制作
Dreamweaver 8
任务一 任务二 实训 小结
任务一 使用层设置公园背景和标题
使用层设置公园背景和标题操作动画
本任务将首先使用层布局页面中的公园地图及标题 等内容。关于层的基本知识在项目九已作详细介绍，经 过本任务的学习,读者可以进一步巩固其具体应用。
关于本任务的基本操作过程是： （1）创建一个层“MapLayer”，宽度设置为“800px”，高度设 置为“480px”，背景图像设置为“images/map.gif”。
【实训目的】 进一步认识时间轴的作用。 进一步巩固手动创建时间轴动画的基本方法。 进一步巩固利用时间轴改变图像与层属性的方法。
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
实训 制作飞机飞行动画
任务一 任务二 实训 小结
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
实训 制作飞机飞行动画
本项目着重介绍了利用层和时间轴制作动画的基本方法。 实训将使用层和时间轴制作如图所示的飞机飞行动画，以进一 步巩固时间轴的应用。
任务一 任务二 实训 小结
实训结果文件见“项目结果”文件夹中的“shixun.htm”。
网页设计与制作—— Dreamweaver 8
主讲：
网页设计与制作
Dreamweaver 8
项目十 使用时间轴制作动画
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务一 使用层设置公园背景和标题 任务二 使用时间轴设置运动效果
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务二 使用时间轴设置运动效果
4、改变时间轴动画播放时间的方法 在【时间轴】面板中拖动最后一个关键帧可以改变整 个动画的播放时间，往右拖动是延长播放时间，往左拖动 是缩短播放时间。
5、设置时间轴动画为自动循环播放的方法 在【时间轴】面板中勾选【自动播放】和【循环】两 个复选框，可使时间轴动画在页面打开时能够自动循环播 放。
任务一 任务二 实训 小结
小结
本项目通过公园导游图动画介绍了时间轴的一些基 本功能和方法，同时也让读者对层这个概念有了更进一 步的了解。时间轴和层就像一对钥匙和锁，只有将它们 配成对，才能打开网页动画的大门。