网页设计与制作第08章使用行为和表单.ppt

《网页设计与制作第08章使用行为和表单.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第08章使用行为和表单.ppt（86页珍藏版）》请在三一办公上搜索。

1、第8章 使用行为和表单,8.1 学习任务：认识行为8.2 案例1添加弹出提示信息的行为8.3 案例2 制作网页加载时弹出公告页8.4 案例3 使用行为设置图像特效交换图像8.5 案例4 通过行为设置文本8.6 学习任务：表单和表单对象8.7 案例5 制作“用户注册”页面8.8 案例6 插入Spry表单元素8.9 实训,8.1 学习任务：认识行为,8.1.1 行为的基本知识8.1.2 行为面板与行为菜单8.1.3行为的基本操作,8.1.1 行为的基本知识,行为事实上是由预先编写好的Javascript代码构成，它运行在客户端浏览器中。通过行为，网页制作不需要编写Javascript代码，就可以实

2、现复杂的网页特效。JavaScript代码是一种典型的网页脚本程序。网页中常见的脚本程序主要有两种，一种是微软推出的VBScript，另一种是Javascript，相对而言Javascript脚本程序应用更为广泛一些。行为就是在Javascript的基础上衍生出来的Dreamweaver功能。行为是由事件和动作相结合而构成的，事件是触发动作的原因，而动作是事件的直接后果，两者缺一不可，它们组合起来就构成了一个行为。,事件可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有关的3

3、个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自己编写。,8.1.2 行为面板与行为菜单,在Dreamweaver中，对行为的添加和管理主要通过“行为”面板来完成。在菜单栏中选择“窗口行为”命令或按Shift+F4组合键，可以展开“行为”面板，如图8-1所示。在“

4、行为”面板中，右侧显示动作，左侧显示行为对应的事件类型。面板中各选项作用如下：显示设置事件：显示添加到当前文档的事件。显示所有事件：显示所有事件。添加行为：单击该按钮，从弹出菜单中选择需要添加的行为类别。删除事件：从行为列表中删除选中的行为。,增加事件值：将当前选定的行为向前移动。降低事件值：将当前选定的行为向后移动。Dreamweaver内置了一些标准行为以满足用户需求，它们主要是针对Internet Explorer4.0或更高版本浏览器。在“行为”面板中，单击“添加行为”按钮，可以展开行为菜单，如图8-2所示，菜单项对应了Dreamweaver内置的各种行为。各菜单项功能如下：交换图像：

5、当发生所设置的事件后，用其他图像替代当前图像。弹出信息：当发生所设置的事件后，弹出一个消息框。恢复交换图像：恢复设置“交换图像”行为又因为某种原因失去效果的图像。打开浏览器窗口：打开一个新的浏览器窗口。,拖动AP元素：可以让浏览者拖动AP元素。改变属性：可以改变相应对象的属性值。效果：可将各种效果应用于页面上的相应元素。时间轴：可以控制时间轴的动作。显示-隐藏元素：可以显示、隐藏或恢复一个或多个页面元素的可见性。检查插件：检查是否装有运行网页的插件。检查表单：检测用户填写的表单内容是否符合预先设定的规范。设置导航栏图像：制作图像导航条。设置文本：可以在不同位置显示相应内容。调用Javascri

6、pt：当事件发生时，调用指定的Javascript函数。,跳转菜单：制作一次可建立若干个链接的跳转菜单。跳转菜单开始：在跳转菜单中选定要移动的站点后，只有单击“开始”按钮才可移动到链接的站点上。转到URL：选定事件发生后，可以跳转到指定站点或网页文档上。预先载入图像：在下载图像之前预先载入一幅图像。,8.1.3 行为的基本操作,对行为的基本操作包括：添加行为、删除行为和编辑行为等。1添加行为在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置

7、对话框，然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型，如图3所示。2删除行为选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件”按钮，即可将其删除。,3编辑行为若要编辑行为所对应的动作，可在“行为”面板的行为列表中，直接双击某个行为所对应的动作名称；或者将鼠标指向某个动作名称，单击鼠标右键，在打开的快捷菜单中选择“编辑行为”命令，均可打开对应的设置对话框，从中重新设置动作的参数，然后单击【确定】按钮。如果需要设置某个行为对应的事件，直接单击行为名称，在展开的事件列表中直接选择需要

8、的事件即可。,图8-1“行为”面板 图8-2“行为”菜单 图8-3 行为事件列表,8.2 案例1添加弹出提示信息的行为,学习目标实现关于查看图像原图的提示。掌握为预览图像添加“弹出信息”行为的方法。知识要点添加行为；设置行为对应的事件等。案例效果当鼠标指向网页中的图像时，弹出提示信息对话框，根据提示信息进行操作，即可浏览图像的原图，效果如图8-4所示。操作步骤：1）在Dreamweaver中打开第1章介绍的网页文件，如图8-5所示。2）选中文档中的图像，在“行为”面板中单击“添加行为”按钮，在弹出的菜单中选择“弹出信息”命令。,在打开的“弹出信息”对话框中输入信息内容，如图8-6所示，单击【确

9、定】按钮。,图8-4 添加的弹出提示信息效果,图8-5 打开的网页 图8-6“弹出信息”对话框,4）在“行为”面板中的行为列表中单击该行为的事件列，选择“onMouseOver”选项。5）选中图像下方的文本，在“行为”面板中单击“添加行为”按钮，选择“转到URL”命令。6）在打开的“转到URL”对话框中，设置要转到的目标URL地址，这里选择图像的原图，然后单击【确定】按钮。7）在行为列表中找到刚添加的行为，单击该行为的事件列，在下拉列表中选择“onClick”选项。8）保存网页文档，按下F12键在浏览器中预览网页效果。,8.3 案例2 制作网页加载时弹出公告页,学习目标在Dreamweaver

10、 CS4中，利用“行为”面板制作网页加载时弹出公告页。知识要点添加行为；设置事件等。案例效果当加载网页时，会弹出公告页，效果如图8-7所示。,图8-7 在网页加载时弹出公告页,具体操作如下：在Dreamweaver中打开前面介绍过的网页文件，如图8-8所示。2）选择“窗口行为”命令打开“行为”面板，单击面板中的按钮，在弹出的菜单中选择“打开浏览器窗口”命令，弹出“打开浏览器窗口”对话框，如图8-9所示。,图8-8 打开的网页文件,在“打开浏览器窗口”对话框中，各选项含义：要显示的URL：可以输入或通过单击【浏览】按钮选择打开的网页文件。窗口宽度：设置打开浏览器窗口的宽度，通常以像素（px）为单

11、位。窗口高度：设置打开浏览器窗口的高度。属性：设置相应栏目是否在打开的浏览器窗口中显示。窗口名称：新窗口的名称。如果用户通过Javascript使用链接指向新窗口或控制新窗口，则应对新窗口命名。所命名不能包含空格或特殊字符。3）单击“要显示的URL”文本框右侧的【浏览】按钮，选择已存在的网页文件pop.html，设置“窗口宽度”和“窗口高度”分别为200px和200px，其它选项保持默认。4）单击【确定】按钮，在“行为”面板中添加了行为，并设置左侧“事件”为onLoad，即在加载网页时，触发该行为。设置后的“行为”面板如图8-10所示。,5）保存网页文档，按下F12键在浏览器中预览网页效果。提

12、示：在“打开浏览器窗口”对话框中，还可以设置公告页是否显示菜单栏、是否显示工具栏等参数，从而能制作符合用户需要的窗口效果。,图8-9“打开浏览器窗口”对话框 图8-10 设置的事件,8.4 案例3 使用行为设置图像特效交换图像,学习目标掌握为网页图片添加“交换图像”行为的方法。知识要点添加“交换图像”行为；设置行为参数等。案例效果当鼠标移到设置了“交换图像”行为的图像时，用另一幅图像替代原图像，当鼠标离开时恢复原图像。变换图像前后的效果分别如图8-11和图8-12所示。,图8-11 变换图像前 图8-12 变换图像后,提示：应该换入一个与原图像具有相同高度和宽度大小的图像，否则换入的图像显示时

13、会被压缩或扩展。具体操作如下：1）在Dreamweaver中打开已有的网页，如图8-11所示。2）在“设计”窗口选择要设置交换行为的图像。选择“窗口行为”命令，在Dreamweaver右侧栏打开“行为”面板，单击面板中的“添加行为”按钮，在弹出的菜单中选择“交换图像”，弹出“交换图像”对话框，如图8-13所示。3）选中图像列表中要设置交换图像的原始图像，单击【浏览】按钮选择已经准备好的新图像文件。选中“预先载入图像”复选框，这样可以预先缓存图像，以防止因为交换图像下载缓慢而导致的延迟。4）选中“鼠标滑开时恢复图像”复选框，可以使鼠标移到图像外边时恢复初始图像。,5）单击【确定】按钮完成制作。保

14、存网页文档，按下F12键预览交换图像效果。提示：“恢复交换图像”行为是用来将最后一组交换的图像恢复为原图像。如果在附加“交换图像”时选择了“鼠标滑开时恢复图像”选项，将不需要手动设置“恢复交换图像”行为。,8.5 案例4 通过行为设置文本,8.5.1 设置状态栏文本8.5.2 设置容器的文本,8.5.1 设置状态栏文本,“设置文本”行为包括4种类型，它们分别是设置状态栏文本、设置容器的文本、设置文本域文本及设置框架文本。“设置状态栏文本”行为可在浏览器窗口左下角处的状态栏中显示文本消息。例如，可以使用此行为在状态栏中说明链接的目标，而不是显示默认的URL。由于浏览者常常会忽略或注意不到状态栏中

15、的消息，可以使用弹出消息或 AP Div 元素显示。“设置容器的文本”行为将页面上的现有容器（可以包含文本或其它元素的任何网页元素）的内容和格式替换为指定的内容。“设置文本域文字”行为可用指定的内容替换表单文本域的内容。,“设置框架文本”行为可用来动态设置框架的文本，用指定的内容替换框架的内容和格式，该内容可以包含任何有效的 HTML代码。使用此行为可在框架中动态显示信息。下面重点介绍设置状态栏文本和设置容器的文本。,学习目标为网页添加状态栏文本。知识要点“状态栏文本”行为的使用。案例效果浏览网页时，在网页的状态栏中显示设置的文本信息，如图8-14所示。,图8-14 为网页添加“设置状态栏文本

16、”行为效果,具体操作如下：1）在Dreamweaver中，打开图8-8所示的网页文件。2）选中整个文档，或在“代码”视图中选中标签，选择“窗口行为”命令打开“行为”面板，单击面板中的按钮，在弹出的菜单中选择“设置文本设置状态栏文本”命令，打开“设置状态栏文本”对话框，在文本框中输入“欢迎来到我的书屋！”，如图8-15所示，单击【确定】按钮。4）保存文档，按下F12键在浏览器中预览设置效果。,图8-15 输入在状态栏中要显示的字符,8.5.2 设置容器的文本,学习目标使用“设置容器的文本”行为，用指定内容替换网页上AP Div的内容。知识要点AP元素的基本操作；“设置容器的文本”行为的使用。案例

17、效果当鼠标经过AP Div元素时，该元素显示预先设置好的文本内容；鼠标离开AP Div元素时，显示原来的图像，效果分别如图8-16和8-17所示。,图8-16 鼠标经过AP Div元素时的页面 图8-17 鼠标经过后的页面,具体操作如下：1）在Dreamweaver中打开已有的网页文件，如图8-18所示。2）单击“窗口插入”命令打开“插入”面板，在该面板的“布局”标签中选择“绘制AP Div”，在“设计”窗口绘制一个AP Div元素，并将其调整到适当的位置。3）选中AP Div元素，在“属性”面板中设置其“宽”和“高”分别为120px、110px，“背景颜色”为#CCFFBB，并在AP Div

18、元素中插入一幅图片，如图8-19所示。,图8-18 打开已有网页 图8-19在AP Div中插入图片,4）选中AP Div元素“apDiv1”，打开“行为”面板，单击面板中的“添加行为”按钮，在弹出的菜单中选择“设置文本设置容器的文本”，打开“设置容器的文本”对话框。5）在“容器”后面的列表中选择div“apDiv1”，在“新建HTML”文本框输入“泰山”，如图8-20所示。设置完毕后，单击【确定】按钮。提示：在“新建HTML”文本框中可以输入普通字符或者HTML代码，类似于在Dreamweaver的代码视图中选中某个容器标签然后在其内部添加HTML代码。,图8-20 在“设置容器的文本”对话

19、框中设置参数,6）在“行为”面板中，设置添加的“设置容器的文本”的事件为“onMouseOver”，当鼠标滑过后触发该事件。7）继续选中“apDiv1”，单击“行为”面板中的“添加行为”按钮，在弹出的菜单中选择“设置文本设置容器的文本”，再次打开“设置容器的文本”对话框。8）在“新建HTML”文本框中输入“”，如图8-21所示，单击【确定】按钮。9）设置该行为的事件为“onMouseOut”，表示当鼠标移开时，恢复原图像。为“apDiv1”元素设置行为和事件后的“行为”面板如图8-22所示。10）保存文档，按下F12键在浏览器中预览设置效果。,图8-21 设置行为参数 图8-22“行为”面板,

20、8.6 学习任务：表单和表单对象,8.6.1 表单8.6.2 表单对象,8.6.1 表单,1认识表单表单是网站管理者与浏览者沟通的纽带，也是一个网站成功的秘诀，更是网站生存的命脉。有了表单，网站不仅仅是“信息提供者”，也是“信息收集者”。表单通常用来做用户登录、留言簿、网上报名、产品订单、网上调查及搜索界面等。表单有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入信息的服务器端应用程序客户端脚本，如ASP等。使用Dreamweaver CS4可以创建表单，可以在表单中添加表单对象，还可以通过使用“行为”来验证用户输入的信息的正确性，例如，可以检查用户输入的电子邮件

21、地址是否包含“”符号，或者某个必须填写的文本域是否包含值等。,2创建表单在文档中插入表单有两种方法：一种是使用菜单命令，另一种是使用“表单”按钮。使用菜单命令插入表单：在文档窗口中选定插入点，选择“插入记录表单表单”菜单命令插入表单。使用“表单”按钮插入表单：在文档窗口中选定插入点，单击“插入”工具栏“表单”选项卡中的“表单”按钮，或直接将“表单”按钮 拖曳到文档中，均可插入表单。插入的表单会在文档中以红色的矩形虚线框显示，如图8-23所示。可在表单虚线框中插入诸如文本域、按钮、列表框、单选框、复选框等表单对象。提示：插入表单后，如果在页面中看不到表单边框，可选择“查看可视化助理不可见元素”命

22、令将红色虚线框显示出来。,图8-23 创建的表单,需要注意的是，页面中的红色虚线框表示创建的表单，这个框的作用仅方便编辑表单对象，在浏览器中不会显示。另外，可以在一个页面中包含多个表单，但是，不能将一个表单插入到另一个表单中（即标签不能交迭）。3设置表单属性在文档窗口中选中插入的表单，表单“属性”面板如图8-24所示。表单“属性”面板中各选项含义如下：表单ID：是标签的name参数，用于标志表单的名称，每个表单的名称都不能相同。命名表单后，用户就可以使用JavaScript或VBScript等脚本语言引用或控制该表单。,图8-24“表单”属性面板,动作：是标签的action参数，用于设置处理该

23、表单数据的动态网页路径。用户可以在此选项中直接输入动态网页的完整路径，也可以单击选项右侧的“浏览文件”按钮，选择处理该表单数据的动态网页。方法：是标签的method参数，用于设置将表单数据传输到服务器的方法。其列表中包含“默认”、POST和GET三项：默认：使用浏览器默认的方法，通常默认值为GET方法。GET：将值附加到请求该页面的URL中，并将其传输到服务器。由于GET方法有字符个数的限制，所以适合于向服务器提交少量的数据。POST：在HTTP请求中嵌入表单数据，并将其传输到服务器，所以，该方法适合于向服务器提交大量数据的情况。,编码类型：是标签的enctype参数，用于设置对提交给服务器处

24、理的数据使用的编码类型。编码类型默认设置为application/x-www-form-urlencode，通常与POST方法一起使用。如果要创建文件上传域，则指定为multipart/form-data MIME 类型。目标：是标签的target参数，用于设置一个窗口，在该窗口中显示处理表单后返回的数据。其列表中包含的目标值有：_blank：在未命名的新浏览器窗口中打开要链接到的网页。_parent：在显示当前文档的窗口的父窗口中打开要链接到的网页。_self：默认选项，表示在当前窗口中打开要链接到的网页。_top：表示在整个浏览器窗口中打开链接网页并删除所有框架。一般使用多级框架时才选用此

25、选项。,8.6.2 表单对象,表单是一个容器对象，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理，所以在添加文本域、按钮等表单对象之前，要先插入表单。1向表单中插入对象 向表单中插入表单对象的方法有如下几种：将光标置于表单边界内（即红色虚线框内）的插入点，从“插入表单”级联式菜单中选择需要的对象。将光标置于表单边界内的插入点，在“插入”面板“表单”标签中选择并单击表单对象按钮。在“插入”面板“表单”标签中，选中需要的表单对象按钮，按下鼠标左键将其直接拖曳到表单边界内的插入点位置。,2认识表单对象表单对象包含文本字段、隐藏域、文本区域、复选框、单选框、列表/菜单、跳转菜单、图

26、像域、文件域、按钮等。本小节只要求用户认识表单对象，有关表单对象的属性设置将在后面案例小节中详细介绍。文本字段 和文本区域：接受任何类型的字母、数字、文本输入内容。文本可以单行或多行显示，也可以以密码域的方式显示，以密码域的方式显示时，输入文本将被替换为星号或项目符号，以避免浏览者看到这些文本。插入的文本域如图8-25所示。隐藏域：存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。隐藏域在网页中不显示，只是将一些必要的信息存储并提交给服务器。插入隐藏域后，Dreamweaver会在表单内创建隐藏域标签。,复选框：允许在一组选项中选择多个选项。用户

27、可以选择任意多个适用的选项。图8-26显示出选中了3个复选框。单选框：在一组选项中一次只能选择一项。也就是说，在一个单选按钮组（由两个或多个共享同一名称的按钮组成）中选择一个按钮，就会取消选择该组中的所有其它按钮。单选按钮组选择情况如图8-27所示。列表/菜单：“列表”选项在一个滚动列表中显示选项值，用户可以从该滚动列表中选择一个或多个选项。“菜单”选项在一个下拉菜单中显示出所有选项值，用户只能从中选择单个选项。列表/菜单选项的应用效果如图8-28所示。,图8-25文本字段 图8-26复选框,跳转菜单：可导航的列表或弹出菜单，使用它们可以插入一个菜单，其中的每个选项都链接到指定的网页文件。图8

28、-29显示出插入的跳转菜单，从列表菜单中选择一项后（这里选择了“百度”），单击【前往】按钮，即可打开相关联的网页，如图8-30所示。图像域：可以在表单中插入一幅图像，使其生成图形化的按钮，来代替不太美观的普通按钮。通常使用“图像”按钮来提交数据。,图8-27 单选按钮 图8-28 列表/菜单选项,文件域：可以实现在网页中上传文件的功能。文件域的外观与其他文本域类似，只是文件域还包含一个【浏览】按钮，如图8-31所示。用户浏览时可以手动输入要上传的文件路径，也可以单击【浏览】按钮，在打开的“选择文件”对话框中选择需要上传的文件。,图8-29 跳转菜单 图8-30 链接到的网页,按钮：用于控制表单

29、的操作。一般情况下，表单中设有3种按钮：“提交”按钮、“重置”按钮和普通的按钮。其中，“提交”按钮是将表单数据提交到表单指定的处理程序中进行处理；“重置”按钮将表单内容还原到初始状态。插入的按钮如图8-32所示。,图8-31 文件域 图8-32 按钮,按钮：用于控制表单的操作。一般情况下，表单中设有3种按钮：“提交”按钮、“重置”按钮和普通的按钮。其中，“提交”按钮是将表单数据提交到表单指定的处理程序中进行处理；“重置”按钮将表单内容还原到初始状态。插入的按钮如图8-32所示。,8.7 案例5 制作“用户注册”页面,8.7.1“用户注册”界面设计8.7.2 插入文本域8.7.3 插入单选按钮8

30、.7.4插入复选框8.7.5 插入列表/菜单8.7.6 插入按钮,8.7.1“用户注册”界面设计,1）在Dreamweaver CS4中新建一个网页文件，将网页标题设置为“用户注册”。2）选择“插入表单表单”命令在文档中插入一个表单。3）将光标置于创建的表单内，插入一个12行2列的表格，并设置表格的宽度为530像素、间距为0像素、边框为0像素。4）选中第一行的两个单元格，单击“修改表格合并单元格”命令，将它们合并为一个单元格。用同样的方法将最后一行的单元格合并为一个单元格，如图8-34所示。5）将光标置于第一行的单元格中，输入“用户注册”，在单元格“属性”面板中设置文本居中对齐。,6）根据图8

31、-35提供的界面内容，分别在表格第1列的其它单元格中输入昵称、真实姓名、密码等文本。选中输入的文本，并将它们设置为粗体、右对齐方式。7）选中表格中所有的单元格，在单元格“属性”面板中设置单元格的高为30。,图8-34 插入的表格 图8-35 输入文本,8.7.2 插入文本域,通常使用表单的文本域来接收用户输入的信息，文本域包括单行文本域、多行文本域、密码文本域3种。一般情况下，当用户输入较少信息时，使用单行文本域；当用户输入较多信息时，使用多行文本域；当用户输入密码等保密信息时，使用密码文本域。下面为“用户注册”页面插入文本域，继续上面的操作：1）在图8-35所显示的表格中，将光标置于“昵称：

32、”后面的单元格中，单击“表单”标签中的“文本字段”按钮，或者选择“插入表单文本域”命令，均将打开“输入标签辅助功能属性”对话框，如图8-36所示。,2）单击【确定】按钮，在光标处插入了一个单行的文本域。3）选中插入的文本域，其对应的“属性”面板如图8-37所示。文本域“属性”面板中各选项含义如下：文本域：用于标志该文本域的名称。每个文本域的名称都不能相同，它相当于表单中的一个变量名，服务器通过这个变量名来处理用户在该文本域中输入的值。,图8-36“输入标签辅助功能属性”对话框,字符宽度：设置文本域中最多可显示的字符数。当设置该选项后，若是多行文本域，标签中增加cols属性，否则标签增加size

33、属性。如果用户的输入超过字符宽度，则超出的字条将不被表单指定的处理程序接收。最多字符数：设置单行、密码文本域中最多可输入的字符数。当设置该项后，标签增加maxlength属性，如果用户的输入超过最大字符数，则表单产生警告声。类型：设置文本域的类型，可在单行、多行或密码3个类型中任选一个。“单行”类型将产生一个标签，它的type,图8-37 文本域“属性”面板,属性为text，这表示此文本域为单行文本域。“多行”类型将产生一个标签，这表示此文本域为多行文本域。“密码”类型将产生一个标签，它的type属性为password，这表示此文本域为密码文本域，即在此文本域中接收的数据均以“*”显示，以保护

34、数据不被其它人看到。初始值：设置文本域的初始值，即在首次载入表单时文本域中显示的值。类：将CSS规则应用于文本域对象。4）本例设置文本域的“字符宽度”为14，“类型”为单行。5）用同样的方法，分别在“真实姓名：”、“输入密码：”、“再次输入密码：”、“联系电话：”、“E-mail：”后面的单元格中插入单行文本域。6）分别选中“输入密码：”、“再次输入密码：”后面的文本域，在其“属性”面板中设置“字符宽度”为8，“最多字符数”为8，“类型”为密码。,将光标置于“说明：”后面的单元格中，单击“表单”标签中的“文本区域”按钮，在光标处插入一个文本区域。选中插入的文本区域，其对应的“属性”面板和图8-

35、37不同的是“行数”。“行数”用于设置文本域的高度，设置后标签会增加rows属性。本例设置“行数”为4，“类型”为多行，如图8-38所示。选项的值可由用户根据需要自行确定，这里不做统一要求。创建文本域后的“用户注册”页面效果如图8-39所示。,图8-38 文本区域“属性”面板,8.7.3 插入单选按钮,单选按钮通常用于互相排斥的选项。只能选择一组中的某个按钮，因为选择其中的一个选项就会自动取消对另一个选项的选择。在表单中插入单选按钮时，应先将光标放在表单轮廓内需要插入单选按钮的位置，然后插入单选按钮。下面为“用户注册”页面添加单选按钮，继续上面的操作：1）将光标置于“性别：”后面的单元格中，单

36、击“表单”标签中的“单选按钮”按钮，或者选择“插入表单单选按钮”命令，将打开“输入标签辅助功能属性”对话框，如图8-40所示。2）在“标签”后面的文本框中输入“男”，“位置”选择“在表单项后”，单击【确定】按钮，将在光标处创建一个带有“男”标识文字的单选按钮，如图8-41所示。,图8-39 插入的文本域,图8-41 插入的单选按钮图 8-40“输入标签辅助功能属性”对话框,3）用同样的方法，在插入的单选按钮后面，再插入一个标识“女”的单选按钮。4）选中插入的单选按钮，其对应的“属性”面板如图8-42所示。单选按钮“属性”面板中各选项含义如下：单选按钮：用于输入该单选按钮的名称。选定值：设置此单

37、选按钮代表的值，一般为字符型数据，即当选定该单选按钮时，表单指定的处理程序获得的值。初始状态：设置该单选按钮的初始状态。即当浏览器中载入表单时，该单选按钮是否处于被选中状态。一组单选按钮中只能有一个按钮的初始状态被选中。,图8-42 单选按钮“属性”面板,类：将CSS规则应用于单选按钮。5）分别设置两个单选按钮的“单选按钮”为“radio”，“初始状态”为“未选中”。到此为止，单选按钮创建完毕。提示：在同一组中的两个或多个单选按钮的名称必须相同。6）按下Ctrl+S组合键保存网页文件。按下F12键，在打开的网页中测试单选按钮效果。提示：可以在表单中插入单选按钮组。具体方法：选择“插入表单单选按

38、钮组”命令，打开“单选按钮组”对话框，如图图8-43所示。点击“单选按钮”右侧的按钮或按钮，来添加一个或删除一个单选按钮。点击“标签”下侧的“单选”，可以修改单选按钮的标识内容。插入的带有标识内容的单选按钮组如图8-44所示。,图8-43“单选按钮组”对话框 图8-44 单选按钮组,8.7.4 插入复选框,复选框用于在一组选项中选择多项。在一组复选框中，单击同一个复选框可以进行“关闭”或“打开”状态的切换，因此，可以从一组复选框中选择多个选项。下面为“用户注册”页面添加复选框，继续上面的操作：1）将光标置于“兴趣爱好：”后面的单元格中，单击“表单”标签中的“复选框”按钮，或者选择“插入表单复选

39、框”命令，打开“输入标签辅助功能属性”对话框，在“标签”后面的文本框中输入“美术”，单击【确定】按钮，将在光标处创建一个带有“美术”标识文字的复选框。2）用同样的方法，再创建3个复选框，并分别为它们添加标识文字，如图8-45所示。,3）选中创建的复选按钮，其对应的“属性”面板如图8-46所示。复选框“属性”面板与前面介绍的单选按钮“属性”面板基本相同，这里不再一一介绍。需要注意的是，与单选框名称不同的是，各个复选框名称不应该相同。保存网页文件。按下F12键在打开的网页中测试复选框效果。,图8-45 插入的复选框,图8-46 复选框“属性”面板,8.7.5 插入列表/菜单,“列表/菜单”使访问者

40、可以从由多个选项所组成的列表中选择一项或多项。对于页面空间有限、但又需要显示许多菜单选项时，使用“列表/菜单”会很方便。“列表/菜单”有两种形式：一种是下拉菜单，另一种是滚动列表。下面为“用户注册”添加列表/菜单：1）将光标置于“出生年月：”后面的单元格中，单击“表单”标签中的“列表/菜单”按钮，或者选择“插入表单列表/菜单”命令，打开“输入标签辅助功能属性”对话框，在“标签”后面的文本框中输入“年”，“位置”选择“在表单项后”，单击【确定】按钮，将在光标处创建一个带有“年”标识文字的“列表/菜单”对象。,2）用同样的方法，在创建的“列表/菜单”对象后面，再创建一个带有“月”标识文字的“列表/

41、菜单”对象，如图8-47所示。3）选中图8-47左侧的“列表/菜单”对象，列表/菜单“属性”面板如图8-48所示。列表/菜单“属性”面板中各选项含义如下：列表/菜单：用于输入滚动列表的名称。类型：设置菜单的类型。选择“菜单”选项，将添加下拉菜单；选择“列表”选项，将添加滚动列表。高度：设置滚动列表的高度，即列表中一次最多可以显示的项目数。选定范围：设置用户是否可以从列表中选择多个项目。初始化时选定：设置可滚动列表中默认选择的菜单项。【列表值】按钮：单击该按钮，将弹出一个“列表值”对话框，如图8-49所示。在该对话框中，单击加号按钮 或减号按钮，可在下拉列表中添加或删除列表项。,图8-47 插入

42、的“列表/菜单”对象,图8-48 列表/菜单“属性”面板,在本例中，为左侧的“列表/菜单”对象设置列表值如图8-50所示。选中插入的“列表/菜单”对象，在其“属性”面板中设置“列表”的“高度”为1。用同样的方法，为右侧的“列表/菜单”对象设置列表值为1。效果如图8-51所示。,图8-49“列表值”对话框 图8-50 设置列表值,图8-51 设置“列表/菜单”对象的属性值,8.7.6 插入按钮,按钮的作用是控制表单的操作，表单中一般设有提交按钮、重置按钮和普通按钮3种。下面为“用户注册”页面添加按钮，具体操作如下：1）将光标置于表格的最后一行内，单击“插入表单按钮”命令，或者单击“表单”标签中的

43、“按钮”按钮，均可打开“输入标签辅助功能属性”对话框，直接单击对话框中的【确定】按钮，即可在光标处插入一个“提交”按钮。2）用同样的方法，在“提交”按钮的后面再插入一个新的按钮。3）选中插入的第2个按钮，其对应的“属性”面板如图8-52所示。从中设置“动作”为“重设表单”，此时“值”后面显示“重置”。,按钮“属性”面板中各选项含义如下：按钮名称：用于输入该按钮的名称，每个按钮的名称不能相同。值：设置按钮上显示的文本。动作：设置用户单击按钮时将发生的操作。包括3个选项：“提交表单”单击按钮时，将表单数据提交到表单指定的处理程序处理；“重设表单”单击按钮时，将表单域内的各对象值还原为初始值；“无”

44、单击按钮时，选择为该按钮附加的行为或脚本。,图8-52 按钮“属性”面板,4）选中插入的按钮，在“属性”面板中设置对齐方式为“居中对齐”，如图8-53所示。5）到此为止，“用户注册”页面制作完成。用户可根据自己的喜好进一步美化表单。6）按下Ctrl+S组合键保存文件。按下F12键预览“用户注册”页面效果。,图8-53 插入并设置属性后的按钮,8.8 案例6 插入Spry表单元素,8.8.1 插入Spry菜单栏8.8.2 插入Spry选项卡式面板8.8.3 插入Spry折叠式控件8.8.4 插入Spry可折叠面板控件,8.8.1 插入Spry菜单栏,Spry菜单栏控件是一组可导航的菜单按钮，使用

45、该控制可以创建横向或纵向的网页下拉或弹出菜单，使用Spry菜单栏可在紧凑的空间中显示大量可导航信息。插入Spry菜单栏的具体操作如下：1）新建一个HTML文档，并对其进行保存。2）在“设计”窗口中插入一个5行1列的表格，在表格的第1行插入准备好的图片。如图8-55所示,图8-55 插入图片,3）将光标置于表格的第2行，选择“插入布局对象Spry菜单栏”命令，或单击“布局”标签中的“Spry菜单栏”按钮，均能打开“Spry菜单栏”对话框，如图8-56所示。4）选中“水平”单选项，单击【确定】按钮，在光标处添加一个横向水平放置的Spry菜单栏，如图8-57所示。5）选中插入的Spry菜单栏，其对应

46、的“属性”面板如图8-58所示。,图8-56“Spry菜单栏”对话框 图8-57 插入的Spry菜单栏,6）在Spry菜单栏“属性”面板中，按下【+】或【-】按钮增加或删除菜单项目。设置每个项目的名称、下级项目的名称、设置菜单项链接的网页地址等，设置情况如图8-59所示。7）保存文档时弹出“复制相关文件”对话框，单击【确定】按钮，Dreamweaver自动在网页文件保存的目录中创建一个SpryAssets文件夹，并将生成的文件保存到该文件夹中。,图8-58 Spry菜单栏“属性”面板,图8-59 设置的Spry菜单属性,8）按下F12键预览网页效果，如图8-60所示。,图8-60 Spry菜单

47、栏预览效果,8.8.2 插入Spry选项卡式面板,在Dreamweaver CS4中，可以借助Spry控件在网页中插入选项卡式面板。插入Spry选项卡式面板的具体操作如下：1）将光标置于表格的第3行，选择“插入布局对象Spry选项卡式面板”命令，或者单击“布局”标签中的“Spry选项卡式面板”按钮，插入一个“Spry选项卡式面板”控件，如图8-61所示。,图8-61 插入的Spry选项卡式面板,2）选中插入的“Spry选项卡式面板”控件，在其“属性”面板中，按下面板中的【+】或【-】按钮增加或删除Spry选项卡式面板。3）在文档编辑窗口，将光标定位在第一个选项卡“Tab1”上，输入选项卡的标题

48、名称，并且输入相对应的选项卡内容。4）用同样的方法分别更改另外的选项卡名称，并添加相应的内容，如图8-62所示。5）选中Spry选项卡式面板，在其“属性”面板的“默认面板”下拉列表中选择某个面板为默认打开的面板，如图8-63所示。,图8-62 编辑Spry选项卡名称和内容,6）保存文档，按下F12键预览网页效果，如图8-64所示。,图8-63 Spry选项卡式面板“属性”面板,图8-64 Spry选项卡式面板预览效果,8.8.3 插入Spry折叠式控件,折叠式控件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠式控件中的内容。在折

49、叠式控件中，每次只能有一个内容面板处于打开且可见的状态。插入Spry折叠式控件的具体操作如下：1）将光标置于表格的第4行，选择“插入布局对象Spry折叠式”命令，或单击“布局”标签中的“Spry折叠式”按钮，均可插入一个“Spry折叠式”控件，如图8-65所示。,图8-65 插入“Spry折叠式”控件,2）选中Spry折叠式控件，在其“属性”面板中，按下【+】或【-】按钮增加或删除Spry折叠式面板。3）在文档编辑区，将光标指向每一个折叠条右侧，出现一个眼睛图标，单击该图标，展开第一个折叠条，从中进行内容的编辑。4）更改第一个折叠条的“标签1”名称，并在“内容1”区输入文本，效果如图8-66所

50、示。,图8-66 编辑Spry折叠式控件,5）用同样的方法更改另外的折叠条名称，并添加相应的内容。6）保存文档，按下F12键预览网页效果，如图8-67所示。,图8-67 Spry折叠式控件预览效果,8.8.4 插入Spry可折叠面板控件,可折叠式面板控件是一个面板，能将内容存储到紧凑的空间中，用户单击控制的选项卡即可隐藏或显示存储在可折叠面板中的内容。插入Spry可折叠面板控件的具体操作如下：1）将光标置于表格的第5行，选择“插入布局对象Spry可折叠面板”命令，或者单击“布局”标签中的“Spry可折叠面板”按钮，均可插入一个“Spry可折叠面板”控件，如图8-68所示。,图8-68 插入“S