新媒体网页设计与制作-Dreamweaver-CS6基础、案例、技巧实用教程第9-10章课件.ppt

1、第第9 9章章 站点风格的统一站点风格的统一本章学习要点：本章学习要点：1 1模板的创建及编辑模板的创建及编辑 2 2模板的应用模板的应用 3 3库的创建及应用库的创建及应用9.1 9.1 认识模板和库认识模板和库 模板是一种页面布局，而库则是一种用于放置在网页上的资源。无论是更新哪个网页中的模板、库，其他包含有该模板和库项目的网页都会随之更新，方便更新和维护网站。9.1.1 9.1.1 模板的概念模板的概念 模板是一种特殊类型的文档，用于设计网页布局。模板的功能很强，通过定义和锁定可编辑区域来保护模板的格式和内容不被修改，只有在定义了可编辑区域中才可以编辑新的内容，通过模板可以一次性更新多个

2、页面。从模板创建的文档与该模板保持链接状态，可以修改模板并立即更新基于该模板的所有文档中的设计。Dreamweaver将模板文件保存在站点的本地根文件夹下的Templates文件夹中，模板文件的扩展名为.dwt。9.1.2 9.1.2 库的概念库的概念 库是一种特殊的Dreamweaver文件，其中包含用户已经创建好的、放在网页上的图像或著作权等单独的资源或资源副本的集合。库中存储的资源称为库项目，库项目可以在多个网页中被重复使用。在更改某个库项目时，其他使用该库项目的所有页面随之更新。Dreamweaver将库文件保存在站点的本地根文件夹下的Library文件夹中，库项目的扩展名为.lbi。

3、9.2 9.2 使用模板使用模板9.2.1 9.2.1 创建模板创建模板 选择【文件】/【新建】命令，弹出【新建文档】对话框，在该对话框中选择【空模板】，在模板类型中选择【HTML模板】，单击【确定】按钮，如图所示。创建模板后，可以选择【文件】/【另存为模板】命令来保存模板。如果模板中还没有设置可编辑区域，系统会弹出提示信息，如图所示。9.2.2 9.2.2 保存模板保存模板 单击【确定】按钮，弹出模板【另存模板】对话框，如图所示。9.2.2 9.2.2 保存模板保存模板 创建模板后，在资源面板中单击【模板】按钮 即会显示模板列表，如图所示。9.2.2 9.2.2 保存模板保存模板9.2.3

4、9.2.3 定义可编辑区域定义可编辑区域 在【名称】文本框中输入可编辑区域的名称，单击【确定】按钮。定义的可编辑区域，如图所示。选中想要设置为可选区域的对象，选择【插入】/【模板对象】/【可选区域】命令，在弹出的【新建可选区域】对话框的【基本】选项卡的【名称】文本框中输入可选区域的名称，复选【默认显示】选项，如图所示。9.2.4 9.2.4 定义可选区域定义可选区域 在【高级】选项卡中可以选择【使用参数】或【输入表达式】来确定该区域是否可见，如图所示。9.2.4 9.2.4 定义可选区域定义可选区域定义的可选区域如图所示。9.2.4 9.2.4 定义可选区域定义可选区域 选中想要设置为可选区域

5、的对象，选择【插入】/【模板对象】/【可编辑可选区域】命令，弹出【新建可选区域】对话框，在【基本】选项卡的【名称】文本框中输入可选区域的名称，复选【默认显示】选项，单击【确定】按钮，即插入了可编辑可选区域，如图所示。9.2.5 9.2.5 定义可编辑可选区域定义可编辑可选区域9.2.6 9.2.6 课堂案例课堂案例创建基于模板的网页创建基于模板的网页本例通过已有的网页来创建、编辑并使用模板。具体操作步骤：1打开素材文件“examplechapter09mobanteach.html”。2将文件另存为模板。选择【文件】/【另存为模板】命令，弹出【另存模板】对话框，在【另存为】文本框中设置模板名称

6、为“dwmb”，如图所示。3定义可编辑区域。选中菜单下面名为“main”的表格，选择【插入】/【模板对象】/【可编辑区域】命令，弹出【新建可编辑区域】对话框，在【名称】文本框中修改可编辑区域名称为“mainedit”，单击【确定】按钮，如图所示。9.2.6 9.2.6 课堂案例课堂案例创建基于模板的网页创建基于模板的网页4定义可选区域。选中页脚区域叶子图片，选择【插入】/【模板对象】/【可选区域】命令，在弹出【新建可选区域】对话框中输入可选区域名称，单击【确定】按钮，如图所示。9.2.6 9.2.6 课堂案例课堂案例创建基于模板的网页创建基于模板的网页5保存文件。选择【文件】/【保存】命令，完

7、成模板的设置。6套用模板。选择【文件】/【新建】命令，在【新建文档】对话框中选择【空白页】，【页面类型】选择【HTML】，单击【创建】按钮。在打开的新建文档中，单击【窗口】/【资源】面板，单击面板左侧的 按钮，切换到【模板】类别，在【名称】下列出网站所有可用的网页模板，选中名为“dwmb”的模板，单击面板底部的【应用】按钮，弹出【不一致的区域名称】对话框，如图所示。9.2.6 9.2.6 课堂案例课堂案例创建基于模板的网页创建基于模板的网页 选中【可编辑区域】下的【Document head】，在【将内容移到新区域】下拉列表中选择【不在任何地方】，单击【确定】按钮，完成模板的套用。9.2.6

8、9.2.6 课堂案例课堂案例创建基于模板的网页创建基于模板的网页7选择【文件】/【保存】命令，将文件另存为“mobanmbindex.html”。8在模板的可编辑区域编辑网页内容即可。9 套用模板后的网页显示效果如图所示。9.2.6 9.2.6 课堂案例课堂案例创建基于模板的网页创建基于模板的网页 通过引用库项目可以一次性更新站点中所有使用了库的网页。例如，某些文本或图像已经创建成库项目，并应用到站点文档中，当这些文本或图像都需要更新时，只需更新库项目，系统就会自动更新任何包含插入的库项目的页面中该库的实例。9.3 9.3 定制库项目定制库项目1将已有元素创建为库项目使用以下方法均可以实现将文

9、档中的某个已有元素创建为库项目。选择【窗口】/【资源】命令，打开【资源】面板，单击按钮，切换到库类别。在设计窗口将选定元素拖到库类别中，然后为新建的库项目命名。在文档窗口选中要创建库项目的元素，单击【资源】面板库类别底部的按钮，并为新的库项目命名。在文档窗口中选择要另存为库项目的元素，然后选择【修改】/【库】/【增加对象到库】命令。Dreamweaver将自动显示【资源】面板的库类别，并列出新创建的库项目，重新修改新建库项目名称即可。9.3.1 9.3.1 创建库项目创建库项目2创建空白库项目 创建空白库项目时，必须保证当前没有选择任何内容。使用以下方法均可以实现创建空白库项目。选择【文件】/

10、【新建】命令，在弹出的【新建文档】对话框中选择【空白页】中的【库项目】选项，即可创建一个库文档，将文件另存为库文件（.lbi）即可。单击【资源】面板的库类别底部的“+”按钮，即创建了一个空白的库项目，并为库项目命名。单击【资源】面板右上角的 按钮，从弹出菜单中选择【新建库项】命令，并为库项目命名。在库列表空白区域单击鼠标右键，在弹出快捷菜单中选择【新建库项】命令，并为库项目命名。9.3.1 9.3.1 创建库项目创建库项目通过拖动元素创建库项目创建空白库项目9.3.1 9.3.1 创建库项目创建库项目9.3.2 9.3.2 向页面添加库项目向页面添加库项目 向网页中插入库项目，并不是把整个库项

11、目的内容都插入到网页中，而是插入一个指向库项目的链接。首先将鼠标光标置于目标位置，选择【窗口】/【资源】命令，打开【资源】面板，单击按钮，切换到库类别，在库项目列表中选择要插入的库项目，单击面板底部的【插入】按钮即可。9.3.3 9.3.3 编辑库项目编辑库项目 在【资源】面板的库类别列表中选择要进行编辑的库项目，单击面板底部的，或直接双击库项目名称，系统自动打开一个用于编辑库项目的窗口，如图所示。根据需要对库项目进行编辑，编辑完成后对文件进行保存，这时系统会自动弹出【更新库项目】对话框，如图所示。根据需要选择是否更新本地站点上已经使用修改过的库项目的文档。9.3.3 9.3.3 编辑库项目编

12、辑库项目 如果要更新整个站点中重新编辑过的库项目，可以选择【修改】/【库】/【更新页面】命令，弹出【更新页面】对话框，如图所示。9.3.4 9.3.4 更新库文件更新库文件 在【查看】下拉列表中选择要更新的网页范围，包括“整个站点”和“文件使用”两个选项，右侧的下拉列表则用来选择所需站点或模板，复选【库项目】选项后，单击【开始】按钮即可更新网站。9.3.4 9.3.4 更新库文件更新库文件具体操作步骤：1打开素材文件“examplechapter09mobanteach.html”。2创建库项目。（1）将已有元素创建为库项目。选择【窗口】/【资源】命令，打开【资源】面板，单击按钮，切换到【库】

13、类别，在设计窗口选中网页顶部名为“dwlogo.png”的LOGO图标并拖动图标至库名称列表的空白区域处，即完成库项目的创建，修改库项目名称为“logobli”。9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目（2）创建、编辑空白库项目。单击【资源】面板的库类别底部的新建按钮，创建一个空白的库项目，并为库项目命名为“notice”。双击“notice”，打开编辑窗口，在窗口中插入一个一行一列，【表格宽度】为“100%”的表格。将鼠标光标置于表格内部，选择【插入】/【标签】命令，打开【标签选择器】，在【标记语言标签】下选中【HTML】，在其右侧标签列表中选择“marque

14、e”标签，单击【插入】按钮，系统会自动打开【拆分】窗口在左侧的代码窗口可以看到刚刚添加的HTML标签“”，如图所示。9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目单击【关闭】按钮，关闭【标签选择器】。将鼠标光标置于“”标记的中间位置，输入文本“和我一起学习Dreamweaver吧!”，单击【文件】/【保存】命令，完成滚动字幕的设置。3应用库项目。（1）打开素材文件“examplechapter09mobanTemplates dwmb.dwt”。选中页面顶部的LOGO图标，在【资源】面板的库类别【

15、名称】列表中选择“logobli”，单击面板底部的【插入】按钮，完成库项目的应用，如图所示。9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目（2）将鼠标光标置于可编辑区域，在【资源】面板的库类别【名称】列表中选择“notice”，单击面板底部的【插入】按钮，完成库项目的应用，选择【文件】/【保存】命令，弹出【更新模板文件】对话框，单击【更新】按钮，完成模板文件的更新，如图示。9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目4编辑库项目。鼠标双击名为“logobli”的库项目，在打开的“logobli.lbi”文档窗口中，选中图标，将图片替换为“/

16、images/logolbi.png”，选择【文件】/【保存】命令，弹出【更新库项目】对话框，如图所示。9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目 单击【更新】按钮，弹出【更新页面】对话框，如图所示。单击【关闭】按钮，完成库项目的编辑及页面的更新。9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目应用库项目的网页效果如图所示。9.3.5 9.3.5 课堂案例课堂案例创建并使用库项目创建并使用库项目第第1010章章 表单表单本章学习要点：本章学习要点：1 1创建表单创建表单 2 2插入表单对象插入表单对象 3 3表单及表单对象属性的设置表单及表

17、单对象属性的设置第第1010章章 表单表单 网页设计中的交互性是用户与服务器之间的交互，通过页面设计为用户提供一个平等的交流平台，交互体验设计成为新媒体网页吸引用户的重要因素，这个功能主要由表单来实现。表单的作用是从访问网站的用户处获得信息，如注册、登录等信息。10.1 10.1 认识网页中的表单认识网页中的表单 表单是一种特殊的网页容器标签，是Internet用户同服务器进行信息交互的最重要的控件，它从Web用户那里收集信息，不仅可以收集用户访问的浏览路径，还可以收集用户填写的个人资料。表单支持客户端/服务器关系中的客户端。用户在Web浏览器（客户端）的表单中输入信息后，单击【提交】按钮，这

18、些信息即被发送到服务器端，由服务器端脚本或应用程序对这些信息进行处理。服务器向用户（客户端）返回所请求的信息或基于表单内容执行某些操作，以此进行响应，如图所示。10.1 10.1 认识网页中的表单认识网页中的表单表单服务器数据库数据表 10.2 10.2 创建表单创建表单10.2.1 创建表单创建表单 将鼠标光标置于目标位置，选择【插入】/【表单】/【表单】命令，即可在鼠标光标所在行插入一个空白表单。在设计视图中，表单轮廓会以红色虚线表示，如图所示。10.3.1 10.3.1 插入文本域插入文本域 表单中的文本域分为文本域和文本区域，分别用于在表单中插入一个可以输入一行或多行文本的表单元素。将

19、鼠标光标置于表单域中，选择【插入】/【表单】/【文本域】命令，弹出【输入标签辅助功能属性】对话框，在该对话框中可以设置表单对象的属性，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性 属性设置完成后，单击【确定】按钮即可以在表单中插入一个文本域，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性 在文本域中可以输入任何类型的文本、数字和字母，也可以在文本域【属性】检查器的【类型】中选择【密码】单选按钮，对文本进行加密显示；如果需要显示多行文本，则可以在文本域【属性】检查器的【类型】中选择【多行】单选按钮，如图所示。10.3 10.3 添

20、加并设置表单对象的属性添加并设置表单对象的属性10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 1插入单选按钮 单选按钮是一种选择性表单对象，可以进行数据的选择，但一次只能选择一个选项，当用户选中其中一个单选按钮时，其他单选按钮将自动转换为未选中状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【单选按钮】命令，即可以在表单中插入一个单选按钮，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 选中单选按钮，可以设置单选按钮属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 选

21、中单选按钮，可以设置单选按钮属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 2插入单选按钮组 当表单中有多组单选按钮需要使用时，使用单选按钮组承载不同组的单选按钮。将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【单选按钮组】命令，弹出【单选按钮组】对话框，在该对话框可以设置单选按钮组的属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 插入的单选按钮组如左图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 10.3.3 10.3.3 插入复选框和复选框组插入复选框和

22、复选框组1插入复选框 复选框表单对象用于设置预定义的选择对象，用户可以单击复选框按钮进行选择。复选框对每个单独的响应进行“打开”和“关闭”状态切换，因此，用户可以从复选框组中同时选择多个选项。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【复选框】命令，即可以表单中插入一个复选框，选中复选框，可以设置复选框的属性，如下图所示。10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组【复选框】属性检查器插入复选框2插入复选框组 当有多组复选框需要使用时，使用复选框组承载不同的复选框。将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【复选框组】命令，弹出【复选框组】对话

23、框，在该对话框可以设置复选框组的属性，如图所示。10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组10.3.4 10.3.4 插入列表插入列表/菜单菜单 列表/菜单是一种重要的表单对象，用户可以在列表或菜单中方便地选择其中某一个项目，在提交表单时，将选择的项目值传送到服务器中。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【选择（列表/菜单）】命令，在表单中插入一个空白【列表/菜单】表单对象，选中该对象，设置属性如图所示。单击【列表值】按钮，可以设置列表值属性。10.3.4 10.3.4 插入列表插入列表/菜单菜单 当选择【类型】中的【列表】时，【高度】和【选定范围

24、】可用，设置插入列表的【高度】为“3”，并复选【允许多选】选项，插入的列表如图所示。10.3.4 10.3.4 插入列表插入列表/菜单菜单 跳转菜单是一种带链接属性的选项弹出菜单，当单击该菜单时，即可跳转到指定的站内文件或其他网站的Web页面。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【跳转菜单】命令，弹出【插入跳转菜单】对话框，设置跳转让菜单属性如图所示。10.3.5 10.3.5 插入跳转菜单插入跳转菜单10.3.5 10.3.5 插入跳转菜单插入跳转菜单插入的跳转菜单如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 表单按钮用于控制表单操作。使用表单按

25、钮能够将输入表单的数据提交到服务器或重置表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。表单按钮可分为标准表单按钮和图片式表单按钮，即图像域。1插入按钮 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【按钮】命令，即在表单中插入一个标准表单按钮，选中表单按钮，属性如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 若想使用按钮图像作为提交按钮，就要使用图像域。图像域只能用作表单的提交按钮，而不能用于重置按钮。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【图像域】命令，在弹出的【选择图

26、像源文件】对话框中选择所的图像，单击【确定】按钮，即在表单中插入一个图像域，选中插入的图像域，属性设置如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 文件域又称为文件上传域，允许用户将本机上的文件上传到服务器。文件域要求使用POST方法将文件从浏览器传输到服务器，该文件被发送到表单的操作域中所指定的地址。10.3.7 10.3.7 插入文件域插入文件域 10.3.7 10.3.7 插入文件域插入文件域 将鼠标光标置于表单域指定位置，选择【插入】/【表单】/【文件域】命令，即可在表单中插入文件域。选中文件域，设置属性如图所示。10.3.8 10.3.8 插入隐藏域插入隐藏

27、域 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域不可见。当表单被提交后，隐藏域会将信息用设置时定义的名称和值发送到服务器端。10.3.8 10.3.8 插入隐藏域插入隐藏域 将鼠标光标置于表单域指定位置，选择【插入】/【表单】/【隐藏域】命令，即可在表单中插入隐藏域。选中隐藏域，属性如图所示。具体操作步骤：1新建网页，输入文本“客户信息反馈表”，将文件另存为“examplechapter10fankuibiaoindex.html”。2插入表单。将鼠标光标置于“客户信息反馈表”文本的下面，选择【插入】/【表单】/【表单】命令，在网页中插入一个空白表单。10.3.9 10

28、.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表3在表单中插入表格。将鼠标光标置于表单域中，选择【插入】/【表格】命令，在表单中插入一个【边框粗细】为“1”、【单元格间距】和【单元格边距】均为“2”、【表格宽度】为“80%”的6行4列的表格，设置表格名称为“fkxx”，并居中对齐，如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表4布局表格。根据需要合并单元格，并调整单元格宽度和高度，输入文本信息，如图所示。设置表格列宽分别为“15%”、“35%”、“15%”和“35%”，设置“购物途径”下面一行的行高为“150”，“您的建议”行高为“90

29、”，其他行行高均为“40”。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表5插入表单元素。（1）将鼠标光标置于“您的名字”后的单元格中，选择【插入】/【表单】/【文本域】命令，插入一个文本域，设置文本域名称为“mz”，【类型】选择【单行】单选按钮。（2）将鼠标光标置于“性别”后的单元格中，分别插入两个单选按钮，设置两个单选按钮的名称均为“xb”，标签文本分别为“男”和“女”。选中标签为“女”的单选按钮，设置【初始状态】为“已勾选”。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表10.3.9 10.3.9 课堂案例课堂案例制作客

30、户信息反馈表制作客户信息反馈表（3）将鼠标光标置于“年龄”后的单元格中，插入一个菜单/列表，设置【选择】名称为“nl”，列表值如图所示。（4）将鼠标光标置于“所购商品”后的单元格中，选择【插入】/【表单】/【选择（列表/菜单）】命令，插入一个列表/菜单，设置【选择】名称为“sp”，列表值如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（5）将鼠标光标置于“购物途径”行的下面右侧的单元格中，选择【插入】/【表单】/【单选按钮组】命令，插入一个单选按钮组，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（6

31、）将鼠标光标置于“问题的类型”行的下面右侧的单元格中，选择【插入】/【表单】/【复选框组】命令，插入一个复选框组，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（7）将鼠标光标置于“您的建议”后的单元格中，选择【插入】/【表单】/【文本区域】命令，插入一个文本区域，设置【文本域】名称为“jy”，【字符宽度】为“60”，【行数】为“6”，【类型】选择【多行】单选按钮。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（8）将鼠标光标置于

32、底部单元格中，选择【插入】/【表单】/【按钮】命令，分别插入两个按钮，设置【动作】分别为【提交表单】和【重设表单】，如图所示。6创建CSS样式（1）创建表格CSS样式。选中整个表格，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，为ID为“fkxx”的表格创建CSS规则，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（2）创建标题CSS样式。新建一个名为“bt”的基本类，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表7应用标题样式。选中“客户信息反馈表”标题文本，在【CSS样式】面

33、板中右键单击“.bt”样式，在弹出的快捷菜单中选择【应用】。整个表单显示效果如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表10.4 10.4 使用使用SprySpry验证表单验证表单 Spry表单验证允许用户建立丰富网页的一套JavaScript和CSS库，用户可以使用这个框架显示XML数据，创建交互效果。通过Spry验证，能够实现对表单元素内容的检测，以确保将正确的信息发送到服务器。10.4.1 10.4.1 使用使用SprySpry验证文本域验证文本域 Dreamweaver CS6提供了一个Ajax的框架Spry，Spry内置表单验证功能对于初

34、学者来说非常实用和方便。Spry验证文本域构件是一个文本域，该域用于在站点访问者输入文本时判断文本域的合法或非法状态，例如有效或无效等。验证文本域可以检测多个状态，用户可以在【属性】检查器中根据检查结果来设置这些状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本域】命令，即在表单中插入一个Spry验证文本域，选中该文本域，可以设置Spry验证文本域属性，如图所示。10.4.1 10.4.1 使用使用SprySpry验证文本域验证文本域使用Spry验证文本域的表单如图所示。10.4.1 10.4.1 使用使用SprySpry验证文本域验证文本域 与Spry验证文本域

35、类似，都可以用于进行输入信息的判断，当Spry验证文本区域中必须输入数据，但用户没有输入任何信息时，可根据其【属性】检查器的【提示】文本框中的内容进行提示。10.4.2 10.4.2 使用使用SprySpry验证文本区域验证文本区域 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本区域】命令，即在表单中插入一个Spry验证文本域，选中该文本区域，设置属性如图所示。10.4.2 10.4.2 使用使用SprySpry验证文本区域验证文本区域 使用Spry验证文本区域的表单效果如图所示。10.4.2 10.4.2 使用使用SprySpry验证文本区域验证文本区域10.4.

36、3 10.4.3 使用使用SprySpry验证复选框验证复选框 Spry验证复选框能够对用户选中复选框的行为进行验证，当用户选择复选框时，Spry验证复选框会显示合法或非法状态的复选框。10.4.3 10.4.3 使用使用SprySpry验证复选框验证复选框 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证复选框】命令，即在表单中插入一个Spry验证复选框，选中Spry验证复选框，设置属性如图所示。10.4.3 10.4.3 使用使用SprySpry验证复选框验证复选框 如果需要对多个复选框进行验证，即验证复选框组，则可以在Spry验证复选框的蓝色区域内部再插入多个普通复

37、选框及标签，并设置所有复选框的【ID】属性值相同。然后单击Spry验证复选框，选择【实施范围（多个）】单选按钮，复选【验证于】的【onBlur】属性，设置【最小选择数】和【最大选择数】属性值，如图所示。Spry验证选择能够对用户选择的下拉菜单项目进行合法性验证，验证选择有多个常用状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证选择】命令，即在表单中插入一个Spry验证选择对象。选中Spry验证选择对象，设置属性如图所示。10.4.4 10.4.4 使用使用SprySpry验证选择验证选择使用Spry验证选择的表单效果如图所示。10.4.4 10.4.4 使用使用Sp

38、rySpry验证选择验证选择10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单具体操作步骤：1打开素材文件“examplechapter10spryyzspryyanzheng.html”。2添加“用户昵称”Spry验证文本域。将鼠标光标置于“用户昵称”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“nc”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。3添加“电子邮箱”Spry验证文本域。将鼠标光标置于“电子邮箱”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入

39、标签辅助功能属性】中设置【ID】为“yx”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单4添加Spry验证密码。将鼠标光标置于“登录密码”文本后，选择【插入】/【表单】/【Spry验证密码】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“mm”，单击【确定】按钮。选中Spry验证密码对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单5添加Spry验证确认。将鼠标光标置于“确认密码”文本后，选择【插入】/【表单】/【Spry验证确认】命令，在弹

40、出的【输入标签辅助功能属性】中设置【ID】为“mmqr”，单击【确定】按钮。选中Spry验证确认对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单6添加Spry验证复选框。将鼠标光标置于“我已阅读协议”文本前，选择【插入】/【表单】/【Spry验证复选框】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“OK”，单击【确定】按钮。选中Spry验证复选框对象，单击【必需（单个）】单选按钮。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单7添加按钮。将鼠标光标置于“我已阅读协议”文本的下一行，选择【插入】/【表单】/【按钮】命令，不设置任何属性，单击【确定】按钮。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单8保存文件。选择【文件】/【保存】命令，系统会弹出【复制相关文件】对话框，如图所示。单击【确定】按钮，将文件进行保存。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单9按下F12键预览网页，网页效果如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单