第 十三 讲 行为
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