网页制作：项目12 使用行为完善网页功能--ppt

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