项目十七 应用行为创建页面动态效果教学课件（全）.pptx

《项目十七 应用行为创建页面动态效果教学课件（全）.pptx》由会员分享，可在线阅读，更多相关《项目十七 应用行为创建页面动态效果教学课件（全）.pptx（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程主讲人：项目十七 应用行为创建页面动态效果项目十七 应用行为创建页面动态效果学习目标学习目标掌握行为的概念会应用行为创建页面动态效果项目十七 应用行为创建页面动态效果项目项目简介简介在前一项目中的“层的隐藏与显示”任务中，我们初涉行为的应用，但对行为的具体操作还比较陌生。通过该项目的学习，需要掌握应用行为来创建页面动态效果以制作出网页特效，从而使自己的网页更加的绚丽多彩。本项目要完成的任务：任务一 制作弹出窗口效果任务二 制作交换图像效果任务三 制作拖动AP Div元素效果任务一 制作弹出窗口效果任务任务描述描述在用户浏览网页时，想在网页被打开的同时就弹出一个小窗口告诉浏览者一个信息，可以

2、应用行为中的弹出窗口来实现。该任务要求运用行为制作弹出窗口效果，以实现一些重要信息在第一时间被浏览者获取。该任务的需求如下所示：任务一 制作弹出窗口效果1.在“WebTest项目15”文件夹中新建15-1.html文档，并实现如图15-1所示的页面效果。图15-1 15-1.html页面浏览效果图任务一 制作弹出窗口效果2.网页设计要求（1）当浏览15-1.html页面时，打开弹出窗口（弹出窗口页面为PopWindow.html）；（2）要求弹出窗口的“宽度”为300px，“高度”为150px并只显示“状态栏”。任务一 制作弹出窗口效果知识知识储备储备1.认识行为行为是用来动态响应用户操作、改

3、变当前页面效果或执行特定任务的一种方法，使用户与网页之间产生一种交互。行为是由对象、事件和动作构成的。任务一 制作弹出窗口效果对象：是产生行为的主体，大部分网页元素都可以称为对象，如图像、文本、超链接等。事件：是触发动作的原因，由用户或浏览器所触发的选定行为动作的功能。如单击事件（onClick）；动作：是事先编写好的JavaScript代码，这些代码执行特定的任务，是最终产生的动态效果；行为：是事件和该事件触发的动作的组合，事件是产生行为的条件，动作是行为的具体结果。任务一 制作弹出窗口效果2.添加行为添加行为在行为面板中设置，点击菜单中的“窗口”，选择“行为”可打开行为面板，如图15-2所

4、示。点击行为面板上的添加按钮 ，弹出下拉菜单，如图15-3所示，从下拉菜单中选择行为并进行设置。图15-2 行为面板图15-3 行为菜单任务一 制作弹出窗口效果任务任务实施实施1.新建文档（1）新建 15-1.html文档，并保存到“WebTest/项目15”文件夹中；（2）新建PopWindow.html文档，并保存到“WebTest/项目15”文件夹中；任务一 制作弹出窗口效果（3）在15-1.html文档的“设计”视图中，把光标定位到页面的第一行位置，输入文本信息“页面加载时弹出PopWindow.html页面”并保存；（4）在PopWindow.html文档的“设计”视图中，把光标定位

5、到页面的第一行位置，输入“通知”信息（注意文本显示格式）任务一 制作弹出窗口效果2.创建行为打开15-1.html文档在菜单中点击“窗口”，选择“行为”切换到“代码”视图，把光标定位在body标签中在行为面板中点击按钮 选择“打开浏览器窗口”，弹出“打开浏览器窗口”对话框，如图15-4所示在“要显示的URL”文档框中输入“PopWindow.html”或点击“浏览”选择“PopWindow.html”文件“窗口宽度”中输入“300px”，“窗口高度”中输入“150px”,“属性”选中“状态栏”确定图15-4 打开浏览器窗口任务一 制作弹出窗口效果通过上面的操作，dreamweaver会自动生成

6、相应的javascript脚本，如下代码所示：3.保存网页，按F12在浏览器中浏览效果。任务二 制作交换图像效果任务描述任务描述通过前一任务的学习，我们掌握了行为的概念，认识了行为的构成以及创建行为的方法。该任务需要学生学会运用行为制作交换图像的动态页面效果，达到丰富网页内容提升网页设计技巧的目的。该任务的需求如下所示：任务二 制作交换图像效果1.在“WebTest项目15”文件夹中新建15-2.html文档，并实现如图15-6所示的页面效果。图15-6 15-2.html页面浏览效果图任务二 制作交换图像效果2.网页设计要求运用 “交换图像”行为制作交换图像效果，在图15-5中，左图为15-

7、2.html页面浏览时的效果图，右图为把鼠标放在左图图像后的页面效果图，当鼠标移开后又恢复到左图页面效果。任务二 制作交换图像效果任务实施任务实施1.新建文档新建 15-2.html文档，并保存到“WebTest/项目15”文件夹中；任务二 制作交换图像效果2.创建行为准备两张图像素打开15-2.html文档插入事先准备好的其中一张图片选中图片，在行为面板中点击 点击“交换图像”，弹出“交换图像”对话框，如图15-7所示在“交换图像”对话框中选择“预先载入图像”和“鼠标滑开时恢复图像”复选框在“浏览”中选择交换的第二张图片确定图15-7 交换图像对话框任务二 制作交换图像效果3.格式设置选中图

8、片点击“格式”菜单选择“对齐”点击“居中对齐”4.保存网页，按F12在浏览器中浏览效果。提示提示2：交换图像是指通过更改：交换图像是指通过更改标记的标记的src属性将一个图像和属性将一个图像和另一个图像进行交换，实现图像交换效果。另一个图像进行交换，实现图像交换效果。任务三 制作拖动AP元素效果任务描述任务描述该任务需要学生学会运用行为制作“拖到AP元素”的页面特效效果。该任务的需求如下所示：任务三 制作拖动AP元素效果1.在“WebTest项目15”文件夹中新建15-3.html文档，并实现如图15-8所示的页面效果。图15-8 15-3.html页面浏览效果图任务三 制作拖动AP元素效果任

9、务实施任务实施1.新建文档新建 15-3.html文档，并保存到“WebTest/项目15”文件夹中；任务三 制作拖动AP元素效果2.创建行为在15-3.html页面中插入一个AP Div元素设置层样式为：宽为150px，高为50px,边框为1px,边框颜色为黑色，并在层中输入“通过鼠标随意拖动层”光标离开层，在行为面板中点击 点击“拖动AP元素”，弹出“拖动AP元素”对话框，如图15-9所示在“AP元素”中选择需要拖动的AP元素名称，“移动”选择“不限制”确定图15-8 拖动AP元素对话框任务三 制作拖动AP元素效果提示：如“移动”选择“限制”时，可设置AP元素可移动的区域。4.保存网页，按F12在浏览器中浏览效果。知识拓展一、添加行为1.添加行为通过“行为”面板上的“添加行为”按钮 ，可以将行为附加到整个文档，也可以附加到图像、链接、表单元素或其他HTML元素上。知识拓展2. 选择事件在添加行为后，当单击行为列表框中“事件名称”旁边的向下箭头按钮时，会出现一个事件选择的下拉菜单，其中包含可以触发该动作的所有事件。知识拓展二、事件介绍三、JaveScript语言