《表单和Spry构件.ppt》由会员分享，可在线阅读，更多相关《表单和Spry构件.ppt（39页珍藏版）》请在三一办公上搜索。
1、,第 6 章,表单和 Spry 构件,6.1【案例 24】“中国自助旅游协会会员登记表”网页相关知识1表单域和插入表单对象（1）创建与删除表单域：创建表单域：将光标移到要插入表单域的位置。单击“插入”（表单）面板内的“表单”按钮，或用鼠标将“插入”（表单）栏内的表单图标 拖动到网页文档窗口内，即可在网页设计窗口内创建一个表单域，如图6-1-3 所示。单击表单域内部，将光标移到表单域内，按【Enter】键可将表单域调大。按【Backspace】键可使表单域缩小。表单域在浏览器内是看不到的。显示表单域：在表单域创建后，若看不到表单域的矩形红线，可以单击“查看”“可视化助理”“不可见元素”命令，将表
2、单域的矩形红线显示出来。删除表单域：单击表单域边线，选中表单域，按【Delete】键，可删除表单域。,l,l,l,l,（2）设置表单域的属性：单击选中表单域，此时表单域“属性”栏如图 6-1-12 所示。,图 6-1-12,表单域“属性”栏,“表单名称”文本框：在该文本框内输入表单域的名称。该名称可用于 JavaScript 和 VBScript 等脚本语言中，这些脚本语言可控制表单域的属性。“动作”文本框和文件夹按钮：可以输入脚本程序或含有脚本的 HTML 文件。“方法”下拉列表框：用来选择客户端与服务器之间传送数据采用的方式。其中的三个选项分别是“默认”、“GET”（获得，即追加表单值到
3、URL，并发送服务器 GET 请求）和“POST”（传递，在消息正文中发送表单的值，并发送服务器 POST 请求）。“类”下拉列表框：其中有“重命名”、“管理样式”和创建的 CSS 样式名称等多个选项。这些选项可以用来选择 CSS 样式、给 CSS 样式更名和创建新的 CSS 样式等。（3）插入表单对象：将光标移到要插入表单对象的位置，单击“插入”（表单）栏中的相应按钮，可在光标处插入一个相应的表单对象。单击“插入记录”“表单”命令，可调出它的下一级菜单。根据要插入的表单对象类别，单击其内的命令也可插入表单对象。,和文本区,表单对象的“属性”栏中都有一个名称文本框，用来输入表单对象的名称，该名
4、称可在程序中使用，以指定表单对象。2设置文本字段和文本区域的属性文本字段也叫文本域。表单中经常使用文本字段。它可以是单行，也可以是多行，主要用于接收文本、数字和字符。文本字段 的“属性”栏如图 6-1-4 所示。如果选中了“类型”选项组内的“密码”单选按钮，则“属性”栏如图 6-1-5 所示。如果选中了“类型”选项组内的“多行”单选按钮，则“属性”栏如图 6-1-6 所示。,创建文本区域 的方法和创建文本字段,的方法基本一样，只是单击的是“文本区域”按钮。文本区域 的,“属性”栏与图 6-1-6 基本一样。在网页中创建的文本区域是一个右边有滚动条的文本框。文本字段域“属性”栏内各选项的作用如下
5、：（1）“字符宽度”文本框：文本域的宽度，即显示字符的最多个数。（2）“类型”选项组：该选项组有三个单选按钮，用来选择“单行”、“多行”或“密码”文本域。密码文本域的特点是：当用户输入文字时，密码文本域内显示的不是这些文字，而是一行“”。选择“多行”单选按钮时，其“属性”栏会发生变化“初始值”文本框变为带滚动条的多行文本框，同时“换行”下拉列表框变为有效，“字符宽度”文本框变为“行数”文本框，用来输入文本框的行数。（3）“最多字符数”文本框：允许输入的字符个数，可以比文本框宽度大。,l,l,l,l,l,l,（4）“初始值”文本框：用来输入文本框的初始内容。（5）“换行”下拉列表框：只有在选择了
6、“多行”类型后才变为有效状态。“换行”下拉列表框内有四个选项，其含义如下：“默认”：采用浏览器的默认值。“关”：当输入的文字超过文本框的宽度时不换行，但会出现滚动条。“虚拟”：当输入的文字超过文本框宽度时会自动换行，在向服务器传输时无回车符。“实体”：当输入的文字超过文本框的宽度时，会自动加入回车符并换行。3设置复选框和单选按钮的属性（1）设置复选框的属性：复选框 有选中和未选中两种状态，多个复选框允许多选。其“属性”栏如图 6-1-13所示，各选项的作用如下：“选定值”文本框：用来输入复选框选中时的数值，通常为 1 或 0。“初始状态”选项组：有两个单选按钮，用来设置复选框的初始状态。,图
7、6-1-13,复选框的“属性”栏,按钮。,l,l,l,（2）设置单选按钮的属性：其“属性”栏如图 6-1-10 所示。该“属性”栏内的选项与复选框“属性”栏中相,应选项的作用一样。,（3）设置单选按钮组的属性：一组单选按钮中只允许选中一个。单击“插入”（表单）栏中的“单选按钮组”,按钮，可弹出“单选按钮组”对话框，如图 6-1-7 所示。利用该对话框可以设置单选按钮组中单选按钮的个数、,名称和初始值。如果要增加选项，可单击 按钮；如果要删除选项，可单击选中要删除的选项，再单击,如果要调整选项的显示次序，可选中要移动的选项，再单击 或 按钮。单选按钮的“属性”栏如图 6-1-10 所示。,4设置
8、按钮的属性,按钮 用来制作“提交”和“重置”按钮，可以调用函数。其“属性”栏如图 6-1-11 所示，各选项的作用,如下：,（1）“标签”文本框：用来输入按钮上显示的文字。,（2）“动作”选项组：有三个单选按钮，用来选择单击该选项后引起的动作类型。,“提交表单”：选中该单选按钮后，可以向服务器提交整个表单。,“重设表单”：选中该单选按钮后，可以取消前面的输入，复位表单。,“无”：选中该单选按钮后，表示是一般按钮，可用来调用脚本程序。,5设置列表/菜单和文件域的属性,l,l,l,l,l,（1）设置列表/菜单的属性：列表/菜单 的作用是将一些选项放在一个带滚动条的列表框内。其“属性”栏如图 6-1
9、-9 所示，其中各选项的作用如下：“类型”选项组：有两个单选按钮，用来选择“菜单”或“列表”。“菜单”是下拉列表框；选择“列表”选项后，其右边的各选项会变为可选项，列表框右边会产生滚动条。“高度”文本框：用来输入列表的高度值，即可以显示的行数。“允许多选”复选框：选中该选项后，表示列表中的各选项可以同时选择多项。“初始化时选定”列表框：用来设置第一次调出该列表或菜单时的默认选项。“列表值”按钮：单击该按钮，弹出“列表值”对话框，如图 6-1-8 所示。可以输入菜单或列表内显示的选项内容和输入此选项提交后的返回值（在“值”内）。（2）设置文件域的属性：文件域（也叫文件字段）用来让用户选择磁盘、路
10、径和文件，并将该文件上传到服务器中。其“属性”栏如图 6-1-14 所示，各选项的作用如下：,图 6-1-14,文件域的“属性”栏,l,l,“字符宽度”文本框：用来输入文件域的宽度，即可显示字符的最多个数。,“最多字符数”文本框：用来输入允许输入的字符个数，可比文件域宽度值大。,6.2【案例 25】“中国名胜图像浏览 3”网页,相关知识,1设置图像域的属性,图像域 用来设置图像域内的图像，其“属性”栏如图 6-2-2 所示。,（1）“图像区域”文本框：在“属性”栏内的左下角，用来输入图像域的 ID。,（2）“源文件”文本框与文件夹按钮：单击该按钮，可以弹出一个对话框，用来选择图像文件。也可以在
11、文,本框内直接输入图像的路径与文件名。,（3）“替代”文本框：在其内输入的文字会在鼠标指针移到图像上面时显示出来。,（4）“对齐”下拉列表框：用来选定图像在浏览器中的对齐方式。,（5）“编辑图像”按钮：单击该按钮，可以调出设定的图像编辑器，对图像进行加工。,2设置隐藏域的属性,隐藏域 提供了一个可以存储表单主题、数据等的容器。在浏览器中看不到它，但处理表单的脚本程序时可,以调用它的内容。其“属性”栏如图 6-2-8 所示，各选项的作用如下：,图 6-2-8,隐藏域的“属性”栏,（1）“隐藏区域”文本框：用来输入隐藏域的名称，以便于在程序中引用。（2）“值”文本框：用来输入隐藏域的数值。如果在加
12、入隐藏域时，没有显示 图标，可单击“编辑”“首选参数”命令，弹出“首选参数”对话框，再在“分类”列表框中选择“不可见元素”选项。然后单击选中“表单隐藏区域”复选框，再单击“确定”按钮退出。3设置跳转菜单的属性跳转菜单 采用下拉列表框或列表的方式来实现链接跳转，其外观与列表/菜单 一样，是菜单的另外一种形式。用户选中该菜单的某一个选项后，单击“前往”按钮，当前页面或框架会跳转到其他的页面。单击“插入”（表单）栏内的“跳转菜单”按钮，弹出一个“插入跳转菜单”对话框，如图 6-2-7 所示。其中各选项的作用如下：（1）“选择时，转到 URL”文本框：其内输入要跳转的文件路径与文件名称。也可以单击“浏
13、览”按钮，弹出“选择文件”对话框，从中选择链接的文件。,（2）“文本”文本框：其内输入菜单选项文字，在“菜单项”列表框内会显示出来。,（3）、和 按钮：与图 6-1-7 所示对话框中按钮的作用一样。,（4）“打开 URL 于”下拉列表框：其内选择在何处打开文件。,（5）“菜单名称”文本框：其内输入跳转菜单的名称。,（6）“选项”选项组内的两个复选框：选中“菜单之后插入前往按钮”复选框后，在菜单的右边会增加一个,“前往”按钮。选中“更改 URL 后选择第一个项目”复选框后，可设置跳转后重新定义菜单第 1 个选项为默认选,项。,单击“确定”按钮，可退出该对话框，页面会显示一个跳转菜单。单击选中创建
14、的跳转菜单后，其“属性”,栏如图 6-2-5 所示。,6.3【案例 26】“旅游协会会员申请表”网页,相关知识,1Spry 构件简介和 Spry 构件的基本操作,Spry 构件是预置的常用用户界面组件，是一个网页页面元素，可以使用 CSS 自定义这些组件，然后将其添,加到网页中。使用 Dreamweaver CS3 可以将多个 Spry 构件添加到自己的页面中，这些构件包括具有验证功能的,表单元素、折叠构件和选项卡式界面等。,Dreamweaver CS3 的 Spry 构件不是很完善，需要下载 Adobe 公司提供的补丁，目前最高版本的补丁是“spry,1.6”，它的文件名为“spry_p1
15、-6-1_updater_022508.mxp”。下载该补丁后，只要双击该文件的图标，即可将,其添加到 Dreamweaver CS3 中。,Spry 构件由构件结构（用来定义构件结构组成的 HTML 代码）、构件行为（用来控制构件如何响应用户启动,事件的 JavaScript 程序，该行为赋予构件功能）和构件样式（用来指定构件外观的 CSS，包含设置构件样式所,需的全部信息）三部分组成。,Spry 框架支持一组用标准 HTML、CSS 和 JavaScript 编写的可重用构件，使用 Spry 框架可以加强用户体验，,例如在网页中创建可验证的文本域表单对象等。Spry 框架中的每个构件都与唯
16、一的 CSS 和 JavaScript 文件相关,联。当使用 Dreamweaver 在网页页面内插入构件后，Dreamweaver 会自动将这些文件链接到该页面，以使构件包,含该页面的功能和样式。,与网页内所插入的构件相关联的 CSS 文件和 JavaScript 文件，会自动根据该构件命名保存在网页所在文件,夹 内 的“SpryAssets”文 件 夹（自 动 生 成 的）中。例 如，与 Spry 构 件 相 关 联 的 文 件 名 是,“SpryValidationCheckbox.css”和“SpryValidationCheckbox.js”。当在已经保存的页面中插入构件时，会在,网
17、页所在文件夹下自动创建一个名称为“SpryAssets”的文件夹，并将上述两个文件保存在“SpryAssets”文件,夹内。,Spry 构件的基本操作方法如下：,（1）插入 Spry 构件：单击“插入记录”“Spry”“”命令（“”是要插入的 Spry 构,件的名称），弹出“输入标签辅助功能属性”对话框，在该对话框内的“ID”文本框中输入 ID 值，在“标签文,字”文本框中输入标签文字；在“样式”选项组内选中一个单选按钮（例如选中“无标签标记”单选按钮），确,定一种样式；在“位置”选项组内选中一个单选按钮（例如选中“在表单前”单选按钮），确定标签文字的位置；,还可以设置访问键，如图 6-3-2
18、 所示。然后，单击“确定”按钮，即可创建一个相应的 Spry 构件（即一种表单,对象）。另外，单击“插入”栏中的单击“插入”（表单）栏内的“Spry”类别的按钮，也可以弹出“输入标签,辅助功能属性”对话框。,，,（2）选择和编辑 Spry 构件：将鼠标指针移到构件之上，会在构件的左上角显示蓝色背景的选项卡，单击构,件左上角中的构件选项卡，即可选中该 Spry 构件。此时，“属性”栏会自动切换到该 Spry 构件的“属性”栏。,利用 Spry 构件的“属性”栏可以编辑该 Spry 构件。,（3）设置 Spry 构件的样式：在站点或其他目录下的“SpryAssets”文件夹中可以找到与该构件相对应
19、的 CSS,文件，用户可以根据自己的喜好来编辑 CSS 文件。另外，也可以利用“CSS 样式”面板来设置 Spry 构件的属性，,这与对页面上其他带样式的元素所做的操作一样。,（4）更改默认的 Spry 资源文件夹：当在已保存的页面中插入 Spry 构件后，Dreamweaver 会在网页所在的目,录下（没建立电站点）或站点中创建一个“SpryAssets”文件夹，并将相应的 CSS 文件和 JavaScript 文件在该,文件夹内。如果需要将 SpryAssets 文件夹保存到其他目录下，可以更改 Dreamweaver 保存这些资源的默认位置。,方法如下：,单击“站点”“管理站点”命令，弹
20、出“管理站点”对话框。,单击“管理站点”对话框中的“编辑”按钮，弹出“站点定义”对话框。单击“高级”标签，在“站点,定义”对话框内“分类”列表框中选择“Spry”类别。,在“Spry 资源文件夹”文本框中输入 Spry 资源保存的文件夹路径，也可以单击其右边的文件夹按钮,打开一个对话框，利用该对话框来寻找文件夹。,单击“站点定义”（高级）对话框的“确定”按钮，完成更改默认的 Spry 资源文件夹的设置。,2Spry 验证文本域,“Spry 验证文本域”Spry 构件（即表单对象）是一个文本域，常用于用户输入时显示输入的状态（有效或无,效）。例如，如果输入的整数的字符个数少于或大于限定值，会显示
21、相应的无效提示信息；如果输入电子邮件地,址时没有输入“”和“.”，则会显示相应的无效提示信息。“Spry 验证文本域”Spry 构件与一般的文本域表,单对象的主要区别就是“Spry 验证文本域”Spry 构件不但有文本域，而且还具有验证和给出相应提示的功能。,在“Spry 验证文本域”Spry 构件的“属性”栏中，当在“类型”下拉列表框中选择不同选项时，“属性”,栏内的选项会不一样。例如，在“类型”下拉列表框中选择“日期”选项时的“属性”栏如图 6-3-16 所示。单,击 Spry 验证文本域表单对象左上角的蓝色背景选项卡，可以选中“Spry 验证文本域”Spry 构件，调出它的“属,性”栏。
22、,“Spry 验证文本域”Spry 构件“属性”栏内各选项的作用如下：,图 6-3-16“Spry 验证文本域”Spry 构件的“属性”栏-选择“日期”类型,l,l,l,（1）“类型”下拉列表框：用来选择“Spry 验证文本域”Spry 构件的验证类型。例如，如果文本域将接收,电话号码验证类型，则可以在“类型”下拉列表框中选择“电话号码”选项。“类型”下拉列表框内各选项（即,验证类型）的名称和格式如表 6-3-1 所示。,（2）“验证域”选项组：有三个复选框，用来指定验证发生的时间，可以设置验证发生的时间，包括站点访,问者在构件外部单击时、输入内容时或尝试提交表单时。,“onBlur”（模糊）
23、：选中该复选框后，当用户在文本域的外部单击时进行验证。,“onChange”（更改）：选中该复选框后，当用户更改文本域中的文本时进行验证。,“onSubmit”（提交）：选中该复选框后，当用户尝试提交表单时进行验证。,（3）“最小字符数”和“最大字符数”文本框：这两个复选框仅在“类型”下拉列表框中选择了“无”、“整,数”、“电子邮件地址”和“URL”验证类型时有效。例如，如果在“最小字符数”文本框中输入 2，在“最大,字符数”文本框中输入 4，则只有当用户输入 2、3 或 4 个字符时，该构件才通过验证；当用户输入的字符个数,小于 2 或大于 4，都无法通过验证，会显示相应的无效提示信息。,（
24、4）“最小值”和“最大值”文本框：这两个复选框仅在“类型”下拉列表框中选择了“无”、“整数”、,“电子邮件地址”和“URL”验证类型时有效。例如，如果在“最小值”文本框中输入 2，在“最大值”文本框中,输入 4，则只有当用户输入数值在 2 和 4 之间时，该构件才通过验证，当用户输入的数值小于 2 或大于 4 时，则,l,l,l,l,无法通过验证，会显示相应的无效提示信息。,（5）“提示”文本框：用于输入提示信息。由于文本域有很多不同格式，因此为了帮助用户输入正确的格式，,在该文本框中输入相应的提示文字。当“Spry 验证文本域”Spry 构件的文本框中没有输入内容时，该文本框内,会显示“提示
25、”文本框内的文字。,（6）“强制模式”复选框：选中它后，即可进入强制模式，此时可以禁止用户在验证文本域构件中输入无效,字符。例如，如果再设置“整数”验证类型的情况下，当用户尝试键入字母时，文本域中将不显示任何内容。,（7）“预览状态”下拉列表框：用来设置验证 Spry 构件的状态，验证文本域构件的状态有“初始”、“有,效”、“无效格式”和“必填”等。它们的含义如下：,“初始”状态：在浏览器中加载页面或用户重置表单时 Spry 构件的状态。,“有效”状态：当用户正确地输入信息且表单可以提交时 Spry 构件的状态。,“无效格式”状态：当用户输入文本的格式无效时 Spry 构件的状态。例如，在设置
26、“日期”类型后，在文,本域中输入 08 而不是输入 20068 来表示年份，则属于无效状态。,“必填”状态（即必需状态）：在选中“必需的”复选框后，“预览状态”下拉列表框内才会增加“必填”（即,“必需”）选项。此状态为用户在文本域中没有输入必需的文本时 Spry 构件的状态。当用户没有输入时，会在,文本域后边显示“需要提供一个值。”提示信息。,l,l,l,l,l,“最小字符数”状态：在“最小字符数”文本框中输入数字后，“预览状态”下拉列表框内才会增加“未达到,最小字符数”选项。当用户输入的字符数少于“最小字符数”文本框中输入数字时，进入 Spry 构件的“最小,字符数”状态，会在文本域后边显示
27、“不符合最小字符数要求。”提示信息。,“最大字符数”状态：在“最大字符数”文本框中输入数字后，“预览状态”下拉列表框内才会增加“已,超过最大字符数”选项。当用户输入的字符数大于“最大字符数”文本框中输入数字时，进入 Spry 构件的,“最大字符数”状态，会在文本域后边显示已超过最大字符数。”提示信息。,“最小值”状态：在“最小值”文本框中输入数字后，“预览状态”下拉列表框内才会增加“小于最小值”,选项。当用户输入的数值小于“最小值”文本框中输入数值时，进入 Spry 构件的“最小值”状态，会在文本域,后边显示“输入值小于所需的最小值。”提示信息。,它适用于整数、实数和数据类型的验证。,“最大值
28、”状态：在“最大值”文本框中输入数字后，“预览状态”下拉列表框内才会增加“大于最大值”,选项。当用户输入的值小于“最大值”文本框中输入数值时，进入 Spry 构件的“最小值”状态，会在文本,域后边显示“输入值大于所允许的最大值。”提示信息。,它适用于整数、实数和数据类型的验证。,“焦点”状态：当用户在构件中放置插入点时构件的状态。,每当“验证文本域”Spry 构件以用户交互方式进入其中一种状态时，Spry 框架会在运行时向该构件的 HTML,代码程序应用相应的 CSS 样式类。例如，当用户还没有在必填文本域中输入文本就提交表单时，会向该 Spry 构,件应用一个 CSS 样式类，使文本域后边显
29、示“需要提供一个值”提示文字。这里的 CSS 样式是外部 CSS 样式，相,应的 CSS 文件是“SpryAssets”文件夹内的“SpryValidationTextField.css”文件。,“验证文本域”Spry 构件的默认 HTML 通常位于表单内部，其中包含一个标签，该标签将文本域的,标签括起来。在“验证文本域”Spry 构件的 HTML 中，在文档头中和验证文本域构件的 HTML 标记之后还,包括脚本标签。,3Spry 验证文本区域,“Spry 验证文本区域”Spry 构件是一个文本区域，该区域在用户输入几个文本句子时显示文本的状态（有,效或无效）。它的“属性”栏如图 6-3-17
30、 所示，其中各选项的作用如下：,图 6-3-17“Spry 验证文本区域”Spry 构件的“属性”栏,（1）“预览状态”下拉列表框：其内有“初始”、“有效”和“必填”三个选项。当在“最小字符数”文本框中输入数值后，“预览状态”下拉列表框内会增加“未达到最小字符数”选项；在“最大字符数”文本框中输入数字后，“预览状态”下拉列表框内会增加“已超过最大字符数”选项。它的作用与“Spry 验证文本域”Spry构件的作用一样。（2）“计数器”选项组：该选项组有三个单选按钮，选中“无”单选按钮，不添加字符计数器；选中“字符计数”单选按钮，可以添加字符计数器，当用户在文本区域中输入文本时可以显示已经输入的字
31、符个数。默认情况下，添加的字符计数器会出现在构件的右下角，如图 6-3-18 所示。只有当选择了所允许的最大字符数时，“其余字符”单选按钮才有效。此时也可以添加字符计数器，当用户在文本区域中输入文本时显示还可以输入的字符个数。,标签文字,字符计数器用 户 输 入 的 26 个 字 符文本区域图 6-3-18字符计数器出现在构件的右下角,提示信息,（3）“禁止额外字符”复选框：选中该复选框后，如果输入的字符个数超过“最大字符数”文本框中的数值，则停止在“Spry 验证文本区域”Spry 构件文本框内输入字符。,”,”,4Spry 验证复选框“Spry 验证复选框”Spry 构件是 HTML 表单
32、中的一个或一组复选框。“Spry 验证复选框”Spry 构件的“属性”栏如图 6-3-11 所示。其中前面介绍过的各选项的作用如下：（1）“实施范围（多个）”下拉列表框：有“初始”和“必填”两个选项。如果选中“初始”选项，则在“Spry,验证复选框”Spry 构件后边不会显示,信息；如果选中“必填”选项，则在“Spry 验证复选框”Spry 构,件右边显示,。,（2）“必须（单个）”单选按钮：选中该单选按钮后，只对进行是否选择了一个复选框进行验证控制，如果,一个复选框都没有选中，则显示,信息。,（3）“强制范围（多个复选框）”单选按钮：选中该单选按钮后，其下边的“最小选择数”和“最大选择数”文
33、本框变为有效。如果在“最小选择数”文本框内输入一个数值，则“预览状态”下拉列表框内会增加“未达到最小选择数”选项。当用户选择的复选框数小于“最小选择数”文本框中输入的数值时，会在 Spry 构件后边显示“信息。如果在“最大选择数”文本框内输入一个数值，则“预览状态”下拉列表框内会增加“已超过最大选择数”选项。当用户选择的复选框数大于“最大选择数”文本框中输入的数值时，会在 Spry 构件后边显示“,“,信息。例如，制作一个网页，该网页的显示效果如图 6-3-19 所示。选中一个复选框，再单击取消选取，则会显示,”提示信息，如图 6-3-20 所示。如果选中了六个复选框，则会显示“如图 6-3-
34、21 所示。,”提示信息，,图 6-3-19,网页显示效果,图 6-3-20,选中后再单击取消选取的效果,图 6-3-21,选中六个复选框的效果,span,单击“荷花”上边蓝色背景的选项卡，选中“Spry 验证复选框”Spry 构件，单击“文档工具”栏中的“显,示代码视图”按钮,，切换到“拆分”视图窗口。其中，定义“Spry 验证文本域”Spry 构件的有关代码如下：,选择您的爱好游泳骑马书法听音乐踢足球唱歌爬山class=checkboxMinSelectionsMsg 不 符 合 最 小 选 择 数 要 求。已超过最大选择数。5Spry 验证选择“Spry 验证选择”Spry 构件是一个下
35、拉菜单，该菜单在用户进行选择时会显示构件的状态（有效或无效）。,显示“,例如，创建了一个 ID 名为“XL”、标签名为“学历：”、标签文字位于前边的“Spry 验证选择”Spry 构件，即一个左边有文字“学历：”的下拉列表框。“学历：”下拉列表框内的选项有“小学”、“初中”、“博士后”。单击选中下拉列表框，调出它的“属性”栏（其内“初始化时选定”列表框中还没有内容），选中“列表”单选按钮，在“高度”文本框中输入 6，如图 6-3-22 所示。单击“属性”栏内的“列表值”按钮，弹出“列表值”对话框，按照“列表/菜单”表单对象的操作方法，在“列表值”对话框内输入项目标签和对应的值，单击“确定”按钮
36、，关闭“列表值”对话框。单击选中“Spry 验证选择”Spry 构件，它的“属性”栏如图 6-3-15 所示。其中各选项的作用如下：（1）“空值”复选框：选中该复选框后，在“预览状态”下拉列表框中选择“必填”选项，则在设计状态和选中列表框内的无值选项（在“列表值”对话框内只设置了项目标签，没有设置对应的值）时，在列表框右边会”提示信息。例如，在图 6-3-23 所示的列表框中的项目标签没给它设置相应的值，在浏览器中,显示该网页，单击“”选项，会显示,信息。,（2）“无效值”复选框：选中该复选框后，在其右边输入一个数值（例如 1），则设置了其值为该数值（例如1）的项目标签为无效选项。网页显示后，
37、单击“小学”选项（“小学”项目标签的对应值为 1）时，会显示 信息。,图 6-3-22,下拉列表框的“属性”栏,图 6-3-23“Spry 验证选择”Spry 构件,6.4【案例 27】“中国名胜图像浏览 4”网页,相关知识,1“Spry 菜单栏”Spry 构件,“Spry 菜单栏”Spry 构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显,示相应的子菜单。单击子命令，可以调出相应的网页。Dreamweaver CS3 允许插入垂直“Spry 菜单栏”构件和水,平“Spry 菜单栏”构件。菜单栏构件的 HTML 中包含一个外部 ul 标签，该标签中对于每个顶级菜单项
38、都包含一,个 li 标签，而顶级菜单项（li 标签）又包含用来为每个菜单项定义子菜单的 ul 和 li 标签，子菜单中同样可以,包含下一级子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。“Spry 菜单栏”构件“属性”栏内各选项的,作用、使用“Spry 菜单栏”构件的基本方法和注意事项如下：,（1）按钮：用来添加菜单和子菜单。选中“属性”栏内列表框中的一个菜单选项，单击相应列表框上边的,按钮，即可在选中的菜单选项下边新增一个菜单选项。,（2）按钮：用来删除菜单和子菜单。选中“属性”栏内列表框中要删除的菜单选项，单击相应列表框上边,的 按钮，即可删除选中的菜单选项。,（3）和 按钮：用来更改菜
39、单项的顺序。选中“属性”栏内列表框中要移动的菜单选项，单击相应列表框,上边的 按钮，即可将选中的菜单选项上移一个位置；单击相应列表框上边的 按钮，即可将选中的菜单选项下移一个位置。（4）“文本”文本框：用来更改菜单选项的名称。选中“属性”栏内列表框中要更名的菜单选项，在右边的“文本”文本框内输入新的菜单选项的名称。,（5）“链接”文本框右侧的,按钮：用来建立命令与网页或图像等的链接。选中“属性”栏内列表框中要,建立链接的命令名称，单击“链接”文本框右侧的,按钮，弹出“选择文件”对话框，选中要链接的网页或图,像文件，再单击“确定”按钮，即可在“链接”文本框内显示链接的网页或图像文件的名称，完成链
40、接。也可以直接在“链接”文本框内输入相对路径和文件名称来建立链接命令与网页或图像等的链接。（6）“标题”文本框：用来建立菜单选项的提示信息：选中“属性”栏内列表框中要建立提示信息的菜单选项，在右边的“标题”文本框中输入提示信息文字。（7）“目标”文本框：用来设置菜单项的目标属性。在“目标”文本框内可以输入如下属性值，用来设置链接的网页或图像的显示位置。例如，可以为菜单项分配一个目标属性，以便在站点访问者单击命令时，在新的浏览器窗口中打开所链接的页面。如果使用的是框架集，则还可以指定在其中那个框架中显示链接的网页或图像。（8）使子菜单显示在 Flash 动画上边：“Spry 菜单栏”构件通常会显
41、示其他部分的上方。如果页面中插入有 Flash 动画，则它会显示在子菜单的上边。为了使子菜单显示在 Flash 动画的上边，用户可以修改 Flash 影片,的参数，使用 wmode=transparent语句。,（9）定位子菜单：Spry 菜单栏子菜单的位置由子菜单 ul 标签的 margin 属性控制。找到 ul.MenuBarVertical,ul 或 ul.MenuBarHorizontal ul 规则，将默认值“margin:-5%0 0 95%;”进行修改为所需的值。,2“Spry 折叠式”Spry 构件,“Spry 折叠式”Spry 构件是一组可折叠的面板，可以将大量内容存储在一个
42、紧凑的空间中。用户可以通过单,击该组面板上的选项卡来收缩或展开折叠构件中的一个面板，并显示该面板中的内容。在可折叠的面板中，每次,只能有一个面板处于展开且可以看见其中内容的状态。“Spry 折叠式”Spry 构件可以包含任意数量的单独面板。,“Spry 折叠式”Spry 构件的默认 HTML 中包含一个含有所有面板的外部 div 标签以及各面板对应的 div 标签，,各面板的标签中还有一个标题 div 和内容 div。在文档头中和“Spry 折叠式”Spry 构件的 HTML 标记之后还包括,script 标签。,图 6-4-12 是一个由“Spry 折叠式”Spry 构件组成的网页，其中有四
43、个面板，第 1 个面板处于展开状态。制,作该网页及创建和修改“Spry 折叠式”Spry 构件的方法如下：,图 6-4-13,图 6-4-12“Spry 折叠式”Spry 构件,（1）新建一个网页文档，以名称“Spry 折叠式.htm”保存在“【案例 27】Spry”文件夹内。单击“插入记录”,“Spry”“Spry 折叠式”命令，即可在网页内光标处创建一个“Spry 折叠式”Spry 构件，如,所示。,（2）选中“Spry 折叠式”Spry 构件，它的“属性”栏如图 6-4-14（a）所示。单击选中“属性”栏内“面,板”列表框上边的 按钮，在“面板”列表框内增加一个面板名称“LABEL3”，
44、再单击 按钮，在“面板”列表框,内再增加一个面板名称“LABEL4”。（3）单击选中“属性”栏内“面板”列表框中的面板名称“LABEL1”，拖动选中网页内的“LABEL1”文字，将该文字改为“中秋节”。按照相同的方法，再将网页内的“LABEL2”文字改为“元宵节”，将网页内的“LABEL3”文字改为“清明节”，将网页内的“LABEL4”文字改为“春节”。然后，利用它们的“属性”栏将这些文字改为红色、加粗、大小为 16 磅、宋体。此时，“Spry 折叠式”Spry 构件的“属性”栏如图 6-4-14（b）所示。,图 6-4-13,创建的原始“Spry 折叠式”Spry 构件,、,（a）,（b）,
45、图 6-4-14“Spry 折叠式”Spry 构件的“属性”栏（4）打开“【案例 27】Spry”文件夹内的“中秋节.txt”、“元宵节.txt”、“清明节.txt”和“春节.txt”文本文件。单击选中“Spry 折叠式”Spry 构件“属性”栏内“面板”列表框中的“中秋节”面板名称，展开“中秋节”面板，如图 6-4-14 所示（面板内还没有文字）。另外，也可以将鼠标指针移到网页内“中秋节”面板标签内的右边，当出现一个眼睛图标 时，单击该图标，也可以展开“中秋节”面板。（5）将“中秋节.txt”文件内的文字复制到剪贴板内，再粘贴到网页内“中秋节”面板名称下边的“内容 1”文字处，替换原来的文字
46、“内容 1”。然后，选中粘贴的文字，再利用它的“属性”栏将选中的文字改为蓝色、加粗、大小为 14 磅、宋体，如图 6-4-15 所示。（6）按照上述方法，分别将“元宵节.txt”“清明节.txt”和“春节.txt”文本文件内的文字复制粘贴到“元,宵节”、“清明节”和“春节”面板内的“内容”中。（7）然后，分别选中面板内的这些文字，再利用它的“属性”栏将选中的文字改为蓝色、加粗、大小为 14磅、宋体。其中，展开的“春节”面板如图 6-4-16 所示。默认情况下，折叠构件会展开以填充可用空间。但是，可以通过设置折叠式容器的 width 属性来限制折叠构件的宽度。方法是：打开“SpryAccordi
47、on.css”文件，查找到“.Accordion CSS”规则。此规则可用来定义折叠构件的主容器元素的属性，向该规则中添加一个 width 属性和值，例如“width:300px;”。,图 6-4-15,展开“中秋节”面板,图 6-4-16,展开“春节”面板,另外，还可以选中“Spry 折叠式”Spry 构件，然后在“CSS 样式”面板中进行设置。方法是：单击“CSS 样式”,面板内的“添加属性”超链接，使其变成一个下拉列表框，选中该下拉列表框中的“width”选项，如图 6-4-17（a）所示；再在其右边的下拉列表框中输入 500，如图 6-4-17（b）所示。,（a）,（b）,图 6-4-
48、17“CSS 样式”面板设置3“Spry 可折叠面板”Spry 构件“Spry 可折叠面板”Spry 构件是一个面板，它可以将内容存储到紧凑的空间中。单击该构件面板的选项卡，即可以展开或折叠面板，显示或隐藏存储在可折叠面板中的内容。图 6-4-18（a）所示是一个处于展开的“Spry,可折叠面板”Spry 构件，图 6-4-18（b）所示是一个处于折叠状态的“Spry 可折叠面板”Spry 构件。,（a）,（b）,图 6-4-18“Spry 可折叠面板”Spry 构件的展开和折叠状态图 6-4-12 是一个由“Spry 可折叠面板”Spry 构件组成的网页，“Spry 可折叠面板”Spry 构
49、件的 HTML 中包含一个外部 div 标签，其中包含内容 div 标签和选项卡容器 div 标签，在文档头中和可折叠面板的 HTML 标记之后还包括脚本标签。制作该网页及创建和修改“Spry 可折叠面板”Spry 构件的方法如下：,（1）新建一个网页文档，以名称“Spry 可折叠面板.htm”保存在“【案例 27】Spry”文件夹内。（2）单击“插入记录”“Spry”“Spry 可折叠面板”命令，即可在网页内光标处创建一个“Spry 可折叠面板”Spry 构件，如图 6-4-19 所示。（3）拖动选中网页内的“Tab”文字，将该文字改为“春节”，再利用它的“属性”栏将选中的文字改为宋体、红色
50、、加粗、大小为 18 磅的文字。,图 6-4-19,创建的“Spry 可折叠面板”Spry 构件,（4）拖动选中网页内的“内容 1”文字，删除该文字，复制粘贴一些文字，再利用它的“属性”栏将选中的文字改为宋体、蓝色、加粗、16 磅文字，如图 6-4-20 所示。单击网页内“春节”面板标签内的右边的眼睛图标，展开“春节”面板；当出现一个 图标时，单击该图标，可收缩“春节”面板。（5）单击选中“Spry 可折叠面板”Spry 构件，它的“属性”栏如图 6-4-21 所示。其中各选项的作用如下：,l,l,l,图 6-4-20,制作好的“Spry 可折叠面板”Spry 构件,图 6-4-21,Spry
