第十一章在页面中添加动态效果—行为的运用

教学课题:行为的概念及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步即可,同时对于所有需要更改的图像

THE END
1.第二小节数据输入注意:除非在产生序列前已选定了序列产生的区域,否则终值必须输入。 图4-2-2-2 “序列”对话框 3.输入有效数字 输入有效数据是Excel一个很有用的功能。用户可以预先设置某一单元格允许输入的数据类型、范围,并可设置数据输入提示信息和输入错误提示信息。 >>>有效数据的定义步骤如下: (1)选取要定义有效数据的单https://xy.xauat.edu.cn/dmt/kjzy/jsjwhjc/content/chapter4/chapter4-2-2.htm
2.12在WPS表格肿么输1-2在WPS表格肿么输WPS 查看全部7条评论回答 写回答 954362913 在WPS表格中输入数字1-2的方法有多种,以下是其中两种常用的方法:1. 使用数字键盘:按下数字键盘上的1和2键即可输入数字1和2。如果你使用的是标准的104键键盘,可以在数字键盘上找到对应的按键。2. 使用符号转义字符:在单元格中输入“1”、“2https://wap.zol.com.cn/ask/details_25166440_925617_3.html
3.8212223232425262728,公式怎么输入?把楼下zhilling的公式稍加改动就行了:=INT((ROW()+2)/3)&"-"&(MOD((ROW()-1),3)+1)https://www.3d66.com/answers/question_1209822.html
4.Excel表格中快捷编辑法输入120?BIM免费教程要在Excel表格中快速输入1-20的方法如下: 1. 首先,在需要输入1-20的单元格中,输入1并按下回车键。 2. 选中刚刚输入的单元格,将鼠标悬停在单元格右下角的小方块上,鼠标会变成一个加号。 3. 单击鼠标左键并按住不放,然后向下拖动鼠标,直到拖动到20的位置。 https://www.tuituisoft.com/office/57605.html
5.表格制作教程单击选中要编辑的单元格,输入内容。这样可以把收集的.数据输入电子表格里面保存了。 格式设置 可以对输入的内容修改格式。选中通过字体,字号,加黑等进行设置,换颜色等。 表格制作教程2 1、首先新建一个Excel文件。 2、接着在草纸上画好草稿,将需要数据的表格样式及列数和行数确定。比如我需要建立一个五行六列的https://www.wenshubang.com/xuexijihua/340048.html
6.excel表格函数公式大全excel五大常见函数公式文军营销参数说明:Logical1,Logical2,Logical3……:表示待测试的条件值或表达式,最多这30个。 应用举例:在C5单元格输入公式:=AND(A5>=60,B5>=60),确认。如果C5中返回TRUE,说明A5和B5中的数值均大于等于60,如果返回FALSE,说明A5和B5中的数值至少有一个小于60。 http://www.wenjuntech.com/gjsy/excelbgs.html
7.WPS表格快速填充数字序列技巧在使用WPS表格进行数据处理时,我们经常需要快速生成连续的数字序列,例如1、2、3、4等。WPS表格提供了多种自动填充序列的方法,可以轻松实现这一需求。下面将介绍几种常见的自动填充序列的方法。 方法一:使用填充柄 在单元格中输入起始数字,比如在A*单元格中输入数字1。 https://www.kdocs.cn/article/7C903AD22B.html
8.excel常用函数公式及技巧搜集2阳光风采可在该单元格输入="编制日期:"&TEXT(TODAY(),"yyyy年m月d日") ㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜㎜ 【排名及排序筛选】 一个具有11项汇总方式的函数SUBTOTAL =SUBTOTAL(9,$B$2:B2) 在数据筛选求和上有意想不到的功能,11项功能为:1、求平均数,2、求计数,3、求计数值(自动筛选https://www.iteye.com/blog/1181170
9.Excel技巧当我们在Excel中输入公式时通常都以“=”开头,否则Excel就会把它当作字符串而不是公式加以计算。如果你觉得每次都要以“=”开头不方便,你也可以进行如下设置:选择“工具”菜单中的“选项”,在“1-2-3的帮助”标签中选中“转换Lotus 1-2-3公式”选项,最后“确定”。这样以后,当你在单元格中直接输入1+3,回车http://www.360doc.com/content/11/0522/10/1791388_118503316.shtml
10.excel函数大全excel常用函数公式大全excel数据分析工具1.加总求和函数 ①sum(number1,[number2],……) sum(数值1,数值2,……) → 计算单元格区域中所有数值的和 例:求下表中报名总人数? ②sumif(range,criteria,[sum_range]) sumif(条件区域,条件,求和区域) *[sum_range]参数不输入时,默认[sum_range]=range https://www.fanruan.com/bw/doc/8328
11.Excel与wps的表格常用处理函数与脚本生成配置啦(E2,13,2))。 4、从输人的身份证号码内让系统自动提取性别,可以输入以下公式: =IF(LEN(C2)=15,lF(MOD(MID(C2,15,1),2)=1,"男","女"), IF(MOD(MID(C2,17,1),2)=1,"男","女"))公式内的“C2"代表的是输人身份证号码的单元格。 https://config.net.cn/firmwork/officedevice/8bb3b17b-7050-4c12-872e-ac8fc2183db8-p1.html
12.Excel表格乘法函数公式大全上面主要讲解了两个单元格相乘求积的方法,但是在我们平常工作中,可能会遇到更多数据相乘,下面主要说说多个单元格乘法公式运用,如:“A1*B1*C1*D1”=E1。 2、Excel中多个单元格相乘的乘法公式 ①在E1单元格中输入乘法公式“=A1*B1*C1*D1”。 ②然后依次在A1、B1、C1、D1中输入需要相乘的数据,结果就会显示在“https://www.yjbys.com/edu/office/463714.html
13.openpyxl库在Excel中写入和读取图片,以及进行各种单元格文章浏览阅读3w次,点赞33次,收藏208次。本文详细介绍了如何使用 openpyxl 库在 Excel 中写入和读取图片,以及进行各种单元格操作,如设置样式、合并单元格等。通过实例展示了安装、创建和修改 Excel 文件的过程,同时还涵盖了行、列的操作和单元格的对齐、边框等样式设置https://blog.csdn.net/weixin_44634704/article/details/125098082
14.EXcel如何排序,高手不告诉你的5个小技巧腾讯云开发者社区主要是通过设置主关键词来排序。 选中相应的区域,点击排序,在相应的界面中选择主关键词,比如这里选择了“语文”,然后点击添加条件会出现次关键词,这里选择了“数学”。 二、随机排序 步骤:借助辅助列和函数搞定。我们在函数框里输入函数【RAND()】,将2一栏下拉,点击序】或【降序】,可以看到单元格中数字顺序的变化https://cloud.tencent.com/developer/article/1445749