《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第7章 行为》由会员分享，可在线阅读，更多相关《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第7章 行为（28页珍藏版）》请在金锄头文库上搜索。
1、学习目标,掌握行为构成的三要素和创建方法。 掌握行为面板的使用方法。 能够合理使用常见的行为。 能够运用网页元素结合行为制作丰富的动态效果。,7.1 创建行为,7.1.1 案例制作：浏览器窗口的打开,通过本案例的操作，你将学会：如何正确使用“行为”面板，如何在“行为”面板中添加系统自带的行为，如何设置打开浏览器窗口，如何为设置鼠标事件。,7.1 创建行为,7.1.1 案例制作：浏览器窗口的打开,操作步骤： 1）规划站点。新建文件夹“liulanqi”，将素材文件夹“liulanqi”中所有文件和文件夹拷贝到“liulanqi”文件夹中。 2）定义站点。在Dreamweaver CS5中，单击菜
2、单“站点”“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“起点中文网”，本地站点文件夹设置为liulanqi文件夹。打开网页index.html，在文档窗口底部左侧的状态栏中单击 标签。 3）单击菜单“窗口”“行为”命令打开“行为”面板。在面板中单击“添加行为”按钮 ，选择“打开浏览器窗口”命令，如图所示。,7.1 创建行为,7.1.1 案例制作：浏览器窗口的打开,操作步骤： 4）在“打开浏览器窗口”对话框中，单击“浏览”按钮选择index1.html，在“属性”部分选择“菜单条”、“需要时使用滚动条”、“状态栏”和“调整大小手柄”4个复选框，如图所示，单击“确定”按钮。此时
3、“行为”面板中将显示设置的行为。左侧为事件类型，右侧为设置的动作。,7.1 创建行为,7.1.1 案例制作：浏览器窗口的打开,操作步骤： 5）在“行为”面板中单击左侧的事件，打开下拉菜单，选择onload事件，如图所示。按F12预览效果。,7.1.2 新知解析,1. 行为构成的三要素 对象(Object) 对象是产生行为的主体，很多网页元素都可以成为对象，如图像、文本、多媒体文件等，甚至是整个页面。 事件(Event) 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移动到图像上、把鼠标放在图像之外、单击鼠
4、标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。 动作(Action) 行为通过动作来完成动态效果，如：图像翻转、打开浏览器窗口、播放声音等都是动作。动作通常是关于对象的一段JavaScript代码，在Dreamweaver CS5中使用Dreamweaver内置的行为向页面中添加JavaScript代码，不需要自己编写。,7.1 创建行为,2. 设置“行为”面板选项 “行为”面板是实现和设置各种行为的地方。具有以下选项 “显示设置事件”：仅显示附加到当前文档的事件
5、。事件被分别划归到客户端或服务器端类别中。每个类别的事件都包含在一个可折叠的列表中。“显示设置事件”是默认的视图。 “显示所有事件” ：字母降序显示给定类别的所有事件。 “添加行为” ：是一个弹出菜单，其中包含可以附加到当前所选元素的动作。,7.1 创建行为,“删除事件” ：从行为列表中删除所选的事件和动作。 “上下箭头按钮”：当为同一个特定事件设定了多个动作时，可利用上下箭头按钮调整所选动作在行为列表中上下位置。给定事件的动作是以特定的顺序执行的。 “事件”：是一个弹出菜单，其中包含可以触发该动作的所有事件。只有在设置了行为时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。,7.1
6、创建行为,3. 创建行为 行为可以附加到整个文档（即附加到标签），还可以附加到超链接、图像、表单元素或其它HTML元素中的任何一种，操作方法如下： 1）在页面上选择一个对象（网页元素），例如一个图像或一个超链接，这个对象一定要合适并有意义。例如要将行为附加到整个页，需要在“文档”窗口底部左侧的状态栏单击标签，这样产生事件的对象是整个页面。 2）选择菜单“窗口”“行为”，打开“行为”面板。 3）单击“添加行为按钮”，并从“动作”弹出菜单中选择一个动作。4）输入参数和说明，单击“确定”按钮。 5）触发该动作的默认事件显示在“事件”栏中。,7.1 创建行为,4.更改行为 在附加了行为之后，可以更改触
7、发动作的事件、添加或删除动作以及更改动作的参数。若要更改行为，操作方法如下： 1）选择一个附加有行为的对象。 2）若要编辑动作的参数，可以双击该动作名称或将其选中并按Enter键，然后更改对话框中的参数、说明等，完成后单击“确定”按钮。 3）若要更改给定事件的多个动作的顺序，可以选择某个动作然后单击“行为”面板中的上下箭头按钮。或者选择该动作剪切它，然后将它粘贴到其它动作中所需的位置。 4）若要删除某个行为，可以将其选中，然后单击减号 按钮或直接按Delete键。,7.1 创建行为,5Dreamweaver CS5的常用内置行为 交换图像与恢复交换图像 弹出信息 设置状态栏文本 调用 Java
8、Script 打开浏览器窗口 转到URL 显示隐藏元素 检查表单 检查插件 拖动AP元素 Spry效果 预先载入图像,7.1 创建行为,6Spry效果 显示/渐隐效果 遮帘效果 增大/收缩效果 滑动效果 晃动效果 挤压效果,7.1 创建行为,7.1 创建行为,7.1.3 案例制作：行为综合练习“我的独白”,通过本案例的操作，你将学会：如何插入AP Div元素和嵌套AP Div元素， 如何为AP Div元素设置“显示-隐藏AP元素”和“拖动AP元素”行为。,7.1 创建行为,7.1.3 案例制作：行为综合练习“我的独白”,操作步骤： 1）规划站点。新建文件夹“dubai”，将素材文件夹“duba
9、i”中所有文件拷贝到“dubai”文件夹中。 2）定义站点。在Dreamweaver CS5中，单击菜单“站点”“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“我的独白”，本地站点文件夹设置为“dubai”文件夹。 3）新建网页，单击“属性”面板中的“页面属性”按钮，设置网页的背景颜色为“#FFECEC”，标题设为“我的独白”，将网页保存到站点文件夹中，名称为index.html。单击菜单“编辑”“首选参数”命令，打开“首选参数”对话框，在对话框“分类”中选择“AP元素”，在右侧“在AP Div中创建以后嵌套”前的复选框中打对勾，这样只要在一个AP Div元素中绘制另一个AP
10、 Div元素，即可实现嵌套。,7.1 创建行为,7.1.3 案例制作：行为综合练习“我的独白”,操作步骤： 4）在“插入”面板“布局”选项卡中单击“绘制AP Div”按钮 ，在文档中绘制AP Div元素“apDiv1”，在AP Div元素中插入图像ANIMAL1.jpg。再在“apDiv1”上绘制AP Div元素“apDiv2”,此时，“apDiv2” 嵌套于“apDiv1”中，是“apDiv1”的嵌套子AP Div元素。将“apDiv2”移动到“apDiv1”下面，在其中输入文字“我是一只北方的狼”，字号为12，AP Div元素的嵌套关系如图所示。,7.1 创建行为,7.1.3 案例制作：行
11、为综合练习“我的独白”,操作步骤： 5）同理，依次绘制“apDiv3”“apDiv10”，完成图像和文字的插入，调整AP Div元素的位置。在文档的顶部绘制AP Div元素“apDiv11”，在该AP Div元素中输入文字“我的独白”，设字体为华文新魏，字号为36，颜色为红色，如图所示。各AP Div元素的嵌套关系如图7-48所示。,7.1 创建行为,7.1.3 案例制作：行为综合练习“我的独白”,操作步骤： 6）选中第1张“狼”的图像，在“行为”面板中单击 按钮，在弹出菜单中选择“显示-隐藏元素”动作，在“显示-隐藏元素”对话框中选择“apDiv2”，单击“显示”按钮，如图所示，单击“确定”
12、按钮，则添加了控制AP Div元素“apDiv2”显示的行为。在“行为”面板中将事件类型改为onMouseOver，这样鼠标移动到“狼”的图像上，显示文字“我是一只北方的狼”。,7.1 创建行为,7.1.3 案例制作：行为综合练习“我的独白”,操作步骤： 7）再在“行为”面板中单击 按钮，在弹出菜单中选择“显示-隐藏元素”动作，在“显示-隐藏元素”对话框中选择“apDiv2”所在的行，单击“隐藏”按钮，如图所示。单击“确定”按钮，则添加了控制AP Div元素“apDiv2”隐藏的行为。在“行为”面板中将事件类型改为onMouseOut。鼠标移出“狼”的图像，文字“我是一只北方的狼”隐藏。选中
13、“狼”的图像，可以看到行为的最终设置效果。,7.1 创建行为,7.1.3 案例制作：行为综合练习“我的独白”,操作步骤： 8）同理，为图像ANIMAL2.jpg设置行为控制AP Div元素“apDiv4”的显示与隐藏，为图像ANIMAL3.jpg设置行为控制AP Div元素“apDiv4”的显示与隐藏，为图像ANIMAL4.jpg设置行为控制AP Div元素“apDiv8”的显示与隐藏，为图像ANIMAL5.jpg设置行为控制AP Div元素“apDiv10”的显示与隐藏。在“AP元素”面板中将“apDiv2”、“apDiv4”、“apDiv6”、“apDiv8”、“apDiv10”设为隐藏。
14、按F12预览效果，鼠标移动到图像上，下方出现文字，鼠标移出图像，下方文字隐藏。 9）在文档窗口状态栏中选择标签，在“行为”面板中单击 按钮，在弹出菜单中选择“拖动AP元素”动作。在“拖动AP元素”对话框中“AP元素”列表中选择“apDiv1”，单击“确定”按钮，事件为onLoad。按F12预览，拖拽“狼”的图像观察效果。 10）重复6）的操作步骤，为标签设置“拖动AP元素”动作，分别拖动AP Div元素“apDiv3”、“apDiv5”、“apDiv7”、“apDiv9”。相应的文字AP Div元素由于是嵌套AP Div元素，会跟着父AP Div元素一起移动。,7.1 创建行为,7.1.3 实
15、战演练（二）：园墅网页效果的制作,通过本案例的操作，你将学会：如何使用“图像交换”和“恢复图像交换”制作鼠标经过图像效果，如何在状态栏设置文字，如何检查Flash播放器插件是否安装，如何设置Spry效果中增大收缩效果。,7.1 创建行为,7.1.3 实战演练（二）：园墅网页效果的制作,操作步骤： （1）规划站点。新建文件夹“yuanwuyu”，将素材文件夹“yuanwuyu”中所有文件和文件夹拷贝到“yuanwuyu”文件夹中。 （2）定义站点。在Dreamweaver CS5中，单击菜单“站点”“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“园物语”，本地站点文件夹设置为“
16、yuanwuyu”文件夹，打开网页文件index.html。 （3）制作鼠标经过图像效果 1）设置交换图像。在网页中选中相机图像5400.jpg（ID为camera），在“行为”面板中单击 按钮，在弹出的菜单中选择“交换图像”命令，打开“交换图像”对话框。 2）在图像的列表中选择“camera”设置源图像，在“设定原始档为”项选择变换后的图像files/a80.jpg，选择“预先载入图像”，“鼠标移开时恢复图像”不选择。如图7-54所示，设置完成后，点击“确定”按钮。如果在此选择了“鼠标移开时恢复图像”，则不需要添加恢复交换图像行为。,7.1 创建行为,7.1.3 实战演练（二）：园墅网页效果的制作,操作步骤： 3）选择相机图像，在“行为”面板中会出现刚设置的行为，鼠标事件为“onMouseOver”，此时，完成鼠标移动到相机图像上，显示另一幅相机图像。保存，预览。 4）设置恢复交换图像。在“行为”面板中单击 按钮，在弹出的菜单中选择“恢复交换图像”命令，保存，预览
