(中职）网页制作基础（Dreamweaver CS6）（第2版）项目五 使用行为添加导航特效电子课件（）.pptx

《(中职）网页制作基础（Dreamweaver CS6）（第2版）项目五 使用行为添加导航特效电子课件（）.pptx》由会员分享，可在线阅读，更多相关《(中职）网页制作基础（Dreamweaver CS6）（第2版）项目五 使用行为添加导航特效电子课件（）.pptx（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、(中职）网页制作基础（Dreamweaver CS6）（第2版）项目五 使用行为添加导航特效电子课件（工信版）项目五 使用行为添加导航特效项目目标（1）了解Dreamweaver CS6行为的概念；（2）了解Dreamweaver CS6行为的创建及应用；（3）掌握使用行为创建按钮、窗口、菜单等导航特效的方法。项目描述 本项目将通过3个任务来说明如何利用Dreamweaver CS6的行为来制作导航的按钮特效、打开浏览器窗口及跳转菜单等。任务1 使用Spry效果制作按钮特效n任务任务目标目标（1）了解Dreamweaver CS6行为的概念；（2）了解Dreamweaver CS6的行为面板；

2、（3）了解Dreamweaver CS6的内置行为；（4）理解Spry特效的种类；（5）掌握使用Spry效果制作按钮特效的方法。任务1 使用Spry效果制作按钮特效n任务任务描述描述 Spry特效几乎可以应用到HTML页面中的任何元素上，使用这些特效可以实现网页元素的放大/缩小、发光、淡化、高光等。Spry特效的行为主要包括“增大/收缩”“挤压”“显示/渐隐”“晃动”“滑动”“遮帘”“高亮颜色”等。本任务主要通过使用Spry效果来制作导航按钮特效，介绍行为的概念及行为面板的使用。任务1 使用Spry效果制作按钮特效n任务分析任务分析 本任务主要讲解使用Spry效果制作按钮特效的过程，了解行为的

3、概念，熟悉行为面板的操作，掌握“高亮颜色”的操作方法。操作步骤n步骤步骤1打开素材网页文档，选中需要应用行为的对象。n步骤步骤2设置“高亮颜色”。（1）选择“窗口”“行为”命令，如图5-3所示，打开“行为”面板。（2）选中已创建的“登录”按钮，单击“行为”面板中的“添加行为”按钮 ，在弹出的下拉列表中选择“效果”“高亮颜色”选项。（3）弹出“高亮颜色”对话框，输入需要的信息，设置完毕后单击“确定”按钮。（4）在事件下拉列表中选择“onMouseOver”选项，即鼠标指针在选中元素上面时触发该事件。操作步骤n步骤步骤3在浏览器上进行验证操作。（1）单击 ，图标或按F12键，在浏览器中预览（2）将

4、鼠标指针移动到“网络推广”超级链接上方时即显示高亮颜色。配置前 配置后n步骤步骤4使用相同的方法为“域名注册”“企业邮局”“联系我们”“网站地图”设置“高亮颜色”特效。知识链接 行为，是事件及事件所触发的动作的集合。行为通过这些动作来实现用户与页面的交互。行为包含3个重要的组成部分：对象、事件与动作。1对象对象 对象是发生行为的主体，包括图片、文字、多媒体文件，乃至整个网络。2事件事件 事件是触发动态效果的条件，是网页浏览者针对对象所做的动作。3动作动作 动作是Dreamweaver CS6内置的、可执行的JavaScript代码，是网页最终产生的动态效果。拓展与提高 Spry特效简介如下。特

5、效简介如下。增大/收缩：该行为使对象产生伸展或收缩的效果。挤压：该行为使对象产生不同事件下触发的挤压效果。显示/渐隐：该行为使对象产生逐渐显示或隐藏的效果。晃动：该行为使对象产生不同事件下触发的晃动效果。滑动：该行为使对象产生不同事件下触发的向上滑动或向下滑动的效果。遮帘：该行为使对象产生向上或向下的百叶窗效果。高亮颜色：该行为使对象产生不同事件下触发不同颜色的高亮效果。试一试 参照本书素材“素材项目5示例01”文件夹中的素材，新建网页文档，尝试应用“增大/收缩”“挤压”“显示/渐隐”“晃动”“滑动”“遮帘”“高亮颜色”等行为来体会Spry特效。任务2 制作打开浏览器窗口n任务任务目标目标（1

6、）掌握Dreamweaver CS6“行为”面板的操作；（2）能灵活使用不同的内置行为；（3）掌握制作打开浏览器窗口的操作方法。n任务任务描述描述 网页文件中最常用的JavaScript源代码是调节浏览器窗口的代码，它可以按照要求打开新窗口或者编辑浏览窗口的名称、大小、菜单栏、状态栏等属性。使用“打开浏览器窗口”行为可以打开一个新的浏览器窗口，显示指定的网页文档，同时可以指定新窗口的相关属性。通过本任务可以熟悉Dreamweaver CS6的“行为”面板及常用内置行为。n任务分析任务分析 利用“打开浏览器窗口”行为，在页面中制作打开窗口。此行为常常用于网页访问者单击缩略图时，在一个单独窗口中打

7、开一个较大的图像；或者用于创建接入网页打开事件窗口的时候，如打开广告小窗口等。操作步骤n步骤步骤1应用“打开浏览器窗口”行为。（1）单击页面中的标签，选择“窗口”“行为”命令，打开“行为”面板，单击“添加行为”按钮 ，在弹出的下拉列表中选择“打开浏览器窗口”选项。（2）弹出“打开浏览器窗口”对话框，单击“要显示的URL”文本框右侧的“浏览”按钮。（3）弹出“选择文件”对话框，选择需要的网页文档，单击“确定”按钮。（4）设置新打开的“打开浏览器窗口”的其他属性，按照需要配置完成后单击“确定”按钮。（5）在右侧的“行为”面板中，会显示选择事件“onLoad”和“打开浏览器窗口”。操作步骤n步骤步骤

8、2在浏览器上进行验证操作。（1）单击 图标或按F12键在浏览器中预览。（2）在新打开的窗口中，显示“关于我们”的页面信息。知识链接1内置行为内置行为 内置行为实际上就是为网页添加了一些基本的JavaScript代码，方便网页设计者的操作，使网页呈现动态的效果。2JavaScript事件类型事件类型 事件通常用于指定行为动作在何种情况下发生，是浏览器响应用户操作的机制，JavaScript的事件处理功能可改变浏览器响应这些操作的方式，这样将使网页操作更具交互性。拓展与提高 “调用JavaScript”动作允许用户使用“行为”面板指定当发生某个事件时应该执行的自定义函数或JavaScript代码。

9、弹出“调用JavaScript”对话框的操作步骤如下：选择“窗口”“行为”命令，打开“行为”面板，单击“添加行为”按钮 ，在弹出的下拉列表中选择“调用JavaScript”选项，即可弹出“调用JavaScript”对话框。在“JavaScript”文本框中输入需要执行的JavaScript代码或函数的名称即可。试一试 参照本书素材“素材项目5示例02”文件夹中的素材，新建两个网页文档“我的首页”“我的弹出页面”，使用“行为”面板中的“打开浏览器窗口”行为制作打开窗口。任务3 制作跳转菜单n任务任务目标目标（1）熟悉JavaScript事件的意义与使用；（2）学会使用行为制作跳转菜单的方法。n任

10、务任务描述描述 跳转菜单指网页文档中的弹出式菜单，它对网页的浏览者是可见的，还能够显示连接到的文档。它可以创建到整个Web站点内文档的超级链接、到其他Web站点上文档的超级链接、电子邮件超级链接、图形的超级链接等，还可以创建到可在浏览器中打开的任何文件类型的超级链接。在网页导航的设计与制作中，经常会用到跳转菜单。n任务分析任务分析 使用行为可以控制表单元素，如常用的跳转菜单、表单验证等。Dreamweaver CS6为用户提供了跳转菜单的操作。操作步骤n步骤步骤1在表单中创建跳转菜单。（1）在“行为”面板中，如果准备制作跳转菜单，则需要先在表单中创建一个跳转菜单，才可以使用行为。选择“插入”“

11、表单”“跳转菜单”命令，创建跳转菜单。操作步骤（2）弹出“插入跳转菜单”对话框，在该对话框中依次输入“建站套餐”的内容，单击 按钮继续添加，添加完成后单击“确定”按钮，跳转菜单创建完毕。操作步骤n步骤步骤2为跳转菜单添加行为。（1）选择已创建的跳转菜单，选择“窗口”“行为”命令，打开“行为”面板。（2）单击“行为”面板中的“添加行为”按钮 ，在弹出的下拉列表中选择“跳转菜单”选项。（3）弹出“跳转菜单”对话框，在“菜单项”列表框中选择“企业入门”选项，单击“浏览”按钮，弹出“选择文件”对话框，为其添加所需链接，配置完成后单击“确定”按钮。使用相同的方法为“大众展示”“信息展示”“高级互动”“电

12、子商务”“模板王全能”等菜单项添加指定的超级链接。（4）在事件下拉列表中选择“onChange”选项，即事件会在域的内容改变时触发。操作步骤n步骤步骤3在浏览器上进行验证操作。（1）单击 图标或按F12键，在浏览器中预览。（2）选择跳转菜单中的“企业入门”菜单项，页面将跳转到指定的页面。在浏览器中预览跳转页面知识链接 “跳转菜单”与“跳转菜单开始”动作关系密切，“跳转菜单开始”允许访问者将一个按钮和一个跳转菜单关联起来，当单击按钮时，可打开在该跳转菜单中选中的超级链接。通常情况下，跳转菜单不需要这样的按钮，从跳转菜单中选择一项即可载入指定的超级链接。需要注意的是，如果网页浏览者选择了已在跳转菜单中选择的同一项，则不会发生跳转。此外，如果跳转菜单出现在一个框架中，而跳转菜单项超级链接到了其他框架中的网页，则通常需要使用这种执行按钮，以允许访问者重新选择已在跳转菜单中选择的选项。试一试 参照本书素材“素材项目5示例03”文件夹中的素材，新建网页文档，制作跳转菜单。