第10章 使用行为和JavaScript创建特效网页

单击此处编辑母版标题样式,*,第,10,章,使用行为和,JavaScript,创建特效网页,一、行为概述,行为指设计者能够运用制作动态网页的,JavaScript,功能，并将期放置在网页文档中，以允许浏览器与网页本身进行交互，从而以多种方式更改网页或引起某些任务的执行。如果想运用这些行为,(behavior),，首先要选择运用行为的对象，然后决定要发生的动作（,action,），还要设置动作在何种情况下发生的事件,(event),。行为是事件和由该事件触发的动作的组合体。,1,行为基础,在,“,行为,”,面板中，您可以先指定一个动作，然后指定触发该动作的事件，以此将行为添加到页面中。行为代码是客户端,JavaScript,代码；即它运行在浏览器中，而不是服务器上。,事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作动作是一段预先编写的,JavaScript,代码在将行为附加到某个页面元素之后，每当该元素的某个事件发生时，行为即会调用与这一事件关联的动作（,JavaScript,代码）。,行为面板概述,使用,“,行为,”,面板（,“,窗口,”,“,行为,”,）可以将行为附加到页面元素（更具体地说是附加到标签），并可以修改以前所附加行为的参数。行为面板包含以下选项：,1,）显示设置事件：显示设置事件是默认的视图。,2,）显示所有事件：按字母顺序显示属于特定类别的所有事件。,3,）添加动作,(+),4,）删除,(,),：从行为列表中删除所选的事件和动作。,5,）向上箭头和向下箭头按钮：在行为列表中上下移动特定事件的选定动作。,6,）事件,7,）显示事件：指定当前行为在哪个浏览器中起作用。,2.,动作,动作是由预先编写的,JavaScript,代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏元素、拖动,AP,元素等。,3.,事件,事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作。每个浏览器都提供一组事件，这些事件可以与,“,行为,”,面板的,“,动作,”,(+),弹出菜单中列出的动作相关联。,二、使用,DreamweaverCS5,内置行为,Dreamweaver,附带的行为已经编写，可适用于新型浏览器。,Dreamweaver,动作是经过精心编写的，如果您从,Dreamweaver,动作中手工删除代码，或将其替换为自己编写的代码，则可能会失去跨浏览器兼容性。,1.,应用改变属性行为,使用,“,改变属性,”,行为可更改对象某个属性（例如,div,的背景颜色或表单的动作）的值。需要非常熟悉,HTML,和,JavaScript,的情况下才能使用此行为。使用改变属性行为方法通过选择对象，从,“,行为,”,面板的,“,动作,”,菜单中选择,“,改变属性,”,中进行。,2.,应用拖动,AP,元素行为,可让访问者拖动绝对定位的,(AP),元素。使用此行为可创建拼板游戏、滑块控件和其它可移动的界面元素。使用应用拖动,AP,元素行为的方法通过选择,“,插入,”,“,布局对象,”,“,AP Div,”,或单击,“,插入,”,栏上的,“,绘制,AP Div,”,按钮进行。,3.,转到,URL,行为,“,转到,URL,”,行为可在当前窗口或指定的框架中打开一个新页。此行为适用于通过一次单击更改两个或多个框架的内容。,4.,跳转菜单行为,使用,“,插入,”,“,表单,”,“,跳转菜单,”,创建跳转菜单时，,Dreamweaver,创建一个菜单对象并向其附加一个,“,跳转菜单,”,（或,“,跳转菜单转到,”,）行为。通常不需要手动将,“,跳转菜单,”,行为附加到对象。,5.,应用跳转菜单转到行为,“,跳转菜单转到,”,行为与,“,跳转菜单,”,行为密切关联；,“,跳转菜单转到,”,允许您将一个,“,转到,”,按钮和一个跳转菜单关联起来。单击,“,转到,”,按钮打开在该跳转菜单中选择的链接。通常情况下，跳转菜单不需要一个,“,转到,”,按钮；从跳转菜单中选择一项通常会引起,URL,的载入，不需要任何进一步的用户操作。但是，如果访问者选择已在跳转菜单中选择的同一项，则不发生跳转。,6.,应用打开浏览器窗口行为,使用,“,打开浏览器窗口,”,行为可在一个新的窗口中打开页面。您可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。,如果不指定该窗口的任何属性，在打开时它的大小和属性与打开它的窗口相同。指定窗口的任何属性都将自动关闭所有其它未明确打开的属性。使用打开浏览器行为的具体方法通过选择一个对象，然后从,“,行为,”,面板的,“,动作,”,菜单中选择,“,打开浏览器窗口,”,中进行。,7.,应用弹出消息行为,“,弹出消息,”,行为显示一个包含指定消息的,JavaScript,警告。因为,JavaScript,警告对话框只有一个按钮（,“,确定,”,），所以使用此行为可以提供用户信息，但不能为用户提供选择操作。应用弹出消息行为的具体方法通过选择对象，然后从,“,行为,”,面板的,“,动作,”,菜单中选择,“,弹出消息,”,中进行。,8.,应用预先载入图像行为,“,预先载入图像,”,行为可以缩短显示时间，其方法是对在页面打开之初不会立即显示的图像（例如那些将通过行为或,JavaScript,换入的图像）进行缓存。当使用,“,交换图像,”,时不需要手动添加,“,预先载入图像,”,。应用预先载入图像行为的方法通过选择一个对象，然后从,“,行为,”,面板的,“,动作,”,菜单中选择,“,预先载入图像,”,进行。,9.,应用设置导航栏图像行为,使用,“,设置导航栏图像,”,行为可将某个图像变为导航栏图像，还可以更改导航条中图像的显示和动作。,使用,“,设置导航栏图像,”,对话框的,“,基本,”,选项卡可以创建或更新导航栏图像，更改用户单击导航条按钮时显示的,URL,，以及选择用于显示,URL,的其它窗口。,使用,“,设置导航栏图像,”,对话框的,“,高级,”,选项卡可设置根据当前按钮的状态改变文档中其它图像的状态。默认情况下，单击导航条中的一个元素将使导航条中的所有其它元素自动返回到它们的,“,一般,”,状态；如果要设置，使鼠标指针按下所选图像或置于其上时改变某个图像的状态，则使用,“,高级,”,选项卡。,10.,应用设置容器的文本行为,“,设置容器的文本,”,行为将页面上的现有容器（即，可以包含文本或其它元素的任何元素）的内容和格式替换为指定的内容。该内容可以包括任何有效的,HTML,源代码。,您可以在文本中嵌入任何有效的,JavaScript,函数调用、属性、全局变量或其它表达式。若要嵌入一个,JavaScript,表达式，请将其放置在大括号,(),中。若要显示大括号，请在它前面加一个反斜杠,(),。,11.,应用设置状态栏文本行为,“,设置状态栏文本,”,行为可在浏览器窗口左下角处的状态栏中显示消息。例如，您可以使用此行为在状态栏中说明链接的目标，而不是显示与之关联的,URL,。,如果在,Dreamweaver,中使用,“,设置状态栏文本,”,行为，则不能保证会更改浏览器中的状态栏的文本，因为一些浏览器在更改状态栏文本时需要进行特殊调整。例如，,Firefox,需要您更改,“,高级,”,选项以让,JavaScript,更改状态栏文本。,文本中嵌入内容与,“,应用设置容器的文本行为,”,中一样。,12.,应用设置文本域文字行为,“,设置文本域文字,”,行为可用您指定的内容替换表单文本域的内容。可以在文本中嵌入任何有效的,JavaScript,函数调用、属性、全局变量或其它表达式。若要嵌入一个,JavaScript,表达式，请将其放置在大括号,(),中。若要显示大括号，请在它前面加一个反斜杠,(),。,（,1,）,创建命名的文本域,选择,“,插入,”,“,表单,”,“,文本域,”,。,（,2,）,应用设置文本域文字,选择一个文本域，然后从,“,行为,”,面板的,“,动作,”,菜单中选择,“,设置文本,”,“,设置文本域文字,”,。,13,应用显示,-,隐藏元素行为,“,显示,-,隐藏元素,”,行为可显示、隐藏或恢复一个或多个页面元素的默认可见性。此行为用于在用户与页进行交互时显示信息。此行为仅显示或隐藏相关元素,-,在元素已隐藏的情况下，它不会从页面流中实际上删除此元素。,14.,应用交换图像行为,“,交换图像,”,行为通过更改,标签的,src,属性将一个图像和另一个图像进行交换。使用此行为可创建鼠标经过按钮的效果以及其它图像效果（包括一次交换多个图像）。插入鼠标经过图像会自动将一个,“,交换图像,”,行为添加到您的页中。,还有一个,“,恢复交换图像,”,行为，可以将最后一组交换的图像恢复为它们以前的源文件,15.,应用检查表单行为,“,检查表单,”,行为可检查指定文本域的内容以确保用户输入的数据类型正确。将此行为附加到表单可以防止在提交表单时出现无效数据。,16.,播放时间轴行为,播放时间轴行为可以通过单击一个链接或者按钮启动时间轴播放，也可以将鼠标指针移动到某个链接、图像或其他对象之上时自动启动时间轴。,17,停止时间轴行为,18,转到时间轴帧,19.,应用增大,/,收缩效果,此效果适用于下列,HTML,对象：,address,、,dd,、,div,、,dl,、,dt,、,form,、,p,、,ol,、,ul,、,applet,、,center,、,dir,、,menu,或,pre,。,20,应用高亮效果,此效果适用于,applet,、,body,、,frame,、,frameset,或,noframes,以外的所有,HTML,对象。,21,应用晃动效果,此效果适用于下列,HTML,对象：,address,、,blockquote,、,dd,、,div,、,dl,、,dt,、,fieldset,、,form,、,h1,、,h2,、,h3,、,h4,、,h5,、,h6,、,iframe,、,img,、,object,、,p,、,ol,、,ul,、,li,、,applet,、,dir,、,hr,、,menu,、,pre,或,table,。,22,应用上滑,/,下滑效果,此效果仅适用于下列,HTML,对象：,blockquote,、,dd,、,div,、,form,或,center,。滑动效果要求在要滑动的内容周围有一个,标签。,23,应用挤压效果,此效果仅适用于下列,HTML,对象：,address,、,dd,、,div,、,dl,、,dt,、,form,、,img,、,p,、,ol,、,ul,、,applet,、,center,、,dir,、,menu,或,pre,。,24,应用向上遮帘,/,向下遮帘效果,此效果仅适用于下列,HTML,对象：,address,、,dd,、,div,、,dl,、,dt,、,form,、,h1,、,h2,、,h3,、,h4,、,h5,、,h6,、,p,、,ol,、,ul,、,li,、,applet,、,center,、,dir,、,menu,或,pre,。,25,应用显示,/,渐隐效果,此效果适用于除,applet,、,body,、,iframe,、,object,、,tr,、,tbody,或,th,以外的所有,HTML,对象。,三,、,使用,JavaScript,JavaScript,是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与,HTML,超文本标记语言一起实现网页中的动态交互功能。,JavaScript,通过嵌入或调用在标准的,HTML,语言中实现其功能。,JavaScript,是一种脚本编程语言，它的基本语法与,C,语言类似，但运行过时不需要单独编译，而是逐行解释执行，运行快。具有跨平台性，与操作环境无关，只依赖于浏览器本身，只要是支持,JavaScript,的浏览器都能正确执行。,1.JavaScript,脚本的语法格式,语法,1,：,在这里书写,javascript,语句,一些低版本的浏览器不能识别,标记，所以可能出现把整个