第十三讲行为

第十三讲行为 副标题

教学设计 • 课型： • 课时： • 教学目标 • 【行为相关的概念】 • 【添加常用的行为】 • 【行为的修改与删除】 • 【……】 • 重点 • xxxxx • 难点【可选】 • xxxxx • 关键【可选】 • Xxxxx • 教学方法：

教学准备 • 【此页可选】 • 教具资料 • xxxxx • 环境准备 • xxxxx

内容提要 1.什么是行为 2.弹出信息和设置状态栏文字 3.打开浏览器窗口 4.改变属性

实例效果

操作步骤与技巧 • 1）复制练习文档，使用DREAMWEAVER打开其中的index.htm文件； • 2）在窗口菜单中找到行为面板，双击行为面板，将行为面板最大化，行为面板如图13-2所示； • 图13-2 行为面板 • 3）点击标签选择器中的<body>标签，如图13-3所示； • 图13-3选中<body>标签 • 4）在行为面板中点击添加行为按钮，选择弹出信息行为，如图13-4所示； • 图13-4弹出信息 • 5）在打开的弹出信息对话框内，输入“欢迎来大连经济技术开发区作客”，如图13-5所示；

6）单击确定按钮，行为面板中已经被添加了一条行为，单击onclick事件，点击旁边的下拉按钮，将事件改成onload事件，如图13-6所示；6）单击确定按钮，行为面板中已经被添加了一条行为，单击onclick事件，点击旁边的下拉按钮，将事件改成onload事件，如图13-6所示； • 图13-6 修改事件 • 7）保存后，按F12快捷键在浏览器中预览效果，当页面装载后可以看到自动弹出对话框：“欢迎来大连经济技术开发区作客”，如图13-7所示； • 图13-7 弹出信息的运行效果 • 提示： • 通过对本项目的实践操作，确定了使用行为的三个基本步骤： • 第一步选择需要添加行为的标签； • 第二步添加行为； • 第三步为添加的行为选择合适的事件。 • 添加行为后的作用就是在某个标签的某个事件中产生某个行为，例如刚刚完成的项目就是当body标签（代表整个页面）在发生onload事件（装载完成事件）之后触发弹出信息行为，弹出对话框。需要注意的是，某个标签的某个事件中可以添加多条行为，则当该事件发生时，多条行为会依次执行。另外，不同的浏览器，或者浏览器的不同版本所支持的事件略有不同，在操作的时候要按照设计要求多加注意。 • 在后边的练习中大家要对事件以及行为的概念做进一步的理解。

8）从这步开始，添加设置状态栏文本行为，同样先选择body标签；8）从这步开始，添加设置状态栏文本行为，同样先选择body标签； • 9）在行为面板中点击添加行为按钮，选择设置文本下的设置状态栏文本，在弹出的对话框中添加“大连开发区欢迎您”文字，单击确定，如图13-8所示； • 图13-8 设置状态栏文本对话框 • 10）将该行为对应的事件也选择成onload； • 11）选择文件菜单下的保存全部命令，预览生成的效果，除了弹出信息外，观察浏览器的状态栏，发现状态栏文字被设置为：大连开发区欢迎您，完成效果可见光盘中完成文档。

打开浏览器窗口

操作步骤与技巧 • 1）复制练习文档，使用DREAMWEAVER打开其中的index.htm文件； • 2）在窗口菜单中找到行为面板，双击行为面板，将行为面板最大化； • 3）点击标签选择器中的<body>标签，这个标签将作为下面添加行为操作的对象； • 4）在行为面板中点击添加行为按钮，选择“打开浏览器窗口”行为； • 5）在打开的“打开浏览器窗口”设置对话框内，做如图13-10所示的设置，其中重点将URL设置为与index.htm在同一目录下的练习文件welcome.htm，窗口的高度宽度分别设置为300和200像素，单击确定按钮；

6）在行为面板将该行为对应的事件选择成onload；6）在行为面板将该行为对应的事件选择成onload； • 7）选择文件菜单下的保存全部命令，预览生成的效果，当首页index.htm装在完成后会自动弹出新的浏览器窗口，窗口宽度300像素，高度200像素，为welcome.htm页，如图13-11所示； • 图13-11 弹出的新窗口 • 8）在状态栏重新选中body标签，可以看到行为面板中刚刚设置的打开浏览器窗口行为，双击该条行为，可以修改这条行为，这次在设置对话框中选中菜单条和状态栏，单击确定； • 9）保存后预览，可以看到此次打开的浏览器窗口与刚才不同，具有了菜单条和状态栏，如图13-12所示； • 图13-12 修改后的弹出窗口 • 提示： • 在这个步骤的操作中，介绍了修改行为的方法，需要强调的是无论是增加还是修改行为，一定要先选中相应的标签（对象），然后再在行为面板中进行相应的操作。 • 10）完成项目，预览生成的效果，完成效果可参见光盘中相应的完成文档。

改变属性

操作步骤与技巧 • 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）选择文件菜单下的保存全部命令，预览生成的效果，可以发现鼠标滑过不同的缩略小图，中间的大图会随之变化，完成制作，完成效果可参见光盘中相应的完成文档。

课后小结 • 通过本章几个实例的制作，了解在DREAMWEAVER中添加行为的基本方法，第一步要选择对象标签，第二步使用行为面板添加行为，第三步修改触发该行为对应的事件。 • 还要通过实例的制作理解行为工作的机制，行为总是添加在某个对象（标签）的某个事件中，并在该对象的相应事件被触发时执行。 • 通过行为面板，还可以添加针对层，针对时间轴的行为，还可以添加表单检验的行为，其操作方法大同小异，基本步骤是一致的，在下一章我们结合时间轴还要讲到控制时间轴的行为。

Thank You ! Email:teacher@dkzz.net

教学内容 xxxx

Click to edit title

Click to edit title Text Text Text Add Title Text Text

Click to edit title Text 1 Text 2 Text 3

Click to edit title Text 2 Text 3 Text 4 Text 1

Chart Documents

Click to edit title Text 2 Text 3 Text 1 Text 4 Text 6 Text 5

第 十三 讲 行为