网页设计与制作教程制作动感网页

网页设计与制作实用教程网页设计与制作实用教程第1章网页设计概述第2章HTML语言第3章添加网页元素第4章网页布局第5章制作动感网页第5章提高网页制作效率第7章站点的维护与上传第8章网站设计制作综合实例第5章制作动感网页5.1行为概述5.2Dreamweaver8的内置行为5.3时间轴的基本操作5.4行为与表单综合应用5.1行为概述5.1.1行为的概念和应用顺序1、行为的概念所谓行为（Behavior），就是在网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过动作使某个任务被执行。5.1行为概述2、行为的应用顺序可以将行为附加到整个文档（即附加到body标签），还可以附加到链接、图像、表单元素或多种其它HTML元素中的任何一种。5.1行为概述5.1.1 在Dreamweaver中提供的动作类型在Dreamweaver中提供的动作可以分成三种类型：内置动作、自定义动作和第三方行为动作。

Dreamweaver内置的行为动作指的是Dreamweaver系统自带的行为动作，使用这些动作可以在“行为”面板中直接单击加号(+)按钮，直接在“动作”弹出菜单中选择。5.1行为概述Dreamweaver内置的行为毕竟有限。Dreamweaver最有用的功能之一就是它的扩展性，即它为精通JavaScript的用户提供了编写JavaScript代码的机会，使他们可以通过代码扩展Dreamweaver的功能。要获取第三方行为动作，需从MacromediaExchangeWeb站点下载并安装新行为。5.1行为概述5.1.1 认识事件

OnAbort（IE4、NS3、NS4）事件：当用户停止浏览器对图像的载入（如单击“停止”按钮）时被触发。

onAfterUpdate（IE4）事件：当页面上一个捆绑数据的元素完成对数据源的更新时被触发。

onBeforeUpdate（IE4）事件：当页面上一个捆绑数据的元素中的数据被改变，并即将失去焦点时被触发。该事件发生在数据源被更新之前。5.1行为概述onBlur（IE3、IE4、NS3、NS4）事件：该事件同onFocus事件正好相反。当指定的元素从用户的交互行为失去焦点时被触发。

onBounce（IE4）事件：当选取框元素中的内容延伸到选取框元素边界之外时被触发。

onChange（IE3、IE4、NS3、NS4）事件：当用户改变页面中的值时被触发。5.1行为概述onClick（IE3、IE4、NS3、NS4）事件：当用户单击特定的页面元素（如链接、按钮或图像映像）时被触发。

onDblClick（IE4、NS4）事件：当用户双击特定的页面元素时被触发。

onError（IE4、NS3、NS4）事件：若浏览器在载入页面或图像时发生错误，就会被触发。5.1行为概述onFinish（IE4）事件：当选取框元素中的内容完成一个循环时就会被触发。

onFocus（IE3、IE4、NS3、NS4）事件：当指定元素通过用户的交互行为获得焦点时被触发。

onHelp（IE4）事件：当用户单击浏览器的帮助按钮（通常是F1）或从浏览器的“帮助”菜单中选择帮助菜单项时被触发。5.1行为概述onKeyDown（IE4、NS4）事件：当用户按下了一个键，在尚未释放之前，会被触发。

onKeyPress（IE4、NS4）事件：当用户按下键然后又释放键，就会被触发。该事件很像onKeyDown和onKeyUp事件的组合。

onKeyUp（IE4、NS4）事件：当用户释放被按下的键时被触发。5.1行为概述onLoad（IE3、IE4、NS3、NS4）事件：当图像或页面被完全载入之后被触发。

onMouseDown（IE4、NS4）事件：当用户按下鼠标键，在尚未释放之前，会被触发。

onMouseMove（IE3、IE4）事件：当用户将鼠标指针在一个页面元素上移动时，就会触发这个页面元素的onMouseMove事件。5.1行为概述onMouseOut（IE4、NS3、NS4）事件：当鼠标指针移出了指定元素（例如链接）的范围时，就会触发这个页面元素的onMouseOut事件。

onMouseOver（IE3、IE4、NS3、NS4）事件：当鼠标第一次移入指定元素（例如链接）的范围时被触发。

onMouseUp（IE4、NS4）事件：当按下的鼠标键被释放时被触发。5.1行为概述onMove（NS4）事件：当浏览器窗口或框架移动（如拖动浏览器窗口，在桌面上移动）时被触发。

onReadyStateChange（IE4）事件：当指定元素的状态被改变时被触发。这些可能的元素状态包括未初始化（uninitialized）、载入（loading）和完成（complete）等。

onReset（IE3、IE4、NS3、NS4）事件：当表单中的数据被复位为默认值时被触发。

onResize（IE4、NS4）事件：当用户重设浏览器窗口或框架的大小时被触发。5.1行为概述onRowEnter（IE4）事件：在当前捆绑数据源的记录指针被改变后被触发。

onRowExit（IE4）事件：在当前捆绑数据源的记录指针将要改变时被触发。

onScroll（IE4）事件：当用户利用滚动条或箭头键上下滚动文档内容时被触发。

onSelect（IE3、IE4、NS3、NS4）事件：当用户从一个文本框中选中文本时被触发。5.1行为概述onStart（IE4）事件：当选取框元素中的内容开始循环时被触发。

onSubmit（IE3、IE4、NS3、NS4）事件：当用户递交一份表单时被触发。

onUnload（IE3、IE4、NS3、NS4）事件：当用户离开页面时被触发。5.2Dreamweaver8的内置行为5.2.1使用行为控制Flash动画使用“控制Shockwave或Flash”动作可以使网页中插入的MacromediaShockwave或MacromediaFlashSWF文件能够根据设定的动作进行有效的控制。这些影片在插入网页是必须设置一个惟一的名称，才能进行有效的控制。使用该动作可以控制影片的播放、停止、倒带或转到Shockwave或Flash影片中的帧。5.2Dreamweaver8的内置行为5.2.2链接行为利用“转到URL”动作，可以设置在当前浏览器窗口或指定的框架窗口中载入指定的页面。该动作在同时改变两个或多个框架内容时特别有用。5.2Dreamweaver8的内置行为5.2.3导航条导航条由图像或图像组组成，这些图像随用户的操作而变化显示内容。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。导航条项目有四种状态：一般状态、鼠标经过状态、按下状态和按下时鼠标经过状态。使用“插入导航条”命令可以在网页中插入导航条。5.2Dreamweaver8的内置行为5.2.4调用插入到网页中的JavaScript

调用JavaScript动作允许设置当某些事件被触发时，调用相应的JavaScript代码，以实现相应的动作。5.2Dreamweaver8的内置行为5.2.5 变换图像利用“交换图像”、“恢复图像交换”与“预先载入图像”动作行为可以产生变换图像的效果。“交换图像”动作通过更改img标签的src属性将一个图像和另一个图像进行交换。使用这个动作可以创建鼠标经过图像等图像效果，也可以一次交换多个图像。5.2Dreamweaver8的内置行为5.2.5 在网页上显示弹出信息在网页上弹出信息可以有两种方式，一种是弹出提示信息框；一种是弹出新窗口。使用“弹出消息”行为可以显示一个带有指定的消息文本的提示框，该提示框只有一个“确定”按钮，所以使用此动作可以给用户提供信息，而不能为用户提供选择。5.2Dreamweaver8的内置行为5.2.7显示－隐藏层利用“显示－隐藏层”动作，可以在页面上显示分层、隐藏分层，或恢复默认的分层可见性状态。该动作在创建动感网页效果时非常有用。5.3时间轴的基本操作5.2.8 时间轴的基本概念时间轴，顾名思义，它是一条贯串时间的轴，用于表示网页存活时间中发生的各种状态。通过往这条时间轴上不同的时间部位放置不同的内容，就可以实现网页元素的动态效果。5.3时间轴的基本操作

利用时间轴，可以创建各种类型的动态效果。时间轴构建的动态效果，主要是通过往文档中添加JavaScript代码实现的。5.3时间轴的基本操作5.3.1 创建时间轴动画时间轴主要是通过时间轴面板构建的。5.3时间轴的基本操作1、创建动画的基本方法2、录制分层路径5.3时间轴的基本操作5.3.2修改时间轴及其对象的属性1、控制时间轴设计好动画之后，可以在时间轴面板中对时间轴进行各种控制，从而实现对动画的编辑和修改。⑴选中动画条⑵改变整个动画时间⑶改变动画局部的播放速度5.3时间轴的基本操作⑷改变动画起始时间⑸改变动画完整路径⑹添加和删除帧、关键帧和对象（动画条）⑺使用多条时间轴5.3时间轴的基本操作2、利用时间轴改变图像和分层属性利用时间轴，不仅可以改变分层的位置，还可以改变分层的某些属性，例如大小和可见性等。利用时间轴，还可以改变图像的源文件，实现某些特殊效果。5