网页设计-Dreamweaver中行为及其应用.ppt
文本预览下载声明
教学方法 教学目标 教学重点 教学难点 教学过程 项目12 Dreamweaver中行为及其应用 课程trtrrtrtrtrtrrtt 下一页 上一页 退出 主菜单 教学目的 重点难点 教学方式 课程设计 教学过程 课程作业 课程小结 教学参考 主菜单 重点难点 教学内容 课程作业 课程小结 教学参考 教学目的 课程trtrrtrtrtrtrrtt 上一页 上一页 下一页 退出 主菜单 重点难点 教学内容 课程作业 课程小结 教学参考 教学目的 退出 * 返回上一级 教学目标 (1)了解行为的三要素; (2)掌握创建行为的三个步骤; (3)熟练运用dreamweaver中常见行为的设定 下一页 上一页 教学重点 (1)弹出式菜单的设计; (2)层的控制; 下一页 上一页 教学难点 设置文本动作的使用 下一页 上一页 教学方法 1、项目工程互动式教学法 2、“讲、学、练”相结合 下一页 上一页 下一页 上一页 一、关于Dreamweaver行为 行为有三个最重要的构成部分,分别为对象(Object)、事件(Event)和动作(Action)。对象是产生行为的主体。网页中很多的元素都可以成为对象,如网页中插入的图像、一段文字、一个多媒体文件等。对象也是基于成对出现的HTML标签的,在创建时要首先选中对象的标签。事件是触发动态效果的条件。 下一页 上一页 在创建行为时,这三者的顺序为: 1、选择对象 2、添加动作 3、调整事件 下一页 上一页 二、Dreamweaver主要内置动作 下一页 上一页 1、“交换图像”和“恢复交换图像” 步骤如下: (1)选中对象 网页上应该有正常状态的图像,如图所示,选中图像,打开行为面板。选中图像,实际上也就是选中了图像的img标签。 (2)添加动作 (3)设定事件 下一页 上一页 2、弹出信息 3、打开浏览器窗口 4、控制Shockwave或Flash 5、播放声音 6、改变属性 下一页 上一页 7、显示-隐藏层 具体的操作步骤如下: (1)在页面上添加两个层,分别为layer1和layer2,在layer1中插入一个事先准备好的图片,在layer2中添加文字,如图: 下一页 上一页 (2)调整这两个层在页面中的显示位置。设置layer2的显示属性为隐藏,如图: 下一页 上一页 (3)在layer1层中的图片上添加显示和隐藏层的行为动作”。选择图片,打开行为面板。单击加号 (+) 按钮并从“动作”弹出菜单中选择“显示-隐藏层”。选中layer2,单击“显示”按钮如图,单击确定。 下一页 上一页 (4)单击事件下拉菜单,选择触发动作的事件为onMouseOver; (5)再次选中图片,打开行为面板,单击加号 (+) 按钮并从“动作”弹出菜单中选择“显示-隐藏层”。选中layer2,单击“隐藏”按钮如图,单击确定。 下一页 上一页 (6)再次单击事件下拉菜单,选择触发动作的事件为onMouseOut; (7)设置完成后,行为面板如图: 下一页 上一页 8、“显示弹出式菜单”和“隐藏弹出式菜单” (1)选中产生弹出菜单行为的对象,通常是图片或文本的按钮。 (2)单击行为面板上的加号按钮,在弹出菜单中选择“显示弹出式菜单”。 (3)内容面板设置。 弹出设置面板共有四个子面板。内容面板设置弹出菜单上按钮的内容和排列顺序,外 观如图所示。 下一页 上一页 (4)外观面板设置 下一页 上一页 (5)高级面板设置 下一页 上一页 (6)位置设定。 位置设定面板包括两项重要的设置,如图所示。 (7)设置完毕后,单击“确定”按钮。 下一页 上一页 9、设置文本 (一) 设定框架文本 该行为的使用方法如下: (1)创建并保存框架网页,同时在属性面板上给框架起名。该行为只有在框架网页中才能够使用。 (2)选中框架中要应用该行为的对象。 (3)打开行为面板,单击面板上的加号按钮。在弹出的菜单中选择“设置文本”—“设置框架文本”,弹出窗口如图所示: 下一页 上一页 (4)设置行为:“框架”项中选择显示设置文本的框架。“新建HTML中设定在选定框架中显示的HTML代码。 选中“保留背景色”,可以保留原来框架中的背景颜色。 单击“获取当前HTML”按钮,可以在窗口中显示框架中body标记之间的代码。 下一页 上一页 (二) 设置状态条文本 设定状态栏文字的步骤如下: (1)用鼠标选中要应用该行为的对象。 (2)打开行为面板,单击加号按钮,在弹出的菜单中选择“设置文本”—“设置状态条文本”。 (3)在弹出的窗口中输入要在状态栏显示的文字。 (4)单击“确定”按钮,结束设置。 下一页
显示全部