1、第6章 行为及表单应用,随着网页设计技术的进步,越来越多的网页设计师为使网页看起来更美观,在网页中添加各种JavaScript编写的特效。然而,并非所有网页设计者都擅长使用JavaScript语言。对于不擅长编写JavaScript的网页设计者,可以使用Dreamweaver内置的行为工具,通过可视化的方式编辑网页的特效。 在Dreamweaver中,还可以方便地制作各种动态交互表单。通过这些表单,可以实现各种设计者与浏览者的交流。,1,本章知识要点:,Dreamweaver行为Dreamweaver时间轴JavaScript基础插入表单对象,2,6.1 网页行为,行为是一种由Dreamwea
2、ver提供的可视化特效编辑工具。其主要用来使网页可以动态地响应用户操作、改变当前页面效果或执行某些特定的任务。Dreamweaver的行为是由JavaScript代码预先编写成的代码。这些代码可以被网页设计者通过简单的操作调用并嵌入到网页中,通过一些特定的事件触发代码的执行。,3,6.1.1 【行为】面板,在网页中添加行为,必须为其提供3个组成部分,即对象、事件和动作。对象是产生行为的主体;网页中的对象大多可以直接作为行为中的对象,如文本、图像、表格等;事件是触发行为的条件,通过事件才可以发生行为;动作是行为的主体,该部分决定激活后行为完成什么样的工作或网页对象变成什么样的状态。,4,6.1.
3、2 编辑行为,在编辑行为前首先应选择对象。在Dreamweaver中,可以将网页中所有的标签(包括整个网页、网页中各种文本、图像、多媒体、表格、层、框架等)作为行为的对象。不同的对象可以添加不同的行为,并可以设置各种触发动作的事件。在Dreamweaver中,支持所有JavaScript事件作为行为触发的条件。,5,6.2 应用各种行为,Dreamweaver提供的行为种类共有20多个,其分别应用于不同的网页对象,可以起到各种动态效果。有些行为还可以使浏览者与网页之间具备交互性,例如可移动的板块等。,6,6.2.1 文本信息行为,文本是网页中最常见的对象,也是最重要的对象之一。因此,在Drea
4、mweaver中专门设置了文本信息行为供用户使用。通过文本信息行为,可以设置一些网页中常见的文本信息特效。,7,6.2.2 窗口信息行为,窗口信息行为也是一种比较常见的浏览器特效。该特效主要包括两种窗口信息,即弹出对话框和弹出窗口。在网页设计中,这两种窗口信息通常用于广告以及一些提示信息。,8,6.2.3 图像效果行为,在Dreamweaver中,很多行为可以应用在各种图像中,为图像添加各种特效。例如,交换图像特效、改变图像的属性以及位置等。使用图像效果,可以使网页看起来更有动感。,9,6.2.4 AP元素行为,【改变属性】行为可以用来动态地改变某个网页对象的属性。例如,改变AP元素的背景与图
5、像的大小。在使用该行为之前首先必须选择一个网页对象,单击【行为】面板中的【添加行为】按钮 ,执行【改变属性】命令,打开【改变属性】对话框。,10,6.3 时间轴动画,【时间轴】是引用自Flash的一个特效面板,也是Dreamweaver提供的一种功能强大地行为。使用【时间轴】,可以构建丰富多彩的动画般的网页,实现各种动态的网页效果。【时间轴】就是一条贯穿时间的轴,用于表示网页载入后开始的这段时间内网页中各种对象的状态变化。,11,6.3.1 创建时间轴,在Dreamweaver中,时间轴可以用JavaScript来更改网页对象在一段时间内的属性。要为网页对象创建时间轴特效,需要首先了解【时间轴
6、】面板。在Dreamweaver中打开需要添加时间轴的网页文档,执行【窗口】|【时间轴】命令(或按组合键Alt+F9),即可打开【时间轴】面板。,12,6.3.2 编辑时间轴,创建时间轴动画后,还可以在【时间轴】面板中重新设置时间轴动画的参数。通过修改这些参数,可以制作出不同效果的时间轴效果。,13,设置,6.4 JavaScript,JavaScript是源自Java语言的一种简单的脚本语言。这种脚本语言的出现使得网页和用户之间可以实现一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。,14,6.4.1 JavaScript基础,JavaScript的功能十分强大
7、,可实现多种任务,如执行计算、表单检查、编写游戏、添加特殊效果、自定义图形选择、创建安全密码等。所有这些功能都有助于增强站点的动态效果和交互性。,15,6.4.2 JavaScript语句结构,JavaScript的流程,即程序语句运行的顺序。默认情况下,JavaScript按照语句排列的顺序运行,这种运行被称做顺序运行。除了顺序运行外,JavaScript还允许一些特殊的运行顺序结构,通过这些特殊的程序运行顺序,可以编写一些复杂结构的脚本。,16,6.4.3 JavaScript对象,JavaScript是一种面向对象的编程语言。因此,使用对象中的方法、属性、事件是JavaScript中最重
8、要的功能之一。通过基于对象的程序设计,可以用更直观、模块化和可重复使用的方法进行程序开发。,17,6.5 创建表单,表单是一种特殊的网页对象。其作用是与客户端或服务器端的脚本结合使用,以在网页中实现网页与浏览者的互动。,18,6.5.1 表单概述,表单由两个部分组成,即描述表单的XHTML代码以及表单的CSS样式等前台内容和用于处理表单域中输入信息的客户端脚本等后台内容。,19,6.5.2 创建表单,在Dreamweaver中,可以将整个网页创建成一个表单网页,也可以在网页的部分区域中添加表单。其创建的方法是相同的。例如,在【插入】工具栏中选择【表单】选项卡,单击【表单】按钮 ,即可插入表单。
9、,20,6.5.3 添加表单对象,在定义表单域后,可以为表单域添加各种表单对象。在表单域中,将光标定位在要插入表单对象的位置,然后在【表单】选项卡中,选择需要插入的表单对象。在Dreamweaver中支持的表单对象共有13种。,21,6.5.4 Spry表单对象,Spry表单对象是一种内建丰富用户交互功能的网页对象。其原理是使用JavaScript编写的小段脚本程序读取并检测文本域中的内容,故可以在不刷新网页的情况下实现一些动态交互的功能,例如验证文本域中输入的内容是否有效。,22,6.6 扩展练习,在设计网页的时候,可以将时间轴特效与行为特效结合起来。Dreamweaver提供了【时间轴】行为。通过该行为可以使网页浏览者用鼠标等事件控制时间轴的播放、停止以及跳转到时间轴的某一帧。,23,