（中职）第6章 表单和Spry构件ppt课件.ppt

《（中职）第6章 表单和Spry构件ppt课件.ppt》由会员分享，可在线阅读，更多相关《（中职）第6章 表单和Spry构件ppt课件.ppt（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题（中职）第6章 表单和Spry构件第 6 章 表单和 Spry 构件6.1【案例18】“鲜花展人员登记表”网页6.1.2 相关知识表单域和部分表单1创建和删除表单域及插入表单对象（1）创建表单域：将光标移到要插入表单域的位置。单击“插入”（表单）栏内的“表单”按钮 ，或用鼠标将“插入”（表单）栏内的表单图标 拖动到网页文档窗口内，即可在网页设计窗口内创建一个表单域，如图 6-1-13 所示。表单域在浏览器内是看不到的。图 6-1-13 创建的表单域单击表单域内部，将光标移到表单域内，按【Enter】键即可将表单域扩大；按【Backspace】键，可使表单域缩小。在表单域创

2、建后，若看不到表单域的红线，可以单击“查看”“可视化助理”“不可见元素”菜单命令，将表单域的矩形红线显示出来。（2）删除表单域：单击表单域的边线处，选中表单域，按【Delete】按键。（3）插入表单对象：将光标移到要插入表单对象的位置，然后单击“插入”（表单）栏中的相应按钮，即可在光标处插入一个相应的表单对象。另外，单击“插入记录”“表单”菜单命令，打开它的下一级菜单。根据要插入的表单对象类别，单击菜单内的菜单命令也可插入表单对象。2表单域“属性”栏单击选中表单域，此时表单域“属性”栏如图 6-1-14 所示。图 6-1-14 表单域“属性”栏（1）“表单名称”文本框：在该文本框内输入表单域的

3、名字。表单域的名字可用于JavaScript 和 VBScript 等脚本语言中，这些脚本语言可控制表单域的属性。在表单和表单内对象的“属性”栏中，通常都有一个名称文本框。（2）“动作”文本框和按钮：利用它们可以输入脚本程序或含有脚本程序的 HTML 文件。（3）“方法”下拉列表框：用来选择客户端与服务器之间传送数据采用的方式。3 个选项是默认、GET（获得，即追加表单值到 URL，并发送服务器 GET 请求）和 POST（传递，在消息正文中发送表单的值，并发送服务器 POST 请求）。（4）“类”下拉列表框：其中有“重命名”、“管理样式”和创建的 CSS 样式名称等多个选项，可以用来选择 C

4、SS 样式、给 CSS 样式重命名以及创建新的 CSS 样式等。3设置文本字段和文本区域的属性文本字段也叫文本域，表单中经常使用文本字段。它可以是单行，也可以是多行，用于接收文本、数字和字符。文本字段 的“属性”栏如图 6-1-6 所示。如果选中“类型”内的“密码”单选按钮，则“属性”栏如图 6-1-7 所示。如果选中了“类型”栏内的“多行”单选按钮，则“属性”栏如图 6-1-8 所示。创建文本区域的方法和创建文本字段的方法基本一样，只是单击的是“文本区域”按钮。文本区域的“属性”栏与图 6-1-8 所示基本一样。在网页中创建的文本区域是一个右边带滚动条的文本框。文本字段 和文本区域“属性”栏

5、内各选项的作用如下。（1）“字符宽度”文本框：文本域的宽度，即可显示字符的最多个数。（2）“类型”选项区域：该选项区域有 3 个单选按钮，用来选择“单行”、“多行”或“密码”文本域。“密码”文本域的特点是当用户输入文字时，密码文本域内显示的不是这些文字，而是用“”来显示。选择“多行”单选按钮时，其“属性”栏会发生变化：“初始值”文本框变为带滚动条的多行文本框，同时“换行”下拉列表框状态为有效，“字符宽度”文本框改为“行数”文本框，用来输入文本框的行数。（3）“最多字符数”文本框：允许输入的字符个数，可以比文本框宽度大。（4）“初始值”文本框：用来输入文本框的初始内容。（5）“换行”下拉列表框：

6、只有在选择“多行”类型后才有效。“换行”下拉列表框内有 4 个选项，它们的含义如下。“默认”：采用浏览器的默认值。“关”：当输入的文字超过文本框的宽度时，不换行则会出现滚动条。“虚拟”：当输入的文字超过文本框的宽度时，会自动换行，但向服务器传输数据时无回车符。“实体”：当输入的文字超过文本框的宽度时，会自动加入回车符换行。4设置复选框和单选按钮的属性（1）设置复选框的属性：复选框 有选中和未选中两种状态，多个复选框允许多选。其“属性”栏如图 6-1-15 所示，各选项的作用如下：“选定值”文本框：用来输入复选框选中时的数值，通常为 1 或 0。“初始状态”选项区域：包括两个单选按钮，用来设置复

7、选框的初始状态。图 6-1-15 复选框的“属性”栏（2）设置单选按钮的属性：一组单选按钮中只允许选中一个。其“属性”栏如图 6-1-16所示。该“属性”栏内的选项与复选框“属性”栏相应选项的作用一样。图 6-1-16 单选按钮的“属性”栏109（3）设置单选按钮组的属性：单选按钮组 也称为单选项组。单击“插入”（表单）栏中的“单选按钮组”按钮 ，可弹出“单选按钮组”对话框，如图 6-1-9 所示。利用该对话框可以设置单选按钮组中单选按钮的个数、名称和初始值。如果要增加选项，可单击按钮；如果要删除选项，可选中要删除的选项，再单击 按钮。如果要调整选项的显示次序，可选中要移动的选项，再单击 或

8、按钮。5设置按钮的属性按钮用来制作“提交”和“重置”按钮，还可以打开函数。其“属性”栏如图 6-1-17所示。按钮“属性”栏中各选项的作用如下。图 6-1-17 按钮的“属性”栏（1）“标签”文本框：用来输入按钮上的文字。（2）“动作”选项区域：有 3 个单选按钮，用来选择单击该选项后引起的动作类型。“提交表单”：选中后，可以向服务器提交整个表单。“重设表单”：选中后，可以取消前面的输入，复位表单。“无”：选中后，表示是一般按钮，可用来调用脚本程序。6设置列表/菜单和文件域的属性（1）设置列表/菜单的属性：列表/菜单 的作用是将一些选项放在一个带滚动条的列表框内。它的“属性”栏如图 6-1-1

9、8 所示，其中各选项的作用如下：“类型”选项区域：它有两个单选按钮，用来选择“菜单”或“列表”。“菜单”就是下拉列表框；选择“列表”单选按钮后，其右边的各选项会变为可选项，此时的列表框右边会显示滚动条。“高度”文本框：用来输入列表的高度值，即可以显示的行数。“允许多选”复选框：选中后，表示列表中的各选项可以同时选择多项。“初始化时选定”列表框：用来设置第一次弹出该列表或菜单时，列表或菜单中的默认选项。“列表值”按钮：单击该按钮，可以弹出一个“列表值”对话框，如图 6-1-10 所示。利用该对话框可以输入菜单或列表内显示的选项内容（在“标签”列内），以及输入此选项提交后的返回值（在“值”列内）。

10、图 6-1-18 列表/菜单的“属性”栏（2）设置文件域的属性：文件域（也称文件字段） 用来让用户从中选择磁盘、路径和文件，并将该文件上传到服务器中。其“属性”栏如图 6-1-19 所示，各选项的作用如下。110图 6-1-19 文件域的“属性”栏“字符宽度”文本框：用来输入文件域的宽度，即可显示字符的最多个数。“最多字符数”文本框：用来输入允许输入的字符个数，可以比文件域的宽度值大。6.2【案例19】“世界名花浏览1”网页6.2.2 相关知识“跳转菜单”等表单1设置图像域的属性图像域用来设置图像域内的图像，其“属性”栏如图 6-2-3 所示。（1）“图像区域”文本框：在“属性”栏内的左下角，

11、用来输入图像域的 ID。（2）“源文件”文本框与文件夹按钮：单击该按钮，可以弹出一个对话框，用来选择图像文件，也可以在文本框内直接输入图像文件的路径与文件名。（3）“替代”文本框：其内输入的文字会在鼠标指针移到图像上面时显示出来。（4）“对齐”下拉列表框：用来选定图像在浏览器中的对齐方式。（5）“编辑图像”按钮：单击该按钮，可以打开图像编辑器，对图像进行加工。2设置隐藏域的属性隐藏域提供了一个可以存储表单主题、数据等的容器。在浏览器中看不到它，但处理表单的脚本程序时可调用它的内容。其“属性”栏如图 6-2-12 所示，各选项的作用如下。（1）“隐藏区域”文本框：用来输入隐藏域的名称，以便于在程

12、序中引用。（2）“值”文本框：用来输入隐藏域的数值。如果在加入隐藏域时，没有显示 图标，可单击“编辑”“首选参数”菜单命令，弹出“首选参数”对话框，再在“分类”列表框中选择“不可见元素”选项。然后选中“表单隐藏区域”复选框，再单击“确定”按钮退出。3设置跳转菜单的属性跳转菜单采用下拉列表框或列表的方式来实现链接跳转，其外观与列表/菜单 一样，是菜单的另外一种形式。用户选中该菜单的某一个选项后，单击“前往”按钮，则当前页面或框架会跳转到其他页面。创建跳转菜单的操作方法如下。（1）单击“插入”（表单）栏内的“跳转菜单”按钮 ，弹出一个“插入跳转菜单”对话框，如图 6-2-7 所示。其中个选项的设置

13、作用如下。“菜单项”列表框：用来显示菜单选项的名称和返回值。可以在此输入、删除和增加菜单选项，以及调整菜单选项的显示次序。111图 6-2-12 隐藏域的“属性”栏“文本”文本框：输入选中的菜单选项的名称，在“菜单项”列表框内会显示出来。 在“选择时，转到 URL”文本框内输入要跳转的文件路径与文件名，也可以单击“浏览”按钮，弹出“选择文件”对话框，选择与选定的菜单选项相链接的网页文件。、和按钮的作用与图 6-1-9 所示“单选按钮组”对话框中的一样。“打开 URL 于”下拉列表框：该列表框内的选项是所有分栏框架的名称，用来选择一个分栏框架的名字，确定在哪个框架内显示网页内容。 在“菜单 ID

14、”文本框内输入跳转菜单的名称。“选项”区域内有两个复选框。选中“菜单之后插入前往按钮”复选框后，在菜单右边会增加一个“前往”按钮。选中“更改 URL 后选择第一个项目”复选框后，表示在打开新页面后，使菜单中选中的选项为第一项。6.3【案例20】“用户登录”网页6.3.2 相关知识验证类 Spry 构件1Sprt 构件简介和 Sprt 构件的基本操作Spry 构件是预置的常用用户界面组件，是一个网页页面元素，可以使用 CSS 自定义这些组件，然后将其添加到网页中。使用 Dreamweaver，可以将多个 Spry 构件添加到页面中，这些构件包括折叠构件、选项卡式界面和具有验证功能的表单元素等。S

15、pry 构件由构件结构（用来定义构件结构组成的 HTML 代码）、构件行为（用来控制构件如何响应用户启动事件的 JavaScript 程序，它赋予构件功能）和构件样式（用来指定构件外观的 CSS，包含设置构件样式所需的全部信息）3 部分组成。Spry 框架支持一组用标准 HTML、CSS 和 JavaScript 编写的可重用构件，使用 Spry 框架可以加强用户体验，例如在网页中创建可验证的文本域表单对象等。Spry 框架中的每个构件都与唯一的 CSS 和 JavaScript 文件相关联。当在 Dreamweaver 页面内插入构件后，Dreamweaver 会自动将这些文件链接到该页面，

16、以使构件中包含该页面的功能和样式。与网页内所插入的构件相关联的 CSS 文件和 JavaScript 文件时会自动根据该构件命名，例如与折叠构件相关联的文件名是 SpryAccordion.css 和 SpryAccordion.js。当在已经保存的页面中插入构件时，Dreamweaver 会在站点中或其他指定的目录下创建一个名称为SpryAssets 的文件夹，并将相应的 CSS 文件和 JavaScript 文件保存在该文件夹内。Sprt 构件的基本操作方法如下。（1）插入 Spry 构件：单击“插入记录”Spry“”菜单命令（“”是要插入的 Spry 构件的名称），或者单击“插入”（表单

17、）栏内的 Spry 类别中的按钮，都可以弹出“输入标签辅助功能属性”对话框，在该对话框内的 ID 文本框中输入 ID 值，在“标签文字”文本框中输入标签文字；在“样式”选项区域内选中一个单选按钮，确定一种样式；在“位置”选项区域内选中一个单选按钮，确定标签文字的位置；还可以设置访问键。然后，单击“确定”按钮，即可插入一个 Spry 构件对象。（2）选择和编辑 Spry 构件：将鼠标指针移到构件之上，会在构件的左上角显示蓝色背景的选项卡，单击构件左上角中的构件选项卡，即可选中该 Spry 构件。此时，“属性”栏112会切换到该 Spry 构件的“属性”栏。利用 Spry 构件的“属性”栏可以编辑

18、该 Spry 构件。（3）设置 Spry 构件的样式：在站点或其他目录下的 SpryAssets 文件夹中可以找到与该构件相对应的 CSS 文件，可以根据自己的喜好来编辑 CSS 文件。另外，也可以利用“CSS样式”面板来设置 Spry 构件的属性，这与对页面上其他带样式的元素所做的操作一样。（4）更改默认的 Spry 资源文件夹：当在已保存的页面中插入 Spry 构件后，Dreamweaver会在站点中创建一个 SpryAssets 文件夹，并将相应的 CSS 文件和 JavaScript 文件存放在该文件夹内。如果需要将 SpryAssets 文件夹保存到其他目录下，可以更改 Dreamw

19、eaver 保存这些资源的默认位置，操作方法如下。 单击“站点”“管理站点”菜单命令，弹出“管理站点”对话框。单击其内的“编辑”按钮，弹出“站点定义”对话框。单击“高级”标签，在“站点定义”（高级）对话框内“分类”列表框中选择 Spry 选项。 在“Spry 资源文件夹”文本框中输入 Spry 资源保存的文件夹路径，也可以单击其右边的文件夹按钮，弹出一个对话框，利用该对话框来查找文件夹。然后，单击“确定”按钮，完成更改默认的 Spry 资源文件夹的设置。2Sprt 验证文本域“Sprt 验证文本域”Spry 构件是一个文本域，用于输入时显示输入的状态（有效或无效）。例如，如果输入电子邮件地址时

20、没有输入“”和“.”，则会显示相应的提示信息。该 Spry 构件与一般的文本域表单对象的主要区别是它不但有文本域，还具有验证和给出相应提示的功能。单击 Sprt 验证文本域表单对象左上角的蓝色背景选项卡，可以选中“Sprt 验证文本域”Spry 构件，调出它的“属性”栏。它的“属性”栏如图 6-3-6 所示。当在“类型”下拉列表框中选择不同选项时，“属性”栏内的选项会不一样，例如，在“类型”下拉列表框中选择“日期”选项时的“属性”栏如图 6-3-10 所示。图 6-3-10 “Sprt 验证文本域”Spry 构件的“属性”栏（选择“日期”类型）“Sprt 验证文本域”Spry 构件“属性”栏内

21、各选项的作用如下。（1）“类型”下拉列表框：用来选择“Sprt 验证文本域”Spry 构件的验证类型。例如，如果文本域将接收日期验证类型，则可以在“类型”下拉列表框中选择“日期”选项。“类型”下拉列表框内各选项（即验证类型）的名称和格式如表 6-3-1 所示。（2）“格式”下拉列表框：在“类型”下拉列表框中选中“日期”、“时间”、“邮政编码”等选项后，该下拉列表框变为有效，用来选择相应的格式。（3）“图案”文本框：在“类型”下拉列表框中选中“自定义”选项后，它用来输入格式模式，并根据需要在“提示”文本框中输入提示信息。表 6-3-1“类型”下拉列表框内各验证类型的名称和格式113验证类型格 式

22、无不需要特殊格式整数文本域只可以接受整数数字电子邮件文本域必须输入包含“”和“.”字符的电子邮件地址，而且“”和“.”的前面和后面都必须至少有一个字母日期格式可以改变，可以在“属性”面板内的“格式”下拉列表框中选择时间格式可以改变，在“属性”面板内的“格式”下拉列表框中选择，其中，“tt”表示am/pm 格式，“t”表示 a/p 格式信用卡格式可以改变，在“属性”面板内的“格式”下拉列表框中选择，可以选择接受所有信用卡，或者指定特定种类的信用卡（MasterCard、Visa 等），文本域不接受包含空格的信用卡号，例如 1234 5678 8765 9999邮政编码格式可以改变，在“属性”面板

23、内的“格式”下拉列表框中选择电话号码如果在“属性”面板内的“格式”下拉列表框中选择了“美国/加拿大”选项，则文本域接受美国和加拿大格式，即“(000)000-0000”格式；也可以在“属性”面板内的“格式”下拉列表框中选择了“自定义模式”选项，则应在“图案”（模式）文本框中输入格式，例如，000.00(00)。社会安全号码文本域接受 000-00-0000 格式的社会安全号码货币文本域接受 1,000,000.00 或 1.000.000,00 格式的货币格式实数/科学记数法验证各种数字：数字（例如 1）、浮点值（例如 12.123）、以科学记数法表示的浮点值（例如 1.234e+10、1.2

24、34e-10，其中 e 是 10 的幂）IP 地址格式可以改变，在“属性”面板内的“格式”下拉列表框中选择URL文本域接受 http:/xxx.xxx.xxx 或 ftp:/xxx.xxx.xxx 格式的 URL自定义可以用于指定自定义验证类型和格式，在在“属性”面板内的“图案”文本框中输入格式模式，并根据需要在“提示”文本框中输入提示信息114（4）“验证于”栏：有三个复选框，用来指定验证发生的时间，可以设置验证发生的时间，包括站点访问者在构件外部单击时、键入内容时或尝试提交表单时。“onBlur”（模糊）：选中它后，当用户在文本域的外部单击时进行验证。“onChange”（更改）：选中它后

25、，当用户更改文本域中的文本时进行验证。“onSubmit”（提交）：选中它后，当用户尝试提交表单时进行验证。（5）“提示”文本框：用于输入提示信息。由于文本域有很多不同格式，因此为了帮115助用户输入正确的格式，可以输入相应的提示文字。当“Sprt 验证文本域”Spry 构件的文本框中没有输入内容是，该文本框内会显示“提示”文本框内的文字。（6）“预览状态”下拉列表框：用来设置验证 Spry 构件的状态，验证文本域构件的状态有“初始”、“有效”、“无效格式”和“必填”等，它们的含义如下。“初始”状态：在浏览器中加载页面或用户重置表单时 Spry 构件的状态。“必填”状态（即必需状态）：在选中“

26、必需的”复选框后，“预览状态”下拉列表框内才会增加“必填”（即“必需”）选项，当用户在文本域中没有输入必需的文本时Spry 构件的状态。当用户没有输入时，会在文本域后边显示“需要提供一个值。”。“无效格式”状态：当用户所输入文本的格式无效时 Spry 构件的状态。例如，在设置“日期”类型后，在文本域中输入 12 而不是输入 2012 来表示年份，则属于无效状态。“有效”状态：当用户正确地输入信息且表单可以提交时 Spry 构件的状态。（7）“最小字符数”和“最大字符数”文本框：它们仅在“类型”下拉列表框中选择了“无”、“整数”、“电子邮件地址”和“URL”选项时有效。例如，在“最小字符数”文本

27、框中输 2，在“最大字符数”文本框中输入 4，则只有当输入 2、3 或 4 个字符时才通过验证，当输入的字符个数小于 2 或大于 4 时，都无法通过验证，会显示相应的提示信息。“最小字符数”状态：在该文本框中输入数字后，“预览状态”下拉列表框内会增加“未达到最小字符数”选项。当输入的字符数少于“最小字符数”文本框中的数值时，则进入 Spry 构件的“最小字符数”状态，会在文本域后边显示“不符合最小字符数要求。”。“最大字符数”状态：在该文本框中输入数字后，“预览状态”下拉列表框内会增加“已超过最大字符数”选项。当输入的字符数大于“最大字符数”文本框中输入数字时，进入 Spry 构件的“最大字符

28、数”状态，会在文本域后边显示“已超过最大字符数”。（8）“最小值”和“最大值”文本框：这两个复选框仅在“类型”下拉列表框中选择了“无”、“整数”、“电子邮件地址”和“URL”验证类型是有效。例如，如果在“最小值”框中输入 2，在“最大值”框中输入 4，则只有当用户输入数值在 2 和 4 之间时才能通过验证，当用户输入的数值小于 2 或大于 4 时，都无法通过验证，会显示相应的提示信息。“最小值”状态：在“最小值”文本框中输入数字后，“预览状态”下拉列表框内才会增加“小于最小值”选项。当用户输入的数值小于“最小值”文本框中输入数值时，进入 Spry 构件的“最小值”状态，会在文本域后边显示“输入

29、值小于所需的最小值。”。“最大值”状态：在“最大值”文本框中输入数字后，“预览状态”下拉列表框内才会增加“大于最大值”选项。当用户输入的值小于“最大值”文本框中输入数值时，进入 Spry 构件的“最小值”状态，会在文本域后边显示“输入值大于所允许的最大值。”。“最小值”和“最大值”状态适用于整数、实数和数据类型的验证。（9）“必须的”复选框：选中它后，“预览状态”下拉列表框内会出现“必填”选项。（10）“强制模式”复选框：选中它后，即可进入强制模式，此时可以禁止用户在验证文本域构件中输入无效字符。例如，如果再设置“整数”验证类型的情况下，当用户尝试键入字母时，文本域中将不显示任何内容。每当“验

30、证文本域”Spry 构件以用户交互方式进入其中一种状态时，Spry 框架会在运行时向该构件的 HTML 代码程序应用相应的 CSS 样式类。例如，当用户还没有在必填文本域中输入文本就提交表单时，会向该 Spry 构件应用一个 CSS 样式类，使文本域后边显示“需要提供一个值”提示文字。这里的 CSS 样式使外部 CSS 样式，相应的 CSS 文件是“SpryAssets”文件夹内的“SpryValidationTextField.css”文件。6.4【案例21】旅游协会申请表6.4.2 相关知识验证类 Spry 构件1Sprt 验证文本区域“Sprt 验证文本区域”Spry 构件（即表单对象）

31、是一个文本区域，在该区域输入几个文本句子时显示文本的状态（有效或无效）。“Sprt 验证文本区域”Spry 构件与一般的文本区域表单对象的主要区别是“Sprt 验证文本区域”Spry 构件不但有文本域，而且还具有验证和给出相应提示的功能。它的“属性”栏如图 6-4-8 所示。其中各选项的作用如下。（1）“预览状态”下拉列表框：包含“初始”、“有效”和“必填”选项。当在“最小字符数”文本框中输入数值后，“预览状态”下拉列表框内会增加“未达到最小字符数”选项；在“最大字符数”文本框中输入数字后，“预览状态”下拉列表框内会增加“已超过最大字符数”选项。它的作用与“Sprt 验证文本域”Spry 构件

32、的作用一样。（2）“计数器”选项区域：该选项区域有 3 个单选按钮，选中“无”单选按钮后，不添加字符计数器；选中“字符计数”单选按钮后，可以添加字符计数器，当用户在文本区域中输入文本时可以显示已经输入的字符个数。默认情况下，添加的字符计数器会出现在构件右下角的外部，如图 6-4-14 所示。只有当选择所允许的最大字符数时，“其余字符”单选按钮才有效。如果选中“其余字符”单选按钮，也可以添加字符计数器，当用户在文本区域中输入文本时还可以显示输入的字符个数。图 6-4-14 在文本区域右边显示提示文字（3）“禁止额外字符”复选框：选中该复选框后，如果输入的字符个数超过“最大字符数”文本框中的数值，

33、则停止在“Sprt 验证文本区域”Spry 构件的文本框内。2Sprt 验证复选框“Spry 验证复选框”Spry 构件是 HTML 表单中的一个或一组复选框。“Spry 验证复选框”Spry 构件的“属性”栏如图 6-4-9 所示。其中各选项的作用如下。（1）“必需（单个）”单选按钮：选中该单选按钮后，只对进行是否选择了一个复选框进行验证控制，如果一个复选框都没有选中，则显示提示信息。（2）“实施范围（多个）” 单选按钮：选中该单选按钮后，对是否选择了多个复选框进行验证控制，如果多个复选框都没有选中，则显示提示信息。（3）“预选状态”下拉列表框：如果选中“必须（单个）”单选按钮，则该下拉列表

34、116标签文字 用户输入 的 26 个文字文字区域字符计数器提示信息框内有“初始”和“必填”两个选项。如果选中“初始”选项，则在“Spry 验证复选框”Spry 构件后边不会显示框”Spry 构件右边显示信息；如果选中“必填”选项，则在“Spry 验证复选。如果选中“实施范围（多个）”单选按钮，则该下拉列表框内有“初始”和“必填”两个选项。（4）如果在“最小选择数”文本框内输入一个数值，则“预选状态”下拉列表框内才会增加“未达到最小选择数”选项。当用户选择的复选框数小于“最小选择数”文本框中输入数值时，会在 Spry 构件后边显示提示信息。（5）如果在“最大选择数”文本框内输入一个数值，则“预

35、选状态”下拉列表框内才会增加“已超过最大选择数”选项。当用户选择的复选框数大于“最大选择数”文本框中输入数值时，会在 Spry 构件后边显示提示信息。3Sprt 验证复选框应用实例制作一个“世界名花选择”网页，该网页在浏览器中的显示效果如图 6-4-15（a）所示。选中一个复选框，再单击取消选取，则会显示示。如果选中了 3 个复选框，则会显示（a）提示信息，如图 6-4-15（b）所提示信息，如图 6-4-16 所示。（b）图 6-4-15 “世界名花选择”网页显示的两幅画面图 6-4-16 “世界名花选择”网页显示的一幅画面“世界名花选择”网页制作方法如下。（1）输入红色、18 磅、加粗、宋

36、体文字“世界名花选择”，按【Enter】键，将光标定位在文字“世界名花选择”的下一行。（2）创建一个“Spry 验证复选框”Spry 构件，ID 名为 SSP1，标签名为“荷花”，位于复选框的左边，其“属性”栏设置如图 6-4-17 所示。（3）将光标定位在复选框的右边，再单击“插入”（表单）栏内的“复选框”按钮 ，弹出“输入标签辅助功能属性”对话框，在该对话框内的 ID 文本框中输入“SSP2”，在“标签文字”文本框中输入“牡丹花”，选中“在表单前”单选按钮，单击“确定”按钮，创建一个复选框。117图 6-4-17 Sprt 验证复选框的“属性”栏设置（4）按照上述方法再在“牡丹花”复选框的

37、右边创建一个“梅花”复选框。这 3 个复选框都属于“Spry 验证复选框”Spry 框架内的复选框。（5）单击“荷花”上边蓝色背景的选项卡，选中“Spry 验证复选框”Spry 构件，单击“文档工具”栏中的“拆分”按钮，切换到“拆分”视图窗口。其中，定义“Sprt 验证文本域”Sprt 构件的有关程序如下。世界名花选择荷花 牡丹花梅花不符合最小选择数要求。已超过最大选择数。由上述代码可见，可以很容易地修改 ID 名称、文本域名称、复选框的名称和有关的提示信息等内容。3Sprt 验证选择“Spry 验证选择”Spry 构件是一个下拉菜单，该菜单在用户进行选择时会显示构件的状态（有效或无效）。例如

38、，创建了一个 ID 名为 XL、标签名为“学历：”、标签文字位于前边的“Spry 验证选择”Spry 构件，即一个左边有文字“学历：”的下拉列表框。“学历：”下拉列表框内的选项有“小学”、“初中”、“高中”、“大学本科”、“硕士”、“博士”和“博士后”。选中下拉列表框，弹出其“属性”栏（其内“初始化时选定”列表框中还没有内容），选中“列表”单选按钮，在“高度”文本框中输入“6”，如图 6-4-10 所示。单击“属性”栏内的“列表值”按钮，弹出“列表值”对话框，按照“列表/菜单”表单对象的操作方法，在“列表值”对话框内输入项目标签和对应的值，如图 6-3-18 所示。单击“确定”按钮，关闭“列表

39、值”对话框，此时网页内创建的“Spry 验证选择”Spry构件如图 6-3-19 所示。118图 6-3-18 “列表值”对话框图 6-3-19 “Spry 验证选择”Spry 构件选中“Spry 验证选择”Spry 构件，其“属性”栏如图 6-3-20 所示。其中各选项的作用如下。图 6-4-20 “Spry 验证选择”Spry 构件的“属性”栏（1）“空值”复选框：选中该复选框后，在“预览状态”下拉列表框中选择“必填”选项，则在设计状态和选中列表框内无值选项（在“列表值”对话框内只设置了项目标签，没有设置对应的值）时，在列表框右边会显示提示信息。例如，在图 6-3-19所示的列表框中添加了

40、一个“”项目标签，没有设置相应的值，在浏览器中显示该网页，单击“”选项，效果如图 6-3-21 所示。（2）“无效值”复选框：选中该复选框后，在其右边输入一个数值（例如“1”），则设置了其值为该数值（例如“1”）的项目标签为无效选项。网页显示后，单击“小学”选项（“小学”项目标签的对应值为 1）后的显示效果如图 6-3-22 所示。图 6-3-21 无值选项时的效果图 6-3-22 选择无效选项时的效果“Spry 验证选择”Spry 构件与一般的列表/菜单表单对象的主要区别是“Sprt 验证选择”Spry 构件不但有“列表”或“菜单”，而且还具有验证和给出相应提示的功能。6.5【案例22】世界

41、名花浏览26.5.2 相关知识菜单栏、折叠、可折叠面板和选项卡式面板构件1“Sprt 菜单栏”Sprt 构件“Sprt 菜单栏”Sprt 构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，会显示相应的子菜单。单击子菜单命令可弹出相应的网页。DreamweaverCS6 允许插入垂直“Spry 菜单栏”构件和水平“Spry 菜单栏”构件。菜单栏构件的 HTML中包含一个外部 UL 标签，该标签中对于每个顶级菜单项都包含一个 LI 标签，而顶级菜单项（LI 标签）又包含用来为每个菜单项定义子菜单的 UL 和 LI 标签，子菜单中同样可以包含下一级子菜单。顶级菜单和子菜单可以包

42、含任意多个子菜单项。“Spry 菜单栏”构件“属性”栏内各选项的作用、使用“Spry 菜单栏”构件的基本方法和注意事项如下。（1）按钮：用来添加菜单和子菜单。选中“属性”栏内列表框中的一个菜单选项，单击相应列表框上边的按钮，即可在选中的菜单选项下边新增一个菜单选项。（2） 按钮：用来删除菜单和子菜单。选中“属性”栏内列表框中要删除的菜单选项，119单击相应列表框上边的 按钮，即可删除选中的菜单选项。（3） 和按钮：用来移动菜单项的顺序。选中“属性”栏内列表框中要移动的菜单选项，单击相应列表框上边的 按钮，即可将选中的菜单选项上移一个位置；单击相应列表框上边的 按钮，即可将选中的菜单选项下移一个

43、位置。（4）“文本”文本框：用来更改菜单选项的名称。选中“属性”栏内列表框中要更改名称的菜单选项，在右边的“文本”文本框内输入新的菜单选项的名称。（5）“链接”文本框右侧的 按钮：用来建立菜单命令与网页或图像等链接，选中“属性”栏内列表框中要建立链接的菜单命令名称，单击“链接”文本框右侧的按钮，弹出“选择文件”对话框，利用该对话框选中要链接的网页或图像文件，再单击“确定”按钮，即可在“链接”文本框内显示链接的网页或图像文件的名称，完成链接。也可以直接在“链接”文本框内输入相应路径和文件名称来建立链接菜单命令与网页或图像等的链接。注意：不建立链接的菜单选项，其“链接”文本框内必须输入“#”。（6

44、）“标题”文本框：用来建立菜单选项的提示信息：选中“属性”栏内列表框中要建立提示信息的菜单选项，在右边的“标题”文本框中输入提示信息文字。（7）“目标”文本框：用来设置菜单项的目标属性。其内可以输入属性值，用来设置链接的网页或图像的显示位置。例如，可以为菜单项分配一个目标属性，以便在站点访问者单击菜单命令时，在新浏览器窗口中打开所链接的页面。如果使用的是框架集，还可以指定在其中哪个框架中显示链接的网页或图像。其内可输入的内容及其作用如下。 _blank：在浏览器窗口中打开所链接的网页或图像。 _self：在同一个浏览器窗口中显示所链接的网页或图像。这是默认选项，如果页面位于框架或框架集中，该页

45、面将在框架中显示。 _parent：在文档的父框架集中显示所链接的网页或图像。 _top：在框架集的顶层窗口中显示所链接的网页或图像。 框架名称：输入框架集内分栏框架的名称，在指定的框架内显示链接的网页或图像。（8）使子菜单显示在 Flash 动画上边：“Spry 菜单栏”构件通常会显示其他部分的上方。如果页面中插入有 Flash 动画，则 Flash 动画通常会显示在子菜单的上方。为了使子菜单显示在 Flash 动画的上边，可以修改 Flash 影片的参数，设置 wmode=transparent。（9）定位子菜单：Spry 菜单栏子菜单的位置由子菜单 UL 标签的 margin 属性控制。

46、找到 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 规则。将默认值“margin: -5% 00 95%;”修改为所需的值。2“Sprt 折叠式”Sprt 构件“Sprt 折叠式”Sprt 构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。用户可以通过单击该组面板上的选项卡来收缩或展开折叠构件中的一个面板，并显示该面板中的内容。在可折叠的面板中，每次只能有一个面板处于展开且可以看见其中内容的状态。图 6-5-12 是一个“Sprt 折叠式”Sprt 构件，其中第 1 个面板处于展开状态。“Sprt 折叠式”Sprt 构件可以包含任意

47、数量的单独面板。120121图 6-5-12 “Sprt 折叠式”Sprt 构件“Sprt 折叠式”Sprt 构件包含一个含有所有面板的外部 DIV 标签以及各面板对应的 DIV标签，各面板的标签中有一个标题 div 和内容 div。在文件头中和“Sprt 折叠式”Sprt 构件的 HTML 标记之后还包括 SCRIPT 标签。创建和修改“Sprt 折叠式”Sprt 构件的方法如下。（1）新建一个网页文档，以名称“Sprt 折叠式.htm”保存在“【案例 22】世界名花浏览 2”文件夹内。单击“插入记录”Spry“Spry 折叠式”菜单命令，即可在网页内光标处创建一个“Sprt 折叠式”Spr

48、t 构件，如图 6-5-13 所示。图 6-5-13 创建原始的“Sprt 折叠式”Sprt 构件（2）选中“Sprt 折叠式”Sprt 构件，其“属性”栏如图 6-5-14（a）所示。选中“属性”栏内“面板”列表框上边的 按钮，在“面板”列表框内增加一个名称为 LABEL3 的面板，再单击 按钮，在“面板”列表框内再增加一个面板名称 LABEL4。（3）选中“属性”栏内“面板”列表框中的面板名称 LABEL1，拖动选中网页内的 LABEL1文字，将该文字改为“长寿花”，再利用其“属性”栏将选中的文字改为红色、加粗、大小为 18 磅、宋体。按照相同的方法，再将网页内的 LABEL2 文字改为“

49、倒挂金钟”，将网页内的 LABEL3文字改为“东方罂粟”，将网页内的 LABEL4 文字改为“杜鹃花”。然后，利用它们的“属性”栏将这些文字改为红色、加粗、大小为 18 磅、宋体文字。此时，“Sprt 折叠式”Sprt 构件的“属性”栏如图 6-5-14（b）所示。“ 长 寿花”面板名称面 板 内容展开的“ 长寿花”面 板收缩的 3 个面板（a）（b）图 6-5-14 “Sprt 折叠式”Sprt 构件的“属性”栏（4）打开“【案例 22】世界名花浏览 2”文件夹内 TXT 文件夹中“长寿花.txt”、“倒挂金钟.txt”、“东方罂粟.txt”和“杜鹃花.txt”文本文件。单击选中“Sprt

50、折叠式”Sprt 构件“属性”栏内“面板”列表框中的“长寿花”面板名称，展开“长寿花”面板，此时的网页设计窗口如图 6-5-14 所示（在面板名称下还没有文字）。另外，也可以将鼠标指针移到网页内“长寿花”面板标签内的右边，如果出现一个眼睛图标时，单击该图标，也可以展开“长寿花”面板。（5）将“长寿花.txt”中文字复制到剪贴板内，再粘贴到网页内“长寿花”面板名称下边的“内容 1”文字处，替换原来的文字“内容 1”。然后，选中粘贴的文字，再利用其“属性”栏将选中的文字改为蓝色、加粗、大小为 16 磅、宋体文字，如图 6-5-15 所示。图 6-5-15 展开“Sprt 折叠式”Sprt 构件的“