《网页设计与制作实用教程》-第6章Dreamweaver_行为应用.ppt

第6章Dreamweaver行为应用 本章学习目标 熟悉层 事件 动作的概念和相互关系了解JavaScript脚本语言运行的环境掌握DreamweaverMX2004行为面板的使用方法掌握通过行为面板创建网页动态效果的操作过程 6 1Dreamweaver行为的基本概念 行为 Behaviors 是响应某一事件 Event 而采取的一个动作 Action 行为是DreamweaverMX2004中最有特色的功能 它实质上是网页中调用Javascript代码 以实现网页的动态效果 但使用了DreamweaverMX2004的行为功能 就不需要掌握复杂的Javascript代码而轻松完成一个需要几十行甚至几百行代码才能完成的功能 6 1 1行为面板网页中的事件 Event 是指鼠标 键盘的响应方法 DreamweaverMX2004提供了许多常用的事件 启动DreamweaverMX2004 单击 窗口 行为 菜单命令或按Shift F3键 系统打开 行为 面板 如图6 1 1所示 行为 面板主要项目功能如下 加 减 按钮 用于添加或删除动作 Actions 动作 是网页产生的具体行为 如上图设置将产生网页时弹出一个信息窗口的网页效果 事件 当选定某个动作时 事件右侧出现一个箭头 按此箭头产生一个事件处理的下拉菜单 通过下拉菜单可选择触发动作发生的条件 以下是常见事件及描述 OnClick 当访问者在指定的元素上单击时产生 onDblClick 当访问者在指定的元素上双击时产生 onKeyDown 当按下任意键的同时产生 onKeyPress 当按下和松开任意键时产生 此事件相当于把onKeyDown和onKeyUp这两事件合在一起 onKeyUp 当按下的键松开时产生 onLoad 当一图像或网页载入完成时产生 onMouseDown 当访问者按下鼠标时产生 onMouseMove 当访问者将鼠标在指定元素上移动时产生 onMouseOut 当鼠标从指定元素上移开时产生 onMouseOver 当鼠标第一次移动到指定元素时产生 onMouseUp 当鼠标弹起时产生 onSubmit 当访问者提交表格时产生 onUnload 当访问者离开网页时产生 6 1 2行为与浏览器的关系虽然在网页中使用行为可以产生互动的效果 增强网页的交互性 但是 并不是所有的浏览器都支持DreamweaverMX2004中的行为 目前网络上使用最多的是NetscapeNavigator和InternetExplorer两种浏览器 我国普遍使用InternetExplorer浏览网页 而只有IE4 0及以上版本的浏览器才可以对大多数的行为正常使用 同一个行为在不同的浏览器中显示也是不一样的 某个行为可以在这个版本的浏览器里正常显示 而在另一个版本的浏览器就不能显示 6 2设定行为命令 6 2 1在对象中加入行为命令DreamweaverMX2004中使用行为 应使用以下一般操作步骤 1 选择一个想要添加行为的网页元素 可以借助状态栏中的标记符选择器 例如选择可为整个网页设置行为 2 选择 窗口 行为 菜单命令 打开 行为 面板 3 单击添加行为按钮 并弹出一个菜单 4 在菜单中选择一个动作 系统弹出该动作的设置对话框 显示动作的参数和说明 输入动作的相关参数后单击 确定 按钮 5 回到行为面板 此时行为面板中增加了一个行为行 如图6 1 1所示 6 2 2编辑行为为对象添加行为后 有时需要改变触发行为的事件 增加 删除动作或改变动作参数等 这些都属于编辑行为的操作 1 更改事件DreamweaverMX2004中设置动作时会自动创建一个事件 默认的事件有时并不是用户需要的 比如弹出消息窗口 默认事件是Onload事件 即网页加载时弹出消息窗口 但用户如果希望单击网页后弹出消息窗口 就必须更改事件为Onclick事件 操作方法为单击 事件 栏 再单击事件旁边的按钮 在事件下拉列表菜单中选择Onclick事件 如图6 2 1所示 事件和当前选择的网页对象是相关联的 因此事件下拉列表菜单中的内容随所选网页对象不同而变化 如果在选择了正确的网页对象后 发现所期望的事件并没有出现在事件列表菜单中 这时应尝试改变浏览器 方法是单击 按钮 在图6 2 2所示的弹出菜单中选择 显示事件 命令 在子菜单中选择浏览器的版本 浏览器的版本越高 支持的事件越多 默认情况下 事件列表菜单中显示的都是IE4 0能够产生的事件 当找到所期望的事件后 选择该事件 对应行为面板的相应事件将会改变 2 修改行为的动作参数已经设置的行为 可以改变动作参数 只要双击该行为对应的 动作 栏 如图6 2 3所示 即可打开该动作的参数设置对话框 在对话框中修改各项参数 添加行为按钮 删除行为按钮 事件列表 多动作时 可用来调整先后次序 双击可设置参数 3 删除行为在行为面板上选取欲删除的行为 单击行为面板左上方的 按钮 或按Delete键 4 调整行为的执行顺序一个事件可以触发多个动作 比如Onload这一事件可以触发如播放声音 打开浏览器窗口等动作 在这种情况下就存在一个动作发生的先后问题 可以通过单击行为面板中 按钮来解决这个问题 如图6 2 3所示 6 3创建行为实例 6 3 1实例 弹出信息框1 实例创意网页加载时弹出信息框 如图6 3 1所示 或点击一个对象弹出信息框 比如点击图片 按钮 链接等等 都可以弹出信息框 如果某些页面的内容在别人复制之前想给一点提示 还可以选择OnCopy事件来触发弹出信息框动作 2 制作步骤方法一 调用JavaScript使用这一行为 必须对JavaScript非常熟悉 本例中调用JavaScript的操作主要用于对整个页面的作用 即网页加载时弹出信息框 因此在插入这个行为时 按以下步骤操作 1 打开素材库 6 3 1 文件夹中的 1 htm 网页文件 选择状态栏上的 单击 行为 面板中的 按钮 然后在行为选择菜单中选择 调用JavaScript 命令 如图6 3 2所示 2 弹出如图6 3 3所示的 调用Javascript 对话框 在文本框中输入需要执行的准确的JavaScript代码或函数名 例如本例键入的一行代码为 alert 欢迎来到本站 3 按 确定 按钮 打开 行为 面板 确定当前动作使用的事件为 onload 如果不是 选择右边 按钮重新选择 如图6 3 4所示 4 保存网页 按F12键预览 效果如图6 3 1所示 其运行的结果是当打开网页时会自动弹出图中所示的对话框 方法二 弹出信息对于不熟悉JavaScript代码来制作弹出信息框的用户 也可以采用这一方法 DreamweaverMX2004自带了弹出信息的功能菜单 以下是实现方法 1 创建一空白网页 选择状态栏上的 单击 行为 面板中 按钮 然后在行为选择菜单中选择 弹出信息 菜单命令 2 系统弹出如图6 3 5所示的 弹出信息 对话框 在文本框中输入需要显示的信息 如 欢迎来到本站 按 确定 按钮 完成设置 3 保存网页 按F12键预览 效果如图6 3 1所示 其运行的结果与方法一的效果一样 6 3 2实例 打开浏览器窗口1 实例创意打开浏览器窗口即在打开当前网页的同时 另外打开一个新的窗口 而这个新打开的窗口 可以根据自己的喜好对它的菜单 页面尺寸 滚动条等进行设置 如图6 3 6左图所示为263网站打开时弹出的 免费试用 广告窗口 右图为本例完成后的效果图 2 制作步骤 1 设计一个页面 作为新窗口 为了选择适当的窗口 在文档窗口显示标尺 然后从标尺上查看最合适的窗口大小 如图6 3 7所示窗口采用了385 250像素表格进行布局 将这个网页保存为 popwindow htm 2 创建另一个网页 index htm 由于是对整个页的行为 即广告窗口是在该网页加载时自动弹出 所以选择状态栏上的 后单击行为面板的 按钮 选择 打开浏览器窗口 菜单命令 如图6 3 8所示 3 系统弹出6 3 9所示 打开浏览器窗口 对话框 在 要显示的URL 文本框中输入新窗口文件的路径和文件名 也可以通过单击 浏览 按钮查找相应的路径及文件名 窗口宽度 和 窗口高度 文本框中定义新窗口的长宽值 这里设置385 250与popwindow htm页面相对应 在 属性 中未勾选相应选项 在 窗口名称 中定义窗口名称为 网页设计与制作 最后单击 确定 按钮完成设置 4 如果事件窗口显示的不是Onload 则通过下拉菜单选择Onload 如图6 3 10所示 如果打算再次编辑该事件 则双击周动作栏中的 打开浏览器窗口 对这个行为进行再修改 5 按F12键预览 当前网页被下载的同时 也打开了一个宽度和高度分别是385 250像素 定义为 网页设计与制作 的窗口 如图6 3 6右图所示 6 3 3实例 用显示 隐藏层制作下拉菜单1 实例创意显示 隐藏层可以对页面中所有的层进行设置 使其可显示或隐藏 本例将通过显示 隐藏层的功能制作一个网页中常见的导航用下拉菜单 下拉菜单的实质是网页中共有4个菜单 即菜单1 菜单2 菜单3和菜单4 相对应有4个层 即menu1 menu2 menu3和menu4 每一层即一个下拉菜单 网页加载时 这4个层全部隐藏 当鼠标移动到 菜单1 时 层menu1显示 其它层隐藏 并且鼠标继续移动到层menu1时 层menu1继续显示 其它层仍然隐藏 重复刚才的操作 完成整个下拉菜单的制作 完成后如图6 3 11所示 2 制作步骤 1 打开素材库 6 3 3 文件夹中的 1 htm 页面 按CTRL F2组合键打开 插入面板 在 布局 视图下点击层按钮后在页面中按住鼠标不放拖出一个层 然后在层的 属性面板 中设置各参数 层编号框填入title 左 上 宽 高框分别填入5 200 480 15 背景色填入 006699 如图6 3 12所示 2 将光标移至title层内 点击插入面板 常用 视图下的表格按钮 插入一个1行4列的表格 设置如图6 3 13所示 按 确定 按钮插入表格 3 按住CTRL键不放点击表格的四个单元格 然后设置它们的宽度均为120像素 如图6 3 14所示 并在前两个单元格中输入文字 就是主菜单名 可按自己想要的名字输入 如 平面设计 和 建站资源 为例 并加上链接 空链接可在链接文本框中输入 4 再次使用插入面板插入一个层到刚完成的导航条的下方 各项参数填为 层编号框填入menu1 左 上 宽 高框分别填入5 220 120 80 背景色填入 999966 如图6 3 15所示 其中左和高两个参数是设置这个层距离窗口左边框和上边框的距离 5 在menu1层中输入菜单内容 为了排版方便 使用表格制作菜单项 这个层将作为 平面设计 的下拉选单出现 填入你所需要的菜单链接 使用同样的方法 再为 建站资源 也做一个下拉选单 层menu2 层menu2及其属性如图6 3 16所示 注意 下拉选单所在的层 menu1 menu2 的位置非常重要 由左和高两个参数决定 它们的上边线应该紧贴导航条的下边线 这样才能保证在后面我们完成第三个步骤后 菜单能正常使用 因为如果远离导航条的话 鼠标一离开导航条 菜单就消失了 6 按F2键打开 层面板 其中列出了网页中的三个层 点menu1和menu2的前面一格 出现闭着的眼睛图标 这两个层便隐藏起来了 操作这一步是因为下拉菜单的初始状态是不可见的 7 按住CTRL键不放点击导航条中的第一个单元格 即 平面设计 单元格 再按Shift F3打开行为窗口 单击 按钮 在下拉选项中选中 显示 隐藏层 菜单命令 如图6 3 17所示 注意 如果选项中没有这一项 则选择 显示事件 下的IE5 0或以上 重新操作 此时 显示 隐藏层 将出现 8 系统弹出如图6 3 18所示 显示 隐藏层 对话框 在 命名的层 框中会列出当前网页中所有的层 选中层 menu1 因为我们想要menu1这个层对 平面设计 响应 然后点下面的 显示 按钮 按 确定 完成设置 9 回到 行为 面板 如图6 3 19所示 点击事件下的一个向下的小箭头 单击后在下拉选项中选中 onMouseOver 事件 这一步的作用是实现当鼠标移至第一个单元格时 下拉选单menu1的状态变为 显示 Show 10 接下一步是让下拉选单menu1在鼠标移开第一个单元格时再变为隐藏状态 选择 平面设计 所在单元格 单击 按钮 在下拉选项中选中 显示 隐藏层 菜单命令 在弹出如图6 3 20所示 显示 隐藏层 窗口中选中层 menu1 因为我们想要menu1这个层对 平面设计 响应 然后单击 隐藏 按钮 按 确定 按钮完成设置 11 回到行为面板 点击事件下的向下的小箭头 在下拉选项中更改为 onMouseOut 即鼠标离开 平面设计 单元格时 层menu1隐藏 12 选中层menu1 方法是点击层的边缘或在层面板中点击menu1 用与导航条 平面设计 单元格部分同样的方法在层窗口中为它添加显示与隐藏自己的命令 这样做的效果是当鼠标在menu1层内 onmouseover 时显示 移出 onmouseout 层menu1时 层menu1就自动隐藏 最后层menu1的状态如图6 3 21所示 13 重复以上操作 为导航条的第二个主菜单 建站资源 和层menu2添加显示 隐藏层命令 14 保存网页 按F12预览 6 3 4实例 使用改变属性制作图片阴影效果1 实例创意改变属性可以动态改变某一对象的属性值 大多数行为的属性都可以修改 而且这些行为的显示效果取决于所使用的浏览器 下面制作的实例将实现图片阴影效果的功能 当鼠标移至图片上时 阴影效果显示 当鼠标离开图片时 阴影效果消失 两种状态效果如图6 3 22所示 2 制作步骤 1 定义素材中 source 6 6 3 4 目录为本地站点 新建网页 保存为1 htm页面 在该页面中插入一个层 将图片flower jpg插入到该层中 调整图层大小 使图层比图像略大一点 如图6 3 23所示 2 选择图像后 在行为选择菜单中选择 改变属性 命令 如图6 3 24所示 3 在弹出的对话框中作如图6 3 25所示的选择 从中可以看出 图层属性的操作选择很多 虽然只有精通HTML语言才可选择 但比直接编写HTML代码方便得多 因为这里我们可以不关心语法格式 本例效果是改变 Layer1 的背景色彩 4 为了得到阴影效果 在 新的值 框中输入 black 如图6 3 25所示 当然你也可以输入其他色彩名称或代码 5 默认的事件是 onload 在这里用鼠标单击其右方的黑三角 在弹出的下拉选项中选择 onMouseOver 鼠标经过 如图6 3 26所示 6 保存网页后 按F12预览 如图6 3 22所示 当鼠标经过图片时 图片显示阴影效果 注意 鼠标离开图片 阴影效果消失的效果请读者用同样的方法实现 6 3 5实例 播放声音1 实例创意有时浏览一些网页时 会发现当把鼠标移到链接或图像等元素上时 会听到一些声音 或者在打开一个页面时 伴随有声音效果等 在Dreamweaver中 可以通过使用控制声音行为来实现这一功能 本例要设置的是当鼠标单击如图6 3 27所示的喇叭图标时播放音乐 2 制作步骤 1 定义素材中 source 6 6 3 5 目录为本地站点 新建网页 保存为1 htm页面 在网页中插入图片sound gif 2 选择喇叭图片 单击行为面板中 按钮 选择行为菜单的 播放声音 命令 3 弹出如图6 3 28所示的对话框 在 播放声音 文本框中输入音乐文件的路径或单击 浏览 按钮浏览并选择音乐文件 sound mid 这是一个压缩格式的音乐文件 检查行为面板 调整该事件为 OnMouseDown 4 单击行为面板 按钮 选择 调用JavaScript 菜单命令 弹出如图6 3 29所示对话框 在对话框中输入代码 alert 别忘记打开音箱 按 确定 完成设置 检查行为面板 调整该事件为 OnMouseDown 6 3 6实例 设置图层中的文本1 实例创意设置图层中的文本行为 可以用指定的内容来定义图层中文本的内容和格式 这些内容包括所有可用的HTML源代码 也可以重设图层中的内容和格式 但它将会保持图层的属性 包括图层背景颜色在内 2 操作步骤 1 定义素材中 source 6 6 3 6 目录为本地站点 新建网页 保存为1 htm页面 插入一个图层 在图层中插入一个2行1列的表格 表格中分别插入两个图片 插入表格是为了更好地给图片定位 然后插入第二个图层 这个图层用来显示提交文本 如图6 3 30所示 2 选择上方第一个图片 点击行为菜单 按钮 选择 设置文本 设置层文本 菜单命令 弹出如图6 3 33所示的对话框 在 层 文本框中选择层 Layer2 在 新建HTML 文本框中设置包括HTML标签的内容来对图层中的文本进行定义 同样 可以像设置框架中的文本一样 在其中加入一些JavaScript之类的函数 这里我们输入一句话 这里显示雕塑内容 单击 确定 完成设置 3 选择下面的第二个图片 设置同样的行为 只是文字提供不一样 我们输入语句 这里显示书画内容 4 保存网页 按F12预览 如图6 3 32所示 当鼠标移到不同的图片上时 图层2上即显示相应的提示文本 6 3 7实例 设置状态栏中的文本1 实例创意设置浏览器中状态栏中的文本信息 可以在浏览网页时 浏览窗口底端状态栏中显示的信息 如图6 3 33所示 2 制作步骤 1 定义素材中 source 6 6 3 6 目录为本地站点 新建网页 保存为1 htm页面 单击行为面板中 按钮 在行为菜单中选择 设置文本 设置状态栏文本 菜单命令 弹出如图6 3 33所示的对话框 在 消息 文本框中输入要显示的信息内容 这里输入 欢迎来到我的小站 按 确定 按钮完成设置 检查行为面板中的事件 确定设置为 Onload 2 保存网页并在浏览器中预览 效果如图6 3 34所示 注意 若熟悉JavaScript语言 也可以在 消息 文本框中加一些JavaScript之类的函数上去 让该文本