《第八章在网页中使用行为..ppt》由会员分享,可在线阅读,更多相关《第八章在网页中使用行为..ppt(22页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、$知识目标知识目标 1.了解了解Dreamweaver8Dreamweaver8中的行为;中的行为;2.2.掌握掌握Dreamweaver8Dreamweaver8内置行为的添加方法;内置行为的添加方法;3.3.掌握行为的设置流程,及应用方法。掌握行为的设置流程,及应用方法。8 能力目标1.掌握行为面板的使用;掌握行为面板的使用;2.2.熟练内置行为的添加与应用操作。熟练内置行为的添加与应用操作。u第一节第一节 认识行为认识行为u第二节第二节 使用使用Dreamwerver8内置的行为内置的行为u 本章小结本章小结第一节 认识行为一、认识行为一、认识行为二、二、使用行为面板使用行为面板三、增加
2、行为的基本步骤三、增加行为的基本步骤四、四、修改行为修改行为行为是由对象、事件和动作构成的。行为是由对象、事件和动作构成的。1对象对象:是产生行为的主体。网页中的很多元素都可以成为:是产生行为的主体。网页中的很多元素都可以成为对象,如网页中的一个图片、一段文字等元素,也可以整个网页对象,如网页中的一个图片、一段文字等元素,也可以整个网页文档。文档。2事件事件:是由用户或浏览器触发的事件。事件经常是针对页:是由用户或浏览器触发的事件。事件经常是针对页面元素的,如鼠标经过、鼠标单击、键盘某个键按下等。面元素的,如鼠标经过、鼠标单击、键盘某个键按下等。3动作动作:通常是一段:通常是一段JavaScr
3、ipt代码,用于完成某些特殊代码,用于完成某些特殊的任务。如打开一个窗口时自动播放声音、弹出信息窗口等。的任务。如打开一个窗口时自动播放声音、弹出信息窗口等。4行为行为:事件和动作组合起来就构成了行为。事件是产生行:事件和动作组合起来就构成了行为。事件是产生行为的条件,动作是行为的具体结果。为的条件,动作是行为的具体结果。一、认识行为单击菜单栏中的单击菜单栏中的“窗口窗口”|“行为行为”命令或使用组合键命令或使用组合键Shift+F4,可以,可以打开行为面板如图打开行为面板如图1所示。所示。(一)行为面板各按钮功能(一)行为面板各按钮功能(二)设置浏览器版本(二)设置浏览器版本在行为面板中,单
4、击在行为面板中,单击 按钮,在按钮,在“显示事件显示事件”的级联菜单中选择浏览的级联菜单中选择浏览器版本,如图器版本,如图2所示。所示。二、使用行为面板图1图2(三)常见事件(三)常见事件添加行为后,要为行为选择触发事件。选择某个行为,单击左侧添加行为后,要为行为选择触发事件。选择某个行为,单击左侧的事件名称右侧的下拉箭头弹出下拉菜单,菜单列出了所选行为可以的事件名称右侧的下拉箭头弹出下拉菜单,菜单列出了所选行为可以使用的触发事件,如图所示。使用的触发事件,如图所示。1在文档窗口中选择要增加行为的对象,例如一个图像或一个链接或一段文字。要将行为附加到整个页,请在“文档”窗口底部左侧的标签选择器
5、中单击 标签。2在行为面板中单击加号“+”按钮,从弹出菜单中选择一种行为。3打开某种行为的设置对话框,根据需要进行设置,完成对话框。4在行为面板中选择行为,添加触发事件。5保存网页,在浏览器中检测行为。三、增加行为的基本步骤四、修改行为要修改和编辑己设置行为要修改和编辑己设置行为,执行以下操作之一:执行以下操作之一:1在行为面板中双击要修改的行为。在行为面板中双击要修改的行为。2选择要修改的行,单击行为面板上的选择要修改的行,单击行为面板上的“选选项项”按钮按钮,选择,选择“编辑行为编辑行为”命令。命令。第二节 使用Dreamwerver8内置的行为一、播放声音一、播放声音二、打开浏览器窗口二
6、、打开浏览器窗口三、弹出消息三、弹出消息四、四、转到转到URL五、设置状态栏文本五、设置状态栏文本六、拖动层六、拖动层七、检查浏览器七、检查浏览器八、改变对象属性八、改变对象属性九、控制九、控制Shockwave或或Flash1打开一个网页,选择行为的对象如某一图像,也可单击窗口下方的标签,为整个页面增加行为。2在行为面板上,单击“+”按钮,从下拉菜单中选择“播放声音”。3打开“播放声音”对话框。4在文本框中输入声音文件的路径和名称,也可单击“浏览”按钮,选择要播放的声音文件。5单击“确定”按钮。在网页中出现占位符。6在行为面板设置事件,如设为“OnLoad”。7保存并在浏览器中预览网页,观看
7、效果。一、播放声音1 1打开一个网页,选择行为的对象如某一图像,如选择一个图像。打开一个网页,选择行为的对象如某一图像,如选择一个图像。2 2在行为面板上,单击在行为面板上,单击“+”按钮,从下拉菜单中选择按钮,从下拉菜单中选择“打开浏览器窗口打开浏览器窗口”。3 3打开打开“打开浏览器窗口打开浏览器窗口”对话框,如图所示。对话框,如图所示。4 4设置对话框,单击设置对话框,单击“确定确定”按钮。按钮。5.5.在行为面板设置事件,如设为在行为面板设置事件,如设为“OnMouseOverOnMouseOver”6 6保存并在浏览器中测试行为。保存并在浏览器中测试行为。二、打开浏览器窗口1打开一个
8、网页,选择行为的对象,如选择一个图像。打开一个网页,选择行为的对象,如选择一个图像。2在行为面板上,单击在行为面板上,单击“+”按钮,打开下拉菜单,从中选择按钮,打开下拉菜单,从中选择“弹出消息弹出消息”。3打开打开“弹出消息弹出消息”对话框,如图所示。对话框,如图所示。4输入要显示的信息,单击输入要显示的信息,单击“确定确定”按钮。按钮。5在行为面板设置事件,如设为在行为面板设置事件,如设为“OnMouseDown”6保存并在浏览器中测试行为。保存并在浏览器中测试行为。三、弹出消息1打开一个网页,插入一个按钮,在打开一个网页,插入一个按钮,在“属性检查器属性检查器”中设置中设置“动作动作”为
9、为“无无”。2选中按钮。在行为面板上,单击选中按钮。在行为面板上,单击“+”按钮,打开下拉菜单,从中选择按钮,打开下拉菜单,从中选择“转到转到URL”。3打开打开“转到转到URL”对话框,如图所示。对话框,如图所示。4在在“URL”框中框中输入要打开的文件的输入要打开的文件的路径和名称,也可单路径和名称,也可单击击“浏览浏览”按钮选择文件。按钮选择文件。5单击单击“确定确定”按钮。按钮。6在行为面板设置事件,如设为在行为面板设置事件,如设为“OnMouseDown”7保存并在浏览器中测试行为保存并在浏览器中测试行为四、转到URL1打开一个网页,选择窗口下方的打开一个网页,选择窗口下方的标签。标
10、签。2在行为面板上,单击在行为面板上,单击“+”按钮,打开下拉菜单,从中选择按钮,打开下拉菜单,从中选择“设置文本设置文本”子菜单中的子菜单中的“设置状态栏文本设置状态栏文本”。3打开打开“设置状态栏文本设置状态栏文本”对话框,如图所示。对话框,如图所示。4输入要显示的信息,单击输入要显示的信息,单击“确定确定”按钮。按钮。5在行为面板设置事件,如设为在行为面板设置事件,如设为“OnLoad”。6保存并在浏览器中测试行为。保存并在浏览器中测试行为。五、设置状态栏文本1打开一个网页,插入一个层,命名为打开一个网页,插入一个层,命名为layer1,在层插入图像。,在层插入图像。2选择窗口下方的选择
11、窗口下方的标签。标签。3在行为面板上,单击在行为面板上,单击“+”按钮,打开下拉菜单,从中选择按钮,打开下拉菜单,从中选择“拖动层拖动层”。4打开打开“拖动层拖动层”对话框,对话框,如图所示。如图所示。5在在“基本基本”选项中,选择要拖动的层,其他使用默认设置。选项中,选择要拖动的层,其他使用默认设置。6单击单击“确定确定”按钮,退出按钮,退出“拖动层拖动层”对话框。对话框。7在行为面板设置事件为在行为面板设置事件为“OnLoad”。8保存并在浏览器中测试行为。保存并在浏览器中测试行为。六、拖动层1打开一个网页,选择窗口下方的打开一个网页,选择窗口下方的标签。标签。2在行为面板上,单击在行为面
12、板上,单击“+”按钮,打开下拉菜单,从中选择按钮,打开下拉菜单,从中选择“检查浏检查浏览器览器”。3打开打开“检查浏览器检查浏览器”对话框,如图所示。对话框,如图所示。七、检查浏览器4对话框各项设置如下:对话框各项设置如下:l“Netscape Navigator”:用于设置:用于设置Netscape Navigator浏览器的浏览器的版本及打开的网页。版本及打开的网页。l“Internet Explorer“:用于设置:用于设置Internet Explorer浏览器的版本浏览器的版本及打开的网页。及打开的网页。l“其他浏览器其他浏览器”:设置对于其他浏览器的选项设置,。:设置对于其他浏览器
13、的选项设置,。l“URL”:用于设置要跳转的地址,单击:用于设置要跳转的地址,单击“浏览浏览”按钮可以选择跳按钮可以选择跳转的文件。转的文件。l“替代替代URL”:用于设置替代的:用于设置替代的URL,也可以单击,也可以单击“浏览浏览”按钮选按钮选择文件。择文件。5设置完成后,单击设置完成后,单击“确定确定”退出对话框。退出对话框。6在行为面板设置事件为在行为面板设置事件为“OnLoad”。7保存并在浏览器中测试行为。保存并在浏览器中测试行为。1打开一个网页,插入两个按钮,按钮动作为打开一个网页,插入两个按钮,按钮动作为“无无”,绘制一个层,绘制一个层,命名为命名为Layer1,设置层的背景颜
14、色,设置层的背景颜色为浅紫色,如图为浅紫色,如图1所示。所示。2选中选中“粉色粉色”按钮。在行为按钮。在行为面板上,单击面板上,单击“+”按钮,打开下拉按钮,打开下拉菜单,从中选择菜单,从中选择“改变属性改变属性”。3打开打开“改变属性改变属性”对话框,对话框,如图如图2所示。所示。八、改变对象属性4对话框各项设置如下:对话框各项设置如下:l“对象类型对象类型”:选择要改变的类型。选择:选择要改变的类型。选择“LAYER”l“命名对象命名对象”:从下拉菜单中选择要更改属性的对象名称,选择:从下拉菜单中选择要更改属性的对象名称,选择layer“Layer1”。l“属性属性”:设置要改变的属性名称
15、及浏览器版本。改变背景选择:设置要改变的属性名称及浏览器版本。改变背景选择“style.backgroundColor”,浏览器版本选择,浏览器版本选择“IE4”。l“新的值新的值”:设置新属性的值。输入:设置新属性的值。输入“pink”。5单击单击“确定确定”,退出对话框。,退出对话框。6在行为面板设置事件为在行为面板设置事件为“OnMouseDown”。7选中选中“绿色绿色”按钮,添加按钮,添加“改变属性改变属性”,设置,设置“新的值新的值”为为“green”,事件为事件为“OnMouseDown”。8保存并在浏览器中测试行为。保存并在浏览器中测试行为。1打开一个网页,插入两个按钮,按钮动
16、作为打开一个网页,插入两个按钮,按钮动作为“无无”,插入一个,插入一个Flash,在属性检查器中命名为,在属性检查器中命名为“flash1”并将并将“自动播放自动播放”和和“循环循环”选项取选项取消,如图消,如图1所示。所示。2选中选中“play”按钮。在行为按钮。在行为面板上,单击面板上,单击“+”按钮,打开下拉按钮,打开下拉菜单,从中选择菜单,从中选择“控制控制Shockwave或或Flash”。3打开打开“控制控制Shockwave或或Flash”对话框,如图对话框,如图2所示。所示。九、控制Shockwave或Flash4在在“影片影片”下拉列表中选择下拉列表中选择“flash1”,“操作操作”选选项中选择项中选择“播放播放”。5单击单击“确定确定”,退出对话框。,退出对话框。6在行为面板设置事件为在行为面板设置事件为“OnClick”。7选中选中“stop”按钮,添加按钮,添加“控制控制Shockwave或或Flash”,“操作操作”选项中选择选项中选择“停止停止”。8保存并在浏览器中测试行为。保存并在浏览器中测试行为。