网页交互行为论述_第1页
网页交互行为论述_第2页
网页交互行为论述_第3页
网页交互行为论述_第4页
网页交互行为论述_第5页
已阅读5页,还剩32页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第9章

网页交互行为本章概述本章的学习目标主要内容第1页网页设计与制作教程第1章网页设计与制作基础本章概述第2页网页设计与制作教程第1章网页设计与制作基础在制作网页时,为了丰富网页内容,可以在网页中添加特效与交互。这样制作出来的网页,不但新颖、有风格,而且也能增加网站的访问量。利用行为可以高效地实现网页的互动效果,jQuery框架也可以实现网页的交互功能,而表单则是网页交互的入口。本章主要介绍行为的概念,

jQuery框架及表单的用法等内容。本章的学习目标第3页网页设计与制作教程第1章网页设计与制作基础了解行为的概念掌握行为的应用了解jQuery框架掌握表单的概念了解操作表单的各种标签主要内容第4页网页设计与制作教程第1章网页设计与制作基础网页行为概述网页行为jQuery框架制作表单页面本章小结9.1

网页行为概述第5页网页设计与制作教程第1章网页设计与制作基础行为是由一个事件(Event)所触发的动作(Action),因此又把行为称为事件的响应,是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。事件是浏览器产生的有效信息,也就是访问者对网页所做的事情。不同的网页元素定义了不同的事件。例如,在大多数浏览器中,onmouseover和onclick是与链接

关联的事件,而onload是与图像和文档的body

部分关联的事件。主要内容第6页网页设计与制作教程第1章网页设计与制作基础网页行为概述网页行为jQuery框架制作表单页面本章小结9.2

网页行为第7页网页设计与制作教程第1章网页设计与制作基础在Dreamweaver中,行为是一种可视化特效编辑工具,可以使网页动态地响应用户操作、改变当前页面效果或执行某些特定的任务。

Dreamweaver的行为是由Javascript代码预先编写成的代码。这些代码可以通过简单的操作调用并嵌入到网页中,通过一些特定的事件触发代码执行。附加行为行为可以附加到整个文档,即附加到<body>标签,还可以附加到文

字、图像、AP元素、超链接、表

单元素或多种其他HTML元素中的

任何一种。添加行为的方法修改行为第8页网页设计与制作教程第1章网页设计与制作基础附加行为行为应用实例—网页加载时弹出公告页第9页网页设计与制作教程第1章网页设计与制作基础内置行为Dreamweaver

CC内置了许多行为动作,下面说明一些动作的功能。第10页网页设计与制作教程第1章网页设计与制作基础行为的应用标签检查器面板与行为第11页网页设计与制作教程第1章网页设计与制作基础行为的应用文本信息行为设置文本域文字设置容器文本设置状态栏文本第12页网页设计与制作教程第1章网页设计与制作基础行为的应用第13页网页设计与制作教程第1章网页设计与制作基础窗口信息行为窗口信息行为也是一种比较常见的浏览器特效。该特效主要包括两种窗口信息,即弹出对话框和弹出窗口。“弹出信息”行为用于弹出一个显示预设信息的

Javascript警告框。由于该警告框只有一个“确定”按钮,所以使用此行为可以为用户提供信息,但不能提供选择操作。使用“打开浏览器窗口”行为可以在一个新的窗口中打开页面。同时,还可以指定该新窗口的属性、特性和名称。行为的应用图像效果行为交换图像交换图像行为是通过更改<img>标签的src属性将一个图像和另一个图像进行交换,或者交换多个图像。第14页网页设计与制作教程第1章网页设计与制作基础行为的应用图像效果行为增大/收缩Scale(增大/收缩)行为可以将网页中指定的对象按照百分比放大或缩小。并且,在用事件触发该行为后,其效果是逐渐进行增大或收缩的。第15页网页设计与制作教程第1章网页设计与制作基础行为的应用图像效果行为膨胀/挤压为网页对象设置puff(膨胀/挤压)行为可以将网页对象缩放至消失。第16页网页设计与制作教程第1章网页设计与制作基础行为的应用效果行为改变属性“改变属性”行为可以用来动态地改变某个网页对象的属性。第17页网页设计与制作教程第1章网页设计与制作基础行为的应用效果行为拖动AP元素“拖动AP元素”行为是一种交互性的行为。其作用是创建可拖动的AP元素。使用此行为可创建拼板游戏、滑块控件和其它可移动的界面元素。第18页网页设计与制作教程第1章网页设计与制作基础行为的应用效果行为显示-隐藏元素“显示-隐藏元素”行为也是一种交互行为。为AP元素设置该行为后,可以通过单击超链接、图像、按钮等对象控制

AP元素的显示或隐藏。第19页网页设计与制作教程第1章网页设计与制作基础主要内容第20页网页设计与制作教程第1章网页设计与制作基础网页行为概述网页行为jQuery框架制作表单页面本章小结9.3

jQuery框架第21页网页设计与制作教程第1章网页设计与制作基础jQuery框架是一个Javascript库,用来构建能够向站点访问者提供更丰富体验的Web页。有了

jQuery,就可以使用HTML、CSS和极少量的

Javascript将XML数据合并到HTML文档中,还可以创建jQuery部件(如折叠部件和选项卡部件),向各种页面元素中添加不同种类的效果。在设计上,jQuery框架的标记非常简单且便于那些具有HTML、CSS和Javascript基础知识的用户

使用。jQuery效果jQuery效果具有视觉增强功能,可以将它们应用于使用Javascript的HTML页面上几乎所有的元素。效果通常用于在一段时间内高亮显示信息,创建动画过渡或者以可视方式修改页面元素。可以将效果直接应用于HTML元素,而

无需其他自定义标签。第22页网页设计与制作教程第1章网页设计与制作基础jQuery部件jQuery

Widget(部件)是以DHTML和

Javascript等语言编写的小型Web应用程序。在利用Dreamweaver制作网页时,可以在网页内插入和执行,然后设置部件的样式。此外,WebWidget帮助提供了一种将桌面体验复制到网页上的方法。插入jQuery部件第23页网页设计与制作教程第1章网页设计与制作基础jQuery部件选择和编辑jQuery部件第24页网页设计与制作教程第1章网页设计与制作基础jQuery部件设置jQuery部件的样式第25页网页设计与制作教程第1章网页设计与制作基础主要内容第26页网页设计与制作教程第1章网页设计与制作基础网页行为概述网页行为jQuery框架制作表单页面本章小结9.4

制作表单页面第27页网页设计与制作教程第1章网页设计与制作基础互联网向浏览者提供丰富的资源,在交互式的网络中,表单是一个不可缺少的元素,是交互的一个入口。只要有交互出现的地方,就会有表单。表单的概念创建表单创建表单对象表单的应用表单的概念表单是网页上用于输入信息的区域,例如,向文本框中输入文字或数字;在方框中打勾;使用单选按钮选中一个选项;或从一个列表中选择一个选项等。表单标签表单域表单按钮网易免费邮箱注册表单第28页网页设计与制作教程第1章网页设计与制作基础创建表单表单相当于一个容器,其容纳的是承载数据的表单对象,如文本框、复选框等,因此一个完整的表单至少包括表单及表单对象,二者缺一不可。表单的属性插入表单域第29页网页设计与制作教程第1章网页设计与制作基础创建表单对象插入表单对象在Dreamweaver

CC中提供了多种表单对象类型,有“文

本”对象、“电子邮件”对象、“密码”对象等。下面以文本域对象说明插入表单对象的方法。第30页网页设计与制作教程第1章网页设计与制作基础创建表单对象插入单选按钮单选按钮是指从一组选项中只能选择一个选项。插入复选框复选框是指从一组选项中选择多个选项。第31页网页设计与制作教程第1章网页设计与制作基础创建表单对象插入列表/菜单列表和菜单可以在有限的空间内为用户提供更多的选项。列表在滚动条中显示选项值,并可允许用户在列表中选择多个选项。菜单在下拉式菜单中显示选项值,只允许用户选择一个选项。第32页网页设计与制作教程第1章网页设计与制作基础创建表单对象插入跳转菜单跳转菜单与菜单/列表对象有所不同,跳转菜单的每一个列表项目都链接到一个URL地址。一般常用于友情链接。第33页网页设计与制作教程第1章网页设计与制作基础表单的应用第34页网页设计与制作教程第1章网页设计与制作基础插入其他常用表单域插入文件域:文件域的作用是用户在表单中选择文件,然后将选中的文件内容发送到服务器。插入隐藏域:隐藏域通常用来在表单之间传递数据,一般只用于脚本编程。插入按钮:按钮的作用是控制表单操作。按钮有提交按钮和重置按钮之分。插入图像按钮:图像按钮实质上是以图像形式显示的按钮,例如“提交”或“重置”按钮。表单的应用表单应用实例完成会员注册页面,练习表单及表单的各种对象文本框、密码框、单选按钮组、复选框、下拉列表和菜单、提交按钮等的使用。第35页网页设计与制作教程第1章网页设计与制作基础主要内容第36页网页设计与制作教程第1章网页设计与制作基础网页行为概述网页行为jQuery框架制作表单页面本章小结9.5

本章小结第37页网页设计与制作教程第1章网

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论