《网页设计与制作第10章 行为ppt课件(完整版).pptx》由会员分享,可在线阅读,更多相关《网页设计与制作第10章 行为ppt课件(完整版).pptx(48页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、网页设计与制作第10章 行为ppt课件(完整版)第10章行为行为第 10 章本书编写组网页设计与制作(微课版第3 版)第10章行为10.1行为概述10.2行为的基本操作10.3文本类行为10.4图像类行为10.5代码属性类行为10.6 跳转类行为 10.7 效果类行为 10.8 综合实训案例:制作一个摄影网站 10.9 第10章行为学习目标 理解行为的概念和构成;理解行为的概念和构成; 理解事件、动作的含义;理解事件、动作的含义; 掌握行为的基本操作;掌握行为的基本操作; 掌握文本类、图像类、代码属性类等行为的操作方法。掌握文本类、图像类、代码属性类等行为的操作方法。用户在浏览网页时,常常会与
2、网站进行交互,这种交互在用户在浏览网页时,常常会与网站进行交互,这种交互在Dreamweaver Dreamweaver CS6CS6中是通过行为这种方式来实现的。从功能上说,行为是响应某一具中是通过行为这种方式来实现的。从功能上说,行为是响应某一具体事件而采用的一个或多个动作。从实现上说,行为是一种运行在浏览体事件而采用的一个或多个动作。从实现上说,行为是一种运行在浏览器上的器上的JavaScriptJavaScript代码。在制作网页时,将行为代码放置到文档中,无代码。在制作网页时,将行为代码放置到文档中,无须编写脚本代码就可以实现一些有趣的交互效果。须编写脚本代码就可以实现一些有趣的交互
3、效果。第10章行为10.1行为概述10.1.1 10.1.1 行为定义行为定义行为是由对象、事件和动作构成的。对象是产生行为的主体,对象也行为是由对象、事件和动作构成的。对象是产生行为的主体,对象也可以是成对出现的标签可以是成对出现的标签;事件是触发动态效果的条件;动作是行为产;事件是触发动态效果的条件;动作是行为产生的最终动态效果。生的最终动态效果。10.1.2 10.1.2 事件事件事件是由浏览器生成的消息,它提示该浏览器的浏览者已执行了某种事件是由浏览器生成的消息,它提示该浏览器的浏览者已执行了某种操作。操作。10.1.3 10.1.3 动作动作动作是一段预先编写好的动作是一段预先编写好
4、的JavaScriptJavaScript代码,可以执行许多任务,如显代码,可以执行许多任务,如显示或隐藏示或隐藏APAP元素、转到元素、转到URLURL、打开浏览器窗口等。将行为附加到某个页、打开浏览器窗口等。将行为附加到某个页面对象上后,当该对象的某个事件发生时,行为会调用与这一事件相面对象上后,当该对象的某个事件发生时,行为会调用与这一事件相关联的动作。关联的动作。第10章行为10.2.1 “10.2.1 “行为行为”面板面板Dreamweaver CS6Dreamweaver CS6提供了一个专门管理和编辑行为的工具面板,即提供了一个专门管理和编辑行为的工具面板,即“行为行为”面板。通
5、过面板。通过“行为行为”面板,用户可以方便地为文本、图像面板,用户可以方便地为文本、图像等页面对象添加行为等页面对象添加行为。10.2.2 10.2.2 添加行为添加行为在在“行为行为”面板中,可以先添加一个动作,然后指定触发该动作的面板中,可以先添加一个动作,然后指定触发该动作的事件,以此将行为添加到页面中。事件,以此将行为添加到页面中。10.2.3 10.2.3 编辑行为编辑行为为对象添加行为之后,可以根据需要修改触发动作的事件、动作的为对象添加行为之后,可以根据需要修改触发动作的事件、动作的参数,还可以对动作进行增加、删除、排序等操作。参数,还可以对动作进行增加、删除、排序等操作。10.
6、2行为的基本操作第10章行为10.2行为的基本操作10.2.1 “行为”面板在菜单栏中选择在菜单栏中选择“窗口窗口”“”“行行为为”命令,可以打开命令,可以打开“行为行为”面面板,如图所示。板,如图所示。使用使用“行为行为”面板,可将行为添面板,可将行为添加到页面对象上。已添加行为的加到页面对象上。已添加行为的页面对象的行为将显示在页面对象的行为将显示在“行为行为”面板的行为列表中,并按字母排面板的行为列表中,并按字母排序。如果同一事件触发不同的行序。如果同一事件触发不同的行为,这个行为将按执行顺序在为,这个行为将按执行顺序在“行为行为”面板中显示。面板中显示。第10章行为10.2行为的基本操
7、作10.2.1 “行为”面板如果同一事件触发不同的行为,如果同一事件触发不同的行为,这个行为将按执行顺序在这个行为将按执行顺序在“行为行为”面板中显示。如果行为列表中没面板中显示。如果行为列表中没有显示任何行为,则表示没有行有显示任何行为,则表示没有行为添加到当前执行的页面对象上。为添加到当前执行的页面对象上。 单击单击“行为行为”面板上的面板上的“显示显示设置事件设置事件”按钮,将显示已添加按钮,将显示已添加到当前文档的事件,到当前文档的事件,“显示设置显示设置事件事件”视图是视图是“行为行为”面板默认面板默认显示的视图,如图所示。显示的视图,如图所示。第10章行为10.2行为的基本操作10
8、.2.1 “行为”面板 单击单击“显示所有事件显示所有事件”按钮,按钮,将按字母顺序显示属于特定类型将按字母顺序显示属于特定类型的所有事件,已经设置行为动作的所有事件,已经设置行为动作的事件将在事件名称后面显示动的事件将在事件名称后面显示动作名称,如图所示。作名称,如图所示。第10章行为10.2行为的基本操作10.2.1 “行为”面板 单击单击“添加行为添加行为”按钮,会按钮,会弹出一个下拉菜单,如图所示。弹出一个下拉菜单,如图所示。该菜单中包含可以添加到当前选该菜单中包含可以添加到当前选定对象的各种动作。当从该菜单定对象的各种动作。当从该菜单中选择一个动作时,将出现一个中选择一个动作时,将出
9、现一个对话框,用户可以在该对话框中对话框,用户可以在该对话框中设置该动作的参数。如果菜单上设置该动作的参数。如果菜单上的所有动作都处于灰色状态,则的所有动作都处于灰色状态,则表示无法为选定的对象添加任何表示无法为选定的对象添加任何行为。行为。第10章行为10.2行为的基本操作10.2.1 “行为”面板 单击单击“删除事件删除事件”按钮,可在行为按钮,可在行为列表中删除所选的事件和动作。列表中删除所选的事件和动作。 单击单击“增加事件值增加事件值”按钮或按钮或“降低降低事件值事件值”按钮,可在行为列表中上下按钮,可在行为列表中上下移动特定事件的选定动作。移动特定事件的选定动作。 “ “事件事件”
10、下拉列表框包含了可以触下拉列表框包含了可以触发该动作的所有事件。该下拉列表框发该动作的所有事件。该下拉列表框仅在选中某个事件时可见,当单击所仅在选中某个事件时可见,当单击所选事件名称旁边的箭头时显示此下拉选事件名称旁边的箭头时显示此下拉列表框,如图所示列表框,如图所示。第10章行为10.2行为的基本操作10.2.2 添加行为 在在“行为行为”面板上添加行为的基本操作如下。面板上添加行为的基本操作如下。 在页面上选择一个对象,如一幅图像。如果要将行为添加到整个文在页面上选择一个对象,如一幅图像。如果要将行为添加到整个文档,可在文档窗口左下角的标签选择器中单击选中档,可在文档窗口左下角的标签选择器
11、中单击选中标签。标签。 打开打开“行为行为”面板,单击面板,单击“添加行为添加行为”按钮,在弹出的下拉菜单中按钮,在弹出的下拉菜单中选择一个要添加的动作。下拉菜单中灰色显示的动作不可用,以灰色显选择一个要添加的动作。下拉菜单中灰色显示的动作不可用,以灰色显示的原因是当前文档中缺少某个所需的对象。示的原因是当前文档中缺少某个所需的对象。 在对话框中为该动作设置参数,然后单击在对话框中为该动作设置参数,然后单击“确定确定”按钮关闭对话框。按钮关闭对话框。 触发该动作的默认事件显示在触发该动作的默认事件显示在“事件事件”下拉列表框中。如果这不是下拉列表框中。如果这不是所需要的触发事件,可从所需要的触
12、发事件,可从“事件事件”下拉列表框中重新选择需要的事件下拉列表框中重新选择需要的事件。第10章行为10.2行为的基本操作10.2.3 编辑行为 编辑行为的方式是:选择一个对象,在编辑行为的方式是:选择一个对象,在“行为行为”面板中根据具体情况进面板中根据具体情况进行以下相应的操作。行以下相应的操作。 如果要修改动作的参数,可在如果要修改动作的参数,可在“行为行为”面板的行为列表中双击动作面板的行为列表中双击动作的名称;或将其选中并按的名称;或将其选中并按EnterEnter键;也可单击鼠标右键,在弹出的快捷菜键;也可单击鼠标右键,在弹出的快捷菜单中选择单中选择“编辑行为编辑行为”,打开相应的对
13、话框,在对话框中编辑动作的参,打开相应的对话框,在对话框中编辑动作的参数并确认。数并确认。 如果要更改给定事件的多个动作的顺序,可在如果要更改给定事件的多个动作的顺序,可在“行为行为”面板的行为面板的行为列表中选择某个动作,然后单击列表中选择某个动作,然后单击“增加事件值增加事件值”按钮或按钮或“降低事件值降低事件值”按钮。按钮。 如果要增加或删除某个行为,可在如果要增加或删除某个行为,可在“行为行为”面板的行为列表中选择面板的行为列表中选择某个行为,然后单击按钮某个行为,然后单击按钮“添加行为添加行为”按钮或按钮或“删除事件删除事件”按钮。按钮。第10章行为10.3文本类行为弹出消息“弹出消
14、息弹出消息”行为显示一个包行为显示一个包含指定消息的提示对话框,提含指定消息的提示对话框,提示对话框只有提示文本和一个示对话框只有提示文本和一个确定按钮。使用该行为可以给确定按钮。使用该行为可以给用户提供信息,但不可以为用用户提供信息,但不可以为用户提供选择操作。户提供选择操作。将素材文档复制到站点文件夹将素材文档复制到站点文件夹下,然后为页面设置行为事件,下,然后为页面设置行为事件,在浏览器中的显示效果如图所在浏览器中的显示效果如图所示。示。 第10章行为10.3文本类行为弹出消息实现该效果的操作步骤如下。实现该效果的操作步骤如下。 在在“文件文件”面板中双击打开网页文面板中双击打开网页文档
15、,然后在网页中插入预先准备好的图档,然后在网页中插入预先准备好的图片素材。片素材。 在菜单栏中选择在菜单栏中选择“窗口窗口”“”“行为行为”命令,打开命令,打开“行为行为”面板,然后单击面板,然后单击“添加行为添加行为”按钮,在弹出的下拉菜单按钮,在弹出的下拉菜单中选择中选择“弹出消息弹出消息”命令。命令。 在打开的在打开的“弹出消息弹出消息”对话框的对话框的“消息消息”文本框中输入相应的文本信息,文本框中输入相应的文本信息,如图所示,然后单击如图所示,然后单击“确定确定”按钮关闭按钮关闭对话框。对话框。第10章行为10.3文本类行为弹出消息 在在“行为行为”面板的面板的“事件事件”下拉列表框
16、中选择触发事件下拉列表框中选择触发事件“onMouseDown”“onMouseDown”,如图所示。,如图所示。在菜单栏中选择在菜单栏中选择“文文件件”“”“保存保存”命令,并按命令,并按F12F12键运行,查看运行效果。键运行,查看运行效果。第10章行为10.3文本类行为设置状态栏文本 添加添加“设置状态栏文本设置状态栏文本”行为将在浏览器窗口的状态栏显示信息。行为将在浏览器窗口的状态栏显示信息。输入的文本内容要简明扼要,如果文本内容不能完全显示在状态栏输入的文本内容要简明扼要,如果文本内容不能完全显示在状态栏中,浏览器会截断所输入的文本内容。由于浏览者常常不会注意到中,浏览器会截断所输入
17、的文本内容。由于浏览者常常不会注意到状态栏的信息,而且并不是所有的浏览器都提供对状态栏的信息,而且并不是所有的浏览器都提供对“设置状态栏文设置状态栏文本本”行为的完全支持,因此如果提示的信息非常重要,建议使用行为的完全支持,因此如果提示的信息非常重要,建议使用“弹出信息弹出信息”等行为提醒浏览者等行为提醒浏览者。第10章行为10.3文本类行为设置状态栏文本 继续操作上述案例,进而实现继续操作上述案例,进而实现“设置设置状态栏文本状态栏文本”行为。行为。 仍然选择该图片,然后在仍然选择该图片,然后在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮,在弹按钮,在弹出的出的“添加行为添加行为
18、”下拉菜单中选择下拉菜单中选择“设置文本设置文本”“”“设置状态栏文本设置状态栏文本”命令。命令。 在打开的在打开的“设置状态栏文本设置状态栏文本”对话对话框的框的“消息消息”文本框中输入相应的文文本框中输入相应的文本,如图所示,然后单击本,如图所示,然后单击“确定确定”按按钮关闭对话框。钮关闭对话框。第10章行为10.3文本类行为设置状态栏文本 在在“行为行为”面板的面板的“事件事件”下拉列表框中选择触发事件下拉列表框中选择触发事件“onMouseOver”“onMouseOver”。 在菜单栏中选择命令在菜单栏中选择命令“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行,在
19、浏览器键运行,在浏览器中查看状态栏效果,如图所示。中查看状态栏效果,如图所示。第10章行为10.3文本类行为设置状态栏文本 任务任务1 1:设置文本类行为:设置文本类行为 新建网页,插入一张图像。新建网页,插入一张图像。 选中该图像,单击选中该图像,单击“行为行为”面板上面板上“添加行为添加行为”按钮,在下拉菜单中按钮,在下拉菜单中选择选择“设置文本设置文本”“”“设置状态栏文本设置状态栏文本”命令。命令。 在在“设置状态栏文本设置状态栏文本”对话框中输入文字对话框中输入文字“图像版权归本网站所有图像版权归本网站所有”,然后单击然后单击“确认确认”按钮。在按钮。在“行为行为”面板的面板的“事件
20、事件”下拉列表框中选择下拉列表框中选择触发事件触发事件“onClick”“onClick”。 在菜单栏中选择在菜单栏中选择“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行,在浏览器键运行,在浏览器中查看状态栏效果。中查看状态栏效果。第10章行为10.4图像类行为 图像类行为一般包括交图像类行为一般包括交换图像、恢复交换图像换图像、恢复交换图像和预先载入图像等行为,和预先载入图像等行为,下面通过案例进行说明。下面通过案例进行说明。 新建网页,在网页中新建网页,在网页中输入文字并插入图像,输入文字并插入图像,效果如图所示。效果如图所示。第10章行为10.4图像类行为 选中图片,在
21、选中图片,在“属性属性”面板的面板的“ID”“ID”文本框中输入文本框中输入图像名称图像名称“hy”“hy”,如图所示。,如图所示。 选中该图像,在选中该图像,在“行为行为”面板上单击面板上单击“添加行为添加行为”按按钮,在弹出的钮,在弹出的“行为行为”下拉下拉菜单中选择菜单中选择“交换图像交换图像”命命令,打开令,打开“交换图像交换图像”对话对话框。框。第10章行为10.4图像类行为 在在“图像图像”列表框中选中要交列表框中选中要交换的图像,然后设置对应的换的图像,然后设置对应的“设定设定原始档为原始档为”选项,并选中选项,并选中“预先载预先载入图像入图像”和和“鼠标滑开时恢复图像鼠标滑开时
22、恢复图像”选项,如图所示。选项,如图所示。 单击单击“确定确定”按钮关闭对话框,按钮关闭对话框,此时此时“行为行为”面板中自动添加了相面板中自动添加了相应的行为,且其触发事件已进行自应的行为,且其触发事件已进行自动设置,不需要更改。动设置,不需要更改。第10章行为10.4图像类行为 在菜单栏中选择在菜单栏中选择“文文件件”“”“保存保存”命令,并命令,并按按F12F12键运行,在浏览器键运行,在浏览器中查看效果,如图所示。中查看效果,如图所示。第10章行为10.4图像类行为 任务任务2 2:设置:设置“交换图像交换图像”行为行为 新建网页,插入一幅图像(图像新建网页,插入一幅图像(图像1 1)
23、。)。 选中图像选中图像1 1,在,在“属性属性”面板的面板的“ID”“ID”文本框中输入图像名称文本框中输入图像名称“t1”“t1”。 选中图像,在选中图像,在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮,在弹出的按钮,在弹出的“行行为为”下拉菜单中选择下拉菜单中选择“交换图像交换图像”命令,打开命令,打开“交换图像交换图像”对话框。对话框。 在在“图像图像”列表框中选中要交换的图像,然后在列表框中选中要交换的图像,然后在“设定原始档为设定原始档为”中中设置图像设置图像2 2,并选中,并选中“预先载入图像预先载入图像”和和“鼠标滑开时恢复图像鼠标滑开时恢复图像”选项。选项。在在“
24、行为行为”面板的面板的“事件事件”下拉列表框中选择触发事件下拉列表框中选择触发事件“onClick”“onClick”。在菜单栏中选择在菜单栏中选择“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行,在浏览键运行,在浏览器中查看效果。器中查看效果。第10章行为10.5代码属性类行为代码属性类行为代码属性类行为包括调用包括调用JavaScriptJavaScript代码和改变属性代码和改变属性等行为。下面通等行为。下面通过案例进行说明。过案例进行说明。 新建网页,在新建网页,在网页中输入文字,网页中输入文字,如图所示。如图所示。第10章行为10.5代码属性类行为 选中选中“关闭窗
25、口关闭窗口”文字,文字,在在“行为行为”面板上单击面板上单击“添添加行为加行为”按钮,在弹出的按钮,在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“调用调用JavaScript”JavaScript”命令,打命令,打开开“调用调用JavaScript”JavaScript”对话框,对话框,在在“JavaScript”“JavaScript”文本框中输文本框中输入入“window.close()”“window.close()”,如图,如图所示。所示。第10章行为10.5代码属性类行为 选中选中“改变我的字号改变我的字号”文字,在文字,在“属性属性”面板上,设置面板上,设置“ID”“ID”为为
26、“ee”“ee”,如图所示。,如图所示。 选中选中“改变我的字号改变我的字号”文字,在文字,在“行为行为”面板上单击面板上单击“添加行为添加行为”按按钮,在弹出的钮,在弹出的“行为行为”下拉菜单中选下拉菜单中选择择“改变属性改变属性”命令,打开命令,打开“改变属改变属性性”对话框,并设置行为的参数信息,对话框,并设置行为的参数信息,如图所示。如图所示。第10章行为10.5代码属性类行为在菜单栏中选择在菜单栏中选择“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行,在浏览器键运行,在浏览器中单击中单击“关闭窗口关闭窗口”文字,会弹出对话框,如图文字,会弹出对话框,如图 a a 所
27、示;单击所示;单击“改变我改变我的字号的字号”文字,文字字号会变大,效果如图文字,文字字号会变大,效果如图 b b 所示。所示。ab第10章行为10.5代码属性类行为任务任务3 3:设置:设置“改变属性改变属性”行为行为 新建网页,输入文字新建网页,输入文字“改变文字颜色改变文字颜色”。 选中文字,在选中文字,在“属性属性”面板中设置面板中设置“格式格式”为为“段落段落”,“ID”“ID”为为“color1”“color1”。 选中文字,在选中文字,在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮,在弹出的按钮,在弹出的“行行为为”下拉菜单中选择下拉菜单中选择“改变属性改变属性”命令
28、,打开命令,打开“改变属性改变属性”对话框,设对话框,设置置“元素类型元素类型”为为“P”“P”,“元素元素ID”ID”为为“pcolor1”“pcolor1”,“属性属性”选择选择“color”“color”,“新的值新的值”为为“#F00”“#F00”,然后单击,然后单击“确认确认”按钮。按钮。 在在“行为行为”面板的面板的“事件事件”下拉列表框中选择触发事件下拉列表框中选择触发事件“onDblClick”“onDblClick”。 在菜单栏中选择在菜单栏中选择“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行。键运行。第10章行为10.6跳转类行为跳转类行为包括打开浏览器
29、窗跳转类行为包括打开浏览器窗口、转到口、转到URLURL等行为,下面通过等行为,下面通过案例进行说明。案例进行说明。 新建网页,在网页中输入文新建网页,在网页中输入文字,如图字,如图10-2110-21所示。所示。 选中选中“打开新的窗口打开新的窗口”文字,文字,在在“行为行为”面板上单击面板上单击“添加添加行为行为”按钮按钮第10章行为10.6跳转类行为跳转类行为包括打跳转类行为包括打开浏览器窗口、转开浏览器窗口、转到到URLURL等行为,下等行为,下面通过案例进行说面通过案例进行说明。明。 新建网页,在网新建网页,在网页中输入文字,如页中输入文字,如图所示图所示。第10章行为10.6跳转类
30、行为 选中选中“打开新的窗口打开新的窗口”文字,在文字,在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮,在弹出的按钮,在弹出的“行为行为”下拉菜单下拉菜单中选择中选择“打开浏览器窗口打开浏览器窗口”命令,命令,打开打开“打开浏览器窗口打开浏览器窗口”对话框,对话框,如图所示。如图所示。 可以不指定该窗口的任何属性,可以不指定该窗口的任何属性,那么在打开时窗口的大小和属性与那么在打开时窗口的大小和属性与先打开的浏览器窗口相同。也可以先打开的浏览器窗口相同。也可以指定窗口属性参数。指定窗口属性参数。第10章行为10.6跳转类行为 选中选中“跳转到腾讯网跳转到腾讯网”文字,在文字,在“行
31、为行为”面板面板上单击上单击“添加行为添加行为”按按钮,在弹出的钮,在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“转到转到URL”URL”命令,打开命令,打开“转到转到URL”URL”对话框,并设置参对话框,并设置参数,如图所示。数,如图所示。第10章行为10.6跳转类行为 在菜单栏中选择命令在菜单栏中选择命令“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行,在键运行,在浏览器中单击浏览器中单击“打开新的窗口打开新的窗口”文字,会弹出新的浏览器窗口,如图文字,会弹出新的浏览器窗口,如图 a a 所示;单击所示;单击“跳转到腾讯网跳转到腾讯网”,会跳转到腾讯网的主页,如图,
32、会跳转到腾讯网的主页,如图 b b 所示。所示。ab第10章行为10.6跳转类行为 任务任务4 4:设置跳转类行为:设置跳转类行为新建网页,输入文字新建网页,输入文字“跳转到教育部网站跳转到教育部网站”。选中文字,在选中文字,在“属性属性”面板上,设置面板上,设置“文字格式文字格式”为为“段落段落”,设,设置置“ID”“ID”为为“text1”“text1”。选中文字,在选中文字,在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮按钮 ,在弹出的,在弹出的下拉菜单中选择下拉菜单中选择“转到转到URL”URL”命令,打开命令,打开“转到转到URL”URL”对话框。对话框。在在“URL”“
33、URL”文本框中输入网址,然后单击文本框中输入网址,然后单击“确定确定”按钮。按钮。选中文字,在选中文字,在“行为行为”面板的面板的“事件事件”下拉列表框中选择触发事件下拉列表框中选择触发事件“onClick”“onClick”。在菜单栏中选择在菜单栏中选择“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行。键运行。第10章行为10.7效果类行为 本节通过实际案例本节通过实际案例来讲解效果类行为。来讲解效果类行为。 新建网页,插入新建网页,插入一幅图像,如图所一幅图像,如图所示。示。第10章行为10.7效果类行为 选中图片,在选中图片,在“行为行为”面板上面板上单击单击“添加行
34、为添加行为”按钮,在弹出的按钮,在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“效效果果”“”“增大增大/ /收缩收缩”命令,打开命令,打开“增大增大/ /收缩收缩”对话框,参数设置对话框,参数设置如图所示。如图所示。 在菜单栏中选择在菜单栏中选择“文件文件”“”“保保存存”命令,并按命令,并按F12F12键运行,单击键运行,单击图像,图像由小变大,直到变为原图像,图像由小变大,直到变为原图大小的图大小的200%200%,再次单击图像,图,再次单击图像,图像又由大变小像又由大变小。第10章行为10.7效果类行为 任务任务5 5:设置效果类行为:设置效果类行为 新建网页,在网页中插入图像。新建
35、网页,在网页中插入图像。 选中图像,在选中图像,在“属性属性”面板上,设置面板上,设置“ID”“ID”为为“image1”“image1”。 选中图像,在选中图像,在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮,在弹出的按钮,在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“效果效果”“”“晃动晃动”命令,打开命令,打开“晃动晃动”对对话框,设置话框,设置“目标元素目标元素”为为“image1”“image1”。 在在“行为行为”面板的面板的“事件事件”下拉列表框中选择触发事件下拉列表框中选择触发事件“onMouseOver”“onMouseOver”。 在菜单栏中选择在菜单栏中选
36、择“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行,在浏键运行,在浏览器中查看效果。览器中查看效果。第10章行为10.8综合实训案例:制作一个摄影网站 【内容】利用行为制作一个摄影网站的主页,如图所示。【内容】利用行为制作一个摄影网站的主页,如图所示。第10章行为10.8综合实训案例:制作一个摄影网站【思路】使用行为中的【思路】使用行为中的“交换图像交换图像”动作,使得浏览者将鼠标指针移动作,使得浏览者将鼠标指针移动至相关图像上时,就自动切换到另外的图像;使用行为中的动至相关图像上时,就自动切换到另外的图像;使用行为中的“转到转到URL”URL”动作,使得浏览者单击动作,使得
37、浏览者单击“查看原图查看原图”文字能跳转到与原图所在文字能跳转到与原图所在的网页;使用行为中的的网页;使用行为中的“弹出信息弹出信息”动作,使得浏览者单击图像时,动作,使得浏览者单击图像时,弹出提示信息;使用行为中的弹出提示信息;使用行为中的“调用调用JavaScript”JavaScript”动作,使得浏览者单动作,使得浏览者单击击“关闭窗口关闭窗口”文字时,弹出关闭窗口对话框文字时,弹出关闭窗口对话框。第10章行为10.8综合实训案例:制作一个摄影网站 【步骤】【步骤】 新建网页,新建网页,插入表格和图像,插入表格和图像,并输入相关文字,并输入相关文字,如图所示如图所示。第10章行为10.
38、8综合实训案例:制作一个摄影网站 选中第一幅图像,在选中第一幅图像,在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮(事件选按钮(事件选择为择为“onMouseOver”“onMouseOver”),在弹出的),在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“交换图像交换图像”命令,打开命令,打开“交换图像交换图像”对话框,并设置相关参数,如图所示。对话框,并设置相关参数,如图所示。第10章行为10.8综合实训案例:制作一个摄影网站 选中文字选中文字“查看原图查看原图”,在在“行为行为”面板上单击面板上单击“添添加行为加行为”按钮(事件选择为按钮(事件选择为“onClick”“on
39、Click”),在弹出的),在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“打开浏览器窗口打开浏览器窗口”命令,命令,在打开的在打开的“打开浏览器窗口打开浏览器窗口”对话框中设置相关参数,如对话框中设置相关参数,如图所示。图所示。第10章行为10.8综合实训案例:制作一个摄影网站 选中文字选中文字“放大图像放大图像”,在在“行为行为”面板上单击面板上单击“添添加行为加行为”按钮(事件选择为按钮(事件选择为“onClick”“onClick”),在弹出的),在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“效果效果”“”“增大增大/ /收缩收缩”命命令,在打开的令,在打开的“增大增大/ /收缩
40、收缩”对话框中设置相关参数,如对话框中设置相关参数,如图所示。图所示。第10章行为10.8综合实训案例:制作一个摄影网站选中文字选中文字“友情链接友情链接”,在,在“行为行为”面板上单击面板上单击“添加行为添加行为”按钮按钮(事件选择为(事件选择为“onClick”“onClick”),在弹出的),在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“转转到到URL”URL”命令,在打开的命令,在打开的“转到转到URL”URL”对话框中设置相关参数。对话框中设置相关参数。第10章行为10.8综合实训案例:制作一个摄影网站选中文字选中文字“关闭窗口关闭窗口”,在,在“行为行为”面板上单击面板上单击“
41、添加行为添加行为”按钮按钮(事件选择为(事件选择为“onClick”“onClick”),在弹出的),在弹出的“行为行为”下拉菜单中选择下拉菜单中选择“调调用用JavaScript”JavaScript”命令,打开命令,打开“调用调用JavaScript”JavaScript”对话框,在对话框,在“JavaScript“JavaScript:”文本框中输入文本框中输入“window.close()”“window.close()”。在菜单栏中选择在菜单栏中选择“文件文件”“”“保存保存”命令,并按命令,并按F12F12键运行,在浏键运行,在浏览器中查看运行结果。览器中查看运行结果。第10章行为本章小结行为是行为是Dreamweaver CS6Dreamweaver CS6中一个非常重要的概念,可以实现很多的中一个非常重要的概念,可以实现很多的网页特效。本章比较详细地介绍了行为的概念、分类和实现方法,网页特效。本章比较详细地介绍了行为的概念、分类和实现方法,同时对文本类行为、图像类行为、代码属性类行为、跳转类行为、同时对文本类行为、图像类行为、代码属性类行为、跳转类行为、效果类行为等进行了详细的介绍。作为初学者,要结合课本案例和效果类行为等进行了详细的介绍。作为初学者,要结合课本案例和任务进行不断练习和强化,才能掌握行为的使用方法任务进行不断练习和强化,才能掌握行为的使用方法。
限制150内