1、Dreamweaver课件,第十讲 行为,主要内容,什么是行为 什么是事件 认识“行为”面板 添加、修改和删除行为 获取更多的行为 应用行为,什么是行为,行为(Behavior)是一段网页上的Javascript代码,可以实现访问者与Web页进行交互,以多种方式更改页面或引起某些任务的执行。每个行为都由两部分组成,即事件和动作。所谓事件是指“发生什么”,而动作是指“去做什么”。简单来说,就是当发生某个事件的时候去执行某项动作,例如当打开某个网站的时候,弹出欢迎信息。,什么是事件(P227),事件是访问者在浏览器上执行的一种操作。每个浏览器都提供一组事件,这些事件可以与“行为”面板中的“添加动作
2、”按钮“+”出现菜单中列出的动作相关联。 例如,onMouseOut、onMouseOver、onClick用于与某个链接关联,而onLoad则用于与图片及文档的body关联。,什么是动作(P226),动作是预先编写的JavaScript代码,这些代码执行特定的任务.动作是事件的结果,同事件一样,每个浏览器都提供一组动作,例如调用JavaScript、改变属性、检查浏览器、拖动层等。 事件与动作的关系: 在将行为附加到网页元素之后,只要对该元素发生了所指定的事件,浏览器就会调用与该事件关联的动作(javascript代码). 单个事件可以触发多个不同的动作,发生的顺序可以被指定.,行为,行为三
3、要素(重点) 对象(事件作用的网页元素) 事件 动作如: “鼠标单击按钮,弹出提示信息”这个行为中,“鼠标单击”是事件,“弹出提示信息”是动作,“按钮”是对象.注意: 三要素构成完整的行为,缺一不可.,熟悉“行为”面板,要为文档添加行为,需要使用“行为”面板,选择“窗口”“行为”菜单,或按【Shift+F4】组合键,即可打开“行为”面板。,添加行为,删除行为,事件,动作,显示已设置的事件列表,显示所有事件列表,上下移动行为,添加、修改和删除行为,添加行为 修改行为 删除行为,为对象添加行为,可以将行为附加到整个文档(即附加到标签),还可以附加到超链接、图像、表单元素等,但是不能将其附加到纯文本
4、。,预览效果,修改行为的方法,修改行为的方法非常简单,首先选中要修改行为的对象,然后打开“行为”面板并选择要修改的行为。,单击事件名称,将在事件名称右侧出现一个 按钮,单击该按钮将打开事件列表。,双击动作名称可编辑行为,删除行为,如果要删除某行为,只需选中该行为,然后单击面板上方的“删除行为”按钮 或直接按【Delete】键即可。也可用鼠标右键单击行为,在弹出的快捷菜单中选择“删除行为”命令。,删除行为,获取更多的行为,Dreamweaver 8自带的行为比较少,如果想获取更多的行为可以从Macromedia公司和其他第三方的开发网站下载。在“行为”下拉列表中选择“获取更多的行为”选项,则会打
5、开Macromedia公司官方网站提供的行为下载页面。,将行为附加到文本,默认情况下,不能将行为附加到纯文本,但是可以将行为附加到链接。 因此,若要将行为附加到文本,可以为文本添加一个空链接,然后将行为附加到该链接上。,应用行为 (重点),设置文本 “设置层文本”行为 “设置框架文本”行为 “设置文本域文本”行为 “设置状态栏文本”行为 播放声音 打开浏览器窗口 交换图像 恢复交换图像 改变属性,检查浏览器 检查插件 检查表单 设置导航栏图像 转到URL 弹出信息 拖动层 显示-隐藏层 弹出式菜单,调用JavaScript 控制Shockwave或Flash 预先载入图像 跳转菜单 跳转菜单开
6、始 时间轴,“设置层文本”行为,“设置层文本”行为可以用指定的内容替换现有层的内容和格式设置,但将保留层的属性,包括颜色。该内容可以包括任何有效的HTML源代码。,“设置框架文本”行为,“设置框架文本”行为可以动态设置框架的文本,用指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的HTML源代码。使用此行为可以动态显示信息。注意:只能应用在框架网页中,不能应用在浮动框架上。,“设置文本域文本”行为 (略),“设置文本域文字”行为可以用指定的内容替换表单文本域的内容。,“设置状态栏文本”行为,“设置状态栏文本”行为可在浏览器窗口底部左侧的状态栏中显示消息。如可以使用此行为在状态栏中说明
7、链接的目标而不是显示链接的URL。,播放声音,“播放声音”行为用来播放声音和音乐文件,页面背景音乐和鼠标单击时的声音都可以用此行为设置。,打开浏览器窗口 (重点),打开一个新的浏览器窗口,在其中显示所指定的内容,网页设计者可指定该新窗口尺寸、是否可调节大小、是否有菜单等属性。使用“打开浏览器窗口”行为可以实现在新窗口中打开网页的功能,许多站点都使用这种方式来弹出重要的通知、广告信息等页面。 注意:在应用行为前要选中标签。也就是选中的对象为,事件设为onload。,交换图像 (重点),“交换图像”行为可将一个图像替换为另一个图像,这是通过更改“scr”属性来实现的,此动作一般用来创建翻转按钮以及
8、同时替换多个图片。,恢复交换图像 (重点),“恢复交换图像”行为用于将替换的图像恢复为原始的图像文件。,改变属性 (重点),“改变属性”行为用于改变网页元素的属性值。,检查浏览器,“检查浏览器”行为是为了根据浏览者使用的浏览器版本的不同来决定访问的不同网页,以提高网页的兼容性。可将此行为添加到与任何浏览器都兼容页面的body标签上,也可以将此行为添加到一个空链接上,并让该行为根据访问者浏览器的类型和版本确定链接的目标页面。,检查插件,“检查插件”行为用于检查访问者的电脑中是否安装了特定的插件,而决定将浏览者带往不同的页面,如浏览者电脑中安装了Flash插件,那么就播放Flash给浏览者观看,如
9、果没有安装,就直接将浏览者带往没有Flash的页面。,检查表单(略),“检查表单”行为用于检查指定文本域的内容,以确保用户输入了正确的数据类型。使用“onBlur”事件添加到文本域,可以在用户填写表单时对域进行检查,若使用“onSubmit”事件将其添加到表单,在用户提交表单时可同时对多个文本域进行检查。使用该行为可以防止表单提交到服务器后指定的文本域包含无效的数据。,设置导航栏图像,“设置导航栏图像”行为用于将某个图像变为导航条图像,也可更改导航条中图像的显示和动作。使用“设置导航栏图像”行为,可以实现选择插入图像对象导航条菜单命令一样的功能。,转到URL,选择“转到URL”行为可在当前窗口
10、或指定框架内打开一个新的页面。此行为在一次单击改变两个或更多框架的内容时特别有用,它也可以在时间轴内被调用,在特定时间间隔后跳转到新的页面。,弹出信息,“弹出信息”行为将用于显示一个指定的JavaScript提示信息框。该提示信息是提供给浏览者信息的,浏览者不能做出选择,也不能控制信息框的外观,只有一个“确定”按钮,其外观取决于浏览器属性。,拖动层,使用拖动层行为可以创建拼板游戏、滑块控件等界面元素。可以指定浏览者能够向哪个方向拖动层,设置目标的位置,在层和目标之间多远时算是捕捉到目标,以及当层接触到目标时应该执行的操作等。 注意:应用的对象必须是,显示-隐藏层 (重点),“显示-隐藏层”行为
11、用于改变一个或多个层的可见性。此行为可以用于交互时显示信息。如当鼠标光标滑过一个图像时,则显示该图像的相关信息,当鼠标光标离开这个图像时,提示信息则消失。,弹出式菜单,“弹出式菜单”行为用于在网页中实现类似于Windows系统中菜单效果,在设计网页时可以把一个类别的页面都放在菜单中,这样就能从主页直接访问到需要的子页,以方便浏览者。,注意:选定对象必须是图片,跳转菜单,“跳转菜单”行为是用于修改已经创建好的跳转菜单。,跳转菜单开始,“跳转菜单开始”行为与“跳转菜单”行为密切相关,“跳转菜单开始”行为允许将“前往”按钮和一个“跳转菜单”行为关联起来。,调用JavaScript,“调用JavaSc
12、ript”行为用于执行“行为”面板中某个特定事件时调用自己编写的JavaScript代码、函数。 重点掌握“关闭窗口”的应用,控制Shockwave或Flash,“控制Shockwave或Flash”行为用来控制Macromedia Shockwave或Macromedia Flash的播放、停止、重放或跳转到某一帧操作。,预先载入图像,在网页中包含了各种各样的图像,有些图像在网页被浏览器下载的时候不能被同时下载,要显示这些图片就需要再次发出下载指令,这样会影响浏览者的浏览。这时可使用“预先载入图像”行为先将这些图片载入到浏览器的缓存中,避免出现延迟。,时间轴,“时间轴”行为包括“播放时间轴”、“停止时间轴”和“转到时间轴帧”3项,通过链接或者按钮来控制时间轴动画的播放。,滚动字幕,在浏览某些网页时,常常会看到一些“字幕”效果,也就是一行或多行文字在页面上按照一定的速度上下或左右移动,通过插入.标签 可以实现上述效果。,添加鼠标触发事件,