第 十三 讲 行为
DESCRIPTION
第 十三 讲 行为. 副标题. 教学设计. 课型: 课时: 教学目标 【 行为相关的概念 】 【 添加常用的行为 】 【 行为的修改与删除 】 【……】 重点 xxxxx 难点 【 可选 】 xxxxx 关键 【 可选 】 Xxxxx 教学方法:. 教学准备. 【 此页可选 】 教具资料 xxxxx 环境准备 xxxxx. 内容提要. 1. 什么是行为. 2. 弹出信息和设置状态栏文字. 3. 打开浏览器窗口. 4. 改变属性. 实例效果. 操作步骤与技巧. - PowerPoint PPT PresentationTRANSCRIPT
第十三讲 行为
副标题
www.dkzz.net
教学设计课型:课时:教学目标
– 【行为相关的概念 】– 【添加常用的行为 】– 【行为的修改与删除 】– ……【 】
重点– xxxxx
难点【可选】– xxxxx
关键【可选】– Xxxxx
教学方法:
www.dkzz.net
教学准备【此页可选】教具资料
– xxxxx
环境准备– xxxxx
www.dkzz.net
内容提要
1. 什么是行为 1. 什么是行为
2. 弹出信息和设置状态栏文字 2. 弹出信息和设置状态栏文字
3. 打开浏览器窗口 3. 打开浏览器窗口
4. 改变属性 4. 改变属性
www.dkzz.net
实例效果
www.dkzz.net
操作步骤与技巧 1 )复制练习文档,使用 DREAMWEAVER 打开其中的
index.htm 文件;2 )在窗口菜单中找到行为面板,双击行为面板,将行为
面板最大化,行为面板如图 13-2 所示;图 13-2 行为面板3 )点击标签选择器中的 <body> 标签, 如图 13-3 所
示;图 13-3 选中 <body> 标签4 )在行为面板中点击添加行为按钮,选择弹出信息行为,
如图 13-4 所示;图 13-4 弹出信息5 )在打开的弹出信息对话框内,输入“欢迎来大连经济
技术开发区作客”,如图 13-5 所示;
www.dkzz.net
www.dkzz.net
6 )单击确定按钮,行为面板中已经被添加了一条行为,单击 onclick 事件,点击旁边的下拉按钮,将事件改成 onload 事件,如图 13-6 所示;
图 13-6 修改事件 7 )保存后,按 F12 快捷键在浏览器中预览效果,当页面装载后可以看到自
动弹出对话框:“欢迎来大连经济技术开发区作客”,如图 13-7 所示; 图 13-7 弹出信息的运行效果 提示: 通过对本项目的实践操作,确定了使用行为的三个基本步骤: 第一步 选择需要添加行为的标签; 第二步 添加行为; 第三步 为添加的行为选择合适的事件。 添加行为后的作用就是在某个标签的某个事件中产生某个行为,例如刚刚完
成的项目就是当 body 标签(代表整个页面)在发生 onload 事件(装载完成事件)之后触发弹出信息行为,弹出对话框。需要注意的是,某个标签的某个事件中可以添加多条行为,则当该事件发生时,多条行为会依次执行。另外,不同的浏览器,或者浏览器的不同版本所支持的事件略有不同,在操作的时候要按照设计要求多加注意。
在后边的练习中大家要对事件以及行为的概念做进一步的理解。
www.dkzz.net
www.dkzz.net
8 )从这步开始,添加设置状态栏文本行为,同样先选择 body 标签;
9 )在行为面板中点击添加行为按钮,选择设置文本下的设置状态栏文本,在弹出的对话框中添加“大连开发区欢迎您”文字,单击确定,如图13-8 所示;
图 13-8 设置状态栏文本对话框10 )将该行为对应的事件也选择成 onload ;11 )选择文件菜单下的保存全部命令,预览生成
的效果,除了弹出信息外,观察浏览器的状态栏,发现状态栏文字被设置为:大连开发区欢迎您,完成效果可见光盘中完成文档。
www.dkzz.net
打开浏览器窗口
www.dkzz.net
操作步骤与技巧1 )复制练习文档,使用 DREAMWEAVER 打开其中的
index.htm 文件;2 )在窗口菜单中找到行为面板,双击行为面板,将行为
面板最大化;3 )点击标签选择器中的 <body> 标签,这个标签将作
为下面添加行为操作的对象;4 )在行为面板中点击添加行为按钮,选择“打开浏览器
窗口”行为;5 )在打开的“打开浏览器窗口”设置对话框内,做如图
13-10 所示的设置,其中重点将 URL 设置为与index.htm 在同一目录下的练习文件 welcome.htm ,窗口的高度宽度分别设置为 300 和 200 像素,单击确定按钮;
www.dkzz.net
www.dkzz.net
6 )在行为面板将该行为对应的事件选择成 onload ; 7 )选择文件菜单下的保存全部命令,预览生成的效果,当首页
index.htm 装在完成后会自动弹出新的浏览器窗口,窗口宽度 300像素,高度 200 像素,为 welcome.htm 页,如图 13-11 所示;
图 13-11 弹出的新窗口 8 )在状态栏重新选中 body 标签,可以看到行为面板中刚刚设置的
打开浏览器窗口行为,双击该条行为,可以修改这条行为,这次在设置对话框中选中菜单条和状态栏,单击确定;
9 )保存后预览,可以看到此次打开的浏览器窗口与刚才不同,具有了菜单条和状态栏,如图 13-12 所示;
图 13-12 修改后的弹出窗口 提示: 在这个步骤的操作中,介绍了修改行为的方法,需要强调的是无论是
增加还是修改行为,一定要先选中相应的标签(对象),然后再在行为面板中进行相应的操作。
10 )完成项目,预览生成的效果,完成效果可参见光盘中相应的完成文档。
www.dkzz.net
www.dkzz.net
改变属性
www.dkzz.net
操作步骤与技巧 1 )复制练习文档,使用 DREAMWEAVER 打开其中的 index.htm 文件; 2 )在窗口菜单中找到行为面板,双击行为面板,将行为面板最大化; 3 )点击标签选择器中的 <body> 标签,在行为面板内可以看到里面已经有的打开浏
览器窗口的行为,选中它,在行为面板中点击删除事件按钮,将网页中已有的行为删除,这是删除行为的操作方法;
4 )单击选中中间的大图,在属性面板,图像处,将其命名为“ M1” ,如图 13-14 所示;
图 13-14 为图片命名 5 )选中左上角的第一张小图,在行为面板中点击添加行为按钮,选择“改变属性”行
为,在打开的“改变属性”设置对话框内,做如图 13-15 所示的设置,因为本实例是改变图片的“源”属性,所以其中对象类型处应选择 IMG 图片类型,命名对象处选择刚刚命名的 M1 ,属性选择 SRC 属性,即图片文件的路径,新的值处就是该缩略图对应的大图路径,即 ys 目录下的 1.jpg ;
图 13-15 设置改变属性 6 )在行为面板将该行为对应的事件选择成 onmouseover (鼠标经过事件); 7 )依此类推,顺序选择下边的图片,分别添加 onmouseover 事件下的改变属性行
为,其中,对象类型都选择 IMG ,命名对象都是 M1 ,属性都是 src,而在新的值中注意路径分别是 IMG/ys/2.jpg , IMG/ys/3.jpg…IMG/ys/7.jpg ;
8 )选择文件菜单下的保存全部命令,预览生成的效果,可以发现鼠标滑过不同的缩略小图,中间的大图会随之变化,完成制作,完成效果可参见光盘中相应的完成文档。
www.dkzz.net
www.dkzz.net
课后小结通过本章几个实例的制作,了解在
DREAMWEAVER 中添加行为的基本方法,第一步要选择对象标签,第二步使用行为面板添加行为,第三步修改触发该行为对应的事件。
还要通过实例的制作理解行为工作的机制,行为总是添加在某个对象(标签)的某个事件中,并在该对象的相应事件被触发时执行。
通过行为面板,还可以添加针对层,针对时间轴的行为,还可以添加表单检验的行为,其操作方法大同小异,基本步骤是一致的,在下一章我们结合时间轴还要讲到控制时间轴的行为。
Email:[email protected]
www.dkzz.net
教学内容– xxxx
www.dkzz.net
Click to edit title
Title1 Title2 Title3 Title4
A
B
C
D
www.dkzz.net
Click to edit title
TextText
TextText
TextText
TextTextTextText
Add Title
www.dkzz.net
Click to edit title
Text 1Text 1 Text 2Text 2 Text 3Text 3
www.dkzz.net
Click to edit title
Text 1 Text 2 Text 3 Text 4
www.dkzz.net
Chart Documents
12
34
5
8830
12
1030
30
2030
90
6523
15
2533
65
0
20
40
60
80
100
120
140
A B C
www.dkzz.net
Click to edit title
Text 1
Text 2
Text 3
Text 4
Text 6Text 5
www.dkzz.net