第六章 创建表单和Spry构件.

Presentation on theme: "第六章 创建表单和Spry构件."— Presentation transcript:

1 第六章 创建表单和Spry构件

2 第六章创建表单和Spry构件 表单是用户利用浏览器对Web站点进行信息提交的一种界面。网站可以通过表单将一些选项或要求输入的内容显示给用户，用户可以利用表单输入信息或选择选项等，然后将这些信息提交给服务器进行处理。这种查询方式称为交互查询。表单中可包含多种表单对象，包括文本域、下拉列表框、复选框和单选按钮等。 Spry 构件（即表单对象）是预置的常用用户界面组件，是一个页面元素，可以使用CSS自定义这些组件，然后将其添加到网页中。使用 Dreamweaver CS5可以将多个Spry 构件添加到自己的页面中，创建包括具有验证功能的表单元素、折叠构件和选项卡式界面对象等。

3 第六章创建表单和Spry构件 第6.1节 创建表单 第6.2节 创建Sprt构件 第6.3节 其他Sprt构件 第6.4节 应用实例

4 第6.1节 创建表单 6.1.1 表单域和插入表单对象 表单对象属性的设置

5 6.1.1 表单域和插入表单对象 1．表单域的创建与删除
表单域和插入表单对象 1．表单域的创建与删除 （1）创建表单域：将光标移到要插入表单域的位置。单击“插入”（表单）工具栏（如图6-1-1所示）中的“表单”按钮 ，或将表单图标 拖曳到网页文档窗口内，或单击“插入”→“表单”→“表单”命令，都可以在网页设计窗口内创建一个表单域，如图6-1-2所示。表单域在浏览器内是看不到的。单击表单域内部，使光标在表单域内，按Enter键可将表单域调大。按Backspace键可将表单域缩小。

6 表单域和插入表单对象 （2）显示表单域：在表单域创建后，若看不到表单域的矩形红线，可以单击“查看”→“可视化助理”→“不可见元素”命令。 （3）删除表单域：单击表单域的边线处，选择表单域，按Delete键。

7 6.1.1 表单域和插入表单对象 2．表单域“属性”栏 选中表单域，此时表单域“属性”栏性如图6-1-3所示。
表单域和插入表单对象 2．表单域“属性”栏 选中表单域，此时表单域“属性”栏性如图6-1-3所示。 （1）“表单ID”文本框：在该文本框内输入表单域的名字。表单域的名字可用于JavaScript和VBScript等脚本语言中，这些脚本语言可以控制表单域的属性。

8 表单域和插入表单对象 （2）“动作”栏：利用它们可以输入脚本程序或含有脚本程序的HTML文件。 （3）“方法”下拉列表框：用来选择客户端与服务器之间传送数据采用的方式。3个选项是“默认”、GET（获得，即追加表单值到请求该页面URL，并发送服务器GET请求，）和POST（传递，在HTTP请求中嵌入表单数据，并发送服务器POST请求）。

9 表单域和插入表单对象 （4）“目标”下拉列表框：用来指定一个窗口用于显示被调用程序返回的数据。 如果命名的窗口尚未打开，则打开一个具有该名称的新窗口。设置以下任一目标值。 _blank：在未命名的新窗口内打开被链接的目标文档，并保持当前窗口可用。 _new：在新窗口中打开被链接的目标文档用。 _parent：在显示当前文档窗口的父框架窗口中打开目标文档。 _self：在当前框架的同一窗口中打开被链接的目标文档，替代该框架中的内容。 _top：在当前窗口的最外层框架窗口内打开被链接的目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中时也是如此。 （5）“类”下拉列表框：其中有“重命名”、“附加样式表”和创建的CSS样式名称等多个选项，可以用来选择CSS样式、给CSS样式重命名和创建新的CSS样式等。

10 表单域和插入表单对象 3．插入表单对象 将光标移到要插入表单对象的位置，单击“插入”（表单）工具栏中的相应按钮，或单击“插入”→“表单”→“××”命令，都可以调出“插入标签辅助功能属性”对话框，。在其内的“ID”文本框内可以输入表单对象名称，在“标签”文本框中输入标签文字；在“样式”栏内选中一个单选按钮，确定一种样式；在“位置”栏内选中一个单选按钮，确定标签文字位置；还可以设置访问键，再单击“确定”按钮完成设置，同时在光标处插入一个相应的表单对象。如果不在“ID”文本框内输入任何名称就单击“确定”按钮，或者单击“取消”按钮，则可以使表单对象采用默认名称。

11 表单对象属性的设置 1．文本字段属性的设置 文本字段也叫文本域，文本字段 的“属性”栏如图6-1-5所示。它可以是单行，也可以是多行，它用于接收文本、数字和字符。如果选择了“类型”选项组中的“单行”或“密码”单选按钮，则“属性”栏如图6-1-5所示。如果选择了“类型”选项组中的“多行”单选按钮，则“属性”栏如图6-1-6所示。

12 表单对象属性的设置 （1）“字符宽度”文本框：文本域的宽度，即可以显示字符的最多个数。 （2）“最多字符数”文本框：允许输入的字符个数，可以比文本框宽度大。 （3）“初始值”文本框：用来输入文本框的初始内容。

13 表单对象属性的设置 （4）“类型”栏：该栏有“单行”、“多行”或“密码”3个单选按钮，用来选择不同的类型的文本域。当用户输入文字时，“密码”文本域内显示的不是这些文字，而是一行“*”；选择“多行”单选按钮时，其“属性”栏内“初始值”文本框变为带滚动条的多行文本框，“最多字符数”文本框变为“行数”文本框，用来输入文本框的行数。 （5）“禁用”复选框： 选中它后，文本字段变为灰色，不可以使用。 （6）“只读”复选框：选中它后，文本字段只能用来显示内容，不允许输入内容。

14 6.1.2 表单对象属性的设置 2．复选框和单选按钮属性的设置
表单对象属性的设置 2．复选框和单选按钮属性的设置 （1）设置复选框的属性：复选框 有选择和未选择两种状态，有多个复选框允许多选。它的“属性”栏如图6-1-7所示，各选项的作用如下。 ◎“选定值”文本框：用来输入复选框选中时的数值，通常为1或0。 ◎“初始状态”栏：它有两个单选按钮，用来设置复选框的初始状态。

15 表单对象属性的设置 （2）设置单选按钮的属性：一组单选按钮 中只允许选择一个。它的“属性”栏如图6-1-8所示。该“属性”栏内的选项与复选框“属性”栏相应选项的作用一样。

16 表单对象属性的设置 （3）设置单选按钮组的属性：单击“插入”（表单）工具栏中的“单选按钮组”按钮 ，可调出“单选按钮组”对话框，如图所示。利用该对话框可以设置单选按钮组中单选按钮的个数、名称和初始值（通常是1或0等数值）。如果要增加选项，可单击 按钮；如果要删除选项，可选择要删除的选项，再单击 按钮。如果要调整选项的显示次序，可选择要移动的选项，再单击 或 按钮。

17 表单对象属性的设置 （4）设置复选框组的属性：单击“插入”（表单）工具栏中的“复选框组”按钮 ，可调出“组”对话框，如图6-1-10所示。利用该对话框可以设置复选框组中的复选框个数、名称和初始值。

18 6.1.2 表单对象属性的设置 （1）“值”文本框：用来输入按钮上的文字。
表单对象属性的设置 3．按钮属性的设置 用来制作“提交”和“重置”按钮，还可以调用函数。它的“属性”栏如图6-1-11所示，各选项的作用如下。 （1）“值”文本框：用来输入按钮上的文字。 （2）“动作”选项组：它有3个单选按钮，用来选择单击该选项后引起的动作类型。

19 表单对象属性的设置 4．列表/菜单和文件域属性的设置 （1）设置列表/菜单的属性：列表/菜单 的作用是将一些选项放在一个带滚动条的列表框内。它的“属性”栏如图6-1-12所示，其中各选项的作用如下。

20 表单对象属性的设置 （2）设置文件域的属性：文件域（也叫文件字段） 用来让用户从中选择磁盘、路径和文件，并将该文件上传到服务器中。它的“属性”栏如图6-1-14所示，各选项的作用如下。

21 表单对象属性的设置 5．图像域属性的设置 （1）“源文件”文本框与文件夹按钮：单击该按钮，可以调出一个对话框，用来选择图像文件，也可以在文本框内直接输入图像的路径与文件名。 （2）“替代”文本框：其内输入的文字会在鼠标指针移到图像上面时显示出来。 （3）“对齐”下拉列表框：用来选定图像在浏览器中的对齐方式。 （4）“编辑图像”按钮：单击它，可以调出设定的图像编辑器，对图像进行加工。

22 表单对象属性的设置 6．隐藏域属性的设置 （1）“隐藏区域”文本框：用来输入隐藏域的名称，以便于在程序中引用。 （2）“值”文本框：用来输入隐藏域的数值。

23 表单对象属性的设置 7．跳转菜单属性的设置 （1）单击“跳转菜单”按钮 ，屏幕会调出一个“插入跳转菜单”对话框，如图6-1-17所示。在“文本”文本框内输入菜单选按钮的说明文字，在“菜单项”列表框内会显示出来。

24 表单对象属性的设置 （2） 、 、 、 按钮的作用与图6-1-9所示对话框中的按钮作用一样。 （3）在“选择时，前往的URL”文本框内输入要跳转的文件路径与文件名称，也可以单击“浏览”按钮，调出“选择文件”对话框，选择链接的文件。 （4）在“打开URL于”下拉列表框中选择在何处打开文件。 （5）在“菜单名称”文本框内输入跳转菜单的名称。

25 表单对象属性的设置 （6）“选项”选项组中有两个复选框。选择“菜单之后插入前往按钮”复选框后，在菜单的右边会增加一个“前往”按钮。选择“更改URL后选择第一个项目”复选框后，可设置跳转后重新定义菜单第1个选项为默认选项。 （7）单击“确定”按钮，可退出该对话框，页面会显示一个跳转菜单。 （8）选择创建的跳转菜单后，其“属性”栏与图6-1-12基本一样。

26 第6.2节 创建Sprt构件 Sprt构件基本操作和Sprt验证文本域 Sprt验证复选框和Sprt验证选择

27 6.2.1 Sprt构件基本操作和Sprt验证文本域
1．Sprt构件的基本操作 （1）插入Spry构件 （2）选择和编辑Spry构件 （3）设置Spry构件的样式 （4）更改默认的Spry 资源文件夹

28 6.2.1 Sprt构件基本操作和Sprt验证文本域
2．“Sprt验证文本域”Sprt构件 “Sprt验证文本域”Spry 构件是一个文本域，用于输入时显示输入的状态（有效或无效）。单击Sprt验证文本域表单对象左上角的蓝色背景选项卡，可以选中“Sprt验证文本域”Spry构件，调出它的“属性”栏。它的“属性”栏如图6-2-1所示。

29 6.2.1 Sprt构件基本操作和Sprt验证文本域
在“类型”下拉列表框中选择“日期”选项时的“属性”栏如图6-2-2所示。

30 6.2.1 Sprt构件基本操作和Sprt验证文本域
“Sprt验证文本域”Spry构件“属性”栏内各选项的作用 （1）“类型”下拉列表框 （2）“格式”下拉列表框 （3）“图案”文本框 （4）“验证于”栏 （5）“提示”文本框 （6）“预览状态”下拉列表框 （7）“最小字符数”和“最大字符数”文本框 （8）“最小值”和“最大值”文本框 （9）“必须的”复选框 （10）“强制模式”复选框

31 6.2.1 Sprt构件基本操作和Sprt验证文本域
3．“Sprt验证文本区域”Sprt构件 “Sprt验证文本区域”Spry 构件是一个文本区域，该区域在用户输入几个文本句子时显示文本的状态（有效或无效）。它的“属性”栏如图6-2-3所示

32 6.2.1 Sprt构件基本操作和Sprt验证文本域
（1）“预览状态”下拉列表框：它的作用与“Sprt验证文本域”Spry构件的作用一样。 （2）“计数器”栏：该栏有3个单选按钮，选中“无”单选按钮，不添加字符计数器；选中“字符计数”单选按钮，可以添加字符计数器，当用户在文本区域中输入文本时可以显示已经输入的字符个数。默认情况下，添加的字符计数器会出现在构件的右下角，如图6-2-4所示。只有当选择了所允许的最大字符数时，“其余字符”单选按钮才有效。此时也可以添加字符计数器，当用户在文本区域中输入文本时显示还可以输入的字符个数。

33 6.2.1 Sprt构件基本操作和Sprt验证文本域
（3）“禁止额外字符”复选框：选中该复选框后，如果输入的字符个数超过“最大字符数”文本框中的数值，则停止在“Sprt验证文本区域”Spry构件文本框内输入字符。

34 Sprt验证复选框和Sprt验证选择 1．“Sprt验证复选框”Sprt构件 “Spry 验证复选框”Spry构件是HTML表单中的一个或一组复选框。“Spry 验证复选框”Spry构件的“属性”栏如图6-2-5所示。

35 6.2.2 Sprt验证复选框和Sprt验证选择 （1）“预选状态”下拉列表框 （2）“必须（单个）”单选按钮
其中前面介绍过的各选项的作用如下。 （1）“预选状态”下拉列表框 （2）“必须（单个）”单选按钮 （3）“强制范围（多个复选框）”单选按钮 （4）“最小选择数”文本框 （5）“最大选择数”文本框

36 Sprt验证复选框和Sprt验证选择 例如：制作一个网页，该网页的显示效果如图6-2-6所示。选中一个复选框，再单击取消选取，则会显示“ ”提示信息，如图6-2-7所示。如果选中了4个复选框，则会显示“ ”提示信息，如图6-2-8所示。

37 Sprt验证复选框和Sprt验证选择 单击“游泳”复选框上边蓝色背景的选项卡，选中“Spry 验证复选框”Spry构件，单击“文档工具”栏中的“拆分”按钮，切换到“拆分”视图窗口。其中，定义“Sprt验证文本域”Sprt构件的有关代码如下。

38 6.2.2 Sprt验证复选框和Sprt验证选择 2．“Sprt验证选择”Sprt构件
创建了一个“Spry 验证选择”Spry构件，下拉列表框内的选项有“小学”、“初中”……“博士生”。单击选中下拉列表框，调出它的“属性”栏（其内“初始化时选定”列表框中还没设置），选中“列表”单选按钮，在“高度”文本框中输入6，如图6-2-9所示。单击“列表值”按钮，调出“列表值”对话框，按照“列表/菜单”表单对象的操作方法，在“列表值”对话框内输入项目标签和对应的值，如图6-1-13所示。单击“确定”按钮，关闭“列表值”对话框，此时网页内创建的“Spry 验证选择”Spry构件，如图6-2-10所示。

39 Sprt验证复选框和Sprt验证选择 单击“Spry 验证选择”Spry构件，单击选中其上边的蓝色文字“ ”，它的“属性”栏如图6-2-11所示。

40 Sprt验证复选框和Sprt验证选择 “Spry 验证选择”Spry构件的“属性”栏其中各选项的作用如下 （1）“空值”复选框 （2）“无效值”复选框

41 第6.3节 其他Sprt构件 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件

42 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
1．“Sprt菜单栏”Sprt构件 “Sprt菜单栏”Sprt构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。单击子命令，可以调出相应的网页。 单击选中“Spry菜单栏”Spry构件，调出“Spry菜单栏”对话框，如图6-3-1所示。

43 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
“Spry菜单栏”构件“属性”栏如图6-3-2所示。

44 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
“属性”栏中各选项的作用、使用“Spry菜单栏”构件的基本方法和注意事项如下。 （1）加号按钮 （2）减号按钮 （3） 和 按钮 （4）“文本”文本框 （5）“链接”栏内的 按钮 （6）“标题”文本框 （7）“目标”文本框 （8）使子菜单显示在Flash动画上边 （9）定位子菜单

45 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
2．“Sprt折叠式”Sprt构件 图6-3-3是一个由“Sprt折叠式”Sprt构件组成的网页，其中有4个面板，第1个面板处于展开状态。制作该网页及创建和修改“Sprt折叠式”Sprt构件的方法如下。

46 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
（1）在“Sprt”文件夹内新建一个名称“Sprt折叠式.htm”的网页。单击“插入”→“Spry”→“Spry折叠式”命令，在光标处创建一个“Sprt折叠式”Sprt构件，如图6-3-4所示。

47 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
（2）选中“Sprt折叠式”Sprt构件，它的“属性”栏如图6-3-5（a）所示。单击选中“属性”栏内“面板”列表框上边的 按钮，在“面板”列表框内增加一个面板名称“标签3”，再单击 按钮，在“面板”列表框内再增加一个面板名称“标签4”。

48 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
（3）单击选中“属性”栏内“面板”列表框中的面板名称“标签1”，拖曳选中网页内的“标签1”文字，将该文字改为“中秋节”。按照相同的方法，再将网页内的“标签2”文字改为“元宵节”，将网页内的“标签3”文字改为“清明节”，将网页内的“标签4”文字改为“春节”。然后，利用它们的“属性”栏将这些文字改为红色、加粗、大小为16磅、宋体文字。此时，“Sprt折叠式”Sprt构件的“属性”栏如图6-3-5（b）所示。

49 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
（4）打开“Sprt”文件夹内的“中秋节.txt”、“元宵节.txt”、“清明节.txt”和“春节.txt”文本文件。单击选中“Sprt折叠式”Sprt构件“属性”栏内“面板”列表框中的“中秋节”面板名称，展开“中秋节”面板，如图6-3-6所示（面板内还没有文字）。

50 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
（5）将“中秋节.txt”文件内的文字复制到剪贴板内，再粘贴到网页内“中秋节”面板名称下边的“内容1”文字处，替换原来的文字“内容1”。然后，选中粘贴的文字，再利用它的“属性”栏将选中的文字改为蓝色、加粗、大小为14磅、宋体文字，如图6-3-5所示。 （6）按照上述方法，分别将“元宵节.txt”、“ 清明节.txt”和“春节.txt”文本文件内的文字复制粘贴到“元宵节”、“ 清明节”和“春节”面板内的“内容”中。

51 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
（7）然后，分别选中面板内的这些文字，再利用它的“属性”栏将选中的文字改为蓝色、加粗、大小为14磅、宋体文字。其中，展开的“春节”面板如图6-3-7所示。

52 6.3.1 “Sprt菜单栏”和“Sprt折叠式”Sprt构件
默认情况下，折叠构件会展开以填充可用空间。可以通过设置折叠式容器的width属性来限制折叠构件的宽度。方法是：打开“Sprt”文件夹内的“SpryAssets”文件夹中的“SpryAccordion.css”文件，在“CSS样式”面板内单击选中“.Accordion”选项，如图6-3-8（a）所示；再单击“添加属性”文字，使它变成下拉列表框，选中该下拉列表框内的“width”选项，然后输入其值（如600），如图6-3-8（b）所示。

53 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
“Sprt可折叠面板”Sprt构件是一个面板，它可以将内容存储到紧凑的空间中。单击该构件面板的选项卡，即可以展开或折叠面板，显示或隐藏存储在可折叠面板中的内容。图6-3-9（a）所示是一个处于展开的“Sprt可折叠面板”Sprt构件，图6-3-9（b）所示是一个处于折叠状态的“Sprt可折叠面板”Sprt构件

54 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
（1）新建一个网页，以名称“Sprt可折叠面板.htm”保存在“Sprt”文件夹内。 （2）单击“插入”→“Spry”→“Sprt可折叠面板”命令，即可在网页内光标处创建一个“Sprt可折叠面板”Sprt构件，如图6-3-10所示。 （3）拖曳选中网页内的“标签”文字，将该文字改为“春节”，再利用它的“属性”栏将选中的文字改为宋体、红色、加粗、大小为18磅的文字。

55 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
（4）拖曳选中网页内的“内容1”文字，删除该文字，复制粘贴一些文字，再利用它的“属性”栏将选中的文字改为宋体、蓝色、加粗、16磅文字，如图6-3-11所示。 单击网页内“春节”面板标签内的右边的眼睛图标 ，展开“春节”面板；当出现一个 图标时，单击该图标，可收缩“春节”面板。 （5）单击选中“Sprt可折叠面板”Sprt构件，它的“属性”栏如图6-3-12所示。其中各选项的作用如下。

56 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
图6-3-13是一个由“Sprt选项卡式面板”Sprt构件组成的网页。单击网页内的标签，可以切换到相应的选项卡。图6-3-13（a）是第1选项卡式面板处于打开状态，图6-3-13（b）是第3选项卡式面板处于打开状态。

57 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
（1）新建一个网页文档，以名称“Sprt选项卡式面板.htm”保存在“Sprt”文件夹内。单击“插入”→“Spry”→“Sprt选项卡式面板”命令，即可在网页内光标处创建一个“Sprt选项卡式面板”Sprt构件，如图6-3-14所示。

58 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件

59 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
（3）拖曳选中网页内的“标签1”文字，将该文字改为“中秋节”，选中“标签2”文字，将该文字改为“元宵节”，选中“标签3”文字，将该文字改为“清明节”，拖曳选中网页内的“标签4”文字，将该文字改为“春节”, 再利用它的“属性”栏将选中文字的属性改为宋体、红色、加粗、大小为18磅。此时的“属性”栏如图6-3-16所示。

60 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
（4）将鼠标指针移到网页内面板标签内的右边，当出现一个眼睛图标 时，单击该图标，可以切换到该面板。单击选中“中秋节”面板，拖曳选中网页内的“内容1”文字，删除该文字，复制粘贴一些文字，再利用它的“属性”栏将选中文字的属性改为宋体、蓝色、加粗、大小为16磅，如图6-3-17（a）所示。 （5）切换到“元宵节”面板，拖曳选中网页内的“内容2”文字，删除该文字，复制粘贴一些文字，再利用它的“属性”栏将选中文字的属性改为宋体、蓝色、加粗、大小为16磅。此时设计的网页中的“Sprt折叠式”Sprt构件如图6-3-17（b）所示。

61 6.3.2 “Sprt可折叠面板”和“Sprt选项卡式面板”Sprt构件
（6）切换到“清明节”面板，拖曳选中网页内的“内容3”文字，删除该文字，复制粘贴一些文字，再将粘贴的文字的属性改为宋体、蓝色、加粗、大小为16磅。切换到“春节”面板，拖曳选中网页内的“内容4”文字，删除该文字，复制粘贴一些文字，再将粘贴的文字的属性改为宋体、蓝色、加粗、大小为16磅。

62 第6.4节 应用实例 6.4.1【实例6-1】建筑设计人员登记表
第6.4节 应用实例 6.4.1【实例6-1】建筑设计人员登记表 （1）新建一个网页文档，调出“页面属性”对话框，利用该对话框设置网页背景色为“浅蓝色”，再设置标题。以名字“H6-1.htm”保存在“D:\BDWEB2\H6-1”文件夹内。

63 第6.4节 应用实例 （2）将光标定位第1行。单击“插入”（表单）工具栏中的“表单”按钮 ，在网页设计窗口内光标处创建一个表单域，设置名字为“WANYE”。 （3）单击表单域内部，使光标出现。再输入加粗文字“参展人员姓名：”，然后在该文字的右边加入一个文本域表单对象。利用它的“属性”栏，设置该文本框表单对象的名字为“XM”，在“字符宽度”和“最多字符数”文本框内均输入20。

64 第6.4节 应用实例 （4）输入加粗文字“性别：”，然后在该文字的右边加入一个单选按钮组表单对象，利用它的“属性”栏设置该单选按钮组表单对象的名字为“XB”。单击选中第1个单选按钮，在“属性”栏的“选定值”文本框内输入单选按钮选中时的数值1，在“初始状态”栏内选中“已勾选”单选项，然后在该单选按钮的右边输入加粗文字“男”。再单击选中第2个单选按钮，在“属性”栏的“选定值”文本框内输入单选按钮选中时的数值0；在“初始状态”栏内选中“未选中”单选按钮。然后在该单选按钮的右边输入加粗文字“女”。 （5）按Enter键，使光标移到下一行，输入加粗文字“建筑设计名称：”。然后在该文字的右边加入一个文本框表单对象。利用它的“属性”栏，设置该文本框表单对象的名字为“MC”，在“字符宽度”和“最多字符数”文本框内都输入20。

65 第6.4节 应用实例 （6）按Enter键，输入加粗文字“编号：”，在该文字的右边加入一个文本域表单对象。设置该文本框表单对象名字为“BH”，在“字符宽度”和“最多字符数”文本框内分别输入8和4，在“类型”栏内选择“密码”单选项。 （7）按Enter键，输入加粗的文字“建筑设计类别：”文字，然后在该文字的右边加入一个复选框表单对象。设置它的名字为“JZLB1”，在“选定值”文本框内输入复选框选中时的数值1，其他使用默认项，再输入文字“宾馆”。其后的三个复选框表单对象的插入方法与“JZLB1”一样，只是文字说明和复选框表单对象的名字不一样。

66 第6.4节 应用实例 （8）按Enter键，输入加粗文字“电子邮箱：”，再在该文字右边加入一个文本框表单对象。设置它的名字为“DZYX”，在“字符宽度”和“最多字符数”文本框内都输入40。 （9）按Enter键，输入加粗文字“学历：”，再在该文字右边加入一个列表/菜单表单对象。设置它的名字为“XL”；在“类型”栏内选择“菜单”；单击“列表值”按钮，调出“列表值”对话框，输入菜单的选项内容和此选项提交后的返回值，如图6-4-2所示。

67 第6.4节 应用实例 （10）输入加粗文字“工作单位：”，再按照上述方法插入工作单位列表/菜单表单对象和文字说明。在“列表值”对话框内输入的内容如图4-3-2所示 （11）按Enter键，输入加粗文字“参展作品特点介绍：”。再按Enter键，在“参展作品特点介绍：”文字的下边加入一个文本框表单对象。设置它的名字为“ZPTD”，在“字符宽度”和“最多字符数”文本框内分别输入80和78，在“类型”栏内选择“多行”单选项。在“换行”列表框中选择“实体”。 （12）按Enter键，加入两个按钮表单对象。利用它的“属性”栏，分别设置按钮的名字为“AN1”和“AN2”。对于第1个按钮，在“标签”文本框内输入按钮上的文字“提交”，在“动作”栏单击选中“提交表单”单选项。对于第2个按钮，在“标签”文本框内输入按钮上的文字“重置”，在“动作”栏单击选中“重设表单”单选项。

68 第6.4节 应用实例 6.4.2【实例6-2】跟我学制作表单

69 第6.4节 应用实例 设置好的“插入跳转菜单”对话框如图6-4-4所示。

70 第6.4节 应用实例 最后设置好的“列表值”对话框

71 第6.4节 应用实例 6.4.3【实例6-3】计算机协会会员申请表

72 第6.4节 应用实例 1．创建Sprt验证文本域 （1）输入18像素、宋体、加粗、居中分布、蓝色文字“计算机协会会员申请表”。单击“表”字右边，将光标定位在“表”字右边。按Enter键，将光标定位在下一行的起始位置。 （2）单击“插入”（表单）栏内的“Sprt验证文本域”按钮 ，调出“输入标签辅助功功属性”对话框，在该对话框内的“ID”文本框输入“xingming”，在“标签”文本框中输入“姓名：”，选中“无标签标记”和“表单项前”单选按钮。单击“确定”按钮，创建一个Sprt构件，该Sprt构件左边的标签文字是“姓名：”，如图所示

73 第6.4节 应用实例 （3）单击选中“Sprt验证文本域”Sprt构件对象，如图6-4-9所示。在它的“属性”栏内的“类型”下拉列表框中选择“无”选项，在“最小字符数”文本框中输入2，在“最大字符数”文本框中输入8，在“提示”文本框中输入“请输入姓名！”， 选中“onChange”（在改变时）复选框，在“预览状态”下拉列表框中选择“未达到最小字符数”选项，如图6-4-10所示。选中“onChange”后，在显示网页后，在Sprt验证文本域的文本框内输入文字时，当输入的字符个数改变且不符合要求时，会自动显示相应的提示信息。

74 第6.4节 应用实例 （4）采用相同的方法，再创建一个标签文字为“密码：”、ID值为“mima”、名字为“sprytextfield2”的Sprt验证文本域，它的“属性”栏设置如图6-4-10所示。

75 第6.4节 应用实例 （5）选中刚刚创建的Sprt验证文本域的文本域，调出它的“属性”栏，选中“密码”单选按钮，如图6-4-11所示。

76 第6.4节 应用实例 （6）采用相同的方法，在创建一个标签文字为“电子邮箱地址：”、ID值为“ ”的Sprt验证文本域，它的“属性”栏设置如图6-4-12所示。

77 第6.4节 应用实例 （7）选中刚刚创建的Sprt验证文本域的文本域，调出它的“属性”栏，选中“单行”单选按钮，在“字符宽度”文本框内输入30，如图6-4-13所示。

78 第6.4节 应用实例 （8）采用相同的方法，在创建一个标签文字为“个人简历：”、ID值为“jian”的Sprt验证文本域，它的“属性”栏设置如图6-4-14所示。

79 第6.4节 应用实例 （9）选中刚刚创建的Sprt验证文本域的文本域，调出它的“属性”栏，选中“多行”单选按钮，在“字符宽度”文本框内输入40，“行数”文本框内输入3，“换行”下拉列表框内选择“实体”，如图6-4-15所示。

80 第6.4节 应用实例 （10）将所有Sprt验证文本域的标签文字设置为宋体、粗体、蓝色和18磅大小。

81 第6.4节 应用实例 2．创建其他Sprt构件 （1）将光标定位在第3行Sprt验证文本域右边，按Enter键，光标移到下一行。输入蓝色、18磅、加粗、宋体文字“选择您的爱好”。按Enter键，将光标定位在下一行。 （2）单击“插入”（表单）栏内的“Sprt验证复选框”按钮 ，调出“输入标签辅助功功属性”对话框，在该对话框内的“ID”文本框中输入“aihao1”，在“标签文字”文本框中输入“读书”，选中“无标签标记”单选按钮。然后，单击“确定”按钮，即可创建一个名字为“aihao”的“Sprt验证复选框”Sprt构件，该Sprt构件的标签文字是“读书”。

82 第6.4节 应用实例 （3）选中“Sprt验证复选框”Sprt构件对象，在它的“属性”栏内，在“实施范围（多个）”下拉列表框选中“初始”选项；选中“强制范围（多个复选框）”单选按钮，在“最小选择数”文本框内输入一个数值2，当用户选择的复选框数小于2时，会在Spry构件后边显示“ ”提示信息；在“最大选择数”文本框内输入一个数值5，则当用户选择的复选框数大于5时，会在Spry构件后边显示“ ”提示信息。其他设置如图6-4-16所示。

83 第6.4节 应用实例 （4）将光标定位在“Sprt验证复选框”Sprt构件内的最右边（蓝色框内）。再单击“插入”（表单）栏内的“复选框”按钮 ，调出“输入标签辅助功功属性”对话框，在该对话框内的“ID”文本框中输入“aihao2”，在“标签文字”文本框中输入“旅游”，选中“在表单后”单选按钮，单击“确定”按钮，创建一个复选框。 （5）按照上述方法再在“骑马”复选框的右边创建一个其它5个复选框。这7个复选框都属于“Spry 验证复选框”Spry框架内的复选框。 （6）将光标定位在“Spry 验证复选框”Spry框架右边（蓝色框右边），按Enter键，将光标定位在下一行。单击“插入”（表单）栏内的“Sprt验证选择”按钮 ，调出“输入标签辅助功功属性”对话框，在该对话框内的“ID”文本框中输入“xueli”，在“标签文字”文本框中输入“学历”，选中“无标签标记”单选按钮。单击“确定”按钮，创建一个名字为“xueli”的Sprt构件，该Sprt构件的标签文字是“学历”的“Spry 验证选择”Spry构件。

84 第6.4节 应用实例 （7）单击选中下拉列表框，调出它的“属性”栏（其内“初始化时选定”列表框中还没有内容），选中“菜单”单选按钮，如图6-4-17所示。单击“属性”栏内的“列表值”按钮，调出“列表值”对话框，按照“列表/菜单”表单对象的操作方法，在“列表值”对话框内输入项目标签和对应的值，如图6-4-18所示。单击“确定”按钮，关闭“列表值”对话框，此时网页内创建的“Spry 验证选择”Spry构件如图6-4-19所示。

85 第6.4节 应用实例 （8）单击选中“Spry 验证选择”Spry构件，在它的“属性”栏内，选中“空值”复选框，在“预览状态”下拉列表框中选择“初始”选项，则在设计状态和选中列表框内的无值选项（在“列表值”对话框内只设置了项目标签“——”，没有设置对应的值）时，在列表框右边会显示“ ”提示信息。其他设置如图6-4-20所示。

86 第6.4节 应用实例 （9）将光标定位在最下边的一行。然后，单击“插入”（表单）栏内的“按钮”按钮 ，调出“输入标签辅助功功属性”对话框，在该对话框内的“ID”文本框中输入“TIJIAO”，在“标签文字”文本框中不输入内容，单击“确定”按钮，创建一个“提交”按钮。

87 第6.4节 应用实例 6.4.4【实例6-4】名胜图像浏览 1．制作“TOP1.htm”网页
第6.4节 应用实例 6.4.4【实例6-4】名胜图像浏览 1．制作“TOP1.htm”网页 （1）按照“跟我学制作表单”网页的制作方法，在“D:\BDWEB2\H6-4”文件夹内制作“H6-4.html”、“LEFT.html”、“RIGHT.html”、“TOP.html”和“北京故宫.html”等网页文件。 （2）打开“D:\BDWEB2\H6-4”文件夹内的“TOP.htm”网页，将光标定位在“名胜图像浏览”文字的右边，按Enter键，将光标定位到标题文字的下一行。

88 第6.4节 应用实例 （3）单击“插入”→“Spry”→“Spry菜单栏”命令，调出“Spry菜单栏”对话框，如图6-4-23所示，选中“水平”单选按钮，再单击“确定”按钮，关闭“Spry菜单栏”对话框，同时在网页内标题文字的下一行创建一个Spry菜单栏，如图6-4-24所示。

89 第6.4节 应用实例 （4）选中Spry菜单栏的蓝色背景选项卡，单击“显示代码视图”按钮 ，切换到“代码”视图窗口。其中，与定义“Spry菜单栏”Sprt构件的有关程序如下。

90 第6.4节 应用实例 （5）如果创建的Spry菜单栏内的各菜单选按钮太宽，可以打开“SpryAssets”文件夹内的“SpryMenuBarHorizontal.css”CSS文件。在“CSS样式”面板内单击选中找到“ul.MenuBarHorizontal ul”、“ul.MenuBarHorizontal li”和“ul.MenuBarHorizontal ul li”代码，分别将“width”属性值改小一些，或者改为“auto”（以删除固定宽度），然后向该规则中添加“white-space: nowrap;”，如图6-4-25所示。 如果创建的是垂直的Spry菜单栏，则在“SpryMenuBarHorizontal.css”CSS文件内找到相应文件，在分别将“width

91 第6.4节 应用实例 （5）选中“Sprt菜单栏”Sprt构件，在其“属性”栏内调整文字大小、颜色等。再将菜单内的“项目1”…… “项目4”名称进行修改，如图6-4-26所示。

92 第6.4节 应用实例 2．设置菜单和创建链接 （1）选中Spry菜单栏，调出它的“属性”栏，如图6-4-26所示。选中左边列表框中的“北京建筑”选项，再选中中间列表框内的“项目1.1”选项，将右边的“文本”文本框中的文字改为“北京故宫”；再选中中间列表框内的“项目1.2”选项，将右边的“文本”文本框中的“项目1.2”文字改为“北京天坛”；接着将“项目1.3”选项文字改为“颐和园”

93 第6.4节 应用实例 （2）单击中间列表框上边的 按钮，增加一个“无标题项目”选项，再将该选项的名称改为“十七孔桥”，如图6-4-27所示。

94 第6.4节 应用实例 （3）选中左边列表框中的“山水风景”选项，再4次单击中间列表框上边的 按钮，增加4个“无标题项目”选项。单击选中中间列表框内的第1个“无标题项目”选项，将右边的“文本”文本框中的“无标题项目”文字改为“苏州园林”；继续将中间列表框内的其他 “无标题项目”文字分别改为“庐山风景”、“ 九寨沟”和“桂林山水”，如图6-4-28所示。

95 第6.4节 应用实例 （4）选中左边列表框中的“其他名胜”选项，单击选中中间列表框内的第1个“项目3.1”选项，3次单击第3个列表框上边的 按钮，删除三级命令，再将右边的“文本”文本框中的“项目3.1”文字改为“中国长城”。 单击选中中间列表框内的第1个“项目3.2”选项，将右边的“文本”文本框中的“项目3.2”文字改为“布达拉宫”。再将“项目3.3”文字改为“丽江古城”。单击中间列表框上边的 按钮，增加一个“无标题项目”选项。将该“无标题项目”文字改为“香格里拉”。 （5）选中中间列表框内的“北京故宫”选项，单击右边“链接”栏内的 按钮，调出“选择文件”对话框，利用该对话框选中“D:\BDWEB2\H6-4”文件夹内的“北京故宫.html”网页文档，单击“确定”按钮，即可在“链接”文本框中显示“北京故宫.html”，并建立“北京故宫”命令与“北京故宫.html”网页的链接。 （6）在“标题”文本框中输入“北京故宫”，它是菜单的提示文字；在“目标”文本框中输入“main”，用来确定对链接的网页在网页内右边框架（其名称为“main”）中显示。

96 第6.4节 应用实例 （7）按照上述方法，继续设置“北京天坛”、“颐和园”和“十七孔桥”命令的链接、提示和目标。此时的“属性”栏如图6-4-29所示。

97 第6.4节 应用实例 （8）接着设置“山水风景”、“其他名胜”一级命令下各二级子命令，“世界风景”一级命令。另外，选中列表框中的选项时，如不链接文件，则“链接”文本框中应输入“#”。