教学课题：行为的概念及dreamweavercs5中的行为面板
教学目标：理解行为的概念，掌握行为控制面板的使用并学会演示案例1的制作方法。
教学重点：1、行为的概念。
2、掌握行为面板的操作方法。
教学难点：演示案例1的制作。
教学方法：任务驱动法、小组合组学习法。
教学课时：1节
教学过程：1、导入新课：略
2、讲解新课：
演示案例1：打开浏览器窗口
1、【需求分析】打开主页时，会弹出一个指定的窗口。
2、【技能要点】
使用“打开浏览器窗口”命令制作在网页中显示指定大小的弹出窗口。
3、【操作步骤】
步骤1：在网页中显示指定大小的弹出窗口
（1）选择【文件】->【打开】命令，在弹出的对话框中选择“chapter10>演示案例1>index.html”文件。单击“打开”按钮，如图11-1所示。
图11-1
（2）单击窗口下方“标签选择器”中的
标签，选择整个网页文档。（3）执行【窗口】->【行为】命令，打开“行为”控制面板，单击控制面板中的“添加行为”按钮，在弹出的菜单中选择“打开浏览器窗口”命令，弹出“打开浏览器窗口”对话框，如图11-2所示。
图11-2
（4）单击“要显示的URL”选项右侧的“浏览”按钮，在弹出的“选择文件”对话框中选择“chapter10>演示案例1>banner.html”文件。
步骤2：添加导航条和菜单栏
（1）在“打开浏览器窗口”对话框中，选择“导航工具栏”和“菜单条”复选框。并设置窗口的宽度与高度。
（2）单击“确定”按钮，保存文档并预，如图11-3所示。
图11-3
【知识链接】：
行为有三个重要的组成部分，分别为对象（Object）事件（Event）和动作（Action）。对象是产生行为的主体。网页中的很多元素都可以成为对象，如网页中插入的图像，一段文字，一个多媒体文件等。对象也是基于成对出现的html标签，在创建时要首先选中对象标签。事件是触发动态效果的条件。在创建时，这三者的顺序为：选择对象，添加动作，调整事件。
在DreamweaverCS5中，主要通过“行为面板”，来将“行为”添加到页面的标签上，并可以对以前添加的行为参数进行修改，当然，还可以直接在HTML源代码中进行修改。
1、显示设置事件按钮：只显示附加到当前文档的那些事件。
2、显示所有事件按钮：按字母顺序显示属于特定类别的所有事件。一般情况下，在文档中选择了某一个HTML标签，就会显示关于那个标签的所有事件。
3、添加行为按钮：点击此按钮，则会弹出快捷菜单，如下图所示：
4、删除事件按钮：从行为列表中删除所选定的事件和动作。
点击删除事件;按钮，就会删除已经选择的onClick事件的“显示/渐隐”动作了。
5、选择不同的事件：选择一个行为项，点击这个行为左边的事件，则在该事件的旁边出现一个向下的箭头。如下图所示：
单击向下的箭头出现下拉菜单，可以在该菜单中为该行为选择不同的事件。
6、修改行为参数：选择一个行为项，双击带“”标记的行为名称，或者先选取它然后按下键盘Enter键，可以在弹出的窗口中修改这个行为项的参数。
7、向上箭头或向下箭头按钮：在行为列表中上下移动某一事件的选定动作。如下图所示：
当同一事件出现几个行为时，选择其中的一个行为，点击增加事件值或者降低事件值按钮，可以向上或者向下移动该行为。同一事件的几个行为的排列顺序决定了文档中对象行为的执行顺序。排在上面的先执行，排在下面的后执行。对于不能在列表中上下移动的行为，箭头按钮将处于禁用状态。
教学课题：对象、动作、行为的区别及联系
教学目标：理解对象、行为、动作的概念。掌握常用的事件含义，能够熟练制作演示案例2。
教学重点：1、对象、行为、动作的概念。
2、常用的事件含义。
教学难点：演示案例2的制作。
演示案例2：交换图像
1、【需求分析】当鼠标指向一个图像，图像会发生改变。
使用“交换图像”命令制作鼠标经过图像发生变化效果。
（1）选择【文件】->【打开】命令，在弹出的对话框中选择“chapter10>演示案例1>index.html”文件。单击“打开”按钮，如图11-4所示。
图11-4
（2）选中index.html中图像，执行【窗口】->【行为】命令，弹出“行为”控制面板，单击控制面板中的“添加行为”按钮，在弹出的菜单中选择“交换图像”命令，弹出“交换图像”对话框，单击“设定原始档为”选项右侧的“浏览”按钮，在弹出的“选择图像源文件”对话框中选择“images/img2.jpg”，如图11-5所示，单击“确定”按钮。
图11-5
（3）保存网页文档，预览效果，当鼠标滑过图像，图像发生变化，如图11-6所示。
图11-6
知识链接：
下表列举了Deaamweavercs5中常见的几种动作。
交换图像
设置文本
调用JavaScript
弹出信息
显示-隐藏层
跳转菜单
恢复交换图像
显示弹出式菜单
跳转菜单开始
打开浏览器窗口
检查插件
转到URL
拖动层
检查浏览器
隐藏弹出式菜单
控制Shockwave或Flash
检查表单
预先载入图像
播放声音
设置导航栏图像
改变属性
onAbort当访问者中断浏览器正在载入图像的操作时产生。
onAfterUpdate当网页中bound（边界）数据元素已经完成源数据的更新时产生该事件。
onBeforeUpdate当网页中bound（边界）数据元素已经改变并且就要和访问者失去交互时产生该事件。
onBlur当指定元素不再被访问者交互时产生。
onBounce当marquee（选取框）中的内容移动到该选取框边界时产生。
onChange当访问者改变网页中的某个值时产生。
onClick当访问者在指定的元素上单击时产生。
onDblClick当访问者在指定的元素上双击时产生。
onError当浏览器在网页或图像载入产生错位时产生。
onFinish当marquee（选取框）中的内容完成一次循环时产生。
onFocus当指定元素被访问者交互时产生。
onHelp当访问者单击浏览器的Help（帮助）按钮或选择浏览器菜单中的Help（帮助）菜单项时产生。
onKeyDown当按下任意键的同时产生。
onKeyPress当按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两事件合在一起。
onKeyUp当按下的键松开时产生。
onLoad当一图像或网页载入完成时产生。
onMouseDown当访问者按下鼠标时产生。
onMouseMove当访问者将鼠标在指定元素上移动时产生。
onMouseOut当鼠标从指定元素上移开时产生。
onMouseOver当鼠标第一次移动到指定元素时产生。
onMouseUp当鼠标弹起时产生。
onMove当窗体或框架移动时产生。
onReadyStateChange当指定元素的状态改变时产生。
onReset当表单内容被重新设置为缺省值时产生。
onResize当访问者调整浏览器或框架大小时产生。
onRowEnter当bound（边界）数据源的当前记录指针已经改变时产生。
onRowExit当bound（边界）数据源的当前记录指针将要改变时产生。
onScroll当访问者使用滚动条向上或向下滚动时产生。
onSelect当访问者选择文本框中的文本时产生。
onStart当Marquee（选取框）元素中的内容开始循环时产生。
onSubmit当访问者提交表格时产生。
onUnload当访问者离开网页时产生。
教学课题：常见行为的使用技巧
教学目标：掌握常用行为的制作技巧，能熟练制作出演示案例3和演示案例4。
教学重点：常用行为的制作技巧。
教学难点：演示案例3和演示案例4的制作。
演示案例3：制作弹出信息效果
1、【需求分析】打开主页时，会弹出一个信息窗口。
2、【技能要点】使用“弹出信息”行为制作在网页中弹出信息窗口。
（1）选择【文件】->【打开】命令，在弹出的对话框中选择“chapter10>演示案例1>index.html”文件。单击“打开”按钮，如图11-7所示。
图11-7
（3）执行【窗口】->【行为】命令，打开“行为”控制面板，单击控制面板中的“添加行为”按钮，在弹出的菜单中选择“弹出信息”命令，打开“弹出信息”对话框，输入“欢迎参观我们的网站”，如图11-8所示。
图11-8
（4）单击“确定”按钮，保存并预览按钮，如图11-9所示。
图11-9
演示案例4：制作显示/隐藏层效果
1、【需求分析】当鼠标移到一张小图时，显示相应的大图。
2、【技能要点】使用“显示/隐藏层”行为制作在网页中放大图像的效果。
（1）新建一个空白页面。
（2）在页面中插入一个3行1列的表格，设置如图11-10所示。
图11-10
（3）分别将images文件夹的三张图插入到表格的每个单元格中，在“属性”面板中将图像的宽和高分别设为“200”，“130”，并为每张图片设置空链接。
（4）在“插入”面板“布局”项卡中选择“绘制APDiv”按钮，文档窗口右侧创建一个层，并插入第一张图片的原图，如图11-11所示。
图11-11
(5)使用相同的方法，在第一个层的位置上再插入两个层。
（6）选择左侧表格上的第一张图片，在“行为”面板中单击“添加行为”按钮，并从弹出的菜单中选择“显示-隐藏元素”动作，弹出“显示-隐藏元素”对话框，进行如下设置，让第一张大图所在层显示，其他层隐藏。如图11-12所示。
图11-12
（7）使用相同的方法，分别左侧表格上的另外两张图添加“显示/隐藏”行为。
（8）保存并预览网页。当鼠标单击每张小图时，就会显示相应的大图效果。
知识链接
功能：针对某些要用插件才能运行的媒体，检验系统是否装有该插件，然后作出不同的选择。通常事件是在页面调入之前检查。
1、选中要附加行为的对象用鼠标选择链接或标记
。2、打开动作菜单在“行为”面板上单击“＋”号钮，弹出动作菜单。
3、选择检查插件单击“检查插件”动作项目，弹出对话框。
4、选择或输入要检查的插件在“选择”下拉列表中选择所需的插件，或输入插件。
5、选择或输入插件存在前往的URL：在“如果有，前往URL”右边，单击“浏览”钮，查找选择URL，或输入URL地址。
6、选择或输入插件不存在前往的URL：在“否则，前往URL”右边，单击“浏览”钮，查找选择URL，或输入URL地址，确定。
7、钩选如果无法侦测，永远前往第一个URL：钩选后，若检查不到，则前往如果有的URL。
8、选择其他事件根据需要，单击“行为”面板中事件旁的向下箭头，在弹出的事件菜单中选择。
功能：可以动态地检查表单的文本域中的内容是否有效。
1、选中要附加行为的对象用鼠标单击选中。
3、选择恢复交换图像单击“恢复交换图像”动作项目，弹出对话框
4、选择要检查的文本域单击“命名的栏位”列表框中所需文本域。
5、设置文本域的值是否为空钩选“值”旁的“必要”，则设置不能为空。
6、选择可接受的值在下面四个单选项中选择所需的内容。（任何内容、电子邮件地址、数字、数字范围等）
7、选择其他事件根据需要，单击“行为”面板中事件旁的向下箭头，在弹出的事件菜单中选择。
功能：适合于多个框架，单击某链接，同时链接多个网页。
1、选中要附加行为的层对象用鼠标单击，使层边框出现句柄。
3、选择转到URL单击“转到URL”动作项目，弹出对话框。
4、选择打开的目标在“打开在”列表中选择网页显示的目标。
5、选择或输入URL：在“URL”处，单击右边的“浏览”按钮，查找选择要转到的网页等内容，确定。
6、选择其他事件根据需要，单击“行为”面板中事件旁的向下箭头，在弹出的事件菜单中选择。
知识扩展：转到多个URL行为
（1）、选择一个页面元素或对象。
（2）、打开行为面板，点击“添加行为”按钮在弹出的下拉菜单中选择“转到URL”命令。
（3）、打开“转到URL”对话框如下图：
（4）、选择“框架mainframe”输入URL，如下图
（5）、选择“框架rightframe”输入URL，如下图
（注意：URL的地址可以相同，也可以不同）
(6)、点击确定，并查看附件的事件是否是需要的事件，如果不是需要的事件，可以更改事件。
功能：该行为主要是用于编辑跳转菜单。跳转菜单是文档中的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。
1、打开行为面板，点击“添加行为”按钮在弹出的下拉菜单中选择“跳转菜单”命令，如图：
2、打开“跳转菜单”对话框，如下图：
3、在“跳转菜单”对话框中按照需要进行修改。如果是“框架页面”，在“打开URL于：”下拉框中则会有框架窗口可以选择。
4、点击确定完成。
功能：调用JavaScript的行为可以指定在事件发生时要执行的自定义函数或者JavaScript代码。可以自己书写这些JavaScript代码，也可以使用网络上发布的各种调用JavaScript库。
1、选中要附加行为的对象用鼠标框选。
3、选择调用JavaScript单击“调用JavaScript”动作项目，弹出对话框。
4、输入函数名称在“JavaScript”文本框处，输入调用的函数及其参数。
5、选择其他事件根据需要，单击“行为”面板中事件旁的向下箭头，在弹出的事件菜单中选择。默认为单击onClick()。
6、点击确定完成。
功能：使用“设置文本域文字”行为可以将表单文本域中的内容替换成指定的内容。
1、选择一个文本域
2、打开行为面板，点击“添加行为”按钮，在弹出的下拉菜单中选择“设置文本”项，在弹出的子菜单中选择“设置文本域文字”如图：
3、打开“设置文本域文字”对话框，如图
4、在“文本域”内输入一个目标文本，在“创建文本”内输入要使用的文本
5、单击“确定”按钮。
1、新建一HTML文件，打开行为面板，添加行为：
2、在打开的设置状态栏文本窗口中输入要在状态栏显示的文本信息。
3、单击“确定”按钮后，就设置完成了！如果你想设置行为的话，可以看看行为面板在这里我设置为Onload意思是网页只要加载就显示该文本信息。
图像：选择一个需要改变其源文件的图像。
设定原始档为：输入新图像的文件路径和名称，或者点击“浏览”按钮选取一个新的图像文件。
预先载入图像：选择此项可以将新图像预先加载到浏览器缓存中，防止图像延迟。
3.10.8在“交换图像”对话框中再设置“图像"img1"”，如下图所示：
提示：对于所有需要更改的其它图像重复第8步即可，同时对于所有需要更改的图像