网页制作项目12使用行为完善网页功能--ppt.
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作—— Dreamweaver 8
主 讲 ：
项目十二
网页设计与制作
使用行为完善网页功能
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一
任务一 任务二 实 小 训 结
设置页眉部分 设置主体部分
任务二
任务一
网页设计与制作
设置页眉部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务二
网页设计与制作
设置主体部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
本任务主要是设置网页主体部分的行为，包括 打开浏览器窗口、交换图像、弹出消息以及 Flash的播放控制等。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
打开浏览器窗口
打开浏览器窗口操作动画
Dreamweaver 8
本任务主要介绍设置状态栏文本和弹出式 菜单的方法，同时认识行为的概念，并了 解【行为】面板的基本操作。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
设置状态栏文本操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
1. 了解【行为】面板
在主菜单中选择【窗口】／【行为】命令可打开【行为】面板。
网页设计与制作
操作二
交换图像
交换图像操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
交换图像行为可以将一个图像替换为另一个图像，这 是通过改变图像的“src”属性实现的。可以使用交换图像 行为来创建翻转的按钮或其他图像效果。在行为菜单中选 择【交换图像】命令可打开【交换图像】对话框。
Dreamweaver 8
3. 行为的概念
一个行为是由一个事件所触发的动作组成的，因此行为的基本元素 有两个：事件和动作。事件是浏览器产生的有效信息，也就是访问 者对网页所做的事情。例如，当访问者将鼠标光标移到一个链接上， 浏览器就会为这个链接产生一个“onMouseOver”（鼠标经过） 事件。然后，浏览器会检查当事件为这个链接产生时，是否有一些 代码需要执行，如果有就执行这段代码，这就是动作。 在【行为】面板中添加了一个动作，也就有了一个事件。选择不同 的动作，【事件】菜单中会罗列出可以触发该动作的所有事件。不 同的动作，所支持的事件也不同。 不同的事件为不同的网页元素所定义。例如，在大多数浏览器中， “onMouseOver”（鼠标经过）和“onClick”（单击）行为是和 链接相关的事件，然而“onLoad”（载入）行为是和图像及文档 相关的事件。一个单一的事件可以触发几个不同的动作，而且可以 指定这些动作发生的顺序。
实训
网页设计与制作
制作垂直弹出式菜单
Dreamweaver 8
本项目着重介绍了行为在网页中的基本应用。实训将创建 如图所示的菜单导航栏，以进一步巩固行为的相关知识。 实训结果文件见“项目结果”文件夹中的“shixun.htm”。 【实训目的】 进一步巩固【行为】面板的使用。 进一步巩固添加和编辑行为的基本方法。 进一步巩固弹出式菜单的制作方法。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
小结
网页设计与制作
Dreamweaver 8
项目十二：
使用行为完善网页功 能
在前面的有关项目中对行为中的设置导航栏 图像、检查表单等行为进行了初步介绍，本项目通 过一个完整的网页案例介绍了另外6种常用行为的 基本功能，包括设置状态栏文本、弹出式菜单、打 开浏览器窗口、交换图像、弹出信息和控制 Shockwave或Flash等。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
Dreamweaver 8
2. 设置状态栏文本
在行为菜单中选择【设置文本】／【设置状态栏文本】命令， 打开【设置状态栏文本】对话框可设置状态栏文本。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
览器将为这个文本区域产生一个【onBlur】事件。 【onChange】：当访问者改变页面的一个数值时产生。例如，当访问者从菜单中 选择一条内容或改变一个文本区域的值，然后在页面的其他地方点击时，会产生 一个【OnChange】事件。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
网页设计与制作
操作二
制作弹出式菜单
制作弹出式菜单操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
1. 【显示弹出式菜单】对话框的设置
任务一 任务二 实 小 训 结
弹出式菜单可以在网页中实现类似Windows操作系统中的菜 单效果，菜单可以随意展开或隐藏，可以将所有的分支栏目全 部包含在菜单中，可以直接到达子页面，而不必逐级打开。本 操作主要设置一个水平方向上的弹出式菜单。重点掌握【显示
项目十二：
使用行为完善网页功 能
【onMouseMove】：当访问者指向一个特定元素并移动鼠标时产生 （指针停留在元素的边界以内）。 【onMouseDown】：当鼠标在特定元素上按下时产生该事件。 【onMouseOut】：当指针从特定的元素（该特定元素通常是一个图像
任务一 任务二 实 小 训 结
Dreamweaver 8
项目十二：
使用行为完善网页功 能
控制Shockwave或Flash操作动画
任务一 任务二 实 小 训 结
控制Shockwave或Flash行为可以控制Shockwave动画 或Flash动画的播放、停止、重放或跳转到某一帧。在行为菜 单中选择【控制Shockwave或Flash】命令可打开【控制 Shockwave或Flash】对话框。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
使用【打开浏览器窗口】动作将打开一个新的浏览器 窗口，在其中显示所指定的网页文档。用户可以指定这个 新窗口的属性，包括尺寸、是否可以调节大小、是否有菜 单栏等。例如，网页中的小图像需要放大时可以使用这个 动作。如果不对窗口的属性进行设置，它就会以 “640×480”像素大小的窗口打开，而且有导航栏、地址栏、 状态栏和菜单栏等。在行为菜单中选择【打开浏览器窗口】 命令可打开【打开浏览器窗口】对话框。
任务一 任务二 实 小 训 结
行为是由一段一段的JavaScript代码组成的， 主要是为了更好地控制网页中的元素。行为的扩展 是无限制的，只要掌握了JavaScript，就可以自己 编写行为，也可以从Dreamweaver 8的官方网站 中获得。
弹出式菜单】对话框的设置。在行为菜单中选择【显示弹出式
菜单】命令可打开【显示弹出式菜单】对话框。
网页设计与制作
操作二
制作弹出式菜单
Dreamweaver 8
2.比较常用的事件
【onFocus】：当指定的元素成为访问者交互的中心时产生。例如，在一个文本 区域中点击将产生一个【onFocus】事件。 【onBlur】：【onFocus】事件的相反事件，该事件是指当前指定元素不再是访 问者交互的中心。例如，当访问者在文本区域内点击后再在文本区域外点击，浏
Hale Waihona Puke 或一个附加于图像的链接）移走时产生。这个事件经常被用来和【恢 复交换图像】（Swap Image Restore）动作关联，当访问者不再指向 一个图像时，将它返回到其初始状态。 【onMouseOver】：当鼠标首次指向特定元素时产生（指针从没有指 向元素向指向元素移动），该特定元素通常是一个链接。 【onSelect】：当访问者在一个文本区域内选择文本时产生。 【onSubmit】：当访问者提交表格时产生。
【onClick】：当访问者单击指定的元素（如一个链接、按钮或图像地图）时产
生。单击直到访问者释放鼠标按键时才完成，只要按下鼠标按键便会令某些现象 发生。 【onLoad】：当图像或页面结束载入时产生。
网页设计与制作
操作二
制作弹出式菜单
Dreamweaver 8
【onUnload】：当访问者离开页面时产生。
网页设计与制作
操作三
弹出信息
弹出信息操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
弹出信息行为将显示一个提示信息框，给用户提供提 示信息。在行为菜单中选择【弹出信息】命令可打开【弹 出信息】对话框。
网页设计与制作
操作四
控制Shockwave或Flash
主 讲 ：
项目十二
网页设计与制作
使用行为完善网页功能
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一
任务一 任务二 实 小 训 结
设置页眉部分 设置主体部分
任务二
任务一
网页设计与制作
设置页眉部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务二
网页设计与制作
设置主体部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
本任务主要是设置网页主体部分的行为，包括 打开浏览器窗口、交换图像、弹出消息以及 Flash的播放控制等。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
打开浏览器窗口
打开浏览器窗口操作动画
Dreamweaver 8
本任务主要介绍设置状态栏文本和弹出式 菜单的方法，同时认识行为的概念，并了 解【行为】面板的基本操作。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
设置状态栏文本操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
1. 了解【行为】面板
在主菜单中选择【窗口】／【行为】命令可打开【行为】面板。
网页设计与制作
操作二
交换图像
交换图像操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
交换图像行为可以将一个图像替换为另一个图像，这 是通过改变图像的“src”属性实现的。可以使用交换图像 行为来创建翻转的按钮或其他图像效果。在行为菜单中选 择【交换图像】命令可打开【交换图像】对话框。
Dreamweaver 8
3. 行为的概念
一个行为是由一个事件所触发的动作组成的，因此行为的基本元素 有两个：事件和动作。事件是浏览器产生的有效信息，也就是访问 者对网页所做的事情。例如，当访问者将鼠标光标移到一个链接上， 浏览器就会为这个链接产生一个“onMouseOver”（鼠标经过） 事件。然后，浏览器会检查当事件为这个链接产生时，是否有一些 代码需要执行，如果有就执行这段代码，这就是动作。 在【行为】面板中添加了一个动作，也就有了一个事件。选择不同 的动作，【事件】菜单中会罗列出可以触发该动作的所有事件。不 同的动作，所支持的事件也不同。 不同的事件为不同的网页元素所定义。例如，在大多数浏览器中， “onMouseOver”（鼠标经过）和“onClick”（单击）行为是和 链接相关的事件，然而“onLoad”（载入）行为是和图像及文档 相关的事件。一个单一的事件可以触发几个不同的动作，而且可以 指定这些动作发生的顺序。
实训
网页设计与制作
制作垂直弹出式菜单
Dreamweaver 8
本项目着重介绍了行为在网页中的基本应用。实训将创建 如图所示的菜单导航栏，以进一步巩固行为的相关知识。 实训结果文件见“项目结果”文件夹中的“shixun.htm”。 【实训目的】 进一步巩固【行为】面板的使用。 进一步巩固添加和编辑行为的基本方法。 进一步巩固弹出式菜单的制作方法。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
小结
网页设计与制作
Dreamweaver 8
项目十二：
使用行为完善网页功 能
在前面的有关项目中对行为中的设置导航栏 图像、检查表单等行为进行了初步介绍，本项目通 过一个完整的网页案例介绍了另外6种常用行为的 基本功能，包括设置状态栏文本、弹出式菜单、打 开浏览器窗口、交换图像、弹出信息和控制 Shockwave或Flash等。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
Dreamweaver 8
2. 设置状态栏文本
在行为菜单中选择【设置文本】／【设置状态栏文本】命令， 打开【设置状态栏文本】对话框可设置状态栏文本。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
览器将为这个文本区域产生一个【onBlur】事件。 【onChange】：当访问者改变页面的一个数值时产生。例如，当访问者从菜单中 选择一条内容或改变一个文本区域的值，然后在页面的其他地方点击时，会产生 一个【OnChange】事件。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
网页设计与制作
操作二
制作弹出式菜单
制作弹出式菜单操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
1. 【显示弹出式菜单】对话框的设置
任务一 任务二 实 小 训 结
弹出式菜单可以在网页中实现类似Windows操作系统中的菜 单效果，菜单可以随意展开或隐藏，可以将所有的分支栏目全 部包含在菜单中，可以直接到达子页面，而不必逐级打开。本 操作主要设置一个水平方向上的弹出式菜单。重点掌握【显示
项目十二：
使用行为完善网页功 能
【onMouseMove】：当访问者指向一个特定元素并移动鼠标时产生 （指针停留在元素的边界以内）。 【onMouseDown】：当鼠标在特定元素上按下时产生该事件。 【onMouseOut】：当指针从特定的元素（该特定元素通常是一个图像
任务一 任务二 实 小 训 结
Dreamweaver 8
项目十二：
使用行为完善网页功 能
控制Shockwave或Flash操作动画
任务一 任务二 实 小 训 结
控制Shockwave或Flash行为可以控制Shockwave动画 或Flash动画的播放、停止、重放或跳转到某一帧。在行为菜 单中选择【控制Shockwave或Flash】命令可打开【控制 Shockwave或Flash】对话框。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
使用【打开浏览器窗口】动作将打开一个新的浏览器 窗口，在其中显示所指定的网页文档。用户可以指定这个 新窗口的属性，包括尺寸、是否可以调节大小、是否有菜 单栏等。例如，网页中的小图像需要放大时可以使用这个 动作。如果不对窗口的属性进行设置，它就会以 “640×480”像素大小的窗口打开，而且有导航栏、地址栏、 状态栏和菜单栏等。在行为菜单中选择【打开浏览器窗口】 命令可打开【打开浏览器窗口】对话框。
任务一 任务二 实 小 训 结
行为是由一段一段的JavaScript代码组成的， 主要是为了更好地控制网页中的元素。行为的扩展 是无限制的，只要掌握了JavaScript，就可以自己 编写行为，也可以从Dreamweaver 8的官方网站 中获得。
弹出式菜单】对话框的设置。在行为菜单中选择【显示弹出式
菜单】命令可打开【显示弹出式菜单】对话框。
网页设计与制作
操作二
制作弹出式菜单
Dreamweaver 8
2.比较常用的事件
【onFocus】：当指定的元素成为访问者交互的中心时产生。例如，在一个文本 区域中点击将产生一个【onFocus】事件。 【onBlur】：【onFocus】事件的相反事件，该事件是指当前指定元素不再是访 问者交互的中心。例如，当访问者在文本区域内点击后再在文本区域外点击，浏
Hale Waihona Puke 或一个附加于图像的链接）移走时产生。这个事件经常被用来和【恢 复交换图像】（Swap Image Restore）动作关联，当访问者不再指向 一个图像时，将它返回到其初始状态。 【onMouseOver】：当鼠标首次指向特定元素时产生（指针从没有指 向元素向指向元素移动），该特定元素通常是一个链接。 【onSelect】：当访问者在一个文本区域内选择文本时产生。 【onSubmit】：当访问者提交表格时产生。
【onClick】：当访问者单击指定的元素（如一个链接、按钮或图像地图）时产
生。单击直到访问者释放鼠标按键时才完成，只要按下鼠标按键便会令某些现象 发生。 【onLoad】：当图像或页面结束载入时产生。
网页设计与制作
操作二
制作弹出式菜单
Dreamweaver 8
【onUnload】：当访问者离开页面时产生。
网页设计与制作
操作三
弹出信息
弹出信息操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
弹出信息行为将显示一个提示信息框，给用户提供提 示信息。在行为菜单中选择【弹出信息】命令可打开【弹 出信息】对话框。
网页设计与制作
操作四
控制Shockwave或Flash