Dreamweaver MX网页设计与制作课件：行为与时间轴

行为与时间轴

●了解行为的含义●掌握添加行为的方法●了解行为的类型●掌握网页动画的基本制作本章学习知识点3.1检查浏览器：自动链接主页本章内容目录3.2跳转菜单：网络导航3.3播放音乐：在线音乐点播3.4拖动层：拼图游戏3.5显示－隐藏层：情人节礼物3.6时间轴的应用：飞翔3.7时间轴的应用：倒计时牌3.8行为与层技术结合：下拉式导航栏本章内容目录3.9时间轴与行为的结合：滑出式正文区3.10本章小结3.11本章习题3.1检查浏览器：自动链接主页

3.1.1基本概念Dreamweaver的行为是运行在网页浏览器中的Javascript代码，设计者可以将这些行为放置在网页文档中。行为由事件和该事件所触发的动作所组成，通过行为的设置可以方便浏览者与网页之间进行交互。浏览者浏览网页过程中，浏览器对浏览者的行为作出某种回应，产生了消息，这就是事件。而动作是预先编写好的JavaScipt代码，由这些代码完成对事件的回应。

Dreamweaver可以制作很多网页特效，但是这些特效在一些低版本的浏览器中无法正常显示，甚至干扰浏览者用户正常地阅读网页内容。检查浏览器操作可以自动地对浏览者的浏览器版本进行判断，这样可以为不同的浏览者订做不同的显示效果，让所有到网页的客人都感到满意。插入表格，在表格内插入文字，并为文字插入“#”虚拟链接

3.1.2上机操作单击【行为】浮动面板上的按钮，打开下拉菜单为文本添加动作。在下拉菜单中，选择【检查浏览器】动作。

右击事件栏下的【onLoad】，单击右侧出现按钮，单击【显示事件】|【IE4.0】命令。再次单击按钮，打开下拉菜单，并且选择【onClick】事件，意味着当浏览者用鼠标点击这个链接时，将触发检查浏览器的动作

在打开的【检查浏览器】对话框中选对这个动作进行设置。这里的设置基本上采用了默认设置，即在正常状态下，跳转到默认的URL地址；而当浏览器版本过低，则跳转备用URL地址。单击【URL】对应的文本框后的【浏览】按钮，设置默认跳转网页

3.2跳转菜单：网络导航

3.2.1基本概念跳转菜单是非常重要的一种导航方式，经常可以在商务网站中看到它为各种门类不同的商品制作导航。网页的跳转菜单是文档内的弹出菜单，对站点访问者课件，并列出链接到文档或文件的选项。可以创建到整个Web站点上文档的链接、电子右键链接、到图形的链接，也可以创建到可以在浏览器打开的任何文件类型的链接。跳转菜单可包含三个基本部分：（可选）菜单选择提示，如菜单项类别说明，或一些提示信息等。（可选）“前往”按钮。（必需）所链接菜单项的列表：用户选择某个选项，则链接的文档或文件被打开。

3.2.2上机操作在【插入】快捷工具栏中选择【表单】，单击【跳转菜单】按钮。单击【窗口】|【行为】命令，打开【行为】浮动面板。鼠标左键单击编辑窗口内的跳转菜单，在行为面板中会出现设置好的行为。双击【行为】面板中【动作】栏下的【跳转菜单】动作，重新弹出【跳转菜单】对话框

3.3播放音乐：在线音乐点播3.3.1基本概念第一章介绍过在网页中插入媒体的方法，而这里则介绍如何使用行为来播放音乐，提供给用户与网页交互的机制。3.3.2上机操作使用【地图】工具中的【矩形热点工具】和【圆形热点工具】绘制地图热点

选中绘制好的矩形热点地图，单击菜单【窗口】|【行为】，在【行为】浮动面板中单击按钮，并在下拉菜单中选择第二项【播放声音】。在弹出的【播放声音中】，选择扩展名为“.mid”的音乐文件。这里默认的驱动动作发生的事件为【onClick】

在编辑窗口中出现插件图标

3.4拖动层：拼图游戏3.4.1基本概念

层不仅是在制作网页的过程中能够被设计师拖动，在网页生成后，层以及层中插入的内容也可以随之被移动。这样，层就能够被用来完成不同的任务.

在拼图过程中，网页可以根据拼图放置的位置，在50像素区域内表示有效；而在拼图完成后，网页能通过JavaScript代码对拼图结果做出正确与否的判断。

3.4.2上机操作给出一幅原始的图像，作为参照物；绘制一个蓝色的背景区域，提示读者将拼图图片放置于目标的蓝色区域位置使用Fireworks或者其它软件，将原始的图片切割成不同的部分。绘制层，并且将之前切割出来的每一个小图片插入到层中移动层，拖动刚插入的三个层到正确的位置上，在接下来的步骤要添加行为，所以要尽量地准确。插入JavaScript脚本。将光标重新置于右上角插入三个层的单元格内，选择【插入】快捷栏中的【脚本】按钮。弹出如图3.17所示的对话框，在【语言】下拉菜单中选择【JavaScript】，并且在【内容】文本框中定义变量。代码内容为“v_Layer2=false;v_Layer3=false;v_Layer4=false;”。

添加拖动层行为。在编辑窗口左下角单击【body】标签选中整个页面，在菜单中选择【窗口】|【行为】

|【拖动层】

设置“拖动层”动作的参数。在弹出的【拖动层】对话框中设置拖动层行为的基本参数，如图3.19所示。首先选择层为“Layer2”，单击【取得目前位置】按钮

按图3.19所示步骤3所示，单击【高级选项卡】，设置“拖动层”的高级参数。其中【呼叫JavaScript】后的文本框中需要填入“v_Layer2=false；”，而在【放下时：呼叫JavaScipt】后的文本框中填入“v_Layer2＝

true；”

重复上述步骤，为三个层添加“拖动层”动作

插入一个按钮。在网页右下角的表格内插入一个表单按钮。由于这里只是用按钮来触发一段JavaScript脚本，所以不需要用到表单。在此就不必插入<form>标签，当出现提示询问是否需要添加表单标签，请选择【否】

为按钮添加【调用JavaScript】行为，文本框中输入脚本：if(v_Layer2==true&&v_Layer3==true&&v_Layer4==true)confirm("拼图正确");

elsealert("拼图错误,再试一下");

打乱三个层，为网页游戏的浏览者制造一些难度，增加游戏的乐趣

读者根据本教材提供的素材，完成拼图其它部分的制作，最终的效果如图所示。3.5显示－隐藏层：情人节礼物

3.5.1基本概念“显示－隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。“显示－隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失所有通过层可以设置的效果都可以通过“显示－隐藏层”设置出突然显示的效果，可以给浏览者一种意想不到的效果。3.5.2上机操作通过设置[页面属性]来修改网页背景结合第一章制作“焰火晚会”的方法，添加JavaApplet到网页中之后添加一个表单按钮，作为焰火的触发器。但鼠标单击按钮后，JavaApplet开始工作，显示焰火效果继续添加【显示－隐藏层】动作。鼠标左键单击【按钮】按钮，打开【行为】浮动面板，添加“显示－隐藏层”动作。设置事件为“onClick”，发生行为为显示层Layer1

当网页浏览者单击此按钮后，触发焰火的效果，就可以的到一份意外的惊喜。3.6时间轴的应用：飞翔

3.6.1基本概念

时间轴的作用非常重要，在静态的网页中，虽然没有ASP代码为网页提供数据库的支持，也不象JavaApplet通过程序来实现动态图景的变换。时间轴只是简单地把网页中的内容记录先来，把内容的位置，大小记录到时间轴面板中，这样在网页生成后，就按照播放动画片的形式，以每秒固定的播放帧数来进行图像放映，达到动态的效果。时间轴的作用就是在网页中制作动画，使用时间轴创建的动画要比ActiveX、扩展插件或者JavaApplet等更加有效，脚本代码运行更稳定。

3.6.2上机操作设置背景图像插入４个层，并且在层中插入图像，为这个飞翔网页中添加演员在事件轴内插入对象。在【属性】面板下有一个【时间轴】面板，平时都处于关闭状态，此时左击【时间轴】文字，随机其面板弹起。将层Layer3和层Layer4拖动到时间轴内。方法是左击各个层左上角的标签，按住不要松手，拖动至时间轴面板内合适的位置

调整时间轴添加【播放时间轴】行为，单击事件栏内的按钮，打开下拉菜单，并且选择【onLoad】事件

3.7时间轴的应用：倒计时牌

3.7.1基本概念与尝试使用一个时间轴控制页面上的所有操作相比，使用单独的事件轴分别用来控制页面中不同的离散的部分会更容易一些。比如一个页面中有很多的活动元素，每个元素的触发条件都是不同的。这一节演示多个时间轴的协调、连续工作。3.7.2上机操作创建四个层，在层内分别写入“1”“2”“3”“4”“发射！！”

设置行为，当装载网页的时候，将除“３”以外的各个层都隐藏设置时间轴，当一段时间后，交替地隐藏层3.8行为与层技术结合：下拉式导航栏

3.8.1基本概念

网页在展示中往往遇到面积有限的问题，如何在一个窗口大的区域内插入更多的导航呢？使用下拉式菜单是一个很好的选择。这种菜单平时是折叠收紧的，只有浏览者进行了某种操作的时候，菜单才打开。l

对嵌套层添加行为l

使用时间轴对下拉速度进行限制3.8.2上机操作绘制嵌套层插入表格和文字。在父层中插入表格，并设置宽度和高度以及背景，然后在表格内为文字设置好样式

设置子层,添加文本。并且将子层添加到时间轴上。打开【时间轴】面板，按鼠标左键拖动子层，也就是Layer2，拖动到时间轴的合适位置后，松开左键后则添加完毕

添加多个时间轴，并且重复以上的步骤3.9时间轴与行为的结合：滑出式正文区

3.9.1基本概念

时间轴和行为配合使用，可以制作互动性强，表现形式也更为丰富的网页。现在制作“滑出正文区”来把这Dreamweaver两大核心技术用到一起。

如果正文慢慢浮现在屏幕上，再结合适合文字的音乐作为背景，确能提高浏览者对网页的兴趣。3.9.2上机操作插入嵌套层插入一幅背景图像

在子层中插入文本，并且设置文本属性。并且将子层移动到父层的最下方：子层的顶端与父层的底端平齐。打开【时间轴】面板。将子层拖入到时间轴面板中，并且拖动时间线到第400帧

左击时间线的最后一帧。回到编辑窗口内，拖动层至顶端，使Layer2的最下端在Layer1的最上端以上。有一条直线连接在Layer2的左上角

播放时间轴Timeline1

的行为添加【停止时间轴】行为，设置事件为“onMouseOver”。继续添加【播放事件轴】设置事件为“onMouseOut”

3.10总结提高

本章通过讲述“行为”和“时间轴”的应用实例，介绍给了读者大部分的“行为”操作。但是这里要提醒读者使用“行为”的时候要注意确保合理和恰当，建议读者在同一个网页中不要使用过多的“行为”。这里主要是因为“行为”其本质是代码，当同时使用多个行为时，难免会出现个别变量在不同的行为中重复使用造成冲突，结果造成网页无法正常显示。而时间轴动画主要是通过设置随时间变化的层的位置、大小、可见性和叠放顺序来创建动画。

3.11本章习题

（1）一个行为是由________和________两部分组成