1 / 99

第七章 行为和时间轴

第七章 行为和时间轴. 内容简介： 行为和时间轴是 Dreamweaver MX 为增强页面效果、提高设计人员工作效率提供的功能，其实质是在页面上自动生成 JavaScript 函数，实现页面上的交互和简单动画功能。. 学习目标： 熟练掌握创建行为和时间轴的基本方法； 掌握常用行为和事件的应用，以及常用时间轴动画的设计； 了解利用行为和时间轴定义所对应的 JavaScript 函数及其调用。.

ciara
Download Presentation

第七章 行为和时间轴

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第七章 行为和时间轴

  2. 内容简介： 行为和时间轴是Dreamweaver MX为增强页面效果、提高设计人员工作效率提供的功能，其实质是在页面上自动生成JavaScript函数，实现页面上的交互和简单动画功能。

  3. 学习目标： • 熟练掌握创建行为和时间轴的基本方法； • 掌握常用行为和事件的应用，以及常用时间轴动画的设计； • 了解利用行为和时间轴定义所对应的JavaScript函数及其调用。

  4. JavaScript脚本的应用改善了网页的交互性能和显示效果，但是程序代码的编写和调式限制了它的广泛应用。为了简化页面上JavaScript脚本的开发过程并提高工作效率，Dreamweaver MX提供了行为功能。行为是Dreamweaver MX预置的JavaScript程序库。使用行为，使得网页制作人员不用编程就能够实现一些程序动作。

  5. 7．1 行为的事件和动作 • 在Dreamweaver MX中设计行为是通过行为面板来实现的. • 打开行为面板，在行为面板中按下“增加行为”按钮，就展开行为面板菜单

  6. 经常用到的几个动作主要是：播放声音、弹出信息、交换图象、打开浏览器窗口、显示一隐藏层等。经常用到的几个动作主要是：播放声音、弹出信息、交换图象、打开浏览器窗口、显示一隐藏层等。 • 常用的事件主要有以下几种： • onLoad：当页面图片被载入后，onLoad事件被触发； • onClick：当在页面上单击鼠标时，onClick事件被触发； • onMouseOver：当鼠标被移入页面元素的上，onMouseOver事件被触发； • onMouseOut：当鼠标移出页面元素时，onMouseOut事件被触发。

  7. 实例1 弹出信息 • 新建网页窗口 • 添加弹出信息动作

  8. 添加第二个弹出信息动作

  9. 输入文本信息

  10. 7．2 行为应用实例 一、设置状态栏文字 实例2设计当打开网页页面时在浏览器状态栏中显示欢迎词 • 打开一个音乐网页 • 点击“增加行为”按钮，在面板菜单中选择“设置文本→设置状态条文本”，打开设置状态条对话框。

  11. 在消息栏中输入文本

  12. 事件列选择OnLoad，动作列显示的是“显示状态条文本”，表示当文挡载入时浏览器状态栏中显示定义的文本事件列选择OnLoad，动作列显示的是“显示状态条文本”，表示当文挡载入时浏览器状态栏中显示定义的文本 • 按F12键在浏览器中浏览效果

  13. 实例3 打开新浏览器窗口 • 新建一个网页

  14. 打开上个实例的网页

  15. 添加打开浏览器窗口 • 设置Doublclick Me!!!文字颜色为绿色、加下划线、设置连接“#” • 在行为面板添加 “打开浏览器窗口”行为动作，打开对话框：

  16. 触发事件设置为onDblClick，即当鼠标双击文本的时候，弹出新的浏览器窗口。触发事件设置为onDblClick，即当鼠标双击文本的时候，弹出新的浏览器窗口。

  17. 三、制作弹出式菜单 • 菜单的好处在于可以把很多暂时不需要的命令隐藏起来，只有当鼠标点击菜单条时，才能以下拉菜单的形式显示这些隐藏的命令。 • Dreamweaver MX中提供的“显示弹出菜单”和“隐藏弹出菜单”就能够设计这样的菜单效果。

  18. 实例4 弹出式菜单(一) • 新建一个网页 • 在页面上输入网页标题文字和说明文字，并插入一个1×4的表格，表格中输入站点类别信息：

  19. 选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地址设定为“#”，并选中该文字链接；选中单元格中文本“音乐和娱乐”，在属性检查器中将连接地址设定为“#”，并选中该文字链接； • 在行为面板中，打开“显示弹出式菜单”对话框；

  20. 设定菜单项目

  21. 外观选项卡设置如下：

  22. 切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。切换到“高级”页，设定弹出式菜单无边框，其他项目为默认值。 无边框

  23. 切换到位置页，设定“菜单位置”为第二项，即“低于且位于触发器的左边缘” ；下面的“X”、“Y”栏用于指定菜单相对于文字链接左上角的位置，这里设置如图；然后选中“在发生onMouseOut事件时隐藏菜单”选项

  24. 此时控制面板窗口同时增加了两项行为： • 按同样步骤分别为文字“网络媒体”、“学校资源”和“软件资源”创建出弹出菜单。

  25. 保存文件，在浏览器中浏览弹出菜单的效果。

  26. 实例5 弹出式菜单（二） • 新建网页文件 • 在页面上输入网页标题文字和说明文字，并插入一个1×4的表格，表格中输入站点类别信息：

  27. 添加层对象：先在网页中添加一个层对象 • 要为网络导航的每个类别加上相应的站点列表，为了实现想要得到的弹出菜单的效果，我们采用层对象来排布网站列表。 • 添加表格 • 为了整齐地排列站点列表，在层中插入一个5×1的表格。

  28. 编辑站点列表和表格属性

  29. 编辑层对象 • 把层对象移动到站点类别的表格中对应的单元格的下方，保持层对象和上面的表格有一定的重叠部分。为层取名为“amuse”。 • 添加动作 • 首先选中“音乐和娱乐”所在单元格，在行为浮动面板上，单击添加按钮，选择“显示-隐藏层”动作，打开显示-隐藏层对话框。选中层amuse，单击显示按钮，设置该层可见。浮动面板上出现了第一个动作，该动作触发事件是onMouseOver(鼠标移上)。 • 还是选中“音乐和娱乐”所在单元格，同样打开显示-隐藏层对话框。选中层amuse，单击隐藏按钮，设置本动作的功能是隐藏该层对象。浮动面板上出现了第二个动作，修改该动作触发事件为onMouseout(鼠标移出)。

  30. 选中层对象，在对应的浮动面板中，设置层的显示项为Hidden，即层对象初始的可见性为隐藏 • 为层添加动作 • 选中amuse层对象，然后在行为面板中，为这个层对象添加两个显示-隐藏层动作。第一个动作是使amuse可见，触发事件是onMouseOver。然后再添加一个使amuse层隐藏的显示-隐藏层动作，触发事件设为onMouseOut。

  31. 添加其它站点列表

  32. 保存文件，浏览显示最终效果。

  33. 四、检查表单 • Dreamweaver MX的内置行为中提供了一个“检查表单”的行为，目的是在用户提交数据前检查数据的合法性。

  34. 实例 6 你填对了吗？ • 第一部分：我的注册表-----基本表单制作

  35. 第二部分： • 创建“检查表单”行为对表单数据进行合法性检查 • 添加动作 • 选中网页中的提交按钮，添加一个检查表单动作

  36. 设置username域检查

  37. 设置truename域检查

  38. 设置year域检查

  39. 设置month域检查

  40. 设置day域检查

  41. 设置intro域检查

More Related