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

第12章为页面元素添加行为

——增加“设计”页面动感效果计算机工程学院计算机基础教学部第12章为页面元素添加行为

——增加“设计”页面动感效果计学习目标了解脚本语言的基本用途了解行为的基本概念和构成了解动作和事件的含义掌握“行为”面板的使用方法掌握常用内置行为的操作方法网页设计与制作实用教程（第3版）2深圳职业技术学院计算机基础教研室学习目标了解脚本语言的基本用途网页设计与制作实用教程（第3版实训项目为了让“深圳慧衡科技有限公司”网站的二级页面“设计”更富有动感效果，需要：(1)页面中的文本和图像之间能有一些丰富的交互式动态效果。(2)在网站上发布活动通知。网页设计与制作实用教程（第3版）3深圳职业技术学院计算机基础教研室实训项目为了让“深圳慧衡科技有限公司”网站的二级页面“设计”项目分析设计思路：（1）本页面的功能是让页面和其中的文本和图像具有动感效果，因而，已完成的版面布局、配色方案无需改变。（2）主要工作是针对不同的页面对象，利用系统提供的多种内置行为设计出丰富、和谐、动感的效果。网页设计与制作实用教程（第3版）4深圳职业技术学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）4深圳职业设计目标（1）网页设计与制作实用教程（第3版）5深圳职业技术学院计算机基础教研室设计目标（1）网页设计与制作实用教程（第3版）5深圳职业技术设计目标（2）网页设计与制作实用教程（第3版）6深圳职业技术学院计算机基础教研室页面页面对象效果要求内置行为“活动通知”design_note.html“关闭窗口”图像单击之后，会关闭所在页面。调用JavaScript“设计”design_behavior.html页面打开页面的同时，弹出“活动通知”页面。打开浏览器窗口“im-drupal-4.jpg”等5个图像鼠标移至某个图像上时，“text”APDIV就显示出来。显示元素鼠标移出某个图像时，“text”APDIV就会隐藏。隐藏元素鼠标移至某个图像上，“text”APDIV中就显示与图像相对应的文本。设置容器的文本鼠标单击某个图像时，“text”APDIV中显示的文本的字形、字号会改变。改变属性鼠标双击某个图像时，“text”APDIV中显示的文本的字形、字号恢复。改变属性鼠标移至某个图像上时，图像本身大小恢复、并逐渐清晰。显示、遮帘效果鼠标移出某个图像时，图像本身缩短、并逐渐模糊。渐隐、遮帘效果设计目标（2）网页设计与制作实用教程（第3版）6深圳职业技术预备知识：脚本语言简介（1）1.基本特点：（1）脚本语言介于HTML与C、Java及C#等编程语言之间，它也是一种由程序代码组成的语言。（2）脚本语言是一种解释性的语言，它不用像C、Java等编程语言需要编译成二进制代码、以可执行文件的形式存在，脚本语言无需编译，可以直接使用，由解释器来负责解释。2.JavaScript：（1）JavaScript是一种内置支持类型的解释型脚本语言，其解释器（称为JavaScript引擎）为浏览器的一部分，能给客户提供更流畅的浏览效果。（2）在Dreamweaver中向页面的HTML插入脚本的方法包括使用Dreamweaver命令、直接将脚本插入到HTML文档中以及写成单独的js文件以利于结构和行为的分离。网页设计与制作实用教程（第3版）7深圳职业技术学院计算机基础教研室预备知识：脚本语言简介（1）1.基本特点：网页设计与制作实预备知识：脚本语言简介（2）2.JavaScript：（3）将JavaScript代码直接插入到HTML文档中时，必须使用HTML标签来标明所嵌入的是JavaScript代码。这种标签格式为：<scriptlanguage="JavaScript">JavaScript代码</script>（4）对于一些复杂的脚本，为了维护方便，可以将它们单独放在一个源文件中，并将其命名为*.js。在HTML文档中可以通过以下方法来调用.js文件：<scriptlanguage="JavaScript"src="*.js"></script>网页设计与制作实用教程（第3版）8深圳职业技术学院计算机基础教研室预备知识：脚本语言简介（2）2.JavaScript：网页预备知识：行为行为（Behaviors）集成在Dreamweaver中用来自动实现网页的动态效果和交互的JavaScript脚本程序。1.动作：预先编写好的JavaScript脚本，用于执行指定的任务。Dreamweaver中内置了一些行为动作。网页设计与制作实用教程（第3版）9深圳职业技术学院计算机基础教研室预备知识：行为行为（Behaviors）集成在Dreamwe预备知识：行为2.事件：可以被JavaScript侦测到的用户行为，网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。一些常用的事件。（1）Window事件：window对象触发的事件onLoad、onUnload事件：当用户进入或离开页面时会触发；onFocus、OnBlur事件：当窗口获得或失去焦点时会触发；onError事件：当错误发生时会触发。（2）鼠标事件：由鼠标或相似的用户动作触发的事件onClick、onDblclick事件：当单击或双击鼠标时会触发；onMouseMove、onMouseOver、onMouseOut事件：当鼠标指针移动、移至元素之上或移出元素时会触发；onMouseUp、onMouseDown事件：当松开或按下鼠标按钮时会触发。网页设计与制作实用教程（第3版）10深圳职业技术学院计算机基础教研室预备知识：行为2.事件：网页设计与制作实用教程（第3版）10制作流程任务1：使用“打开浏览器窗口”行为弹出“活动通知”页面任务4：使用“设置容器的文本”行为改变APDIV中的文本任务5：使用“改变属性”行为改变APDIV中文本的格式任务3：使用“显示-隐藏元素”行为改变APDIV的可见性任务2：使用“调用JavaScript”行为关闭当前窗口任务6：使用“效果”行为改变图像的显示方式网页设计与制作实用教程（第3版）11深圳职业技术学院计算机基础教研室制作流程任务1：使用“打开浏览器窗口”行为弹出“活动通知”页任务1——使用“打开浏览器窗口”行为弹出“活动通知”页面网页设计与制作实用教程（第3版）12深圳职业技术学院计算机基础教研室任务1——使用“打开浏览器窗口”行为弹出“活动通知”页面网STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）13

在打开“设计”页面的同时，弹出“活动通知”页面窗口。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务2——使用“调用JavaScript”行为关闭当前窗口网页设计与制作实用教程（第3版）14深圳职业技术学院计算机基础教研室任务2——使用“调用JavaScript”行为关闭当前窗口STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）15在“活动通知”页面中，单击“关闭窗口”图像，可以将该页面关闭。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务3——使用“显示-隐藏元素”行为改变APDIV的可见性网页设计与制作实用教程（第3版）16深圳职业技术学院计算机基础教研室任务3——使用“显示-隐藏元素”行为改变APDIV的可见STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）17在“设计”页面中，当鼠标移至“im-drupal-4.jpg”图像上时，“text”APDIV（“文字素材”）就显示出来；而当鼠标移出该图像时，“text”APDIV就会隐藏。用相同的方法，为“WWF_image004.jpg”、“magento_meckey.jpg”、“ShopEx_G8.jpg”、“WWF_image006.jpg”等其它4个图像添加相同的“显示-隐藏元素”行为，达到相同的效果。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务4——使用“设置容器的文本”行为改变APDIV中的文本网页设计与制作实用教程（第3版）18深圳职业技术学院计算机基础教研室任务4——使用“设置容器的文本”行为改变APDIV中的文STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）19在“设计”页面中，随着鼠标移至不同的图像上，“text”APDIV中就显示与图像相对应的文本。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务5——使用“改变属性”行为改变APDIV中文本的格式网页设计与制作实用教程（第3版）20深圳职业技术学院计算机基础教研室事件元素ID属性值说明onClickDIV“text”fontStyleitalic字形：斜体onClickDIV“text”fontSize12pt字号：12ptonDblClickDIV“text”fontStylenormal字形：常规onDblClickDIV“text”fontSize10pt字号：10pt任务5——使用“改变属性”行为改变APDIV中文本的格式STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）21在“设计”页面中，当鼠标单击“im-drupal-4.jpg”图像时，“text”APDIV显示的文本变成斜体、大小为12pt；而当鼠标双击该图像时，显示的文本恢复正常、大小也变为10pt；这需要增加4个“更改属性”行为。用相同的方法，为其它4个图像添加“改变属性”行为，可以自行设计，尝试选择不同的页面对象和相应的需要修改的属性。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务6——使用“效果”行为改变图像的显示方式网页设计与制作实用教程（第3版）22深圳职业技术学院计算机基础教研室事件目标元素效果持续时间效果详细onMouseOverdiv“img3_drupal”500显示显示自30%到100%onMouseOverdiv“img3_drupal”500向下遮帘向下遮帘自70%到100%onMouseOutdiv“img3_drupal”1500渐隐渐隐自100%到30%onMouseOutdiv“img3_drupal”1500向上遮帘向上遮帘自100%到70%任务6——使用“效果”行为改变图像的显示方式网页设计与制作STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）23在“设计”页面中，当鼠标移至“im-drupal-4.jpg”图像上时，图像本身大小恢复、并逐渐清晰；而当鼠标移出该图像时，图像本身缩短、并逐渐模糊；这需要增加4个“效果”行为。用相同的方法，为其它4个图像添加“效果”行为，可以自行设计，尝试选择不同的效果和相应的参数。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用项目总结为页面元素

添加行为

以增加网页

动感效果使用“打开浏览器窗口”行为

弹出“活动通知”页面使用“调用JavaScript”行为

关闭当前窗口使用“显示-隐藏元素”行为

改变APDIV的可见性使用“设置容器的文本”行为

改变APDIV中的文本使用“改变属性”行为

改变APDIV中文本的格式使用“效果”行为

改变图像的显示方式网页设计与制作实用教程（第3版）24深圳职业技术学院计算机基础教研室项目总结为页面元素

添加行为

以增加网页

动感效果使用“打开课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所学的行为方面的知识，为网页设计和制作丰富的动态效果。要求如下：要为页面和其中的页面元素都设计相应的动态效果。使用的内置行为种类应超过5个。同步测试

通过教材第12章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所第12章为页面元素添加行为

——增加“设计”页面动感效果计算机工程学院计算机基础教学部第12章为页面元素添加行为

——增加“设计”页面动感效果计学习目标了解脚本语言的基本用途了解行为的基本概念和构成了解动作和事件的含义掌握“行为”面板的使用方法掌握常用内置行为的操作方法网页设计与制作实用教程（第3版）27深圳职业技术学院计算机基础教研室学习目标了解脚本语言的基本用途网页设计与制作实用教程（第3版实训项目为了让“深圳慧衡科技有限公司”网站的二级页面“设计”更富有动感效果，需要：(1)页面中的文本和图像之间能有一些丰富的交互式动态效果。(2)在网站上发布活动通知。网页设计与制作实用教程（第3版）28深圳职业技术学院计算机基础教研室实训项目为了让“深圳慧衡科技有限公司”网站的二级页面“设计”项目分析设计思路：（1）本页面的功能是让页面和其中的文本和图像具有动感效果，因而，已完成的版面布局、配色方案无需改变。（2）主要工作是针对不同的页面对象，利用系统提供的多种内置行为设计出丰富、和谐、动感的效果。网页设计与制作实用教程（第3版）29深圳职业技术学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）4深圳职业设计目标（1）网页设计与制作实用教程（第3版）30深圳职业技术学院计算机基础教研室设计目标（1）网页设计与制作实用教程（第3版）5深圳职业技术设计目标（2）网页设计与制作实用教程（第3版）31深圳职业技术学院计算机基础教研室页面页面对象效果要求内置行为“活动通知”design_note.html“关闭窗口”图像单击之后，会关闭所在页面。调用JavaScript“设计”design_behavior.html页面打开页面的同时，弹出“活动通知”页面。打开浏览器窗口“im-drupal-4.jpg”等5个图像鼠标移至某个图像上时，“text”APDIV就显示出来。显示元素鼠标移出某个图像时，“text”APDIV就会隐藏。隐藏元素鼠标移至某个图像上，“text”APDIV中就显示与图像相对应的文本。设置容器的文本鼠标单击某个图像时，“text”APDIV中显示的文本的字形、字号会改变。改变属性鼠标双击某个图像时，“text”APDIV中显示的文本的字形、字号恢复。改变属性鼠标移至某个图像上时，图像本身大小恢复、并逐渐清晰。显示、遮帘效果鼠标移出某个图像时，图像本身缩短、并逐渐模糊。渐隐、遮帘效果设计目标（2）网页设计与制作实用教程（第3版）6深圳职业技术预备知识：脚本语言简介（1）1.基本特点：（1）脚本语言介于HTML与C、Java及C#等编程语言之间，它也是一种由程序代码组成的语言。（2）脚本语言是一种解释性的语言，它不用像C、Java等编程语言需要编译成二进制代码、以可执行文件的形式存在，脚本语言无需编译，可以直接使用，由解释器来负责解释。2.JavaScript：（1）JavaScript是一种内置支持类型的解释型脚本语言，其解释器（称为JavaScript引擎）为浏览器的一部分，能给客户提供更流畅的浏览效果。（2）在Dreamweaver中向页面的HTML插入脚本的方法包括使用Dreamweaver命令、直接将脚本插入到HTML文档中以及写成单独的js文件以利于结构和行为的分离。网页设计与制作实用教程（第3版）32深圳职业技术学院计算机基础教研室预备知识：脚本语言简介（1）1.基本特点：网页设计与制作实预备知识：脚本语言简介（2）2.JavaScript：（3）将JavaScript代码直接插入到HTML文档中时，必须使用HTML标签来标明所嵌入的是JavaScript代码。这种标签格式为：<scriptlanguage="JavaScript">JavaScript代码</script>（4）对于一些复杂的脚本，为了维护方便，可以将它们单独放在一个源文件中，并将其命名为*.js。在HTML文档中可以通过以下方法来调用.js文件：<scriptlanguage="JavaScript"src="*.js"></script>网页设计与制作实用教程（第3版）33深圳职业技术学院计算机基础教研室预备知识：脚本语言简介（2）2.JavaScript：网页预备知识：行为行为（Behaviors）集成在Dreamweaver中用来自动实现网页的动态效果和交互的JavaScript脚本程序。1.动作：预先编写好的JavaScript脚本，用于执行指定的任务。Dreamweaver中内置了一些行为动作。网页设计与制作实用教程（第3版）34深圳职业技术学院计算机基础教研室预备知识：行为行为（Behaviors）集成在Dreamwe预备知识：行为2.事件：可以被JavaScript侦测到的用户行为，网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。一些常用的事件。（1）Window事件：window对象触发的事件onLoad、onUnload事件：当用户进入或离开页面时会触发；onFocus、OnBlur事件：当窗口获得或失去焦点时会触发；onError事件：当错误发生时会触发。（2）鼠标事件：由鼠标或相似的用户动作触发的事件onClick、onDblclick事件：当单击或双击鼠标时会触发；onMouseMove、onMouseOver、onMouseOut事件：当鼠标指针移动、移至元素之上或移出元素时会触发；onMouseUp、onMouseDown事件：当松开或按下鼠标按钮时会触发。网页设计与制作实用教程（第3版）35深圳职业技术学院计算机基础教研室预备知识：行为2.事件：网页设计与制作实用教程（第3版）10制作流程任务1：使用“打开浏览器窗口”行为弹出“活动通知”页面任务4：使用“设置容器的文本”行为改变APDIV中的文本任务5：使用“改变属性”行为改变APDIV中文本的格式任务3：使用“显示-隐藏元素”行为改变APDIV的可见性任务2：使用“调用JavaScript”行为关闭当前窗口任务6：使用“效果”行为改变图像的显示方式网页设计与制作实用教程（第3版）36深圳职业技术学院计算机基础教研室制作流程任务1：使用“打开浏览器窗口”行为弹出“活动通知”页任务1——使用“打开浏览器窗口”行为弹出“活动通知”页面网页设计与制作实用教程（第3版）37深圳职业技术学院计算机基础教研室任务1——使用“打开浏览器窗口”行为弹出“活动通知”页面网STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）38

在打开“设计”页面的同时，弹出“活动通知”页面窗口。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务2——使用“调用JavaScript”行为关闭当前窗口网页设计与制作实用教程（第3版）39深圳职业技术学院计算机基础教研室任务2——使用“调用JavaScript”行为关闭当前窗口STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）40在“活动通知”页面中，单击“关闭窗口”图像，可以将该页面关闭。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务3——使用“显示-隐藏元素”行为改变APDIV的可见性网页设计与制作实用教程（第3版）41深圳职业技术学院计算机基础教研室任务3——使用“显示-隐藏元素”行为改变APDIV的可见STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）42在“设计”页面中，当鼠标移至“im-drupal-4.jpg”图像上时，“text”APDIV（“文字素材”）就显示出来；而当鼠标移出该图像时，“text”APDIV就会隐藏。用相同的方法，为“WWF_image004.jpg”、“magento_meckey.jpg”、“ShopEx_G8.jpg”、“WWF_image006.jpg”等其它4个图像添加相同的“显示-隐藏元素”行为，达到相同的效果。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务4——使用“设置容器的文本”行为改变APDIV中的文本网页设计与制作实用教程（第3版）43深圳职业技术学院计算机基础教研室任务4——使用“设置容器的文本”行为改变APDIV中的文STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）44在“设计”页面中，随着鼠标移至不同的图像上，“text”APDIV中就显示与图像相对应的文本。STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用任务5——使用“改变属性”行为改变APDIV中文本的格式网页设计与制作实用教程（第3版）45深圳职业技术学院计算机基础教研室事件元素ID属性值说明onClickDIV“text”fontStyleitalic字形：斜体onClickDIV“text”fontSize12pt字号：12ptonDblClickDIV“text”fontStylenormal字形：常规onDblClickDIV“text”fontSize10pt字号：10pt任务5——使用“改变属性”行为改变APDIV中文本的格式STEP：深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）46在“设计”页面中，当鼠标单击“im-drupal-4.jpg”图像时，“text”APDIV显示的文本变成斜体、大小为12pt；而当鼠标双击该图像时，显示的文本恢复正常、大小也变为10pt；这需要增加4个“更改属性”行为。用相同的方法，为其它4个图像添加“改