第6章行为及表单应用

1、第第6 6章章 行为及表单应用行为及表单应用随着网页设计技术的进步，越来越多的网页设计师为使网页看起来更美观，在网页中添加各种JAVASCRIPT编写的特效。然而，并非所有网页设计者都擅长使用JAVASCRIPT语言。对于不擅长编写JAVASCRIPT的网页设计者，可以使用DREAMWEAVER内置的行为工具，通过可视化的方式编辑网页的特效。 在DREAMWEAVER中，还可以方便地制作各种动态交互表单。通过这些表单，可以实现各种设计者与浏览者的交流。1本章知识要点：本章知识要点： Dreamweaver行为 Dreamweaver时间轴 JavaScript基础 插入表单对象26.1 6.1

2、 网页行为网页行为 行为是一种由Dreamweaver提供的可视化特效编辑工具。其主要用来使网页可以动态地响应用户操作、改变当前页面效果或执行某些特定的任务。Dreamweaver的行为是由JavaScript代码预先编写成的代码。这些代码可以被网页设计者通过简单的操作调用并嵌入到网页中，通过一些特定的事件触发代码的执行。36.1.1 6.1.1 【行为行为】面板面板 在网页中添加行为，必须为其提供3个组成部分，即对象、事件和动作。对象是产生行为的主体；网页中的对象大多可以直接作为行为中的对象，如文本、图像、表格等；事件是触发行为的条件，通过事件才可以发生行为；动作是行为的主体，该部分决定激活

3、后行为完成什么样的工作或网页对象变成什么样的状态。4按钮图标按钮图标名称名称功能功能显示设置事件显示添加到当前文档的事件显示所有事件显示所有可添加的行为事件添加行为为网页中的对象添加行为事件删除事件从当前列表中删除已添加的事件增加事件值将同一对象的事件向上移动，提高事件的执行优先级降低事件值将同一对象的事件向下移动，降低事件的执行优先级6.1.2 6.1.2 编辑行为编辑行为 在编辑行为前首先应选择对象。在Dreamweaver中，可以将网页中所有的标签（包括整个网页、网页中各种文本、图像、多媒体、表格、层、框架等）作为行为的对象。不同的对象可以添加不同的行为，并可以设置各种触发动作的事件。在

4、Dreamweaver中，支持所有JavaScript事件作为行为触发的条件。56.2 6.2 应用各种行为应用各种行为 Dreamweaver提供的行为种类共有20多个，其分别应用于不同的网页对象，可以起到各种动态效果。有些行为还可以使浏览者与网页之间具备交互性，例如可移动的板块等。66.2.1 6.2.1 文本信息行为文本信息行为 文本是网页中最常见的对象，也是最重要的对象之一。因此，在Dreamweaver中专门设置了文本信息行为供用户使用。通过文本信息行为，可以设置一些网页中常见的文本信息特效。76.2.2 6.2.2 窗口信息行为窗口信息行为 窗口信息行为也是一种比较常见的浏览器特效

5、。该特效主要包括两种窗口信息，即弹出对话框和弹出窗口。在网页设计中，这两种窗口信息通常用于广告以及一些提示信息。8属性名称属性名称说明说明要显示的URL设置弹出窗口的URL地址。其可以用相对地址，也可以用绝对地址。窗口宽度设置弹出浏览器窗口的宽度。其值为数字，单位为px（像素）窗口高度设置弹出浏览器窗口的高度，其值为数字，单位为px（像素）属性导航工具栏设置弹出的浏览器窗口是否显示前进、后退等导航工具栏菜单条设置弹出的浏览器窗口是否显示文件、编辑、查看等菜单条地址工具栏设置弹出的浏览器窗口是否显示地址工具栏使用滚动条设置弹出的浏览器窗口是否显示滚动条状态栏设置弹出的浏览器窗口底部是否显示状态栏

6、调 整 大 小 手柄设置弹出的浏览器窗口是否允许浏览者调节大小窗口名称设置弹出的浏览器窗口标题的名称。6.2.3 6.2.3 图像效果行为图像效果行为 在Dreamweaver中，很多行为可以应用在各种图像中，为图像添加各种特效。例如，交换图像特效、改变图像的属性以及位置等。使用图像效果，可以使网页看起来更有动感。96.2.4 AP6.2.4 AP元素行为元素行为 【改变属性】行为可以用来动态地改变某个网页对象的属性。例如，改变AP元素的背景与图像的大小。在使用该行为之前首先必须选择一个网页对象，单击【行为】面板中的【添加行为】按钮 ，执行【改变属性】命令，打开【改变属性】对话框。10参数名称

7、参数名称作用作用元素类型允许设计者从下拉列表中选择当前网页中存在的各种网页对象，用于定义要改变属性的网页对象类型元素ID允许设计者从下拉列表中选择已确定类型的网页对象ID，用于定义要改变属性的网页对象属性选择允许设计者从下拉列表中选择需要改变属性的网页对象的属性输入允许设计者自行输入需要改变属性的网页对象的属性新的值允许设计者为选择的属性设置新的属性值6.3 6.3 时间轴动画时间轴动画 【时间轴】是引用自Flash的一个特效面板，也是Dreamweaver提供的一种功能强大地行为。使用【时间轴】，可以构建丰富多彩的动画般的网页，实现各种动态的网页效果。【时间轴】就是一条贯穿时间的轴，用于表示

8、网页载入后开始的这段时间内网页中各种对象的状态变化。11 6.3.1 6.3.1 创建时间轴创建时间轴 在Dreamweaver中，时间轴可以用JavaScript来更改网页对象在一段时间内的属性。要为网页对象创建时间轴特效，需要首先了解【时间轴】面板。在Dreamweaver中打开需要添加时间轴的网页文档，执行【窗口】|【时间轴】命令（或按组合键Alt+F9），即可打开【时间轴】面板。12命令命令说明说明【时间轴】下拉列表用于选择网页中所有的时间轴。同一网页中可有多个时间轴，只有被该下拉列表选择的时间轴为当前可编辑的时间轴【重绕】使当前播放的帧指示线返回时间轴的第一帧后退使当前帧指示线向左移

9、动一个帧。按住该按钮，可以反向播放时间轴。当前帧数显示当前播放或选种的帧的编号播放使当前帧指示线向右移动一个帧。按住该按钮，建议播放时间轴。fps刷新频率，其含义是每秒播放帧的多少。自动播放选择该复选框，可使当前页面在被载入时自动开始播放时间轴循环选择该复选框，可使动画在网页文档被浏览器载入后无限次地播放。当前帧指示线给出当前页面上显示的是时间轴的哪一帧。关键帧在动画条中指定了网页对象属性的帧。该类的帧由小圆圈或圆点标明行为通道在时间轴中特定的帧执行某些行为的通道动画通道显示用于制作AP元素和图像动画的条6.3.2 6.3.2 编辑时间轴编辑时间轴 创建时间轴动画后，还可以在【时间轴】面板中重

10、新设置时间轴动画的参数。通过修改这些参数，可以制作出不同效果的时间轴效果。13设置6.4 JavaScript6.4 JavaScript JavaScript是源自Java语言的一种简单的脚本语言。这种脚本语言的出现使得网页和用户之间可以实现一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。146.4.1 JavaScript6.4.1 JavaScript基础基础 JavaScript的功能十分强大，可实现多种任务，如执行计算、表单检查、编写游戏、添加特殊效果、自定义图形选择、创建安全密码等。所有这些功能都有助于增强站点的动态效果和交互性。15数据类型数据类型说

11、明说明基本数据类型字符串(String)排在一起的一串零或零以上的 Unicode 字符（字母、数字和标点符号）。字符串数据类型用来表示JavaScript中的文本。、双引号。在包含双引号时，该双引号两边需加单引号，也可以包含单引号，该单引号两边需加双引号。数值(int和float等)数值类型又可以分为整数型（int）和浮点型(float)。整数型数据包括正整数、负整数和0；浮点型为带小数部分的数，其也可以用科学记数法表示。布尔(boolean)布尔类型的数据只有两个值，它们是文字true 和false。布尔值是一个真值，它表示一个状态的有效性（说明该状态为真或假）。引用数据类型对象(obje

12、ct)JavaScript 对象是属性和方法的集合。一个方法就是一个函数，是对象的成员。属性是一个值或一组值（以数组或对象的形式），是对象的成员。Javascript 支持四种类型的对象：内部对象、生成的对象、宿主给出的对象（如 Internet 浏览器中的 window 和 document）以及 ActiveX 对象（外部组件）。数组(area)在 JavaScript 中，对象和数组几乎相同。两个主要差别是对象没有自动长度属性，而数组没有对象的属性和方法。特殊数据类型空值(Null)在 JavaScript 中数据类型null只有一个值：null。关键字 null 不能用作函数或变量的名

13、称。包含 null 的变量包含“无值”或“无对象”。不存在的数据(Undefined)在JavaScript中，undefined类数数据类型只在两种情况下出现，即对象属性不存在时和声明了变量但未赋值时。6.4.2 JavaScript6.4.2 JavaScript语句结构语句结构 JavaScript的流程，即程序语句运行的顺序。默认情况下，JavaScript按照语句排列的顺序运行，这种运行被称做顺序运行。除了顺序运行外，JavaScript还允许一些特殊的运行顺序结构，通过这些特殊的程序运行顺序，可以编写一些复杂结构的脚本。166.4.3 JavaScript6.4.3 JavaScr

14、ipt对象对象 JavaScript是一种面向对象的编程语言。因此，使用对象中的方法、属性、事件是JavaScript中最重要的功能之一。通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方法进行程序开发。176.5 6.5 创建表单创建表单 表单是一种特殊的网页对象。其作用是与客户端或服务器端的脚本结合使用，以在网页中实现网页与浏览者的互动。186.5.1 6.5.1 表单概述表单概述 表单由两个部分组成，即描述表单的XHTML代码以及表单的CSS样式等前台内容和用于处理表单域中输入信息的客户端脚本等后台内容。196.5.2 6.5.2 创建表单创建表单 在Dreamweaver中，

15、可以将整个网页创建成一个表单网页，也可以在网页的部分区域中添加表单。其创建的方法是相同的。例如，在【插入】工具栏中选择【表单】选项卡，单击【表单】按钮 ，即可插入表单。206.5.3 6.5.3 添加表单对象添加表单对象 在定义表单域后，可以为表单域添加各种表单对象。在表单域中，将光标定位在要插入表单对象的位置，然后在【表单】选项卡中，选择需要插入的表单对象。在Dreamweaver中支持的表单对象共有13种。21图标图标表单类型表单类型说明说明文本字段文本字段主要用于接受任何类型的文本输入内容。其可以单行或多行显示，也可以以密码的方式显示（文本被显示为星号）隐藏域存储浏览者输入的一些信息，并

16、在该浏览者下次访问网页时使用文本区域多行的文本字段。其和文本字段可以相互转换复选框允许在一组选项中选择多个选项。浏览者可以选择任意多个适用的选项。使用复选框，设计者也可以限定浏览者可以选择几个选项。单选按钮代表互相排斥的选择。浏览者在该类按钮中只能选择一个选项单选按钮组由多个单选按钮构成的一组按钮。列表/菜单在一个滚动列表中显示选项值，浏览者可以从该滚动列表中选择一个或多个选项。其又可以分为列表和菜单。列表选项在一个菜单中显示选项值，用户只能选择一个选项。菜单则可以在有限空间中显示多个选项供用户选择。跳转菜单可导航的列表或弹出菜单。图像域设计者可以在表单中插入图像。使用图像域可以制作图形化的按钮。文件域使浏览者可以浏览本地计算机中的文件并将该文件作为表单数据上传。按钮在单击时执行操作，是最基本的表单对象之一。6.5.4 Spry6.5.4 Spry表单对象表单对象 Spry表单对象是一种内建丰富用户交互功能的网页对象。其原理是使用JavaScript编写的小段脚本程序读取并检测文本域中的内容，故可以在不刷新网页的情况下实现一些动态交互的功能，例如验证文本域中输入的内容是否有效。22图标图标表单类型表单类型说明说明Spry验证文本域Spry验证文本域是一个增强的文本域，其作用是验证浏览者输入文本时显示文本是否有效Spry验