网页制作行为与时间轴及其应用
中等职业学校《网页制作》的课程标准
XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务（一）课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
（二）课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程,学生可以掌握以下技能和知识：1.掌握网站的开发流程，如建站规划、效果图制作、建立站点、发布网站等相关知识。
2.掌握各种网页元素在DremweaverCS3中的使用。
例如，文本、表格、图像、超级链接、层、框架和表单等。
3.掌握HTML,理解各种标记的功能和用法。
4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。
5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。
6.能够解决一些网页设计中的常见问题。
（三）本课程的特点1.课程注重实际应用，即实践性强。
2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件，是“网页三剑客”之一，具有较强的实践性，学习难度不大。
3.突出理论联系实际，实作课时占总课时的50%以上，实际应用知识占课程总知识量的80%以上。
（四）与相关课程的衔接、配合、分工先修课程：“计算机应用基础”、“图形图像处理（FireWorkS或PhotoShop）"、"Flash动画制作”等。
二、课程目标本课程的基本目标是：使学生通过本课程的学习，掌握DreanIWeaVerCS3的使用方法，学会使用DreamweaverCS3制作Web网页的技术。
本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。
SMIL在《网页制作》课程教学中的应用
时的教学有机结合起来 ， 提高学习效率。
２２ Ｓ Ｌ特 性 ． ＭＩ
的一项必备技能。
《 网页制作》 课程实践性 、 应用性很强 ， 入门容易但 提高难。因此教师在讲授这门课时主要采取案例驱动
教学法 ， 理论与案例相结合 ， 提高学生解决实际问题能 力。但是 ， 由于该课程学时较少 ， 教师在课堂上讲授的
＜ ＞类 样 式 ：此 类 样 式 可 以应 用 于 网 页 上 的 任 何 元 素 。 １
＜ｆｎ＞ ／＞ ／ ｔ＜ｂ ｏ ＜ ｒ ＜ ＞ ｔ ｅ ｉ ＝” ５ ＞ ｆｎ ｉｅ １ ｐ ｂ ＞ ｂ ＜ ｉ ｂ ｇｎ ２ ”／ ＜ ｏ ｔ ｚ ＝ ６ ｘＣＯＬ ｍｅ ｓ ＯＲ＝” ０ ０ ０ ’ ＃ ０ ０ ０ ＞
（） １ 自由操 控 时 间轴
Ｓ Ｉ 语言的功能按照相互的关系划分成几组 ， ＭＬ 每 组称为一个模块 ，代表一个相互关联且相对完整的元 素的集合。 可分为 ９ 个模块 ： 动画模块 ； 内容控制模块 ； 布局模块 ； 连接模块 ； 媒体对象模块 ； 元信息模块 ； 结构 模块 ； 计时和同步模块 ； 过渡效果模块 。其中 Ｓ Ｉ Ｍ Ｌ的
Ｓ Ｌ 网页制作》 ＭＩ 在《 课程教学中的应用
韩 勇
（ 内蒙古财经学院计算机信息管理 学院， 呼和浩特 ，１０ １ ００５ ） 摘 要 ： 于 Ｓ Ｌ技术制作的流媒 体课 件为学生提供 了一个在 线实时观 看学 习的载体 ， 网页制作》 程线上教 学的 基 ＭＩ 是《 课
必要 补充。文章就如何 利用 Ｓ Ｌ 术制作该课程的流媒体课件从 实践角度进行 了应 用分析。 ＭＩ 技
＜ ＞标签样式 ： ２ 重新 定义特定标签 （ ｈ ） 如 １ 的格式 。＜ｆｎ＞ ／＞ ／ ｔ＜ｂ ｏ
最新文档-网页设计之行为与时间轴-PPT精品文档
• 播放时间轴，停止时间轴 ： 允许用户通过某种事件来播放或停止播放时间轴
2019/4/25
21
四、时间轴应用实例
制作在网页上飘动的广告图片(gundong.html) 小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
2019/4/25
11
时间轴弹出菜单
当
前
回
播
每秒
首 后 放 播 播放
帧 退 帧 放 帧数
二 、时间轴面板
自动 循环 播放 播放
行为频道 播放头
动画频道
动画栏
帧数
关键帧
自 循播动动关 总动环 画键放画帧时 回后播播播 栏帧间首放头频数退放放 （轴：：帧： 条： 道弹选是使 ）：择出值 ： 表将动页：将“菜是 显 示面即播画自播单在动页 示 每栏放：放播浏画指中面 动 个头头放览频定给”器 道移上画动向当复某中动前当层画选左右打 的个到框文前和栏开 蓝移对，档时时 色使显图占动的象间， 小当哪示像有指一当 条轴前个定页前 ，的帧的时面时 显了首间是栏帧在间 示属轴帧载时数轴 每显性入可 个间。浏示（以 对览在轴如无象器时限的的位时间循持自置哪轴动环续面）开一播时板的始放间帧中播帧。放。时间轴
7. 移动层，使运动轨迹呈曲线状
2019/4/25
19
（二）通过拖动路径创建时间轴动画
1. 插入一个层 2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。
2019/4/25
20
（三）控制时间轴
Dreamweaver网页设计-时间轴
利用时间轴和层创建动画有两种方法：关键帧方法和 录制层路径方法 。
2.3．关键帧方法
2.4．录制路径法
操作：将层添加到时间轴上选中层在右键快捷菜单中单击【记录 路径】命令项 在编辑窗口中按住鼠标左键拖动层录制路径录制完 成
第十四讲 时间轴
1、认识时间轴 2、创建时间轴动画
1、认识时间轴
➢ 1．基本概念 ➢ 2．显示时间轴 ➢ 3．时间轴面板 ➢ 4．播放选项 ➢ 5．添加对象到时间轴
1.1. 基本概念
• 动画的实现原理就是将不同的画面或者是不同位置的同一个画面串
连起来播放，让人产生运动的错觉。时间轴就是利用这个原理来实现 页面中层的动画效果的的，它的基本单位就是一个画面，或者叫做帧。 在这些画面中有些画面起着非常关键的作用，可以影响整个动画的， 这样的帧叫做关键帧。
2、 创建时间轴动画
• 2.1 • 2.2 • 2.3 • 2.3
基本操作 创建动画方法 关键帧方法帧 录制路径方法
2.1．基本操作
一、插入关键帧 插入关键帧方法：将鼠标光标移到时间轴，按住Ctrl键，鼠标
光标变成小圆圈状，左键单击需要插入关键帧的地方，此时在该 位置出现一个小圆圈，表示插入了一个关键帧。并且编辑窗口中 的层也自动移到与当前帧相对应的轨迹位置上。然后在编辑窗口 中将层拖动适当距离后，放开鼠标，即可改变层的运动路径。
如果要移动关键帧，可以直接左键单击选中关键帧，然后向左 右拖动。 二、添加/删除帧
如要在时间轴上添加或者删除帧，则执行【修改】/【时间轴】 /【添加帧】命令或者执行【修改】/【时间轴】/【删除帧】命令。
网页制作第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章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
网页制作3
多媒体技术与网页制作第14讲2007年5月修订2013-7-22制作人：马秀麟11、创建行为动画首先打开行为面板，为创建行为动画创建条件：❑【窗口】【行为】，系统将打开行为面板。
接着，选择要被添加行为的对象。
比如单击上图左侧属性面板顶部的<Body>，表示要为<Body>添加行为。
或者选中页面中的某个对象，比如一个小图片，一个小按钮。
等等。
这里我们假设选择了<Body>，即整个页面正文。
(1) 添加弹出消息框❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【弹出信息】,系统将弹出对话框，我们可以在【消息】框中回答要输出的信息。
❑系统默认Onload时发生此事件。
它表示当这个页面刚刚被浏览时会自动弹出消息框。
❑当然我们也可以通过单击Onload右侧的按钮改变发生此事件的条件，比如修改为右单击Body时弹出消息框。
(2)设置文本❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【设置文本】,系统将弹出对话框，我们可以在此对话框中回答要进行设置的文字。
(3)弹出新的浏览窗口❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【打开浏览器窗口】,系统将弹出对话框，我们可以在URL框中回答要在此窗口中浏览的网页。
当然我们还可以利用此对话框调整新窗口的属性。
❑系统默认Onload(即调入网页)时发生此事件。
但我们一般定义单击某一对象激发此事件。
那我们可以先选中某对象，然后我们可以通过单击Onload右侧的按钮改变发生此事件的条件。
(4)同时调入其他对象❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【播放声音】等,系统将弹出对话框，我们可以在文本框中回答要播放的声音文件的名称。
❑系统默认Onload时发生此事件，我们可以通过单击Onload右侧的按钮使发生此事件的条件为Onclick。
网页制作第6单元表格、图层、行为、时间轴
网页制作第6单元表格、图层、行为、时间轴-标准化文件发布号：（9456-EUATWK-MWUB-WUNN-INNUL-DDQTY-KII第6单元表格、图层、行为、时间轴课程目标：掌握在网页中插入表格方法掌握网页中细线表格、立体表格等制作方法掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
2图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例36.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
网页制作-行为与时间轴及其应用
① 【时间轴列表】： 是时间轴选择列表，在同一个文档中可以设置多个
时间轴，当用户创建多个时间轴时，利用该下拉列表可 选择当前时间轴。
② 【播放控制选项】： 它的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】： 这个动作用于在当前窗口或指定的框架中 打开一个新的页面。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1 【交换图像】：通过改变IMG标记的SRC属性，改变图像。 利用该动作可创建活动按钮或其他图像效果。
2 【弹出信息】：可以很方便地在网页上显示带指定信息的 JavaScript对话框。
3 【恢复交换图像】: 用于将在Swap Image动作中设置的后一张 图片，恢复为前一张图片。此动作会自动 添加在链接了Swap Image动作的对象中。
2021/3/3
4
（5） 在【事件】（Event）菜单中显示 当前动作的默认事件，单击该事件后， 【行为】面板的当前事件中会出现一个 下拉三角形按钮，单击该下拉三角形按 钮，屏幕显示【事件】级联菜单,可从该 菜单选项中选择一种事件来代替默认事 件。
网页中一个对象附加了行为后，可 以根据需要利用【行为】面板修改触发 动作的事件，添加、删除及修改动作的 参数。
为】面板。选择【窗口】|【行为】命令，或按Shift+F4
快捷键，也可以单击状态栏中的按钮，便可打开【行为】
面板。 添加行为
删除行为
显示所有事件
行为先后次 序调整按钮
显示设置事件
事件列表
动作列表
2021/3/3
3
9.1.2 添加和修改行为
利用【行为】面板可在网页 中添加、修改行为。给网页对象 添加行为的步骤如下。
layer1
layer2
2021/3/3
6
◆插入层layer1和layer2，并在层中插入相应的图片； ◆打开【层】面板，选中层Layer2，该层的属性设置为不可见。
◆◆按选给快层中捷该La键y行eSrh为i1ft添，+加并F4【单，显击打示事开-【件隐行列藏为表层】中】面下的板三动。角作选形。中按在层钮弹La，出ye在的r1菜，【单单显中击示行选-隐 为层单择当藏该添】击事鼠层层加对【件标】。按话确【 指 对 选钮框定在 话 择o，中】n层 框 事M选按选o中 件L择钮中auy选 【s，【层eerO中o1【显Lnva上层eMy显示er时】oLr示-2a隐u，，y，s-e藏隐e显并rO其2层藏u示，单意t】层】击层并义动】，【L单为a作的其y显击“e动，意示r【鼠2作在。义】隐标被弹此为按藏指添出钮时“】向加的设层鼠按对到【置L标钮a【显象显y移设e行示”示r去2置为-，隐中该”隐】表藏层图，藏示。 面像表板示2被中当。显鼠示标。从层Layer1上移去时，隐藏层Layer2。
2021/3/3
5
9.1.3 行为的简单应用
例1 设计制作一个符合下列要求的网页文件。 （1） 在网页中创建2个层，在层Layer1中插入图片1，在 层Layer2插入图片2。 （2） 隐藏层Layer2。 （3） 在浏览该页面时，只显示层Layer1的图片1。当鼠 标指向该图片时，显示图片2； 移开鼠标时，隐藏图片2。
9.4 用时间轴改变图像和层的属性 9.4.1 用时间轴控制层的可见性 9.4.2 用时间轴控制图像替换 9.4.3 用时间轴改变层的叠放次序 9.4.4 多条时间轴的管理
9.5 行为和时间轴的应用实例
2021/3/3
1
9.1 行为的概述
行为——以某种方式完成的动作，在网页设计中 通过行为可以实现浏览者与计算机的人机交互。
2021/3/3
10
4 【打开浏览器窗口】： 在触发该行为时打开一个新的浏 览器窗口，并在新窗口中打开URL地址指定的网页。还可 设置新窗口的尺寸，是否显示导航条、滚动条等属性。
5 【拖动层】： 允许用户用该动作完成拖动层的操作。
6 【控制Shockwave或 Flash】： 利用该动作可控制 kwave或Flash动画的【播放】、【停止】、【倒带】 或指定【前往帧】等操作。
2021/3/3
7
例2 双击层1，改变状态栏中显示的文字。
layer1
2021/3/3
8
例3 拖动层。 选中整个<body>……</body>
2021/3/3
9
9.2 Dreamweaver 8 内置的动作和事件
Dreamweaver 8中自带了很多动作，使用它们可以在网 页中设计出各种效果。在本节中列出的动作是Netscape 6.0、 Internet Explorer 6.0及以上版本支持的动作。在【行为】面 板的【动作】菜单中各项的意义如下所述。
7 【播放声音】： 在网页中加入音乐。
8 【改变属性】： 通过设定的动作触发行为，动态改变对 象属性值。
2021/3/3
11
9 【时间轴】级联菜单中有以下3个命令。 【播放时间轴】： 可以启动播放时间轴动画。 【停止时间轴】： 可以停止播放时间轴动画。 【转到时间轴帧】： 此动作可以转到时间轴动画的某个
（1） 选中网页中的一个对象，
该对象可以是图像、文本或层。
（2） 选择【窗口】|【行为】命
令，打开【行为】面板。
（3） 单击【行为】面板上的按
钮，屏幕显示【动作】（Action）
菜单。根据需要选择其中一种动
作，并在对话框中设置该动作的
参数。
（4） 选择【显示事件】命令，
并在【显示事件】级联菜单中选
择一种合适的浏览器。
事件：是完成某一动作的具体方式； 动作：指在浏览网页时可完成的一些特殊功能；
在浏览带有行为的交互网页时，当某一事件被响应 后便会触发执行相对应的动作。
对象
附加
一个事件可以触发多个动作
指定动作触发的先后次序
行为
2021/3/3
2
9.1.1 行为面板及其使用方法
在网页中为页面对象添加和修改行为，可使用【行
第9章 行为与时间轴及其应用
9.1 行为的概述 9.1.1 行为面板及其使用方法 9.1.2 添加和修改行为 9.1.3 行为的简单应用
9.2 Dreamweaver 8 内置的动作和事件
9.3 时间轴的概述 9.3.1 使用时间轴面板 9.3.2 创建时间轴动画 9.3.3 生成和编辑动画路径 9.3.4 在时间轴中加入行为
指定的帧，然后开始播放时间轴动画。在时间轴面板的行为 通道中设置此动作及时间轴动画的某部分循环播放的次数。
10【显示隐藏层】： 显示、隐藏一个或多个层的可见性， 这个动作在与浏览者交互信息时是非常有用的。
11【显示弹出式菜单】： 该行为用来创建或编辑Dreamweaver 弹出式菜单，或者打开并修改已插入Dreamweaver文档的 Fireworks弹出式菜单。