(教学课件)chapter12-为页面元素添加行为.pptx

1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第12章 为页面元素添加行为增加“设计”页面动感效果计 算 机 工 程 学 院 计 算 机 基 础 教 学部学习目标 了解脚本语言的基本用途 了解行为的基本概念和构成 了解动作和事件的含义 掌握“行为”面板的使用方法 掌握常用内置行为的操作方法网 页 设 计 与 制 作 实 用 教 程（第 3 版）2深圳职业技术学院计算机基础教研室实训项目为了让“深圳慧衡科技有限公司”网站的二级页面“设计”更富有动感效果，需要：(1)页面中的文本和图像之间能有一些丰富的交互式动态效果。(2)在网站上发布活动通知。网

2、页 设 计 与 制 作 实 用 教 程（第 3 版）3深圳职业技术学院计算机基础教研室项目分析设计思路：（1）本页面的功能是让页面和其中的文本和图像具有动感效果，因而，已完成的版面布局、配色方案无需改变。（2）主要工作是针对不同的页面对象，利用系统提供的多种内置行为设计出丰富、和谐、动感的效果。网 页 设 计 与 制 作 实 用 教 程（第 3 版）4深圳职业技术学院计算机基础教研室设计目标（1 1）网 页 设 计 与 制 作 实 用 教 程（第 3 版）5深圳职业技术学院计算机基础教研室设计目标（2 2）网 页 设 计 与 制 作 实 用 教 程（第 3 版）6深圳职业技术学院计算机基础教研

3、室页面页面对象效果要求内置行为“活动通知”design_note.html“关闭窗口”图像单击之后，会关闭所在页面。调用JavaScript“设计”design_behavior.html页面打开页面的同时，弹出“活动通知”页面。打开浏览器窗口“im-drupal-4.jpg”等5个图像鼠标移至某个图像上时，“text”AP DIV就显示出来。显示元素鼠标移出某个图像时，“text”AP DIV就会隐藏。隐藏元素鼠标移至某个图像上，“text”AP DIV中就显示与图像相对应的文本。设置容器的文本鼠标单击某个图像时，“text”AP DIV中显示的文本的字形、字号会改变。改变属性鼠标双击某个图

4、像时，“text”AP DIV中显示的文本的字形、字号恢复。改变属性鼠标移至某个图像上时，图像本身大小恢复、并逐渐清晰。显示、遮帘效果鼠标移出某个图像时，图像本身缩短、并逐渐模糊。渐隐、遮帘效果预备知识：脚本语言简介（1 1）1.基本特点：（1）脚本语言介于HTML与C、Java及C#等编程语言之间，它也是一种由程序代码组成的语言。（2）脚本语言是一种解释性的语言，它不用像C、Java等编程语言需要编译成二进制代码、以可执行文件的形式存在，脚本语言无需编译，可以直接使用，由解释器来负责解释。2.JavaScript：（1）JavaScript是一种内置支持类型的解释型脚本语言，其解释器（称为J

5、avaScript引擎）为浏览器的一部分，能给客户提供更流畅的浏览效果。（2）在Dreamweaver中向页面的HTML插入脚本的方法包括使用Dreamweaver命令、直接将脚本插入到HTML文档中以及写成单独的js文件以利于结构和行为的分离。网 页 设 计 与 制 作 实 用 教 程（第 3 版）7深圳职业技术学院计算机基础教研室预备知识：脚本语言简介（2 2）2.JavaScript：（3）将JavaScript代码直接插入到HTML文档中时，必须使用HTML标签来标明所嵌入的是JavaScript代码。这种标签格式为：JavaScript代码（4）对于一些复杂的脚本，为了维护方便，可以

6、将它们单独放在一个源文件中，并将其命名为*.js。在HTML文档中可以通过以下方法来调用.js文件：网 页 设 计 与 制 作 实 用 教 程（第 3 版）8深圳职业技术学院计算机基础教研室预备知识：行为行为（Behaviors）集成在Dreamweaver中用来自动实现网页的动态效果和交互的JavaScript脚本程序。预先编写好的JavaScript脚本，用于执行指定的任务。Dreamweaver中内置了一些行为动作。网 页 设 计 与 制 作 实 用 教 程（第 3 版）9深圳职业技术学院计算机基础教研室预备知识：行为：可以被 JavaScript 侦测到的用户行为，网页中的每个元素都可

7、以产生某些可以触发JavaScript函数的事件。一些常用的事件。（1）Window 事件：window对象触发的事件onLoad、onUnload事件：当用户进入或离开页面时会触发；onFocus、OnBlur事件：当窗口获得或失去焦点时会触发；onError事件：当错误发生时会触发。（2）鼠标事件：由鼠标或相似的用户动作触发的事件onClick、onDblclick事件：当单击或双击鼠标时会触发；onMouseMove、onMouseOver、onMouseOut事件：当鼠标指针移动、移至元素之上或移出元素时会触发；onMouseUp、onMouseDown事件：当松开或按下鼠标按钮时会触

8、发。网 页 设 计 与 制 作 实 用 教 程（第 3 版）10深圳职业技术学院计算机基础教研室制作流程任务1：使用“打开浏览器窗口”行为弹出“活动通知”页面任务4：使用“设置容器的文本”行为改变AP DIV中的文本任务5：使用“改变属性”行为改变AP DIV中文本的格式任务3：使用“显示-隐藏元素”行为改变AP DIV的可见性任务2：使用“调用JavaScript”行为关闭当前窗口任务6：使用“效果”行为改变图像的显示方式网 页 设 计 与 制 作 实 用 教 程（第 3 版）11深圳职业技术学院计算机基础教研室任务1 1 使用“打开浏览器窗口”行为弹出“活动通知”页面网 页 设 计 与 制

9、 作 实 用 教 程（第 3 版）12深圳职业技术学院计算机基础教研室STEP：深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）13在打开“设计”页面的同时，弹出“活动通知”页面窗口。任务2 2 使用“调用JAVASCRIPTJAVASCRIPT”行为关闭当前窗口网 页 设 计 与 制 作 实 用 教 程（第 3 版）14深圳职业技术学院计算机基础教研室STEP：深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）15在“活动通知”页面中，单击“关闭窗口”图像，可以将该页面关闭。任务3 3 使用“显示-隐藏元素”行为改

10、变AP DIVAP DIV的可见性网 页 设 计 与 制 作 实 用 教 程（第 3 版）16深圳职业技术学院计算机基础教研室STEP：深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）17在“设计”页面中，当鼠标移至“im-drupal-4.jpg”图像上时，“text”AP DIV（“文字素材”）就显示出来；而当鼠标移出该图像时，“text”AP DIV就会隐藏。用相同的方法，为“WWF_image004.jpg”、“magento_meckey.jpg”、“ShopEx_G8.jpg”、“WWF_image006.jpg”等其它4个图像添加相同的“显

11、示-隐藏元素”行为，达到相同的效果。任务4 4 使用“设置容器的文本”行为改变AP DIVAP DIV中的文本网 页 设 计 与 制 作 实 用 教 程（第 3 版）18深圳职业技术学院计算机基础教研室STEP：深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）19在“设计”页面中，随着鼠标移至不同的图像上，“text”AP DIV中就显示与图像相对应的文本。任务5 5 使用“改变属性”行为改变AP DIVAP DIV中文本的格式网 页 设 计 与 制 作 实 用 教 程（第 3 版）20深圳职业技术学院计算机基础教研室事件元素ID属性值说明onClick

12、DIV“text”fontStyleitalic字形：斜体onClickDIV“text”fontSize12pt字号：12ptonDblClickDIV“text”fontStylenormal字形：常规onDblClickDIV“text”fontSize10pt字号：10ptSTEP：深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）21在“设计”页面中，当鼠标单击“im-drupal-4.jpg”图像时，“text”AP DIV显示的文本变成斜体、大小为12pt；而当鼠标双击该图像时，显示的文本恢复正常、大小也变为10pt；这需要增加4个“更改属性

13、”行为。用相同的方法，为其它4个图像添加“改变属性”行为，可以自行设计，尝试选择不同的页面对象和相应的需要修改的属性。任务6 6 使用“效果”行为改变图像的显示方式网 页 设 计 与 制 作 实 用 教 程（第 3 版）22深圳职业技术学院计算机基础教研室事件目标元素效果持续时间效果详细onMouseOverdiv“img3_drupal”500显示显示自30%到100%onMouseOverdiv“img3_drupal”500向下遮帘向下遮帘自70%到100%onMouseOutdiv“img3_drupal”1500渐隐渐隐自100%到30%onMouseOutdiv“img3_drup

14、al”1500向上遮帘向上遮帘自100%到70%STEP：深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）23在“设计”页面中，当鼠标移至“im-drupal-4.jpg”图像上时，图像本身大小恢复、并逐渐清晰；而当鼠标移出该图像时，图像本身缩短、并逐渐模糊；这需要增加4个“效果”行为。用相同的方法，为其它4个图像添加“效果”行为，可以自行设计，尝试选择不同的效果和相应的参数。项目总结为页面元素添加行为以增加网页动感效果使用“打开浏览器窗口”行为弹出“活动通知”页面使用“调用JavaScript”行为关闭当前窗口使用“显示-隐藏元素”行为改变AP DIV

15、的可见性使用“设置容器的文本”行为改变AP DIV中的文本使用“改变属性”行为改变AP DIV中文本的格式使用“效果”行为改变图像的显示方式网 页 设 计 与 制 作 实 用 教 程（第 3 版）24深圳职业技术学院计算机基础教研室课后练习1.1.配套实训配套实训利用配套实训文件夹下提供的素材文件，根据所学的行为方面的知识，为网页设计和制作丰富的动态效果。要求如下：要为页面和其中的页面元素都设计相应的动态效果。使用的内置行为种类应超过5个。2.2.同步同步测试测试通过教材第12章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室