《表单和Spry构件》PPT课件.ppt

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