网页制作行为与时间轴及其应用

合集下载

中等职业学校《网页制作》的课程标准

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在《网页制作》课程教学中的应用

时的教学有机结合起来，提高学习效率。
２２ＳＬ特性．ＭＩ
的一项必备技能。
《网页制作》课程实践性、应用性很强，入门容易但提高难。因此教师在讲授这门课时主要采取案例驱动
教学法，理论与案例相结合，提高学生解决实际问题能力。但是，由于该课程学时较少，教师在课堂上讲授的
＜＞类样式：此类样式可以应用于网页上的任何元素。１
＜ｆｎ＞／＞／ｔ＜ｂｏ＜ｒ＜＞ｔｅｉ＝” ５＞ｆｎｉｅ１ｐｂ＞ｂ＜ｉｂｇｎ２ ”／＜ｏｔｚ＝６ｘＣＯＬｍｅｓＯＲ＝” ０００ ’ ＃０００＞
（）１自由操控时间轴
ＳＩ语言的功能按照相互的关系划分成几组，ＭＬ每组称为一个模块，代表一个相互关联且相对完整的元素的集合。可分为９个模块：动画模块；内容控制模块；布局模块；连接模块；媒体对象模块；元信息模块；结构模块；计时和同步模块；过渡效果模块。其中ＳＩＭＬ的
ＳＬ网页制作》ＭＩ在《课程教学中的应用
韩勇
（内蒙古财经学院计算机信息管理学院，呼和浩特，１０１００５）摘要：于ＳＬ技术制作的流媒体课件为学生提供了一个在线实时观看学习的载体，网页制作》程线上教学的基ＭＩ是《课
必要补充。文章就如何利用ＳＬ术制作该课程的流媒体课件从实践角度进行了应用分析。ＭＩ技
＜＞标签样式：２重新定义特定标签（ｈ）如１的格式。＜ｆｎ＞／＞／ｔ＜ｂｏ

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.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. 选择菜单[插入][布局对象][层] 在光标位置即得到一默认大小的层200pxX1工具创建
1. 打开网页 2. 选择[插入]工具栏[布局对象][绘制层] 3. 在所需位置拖放鼠标
设置层属性
1. 2. 选中层，[属性]窗口选择层参数：层编号、边距、大小、Z轴顺序、背景、可见性、溢出、剪辑处理等。可见性：default(默认)、inherit(继承)、visible(可见)、 hidden(隐藏) 溢出：visible(可见)、hidden(隐藏)、scroll(滚动条)、 auto(自动)
后退回放播放帧数自动播放循环播放
六、层的应用实例
创建浮动广告动画
1. 2. 3. 4. 5. 6. 7. 8. 9. 打开网页 Ch16\16.3.2.html 插入层，在层中插入图像，调整层大小（略）将层移动到动画的起始位置打开[时间轴]面板，将层拖曳到[动画通道]中的第一帧上将时间轴上的最后一帧拖至第90帧处，再将层移动到动 90 画的结束位置调整动画：每隔15帧插入一关键帧（快捷菜单），并移动层的位置选择[时间轴]面板中的[自动播放]和[循环播放] 预览保存
二、层的基本操作
[层]面板的使用层面板的使用
F2打开层面板
重命名
（双击层名称）
选定
（单击某一层）
显示/隐藏层
（单击某层的第一列）
层的操作
对齐
（shift+单击选中所有层， [修改][排列顺序]）
调整z轴顺序
（鼠标按下拖放）
三、层的基本操作实例
1. 2. 3. 4. 5. 6. 7. 8. 9. 打开Ch16\16.1.4.html 在网页空白处插入一个层在层中插入图像dress.jpg 设置层属性：左/上为35pxX85px，宽/高为 218pxX220px 打开［层］面板，设置所有层为可见将apDiv3调至第二层设置apDiv1、 apDiv2、 apDiv3同宽度，且上缘对齐预览保存

网页设计与制作_第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 元素显示。 “设置容器的文本”行为将页面上的现有容器（可以包含文本或其它元素的任何网页元素）的内容和格式替换为指定的内容。 “设置文本域文字”行为可用指定的内容替换表单文本域的内容。

《Dreamweaver8和Flash8案例教程》第5章时间轴和行为

单击"窗口" "时间轴"菜单命令, 单击"窗口"→"时间轴"菜单命令, 或按Alt+F9键,即可弹出"时间轴"面板, 或按键即可弹出"时间轴"面板, 如图5-1-3所示.该面板中的各个工具及各所示. 如图所示项目的作用如下. 项目的作用如下.
时间轴" 图5-1-3 "时间轴"面板时间轴
显示所有事件" 行为" 图5-2-4 "显示所有事件"的"行为"面板显示所有事件
(6)"显示设置事件"按钮 :单 ) 显示设置事件" 击此按钮后, 行为" 击此按钮后,在"行为"面板中只显示已经使用的事件,如图5-2-2所示. 示已经使用的事件,如图所示. 所示
2.选择事件 .
(1)如果要更改系统默认的事件, )如果要更改系统默认的事件, 可以单击"事件" 可以单击"事件"栏中默认的事件名称右边的按钮,弹出事件名称菜按钮, 单.菜单中列出了该对象可以使用的所有事件. 所有事件. (2)各个事件所能作用的对象与它 ) 的作用如表5-2-1所示. 所示. 的作用如表所示
表5-2-1事件名称菜单中各个事件所能作用的对象与它的作用事件名称菜单中各个事件所能作用的对象与它的作用序号 1 2 3 4 5 6 事件名称 onAbort onAfterUpdate onBeforeUpdat e onFocus onBlur onClick 事件可以作用的对象图像, 图像,页面等图像, 图像,页面等图像, 图像,页面等按钮, 按钮,链接和文本框等按钮, 按钮,链接和文本框等所有对象事件的作用中断对象载入操作时对象更新之后对象更新之前当前对象得到输入焦点时焦点从当前对象移开时单击对象时

中的时间轴设计与应用

中的时间轴设计与应用时间轴是一种常用的信息呈现方式，它以时间为横轴，将事件、活动或过程等按照时间顺序进行排列，帮助我们更加清晰地理解和掌握相关内容。

在各个领域和行业中，时间轴都有着广泛的应用。

本文将介绍时间轴的设计原则和常见应用场景。

一、时间轴的设计原则1. 清晰易读：时间轴上的信息应该简洁明了，可以通过精准的时间标注和简洁的文字说明来达到这一目的。

2. 时间刻度：时间轴上的时间刻度应该恰当地划分，以便读者能够清晰地理解事件的发生先后关系。

3. 信息分层：对于时间轴上的事件信息，可以通过不同的颜色、形状或文本样式等方式进行分层展示，以帮助读者更好地理解和区分不同类型的事件。

4. 引导线：时间轴上的引导线可以帮助读者更好地连接起事件，并且有助于读者理解事件之间的因果关系。

5. 多媒体支持：时间轴设计可以结合多媒体元素，如图片、视频等，来丰富信息呈现形式，提高阅读体验。

二、时间轴的应用场景1. 历史事件：时间轴在历史领域中得到广泛应用，可以用来展示各个历史事件的发生时间和先后关系，帮助读者更好地理解历史演变的脉络。

2. 项目管理：在项目管理中，时间轴可以用来安排和跟踪项目中的各个阶段和关键节点，以帮助团队成员掌握项目进展情况。

3. 学习笔记：时间轴可以用于总结和整理学习笔记，将知识点按照时间顺序进行排列，有利于知识的回顾和巩固。

4. 故事叙述：时间轴可以用来叙述一个故事的情节走向，将故事中的事件按照时间顺序展示，使读者更好地理解故事情节的演进。

5. 产品演化：对于产品设计师或市场人员来说，时间轴可以用来展示产品的演化过程，帮助他们了解产品的发展历程和关键节点。

6. 生活规划：时间轴可以用来规划个人的生活目标和时间安排，帮助我们更好地管理和利用时间，实现自己的目标。

三、时间轴设计与应用案例1. 历史事件时间轴在历史课堂上，教师可以利用时间轴来展示各个历史事件的发生时间和先后关系。

通过精确的时间刻度和相关的文字说明，学生可以更好地理解历史事件的发展脉络，提高对历史知识的理解和记忆。

《网页设计与制作基础》实验指导

实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览；3、熟悉HTML基本标记的使用。

实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点◆熟悉HTML的结构、语法。

◆熟悉HTML基本标记的使用。

实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。

2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。

3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。

4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。

5、通过附录1的练习熟悉HTML基本标记的使用。

（可参考第二章内容）实验二 Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。

实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。

实验重点及难点◆文字的插入及设置。

◆图像的插入及设置。

◆各种超链接的创建。

实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。

2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。

3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。

实验八行为与时间轴

实验八行为与时间轴●任务一行为的应用●任务二录制层路径●任务三滚动字幕的制作●任务四行为与时间轴的综合应用任务一行为的应用一、实验目的掌握添加内置的行为方法和步骤设置触发行为的事件二、实验内容与步骤：1.建立一个站点然后将素材拷贝到此站点中。

2.打开“项目简介”网页。

3.添加背景音乐：选中<body>标签，在行为菜单中选择“播放声音”，音乐网上自己找，音频格式可以是.mid、.wav、.aif、.mp3等，选择相应的事件，如果希望是网页下载后立即播放，选择OnLoad事件，修改插件参数”loop”和”autostart”为true。

6.为网页上写有“专心”的图像设置“交换图像”行为，“设定原始档”为替换图像的路径，替换图像为写有“专业”的图像，事件是鼠标在图像上方（onMouseOver)时为替换，移出时（onMouseOut)为“恢复交换图像”，“预先载入图像”和“鼠标滑开时恢复图像”的勾选上，同样的方法把至诚替换为至信。

7.单击<body>标签，设置“预先载入图像”行为，预先下载不需要在网页上立即显示的图像文件到浏览器的缓冲中，那么图像就是上例中的“专业”和“至信”，事件为“onLoad”。

8.单击<body>标签，设置“检查插件”行为，检查是否有flash，事件是“onLoad”，，如果有插件转到“锚链接.html”没有则留在原网页上，保存文件，预览效果，如果有插件，为了不影响其他行为的预览，回到页面把此行为删除。

9.在“业务合作”菜单上设置显示弹出式菜单具体菜单项见下图。

一些dw网页制作实例

目录分割线 (1)弹出菜单 (5)滑动折叠菜单 (10)多彩文字链接 (17)极酷的鼠标 (26)网站个性小图标 (28)网站过度特效 (30)插入flash按钮 (32)插入flash文字 (34)插入透明背景的flash (35)Flash个性播放界面 (38)制作电子相册 (43)随机播放音乐 (45)滚动布告栏 (47)数据库连接 (51)验证用户注册 (62)在线音乐网站 (74)实现购物车 (84)实现产品搜索 (90)Blog日历事件 (94)随笔管理及评论 (106)分割线是网页中不可缺少的元素，它主要用于分隔网页内容，也可以用于装饰网页。

效果说明在网页中间会出现一条漂亮的分隔线，并且能够不断闪动，从而充分体现出网站的个性，如图32-1 所示。

创作思想本实例使用层作为定位，然后在层中插入表格，在表格中插入图片并在时间轴中分别添加样式滤镜效果。

操作步骤（ 1 ）新建一个网页文件，并在网页中插入一个层，然后在层中插入一个1 行 2 列的表格，如图32-2 所示。

（ 2 ）设置表格的间距，然后在表格的单元格中插入图片，如图32-3 所示。

（ 3 ）设置时间轴。

调出时间轴，在时间轴的第5 帧处添加【改变属性】行为，并设置层对象的属性，如图32-4 所示。

（ 4 ）添加行为和改变属性。

在其他帧中分别添加行为，并根据需要改变属性，在第40 帧处添加转到时间轴的第 1 帧行为，再勾选【自动播放】复选框，如图32-5 所示。

本图代码如下所述：Glow(Color=red, Strength=1)Glow(Color=red, Strength=2)Glow(Color=red, Strength=3)Glow(Color=red, Strength=4)Glow(Color=red, Strength=3)Glow(Color=red, Strength=2)Glow(Color=red, Strength=1)实例制作完成。

网页设计之行为与时间轴

当前时间轴可以无限循环播放
这实际上是在动画最后一帧后的行为通道中插入了“转到时间轴帧”行为。双击此帧中的标记，可以编辑行为的参数与改变循环次数
2020/5/23
17
三、创建时间轴动画的操作
(一)简单的时间轴应用： 1. 在页面添加层，在层中插入要移动的元素，然
后将层移动到动画的起始位置
2. 选择窗口时间轴，打开时间轴面板
隐藏和显示层、播放音乐、交换图像等；事件是完成某一动作的具体方式，如onMouseOver(鼠标指
向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)等。
例：插入【交互式图像】就是一个典型的行为应用。
2020/5/23
3
事件
Onclick:单击图像链接按扭 onDblclick：双击对象 onError：载入错误 onFinish：所选内容完成一个循环 onHelp：单击help onKeyDown：按键 Onkeypress：按键并释放 onKeyUp：释放 onLoad：页面载入 onMouseDown：按下鼠标 onMouseMove：移动鼠标 onMouseOut：鼠标移出 onMouseOver：鼠标移入
2020/5/23
8
8章时间轴
2020/5/23
9
一、时间轴的概述
时间轴的基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中，在时间轴上显示的每一个层称为一帧，整个时间轴就是由许多帧构成的，这些帧在页面中的连续播放构成了时间轴动画。
2020/5/23
10
时间轴通过改变层在不同时间的位置大小可见性和叠放顺序来创建动画。
2020/5/23
4