《网页设计与制作》课件——项目5 使用行为添加导航特效.pptxVIP

主讲教师：1.制作弹出浏览器窗口项目5使用行为添加导航特效

学习目标掌握Dreamweavercs6行为面板的操作1能灵活使用不同的内置行为2掌握制作弹出浏览器窗口的操作方法3

在网页文件中最常使用的JavaScript源代码是调节浏览器窗口的代码，它可以按照要求打开新窗口或者编辑浏览窗口的名称、大小、菜单栏、状态栏等属性。使用“打开浏览器窗口”行为可以打开一个新的浏览器窗口，显示指定的网页文档，同时可是指定新窗口的相关属性。任务描述

通过本任务可以熟悉DreamweaverCS6软件的行为界面及常用内置行为，并使用内置行为制作弹出浏览器窗口。任务描述

利用“打开浏览器窗口”行为，在页面中制作弹出窗口。此行为常常使用在网页访问者单击缩略图时，在一个单独窗口中打开一个较大的图像；或者是在创建接入网页时出现事件窗口的时候，经常使用到这个行为，比如弹出广告小窗口等等。任务分析

01操作体验

按照教材操作步骤完成任务二。操作步骤

02知识链接

知识链接内置行为实际上就是为网页添加了一些基本的JavaScript代码，方便网页设计者的操作，使网页呈现动态的效果。1.内置行为

知识链接事件通常用于指定行为动作在何种情况下发生，是浏览器响应用户操作的机制，JavaScript的事件处理功能可改变浏览器响应这些操作的方式，这样将使网页操作更具交互性。DreamWeaverCS6提供了常用事件。2.JavaScript事件类型

常见事件及作用事件名称作用onBlur鼠标移动到窗口或框架外侧时等非激活状态时发生的事件onChick单击选定要素时发生的事件onDblClick双击选定要素时发生的事件onError加载网页文档过程中发生错误时发生的事件onFocus鼠标到窗口或框架中处于激活状态时发生的事件onKeyDown键盘上某个键被按下时触发事件onKeyPress键盘上按下某个键被释放时触发事件onKeyUp放开按下的键盘中指定键时发生的事件

常见事件及作用事件名称作用onLoad选定的对象出现在浏览器上时发生的事件onMouseDown单击时发生的事件onMouseMove鼠标经过选定要素上面时发生的事件onMouseOut鼠标离开选定要素上面时发生的事件onMouseOver鼠标在选定要素上面时发生的事件onMouseUp释放按住的鼠标左键时发生的事件onUnLoad访问者退出网页文档时发生的事件

03拓展与提高

调用JavaScript“调用JavaScript”动作允许用户使用“行为面板”指定当发生某个事件时应该执行的自定义函数或JavaScript代码。打开“调用JavaScript”的操作步骤为“窗口”→“行为”命令，打开行为面板，单击在弹出菜单中选择“调用JavaScript”，即打开“调用JavaScript”对话框。100%

请参照附书光盘“素材\项目五\示例\02”文件夹素材，新建两个网页文档：“我的首页”、“我的弹出页面”，使用行为面板上的“打开浏览器窗口”制作弹出窗口。试一试

主讲教师：2.制作跳转菜单项目5使用行为添加导航特效

学习目标熟悉JavaScript事件的意义与使用1学会使用行为制作跳转菜单2

【跳转菜单】是指网页文档中的弹出菜单，它对网页的浏览者是可见的，同时还能够显示出连接到的文档。它可以创建到整个Web站点内文档的链接、到其他Web站点上文档的链接、电子邮件链接、图形的链接等，还可以创建到可在浏览器中打开的任何文件类型的链接。在网页导航的设计与制作中，经常会用到跳转菜单。任务描述

使用行为可以控制表单元素，比如常用的跳转菜单、表单验证等。DreamweaverCS6为我们提供了跳转菜单的操作。任务分析

01操作体验

按照教材操作步骤完成任务三。操作步骤

02知识链接

知识链接“跳转菜单”与“跳转菜单开始”“跳转菜单”与“跳转菜单开始”动作关系密切，“跳转菜单开始”允许访问者将一个按钮和一个跳转菜单关联起来，当单击按钮时则打开在该跳转菜单中选中的链接。通常情况下，跳转菜单不需要这样的按钮，从跳转菜单中选择一项即可载入指定的链接。100%

知识链接“跳转菜单”与“跳转菜单开始”需要注意的是，如果网页浏览者选择已在跳转菜单中选择同一项，则不会发生跳转。此外，如果跳转菜单出现在一个框架中，而跳转菜单项链接到其他框架中的网页，则通常需要使用这种执行按钮，已允许访问者重新选择已在跳转菜单中选择的项。100%

请参照附书光盘“素材\项目五\示例\03”文件夹素材，新建网页文档，制作跳转菜单。试一试

03实训：制作弹出窗口

为网页制作弹出窗口。任务描述

一个网站通常包括根文件夹、存放各类文件的子文件夹，还有网页文件。Dreamweavercs3为我们提供了方便的站点管理