中文Dreamweaver MX案例教程 杜金 等 第6章 行为新.pptVIP

第 6 章 行为 主要内容 【实例】 有弹出式菜单的网页 【实例】 拼图游戏 【实例】 有简单的Flash播放器的网页 【实例】 有弹出窗口的网页 【实例】 可弹出信息对话框的网页 【实例】 有音乐的网页 【实例】 有跳转菜单的网页 【实例】 “图像链接翻转”网页 【实例】 有弹出式菜单的网页 实例效果 技术分析 操作步骤 一、实例效果 在网页中插入弹出式菜单后，网页在浏览器中的显示效果如图所示，当鼠标移到“班级主页”文字上面时，出现有“班级相册”、“通讯录”、“留言本”、“班级论坛”、“班级名单”等链接的下拉菜单。可以单击菜单中的项目，也可以单击“班级主页”链接到相应的页面。 下拉菜单隐藏时的效果和显示时的效果 二、技术分析 行为是动作和事件的组合。动作就是计算机系统作的一个动作，例如：弹出一个提示框、执行一段程序或一个函数、播放声音或影片、启动或停止“时间轴”面板中动画的播放等。 动作通常是指预先编写好的JavaScript程序脚本，Dreamweaver MX自带了一些动作的JavaScript程序脚本，可供用户直接调用。用户也可以自己用JavaScript语言编写JavaScript程序脚本，创建新的行为。 事件是指引发动作产生的事情，例如：鼠标移到某对象上、鼠标单击某对象、“时间轴”面板中的回放头播放到某一帧等。要创建一个行为，就是要指定一个动作，再确定触发该动作的事件。有时，某几个动作可以被相同的事件触发，则需要指定动作发生的顺序。 弹出式菜单是在网页制作中非常常用的一个技术，利用行为中层的“隐藏”和“显示”设置，达到下拉菜单的显示效果，这种方法简单，灵活，易学易用，是一个非常理想的实现方法。 三、操作步骤 新建一个网页文档，在网页的适当位置插入导航条，在导航条内插入已经制作好的“班级主页”图像，选中图像后在“属性栏”中为图像建立链接。 在“班级主页”下方，紧贴“班级主页”导航条的位置插入一个层，将层命名为“class”，并将层设置成“灰色”背景，在层中插入“班级相册”、“通讯录”、“留言本”、“班级论坛”、“班级名单”和“好友名单”，分别建立链接。 打开“行为”面板，选中“班级主页”后单击 按钮，弹出“动作名称”快捷菜单，在“动作名称”快捷菜单中选择“显示-隐藏层”，弹出“显示-隐藏层”对话框。 在“显示-隐藏层”对话框中的“命名的层”列表框中选择“层‘class’”，单击“显示”按钮，将行为设置成“显示层”，完成后单击“确定”按钮，完成“显示层”设置，这时，在“行为”面板中将出现一个事件。 单击事件后面的 按钮，弹出“事件名称”快捷菜单。在“事件名称”快捷菜单中选择OnMouseOver，将事件设置成“当鼠标经过时”。使用同样的方法，插入第二个事件，在“显示-隐藏层”中将“层‘class’”设置成“隐藏”，并在“事件名称”快捷菜单中选择OnMouseOut，将事件设置成“当鼠标移开时”。 在网页中将“class”层选中，在属性栏中的“显示”下拉列表框中选择“hidden”选项，将层设置成“初始状态下不显示”。将网页文档保存为“6-1.HTM”，按【F12】键，在浏览器中查看插入弹出式菜单后网页的显示效果。 【实例】 拼图游戏 实例效果 技术分析 操作步骤 知识进阶 一、实例效果 “拼图游戏”在网页中的显示效果如图所示。网页中有九个小图像，它的下面是一个有九个单元格的表格，表示拼图图像要移动到的区域。 “拼图游戏”网页的显示效果 将鼠标指针移动到“查看效果图”文字上面时，文字下方会显示出拼图的效果图，给出拼图的提示，如图所示。将鼠标移出“查看效果图”文字时，文字下方的效果图会自动消失。 显示出拼图的效果图 用鼠标分别拖曳拼图图像到表格内正确位置，当拼图图像离正确位置比较接近时会自动定位到正确位置。正确拼图完成后的画面效果如图所示。 正确完成拼图游戏后的画面 二、技术分析 利用“行为”中的“拖曳层”动作，可以使层脱离位置的限制，随意在网页中进行移动，而靠齐文本框设置可以使层在接近单元格的时候自动对齐，使游戏时的操作更简单。 拼图游戏是利用层和行为制作的另一个非常有意思的网页实例。利用“行为”和“层”还可以制作出很多不同效果的网页，具体的效果还要靠平时的积累和自己的反复练习。 三、操作步骤 新建一个网页文档，在网页内创建九个层，名字使用系统默认的“Layer1”到“Layer9”。在各个层中插入已经分割好的九个汽车图像，依次为“PICTURE”目录下的“CAR1.JPG”到“CAR9.JPG”。插入时最好不按正常顺序，插入完成后适当调整它们的大小和位置，最终的结果如图所示。 在拼图图像的下面创建一个层，命名为“Layer10”，在层中插入一个3行3列的表格。调整它和