网页交互行为

《网页交互行为》由会员分享，可在线阅读，更多相关《网页交互行为（37页珍藏版）》请在金锄头文库上搜索。

1、第9章 网页交互行为,第1页,本章概述 本章的学习目标 主要内容,本章概述,在制作网页时，为了丰富网页内容，可以在网页中添加特效与交互。这样制作出来的网页，不但新颖、有风格，而且也能增加网站的访问量。利用行为可以高效地实现网页的互动效果，jQuery框架也可以实现网页的交互功能，而表单则是网页交互的入口。本章主要介绍行为的概念，jQuery框架及表单的用法等内容。,第2页,本章的学习目标,了解行为的概念 掌握行为的应用 了解jQuery框架 掌握表单的概念 了解操作表单的各种标签,第3页,主要内容,9.1 网页行为概述 9.2 网页行为 9.3 jQuery框架 9.4 制作表单页面 9.5

2、本章小结,第4页,9.1 网页行为概述,行为是由一个事件（Event）所触发的动作（Action），因此又把行为称为事件的响应，是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。事件是浏览器产生的有效信息，也就是访问者对网页所做的事情。不同的网页元素定义了不同的事件。例如，在大多数浏览器中，onMouseOver和onClick是与链接关联的事件，而onLoad是与图像和文档的body部分关联的事件。,第5页,主要内容,9.1 网页行为概述 9.2 网页行为 9.3 jQuery框架 9.4 制作表单页面 9.5 本章小结,第6页,9.2 网页行为,在Dreamweaver

3、中，行为是一种可视化特效编辑工具，可以使网页动态地响应用户操作、改变当前页面效果或执行某些特定的任务。Dreamweaver的行为是由JavaScript代码预先编写成的代码。这些代码可以通过简单的操作调用并嵌入到网页中，通过一些特定的事件触发代码执行。,第7页,附加行为,行为可以附加到整个文档，即附加到标签，还可以附加到文字、图像、AP元素、超链接、表单元素或多种其他HTML元素中的任何一种。 添加行为的方法 修改行为,第8页,附加行为,行为应用实例网页加载时弹出公告页,第9页,内置行为,Dreamweaver CC内置了许多行为动作，下面说明一些动作的功能。,第10页,行为的应用,标签检查

4、器面板与行为,第11页,行为的应用,文本信息行为 设置文本域文字 设置容器文本 设置状态栏文本,第12页,行为的应用,窗口信息行为 窗口信息行为也是一种比较常见的浏览器特效。该特效主要包括两种窗口信息，即弹出对话框和弹出窗口。 “弹出信息”行为用于弹出一个显示预设信息的JavaScript警告框。由于该警告框只有一个“确定”按钮，所以使用此行为可以为用户提供信息，但不能提供选择操作。 使用“打开浏览器窗口”行为可以在一个新的窗口中打开页面。同时，还可以指定该新窗口的属性、特性和名称。,第13页,行为的应用,图像效果行为 交换图像 交换图像行为是通过更改标签的src属性将一个图像和另一个图像进行

5、交换，或者交换多个图像。,第14页,行为的应用,图像效果行为 增大/收缩 Scale（增大/收缩）行为可以将网页中指定的对象按照百分比放大或缩小。并且，在用事件触发该行为后，其效果是逐渐进行增大或收缩的。,第15页,行为的应用,图像效果行为 膨胀/挤压 为网页对象设置puff（膨胀/挤压）行为可以将网页对象缩放至消失。,第16页,行为的应用,效果行为 改变属性 “改变属性”行为可以用来动态地改变某个网页对象的属性。,第17页,行为的应用,效果行为 拖动AP元素 “拖动AP元素”行为是一种交互性的行为。其作用是创建可拖动的AP元素。使用此行为可创建拼板游戏、滑块控件和其它可移动的界面元素。,第1

6、8页,行为的应用,效果行为 显示-隐藏元素 “显示-隐藏元素”行为也是一种交互行为。为AP元素设置该行为后，可以通过单击超链接、图像、按钮等对象控制AP元素的显示或隐藏。,第19页,主要内容,9.1 网页行为概述 9.2 网页行为 9.3 jQuery框架 9.4 制作表单页面 9.5 本章小结,第20页,9.3 jQuery框架,jQuery框架是一个JavaScript库，用来构建能够向站点访问者提供更丰富体验的Web页。有了jQuery，就可以使用HTML、CSS和极少量的JavaScript将XML数据合并到HTML文档中，还可以创建jQuery部件（如折叠部件和选项卡部件），向各种页

7、面元素中添加不同种类的效果。在设计上，jQuery框架的标记非常简单且便于那些具有HTML、CSS和JavaScript基础知识的用户使用。,第21页,jQuery效果,jQuery效果具有视觉增强功能，可以将它们应用于使用JavaScript的HTML页面上几乎所有的元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面元素。可以将效果直接应用于HTML元素，而无需其他自定义标签。,第22页,jQuery部件,jQuery Widget（部件）是以 DHTML 和 JavaScript 等语言编写的小型 Web 应用程序。在利用Dreamweaver制作网页时，可以在

8、网页内插入和执行，然后设置部件的样式。此外，Web Widget 帮助提供了一种将桌面体验复制到网页上的方法。 插入jQuery部件,第23页,jQuery部件,选择和编辑jQuery部件,第24页,jQuery部件,设置jQuery部件的样式,第25页,主要内容,9.1 网页行为概述 9.2 网页行为 9.3 jQuery框架 9.4 制作表单页面 9.5 本章小结,第26页,9.4 制作表单页面,互联网向浏览者提供丰富的资源，在交互式的网络中，表单是一个不可缺少的元素，是交互的一个入口。只要有交互出现的地方，就会有表单。 表单的概念 创建表单 创建表单对象 表单的应用,第27页,表单的概念

9、,表单是网页上用于输入信息的区域，例如，向文本框中输入文字或数字；在方框中打勾；使用单选按钮选中一个选项；或从一个列表中选择一个选项等。 表单标签 表单域 表单按钮,第28页,网易免费邮箱注册表单,创建表单,表单相当于一个容器，其容纳的是承载数据的表单对象，如文本框、复选框等，因此一个完整的表单至少包括表单及表单对象，二者缺一不可。 表单的属性 插入表单域,第29页,创建表单对象,插入表单对象 在Dreamweaver CC中提供了多种表单对象类型，有“文本”对象、“电子邮件”对象、“密码”对象等。下面以文本域对象说明插入表单对象的方法。,第30页,创建表单对象,插入单选按钮 单选按钮是指从一

10、组选项中只能选择一个选项。 插入复选框 复选框是指从一组选项中选择多个选项。,第31页,创建表单对象,插入列表/菜单 列表和菜单可以在有限的空间内为用户提供更多的选项。列表在滚动条中显示选项值，并可允许用户在列表中选择多个选项。菜单在下拉式菜单中显示选项值，只允许用户选择一个选项。,第32页,创建表单对象,插入跳转菜单 跳转菜单与菜单/列表对象有所不同，跳转菜单的每一个列表项目都链接到一个URL地址。一般常用于友情链接。,第33页,表单的应用,插入其他常用表单域 插入文件域：文件域的作用是用户在表单中选择文件，然后将选中的文件内容发送到服务器。 插入隐藏域：隐藏域通常用来在表单之间传递数据，一

11、般只用于脚本编程。 插入按钮：按钮的作用是控制表单操作。按钮有提交按钮和重置按钮之分。 插入图像按钮：图像按钮实质上是以图像形式显示的按钮，例如“提交”或“重置”按钮。,第34页,表单的应用,表单应用实例 完成会员注册页面，练习表单及表单的各种对象文本框、密码框、单选按钮组、复选框、下拉列表和菜单、提交按钮等的使用。,第35页,主要内容,9.1 网页行为概述 9.2 网页行为 9.3 jQuery框架 9.4 制作表单页面 9.5 本章小结,第36页,9.5 本章小结,本章全面讲述了实现网页特效与交互行为的方式。 首先，介绍了网页行为概念，添加行为的方法，并通过实例讲述了文本信息行为、窗口信息行为、图像效果行为、效果行为等行为的应用。 接下来，对Dreamweaver CC中的jQuery框架、jQuery效果及jQuery部件的应用方法进行了介绍。 之后，分别讲述了表单的概念、创建表单的方法、表单对象的类型和特点。 最后，通过实例对表单的应用进行了详细讲述。,第37页,