项目12制作注册网页.ppt

项目12制作注册网页主主讲讲：项目十二 制作注册网页任务一 创建表单任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页网 页 设 计 与 制 作Dreamweaver CS3任务一小 结任务二实 训任务一 创建表单Dreamweaver CS3网 页 设 计 与 制 作项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训 本任务主要介绍插入表单对象及其属性设置的基本方本任务主要介绍插入表单对象及其属性设置的基本方法。通过本任务的学习，应该掌握的内容主要有：法。通过本任务的学习，应该掌握的内容主要有：1.表单 表单只是起装载作用，其他表单对象必须插入到表单中才能表单只是起装载作用，其他表单对象必须插入到表单中才能正常使用。表单以红色虚线框显示，但在浏览器中是不可见的。正常使用。表单以红色虚线框显示，但在浏览器中是不可见的。选择【插入记录】【表单】【表单】命令（或在【插入】选择【插入记录】【表单】【表单】命令（或在【插入】【表单】面板中单击【表单】面板中单击 （表单）按钮）插入一个空白表单。（表单）按钮）插入一个空白表单。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训2.文本域 选择【插入记录】【表单】【文本域】命令，弹出【输选择【插入记录】【表单】【文本域】命令，弹出【输入标签辅助功能属性】对话框，单击【请更改入标签辅助功能属性】对话框，单击【请更改“辅助功能辅助功能”首选首选参数】链接，在弹出的【首选参数】对话框中取消【表单对象】参数】链接，在弹出的【首选参数】对话框中取消【表单对象】复选框的勾选，这样再插入表单对象时就不会弹出【输入标签辅复选框的勾选，这样再插入表单对象时就不会弹出【输入标签辅助功能属性】对话框而直接插入表单。助功能属性】对话框而直接插入表单。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训在文本域【属性】面板中设置各项属性。在文本域【属性】面板中设置各项属性。【文本域】：设置文本域的惟一名称。【文本域】：设置文本域的惟一名称。【字符宽度】：设置文本域的宽度。【字符宽度】：设置文本域的宽度。【最多字符数】：设置最多可向文本域中输入的字符数。【最多字符数】：设置最多可向文本域中输入的字符数。【类型】：设置文本域的类型，包括单行、多行和密码【类型】：设置文本域的类型，包括单行、多行和密码3种类型。种类型。当设置为当设置为“密码密码”类型时，文本内容显示为类型时，文本内容显示为“*”号而不是实际号而不是实际输入的密码，以防被别人看见。输入的密码，以防被别人看见。【初始值】：设置文本域中默认状态下填入的信息。【初始值】：设置文本域中默认状态下填入的信息。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训3.单选按钮 选择【插入记录】【表单】【单选按钮】命令，插入单选择【插入记录】【表单】【单选按钮】命令，插入单选按钮，选择【插入】【表单】【单选按钮组】命令，可以选按钮，选择【插入】【表单】【单选按钮组】命令，可以一次插入多个单选按钮。一次插入多个单选按钮。单选按钮一般以两个或者两个以上的形式出现，它的作用是单选按钮一般以两个或者两个以上的形式出现，它的作用是让用户在两个或者多个选项中选择一项。既然单选按钮的名称都让用户在两个或者多个选项中选择一项。既然单选按钮的名称都是一样的，则依靠什么来判断哪个按钮被选定呢？因为单选按钮是一样的，则依靠什么来判断哪个按钮被选定呢？因为单选按钮是具有唯一性的，即多个单选按钮只能有一个被选定，所以【选是具有唯一性的，即多个单选按钮只能有一个被选定，所以【选定值】选项就是判断的唯一依据。定值】选项就是判断的唯一依据。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训4.列表/菜单 选择【插入记录】【表单】【列表选择【插入记录】【表单】【列表/菜单】命令，插入菜单】命令，插入列表菜单域，打开【列表值】对话框，添加【项目标签】和【列表菜单域，打开【列表值】对话框，添加【项目标签】和【值】。值】。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训 当在【列表当在【列表/菜单】域的【属性】面板中将【类型】选项设菜单】域的【属性】面板中将【类型】选项设置为【菜单】时，【高度】和【选定范围】选项为不可选，在【置为【菜单】时，【高度】和【选定范围】选项为不可选，在【初始化时选定】列表框中只能选择一个初始选项，文档窗口的下初始化时选定】列表框中只能选择一个初始选项，文档窗口的下拉菜单中只显示一个选择的条目，而不是显示整个条目表。拉菜单中只显示一个选择的条目，而不是显示整个条目表。将【列表将【列表/菜单】域的【属性】面板中的【类型】选项设置菜单】域的【属性】面板中的【类型】选项设置为【列表】时，【高度】选项和【选定范围】选项为可选。其中为【列表】时，【高度】选项和【选定范围】选项为可选。其中的【高度】选项是列表框中文档的高度，的【高度】选项是列表框中文档的高度，“1”表示在列表中显表示在列表中显示一个选项。【选定范围】选项用于设置是否允许多项选择，勾示一个选项。【选定范围】选项用于设置是否允许多项选择，勾选表示允许，否则为不允许。选表示允许，否则为不允许。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训5.复选框 选择【插入记录】【表单】【复选框】命令，插入选择【插入记录】【表单】【复选框】命令，插入6个个复选框。由于复选框在表单中一般都不单独出现，而是多个复选复选框。由于复选框在表单中一般都不单独出现，而是多个复选框同时使用，因此其【选定值】就显得格外重要。另外，复选框框同时使用，因此其【选定值】就显得格外重要。另外，复选框的名称最好与其说明性文字发生联系，这样在表单脚本程序的编的名称最好与其说明性文字发生联系，这样在表单脚本程序的编制中将会节省许多时间和精力。由于复选框的【复选框名称】不制中将会节省许多时间和精力。由于复选框的【复选框名称】不同，【选定值】可以取相同的值。同，【选定值】可以取相同的值。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训6.文件域 选择【插入记录】【表单】【文件域】命令，插入一个选择【插入记录】【表单】【文件域】命令，插入一个文件域。文件域的作用是使用户可以浏览并选择本地计算机上的文件域。文件域的作用是使用户可以浏览并选择本地计算机上的某个文件，并将该文件作为表单数据进行上传，文件域的使用需某个文件，并将该文件作为表单数据进行上传，文件域的使用需要上传程序的支持。要上传程序的支持。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训7.文本区域 选择【插入记录】【表单】【文本区域】命令，插入一选择【插入记录】【表单】【文本区域】命令，插入一个文本区域。个文本区域。当单行的字符数大于文本区域的字符宽度时，如果在【换行当单行的字符数大于文本区域的字符宽度时，如果在【换行】列表中选择】列表中选择“关关”选项，行中的信息不会自动换行而是出现水选项，行中的信息不会自动换行而是出现水平滚动，如果选择其他选项，行中的信息自动换行不出现滚动水平滚动，如果选择其他选项，行中的信息自动换行不出现滚动水平条。平条。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训8.隐藏域 选择【插入记录】【表单】【隐藏域】命令，插入一个选择【插入记录】【表单】【隐藏域】命令，插入一个隐藏域。隐藏域。通常用隐藏域来传递一些特殊的信息，如注册时间、认证号通常用隐藏域来传递一些特殊的信息，如注册时间、认证号等，这些都需要使用、等源代码来编写，隐藏域在网页中一般不等，这些都需要使用、等源代码来编写，隐藏域在网页中一般不显现。隐藏域的【值】文本框内是一段代码，其中显现。隐藏域的【值】文本框内是一段代码，其中“”是是代码的开始、结束标志，而代码的开始、结束标志，而“()”表示当前的系统日期（表示当前的系统日期（2007-10-30），如果换成），如果换成“()”则表示当前的系统日期和时间（则表示当前的系统日期和时间（2007-10-30 10:16:44），而），而“()”则表示当前的系统时间（则表示当前的系统时间（10:16:44）。）。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训9.按钮 选择【插入记录】【表单】【按钮】命令，插入两个按选择【插入记录】【表单】【按钮】命令，插入两个按钮。按钮的作用在于发送信息、执行脚本程序、重置表单，这是钮。按钮的作用在于发送信息、执行脚本程序、重置表单，这是表单页收尾的工作。表单页收尾的工作。选择【插入】【表单】【图像域】命令，可以插入一个选择【插入】【表单】【图像域】命令，可以插入一个图像域。图像域的作用就是用一幅图像来替代按钮的工作，用它图像域。图像域的作用就是用一幅图像来替代按钮的工作，用它来发送表单或者执行脚本程序。来发送表单或者执行脚本程序。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训10.跳转菜单 选择【插入】【表单】【跳转菜单】命令，可以在页面选择【插入】【表单】【跳转菜单】命令，可以在页面中插入跳转菜单，【插入跳转菜单】对话框如图中插入跳转菜单，【插入跳转菜单】对话框如图12-20所示。跳所示。跳转菜单的外观和菜单相似，不同的是跳转菜单具有超级链接功能。转菜单的外观和菜单相似，不同的是跳转菜单具有超级链接功能。但是一旦在文档中插入了跳转菜单，就无法再对其进行修改了。但是一旦在文档中插入了跳转菜单，就无法再对其进行修改了。如果要修改，只能将菜单删除，然后再重新创建一个。这样做非如果要修改，只能将菜单删除，然后再重新创建一个。这样做非常麻烦，而所设置的【跳转菜单】行为，可以弥补这个缺陷。方常麻烦，而所设置的【跳转菜单】行为，可以弥补这个缺陷。方法是分别选定跳转菜单域和按钮，在【行为】面板中双击【跳转法是分别选定跳转菜单域和按钮，在【行为】面板中双击【跳转菜单】和【跳转菜单开始】，将再次打开【跳转菜单】和【跳转菜单】和【跳转菜单开始】，将再次打开【跳转菜单】和【跳转菜单开始】对话框，然后进行修改即可。菜单开始】对话框，然后进行修改即可。Dreamweaver CS3网 页 设 计 与 制 作任务一 创建表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训11.字段集 选择【插入】【表单】【字段集】命令，可以在页面中选择【插入】【表单】【字段集】命令，可以在页面中插入一个字段集。使用字段集可以在页面中显示一个圆角矩形框，插入一个字段集。使用字段集可以在页面中显示一个圆角矩形框，可以将一些相关的内容放在一起。可以先插入字段集，然后再在可以将一些相关的内容放在一起。可以先插入字段集，然后再在其中插入相关的内容。也可以先插入内容，然后将其选择再插入其中插入相关的内容。也可以先插入内容，然后将其选择再插入字段集。字段集。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训 本任务将对上面制作的表单进行验证。通过本任务的本任务将对上面制作的表单进行验证。通过本任务的学习，应该掌握的内容主要有：学习，应该掌握的内容主要有：1.关于验证表单 表单在提交到服务器端以前，必须进行验证，这是非常重要表单在提交到服务器端以前，必须进行验证，这是非常重要的一步，如果忽略了这一步，则很可能将错误的信息直接发送到的一步，如果忽略了这一步，则很可能将错误的信息直接发送到服务器端，不但浪费时间，而且也有一定的危险性，最起码要做服务器端，不但浪费时间，而且也有一定的危险性，最起码要做到的是防止空白表单被提交至服务器端。到的是防止空白表单被提交至服务器端。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训2.【检查表单】行为 选中整个表单，然后选择【窗口】【行为】命令打开【行选中整个表单，然后选择【窗口】【行为】命令打开【行为】面板，在行为菜单中选择【检查表单】命令，打开【检查表为】面板，在行为菜单中选择【检查表单】命令，打开【检查表单】对话框进行设置。最后在【行为】面板中，确认默认触发事单】对话框进行设置。最后在【行为】面板中，确认默认触发事件是否是件是否是“”。当表单被提交时（大小写不能随意更改），验证程序会自动当表单被提交时（大小写不能随意更改），验证程序会自动启动，必填项如果为空则发生警告，提示用户重新填写，如果不启动，必填项如果为空则发生警告，提示用户重新填写，如果不为空则提交表单。为空则提交表单。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训3.密码验证 两次输入的密码是否一致无法使用两次输入的密码是否一致无法使用“行为行为”来检验，但可以来检验，但可以通过简单的来验证。通过简单的来验证。在表单中右键单击按钮，在弹出的菜单中选择【编辑标签在表单中右键单击按钮，在弹出的菜单中选择【编辑标签E】命令，打开【标签编辑器】对话框，在对话框中选中】命令，打开【标签编辑器】对话框，在对话框中选中“”事件，然后在右侧的文本框中输入验证代码。事件，然后在右侧的文本框中输入验证代码。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训4.验证表单对象 使用【检查表单】行为验证表单的方法，但这种方法比较简使用【检查表单】行为验证表单的方法，但这种方法比较简单，不能从更广的范围对文本域等表单对象进行验证。例如，文单，不能从更广的范围对文本域等表单对象进行验证。例如，文本域中要求输入地址，并在提交表单时验证输入的合法性，使用本域中要求输入地址，并在提交表单时验证输入的合法性，使用【检查表单】行为就无法进行验证。【检查表单】行为就无法进行验证。3新增了新增了4个验证表单构件：验证文本域、验证文本区域、个验证表单构件：验证文本域、验证文本区域、验证复选框和验证选择，使用它们可以更好地对表单对象进行验验证复选框和验证选择，使用它们可以更好地对表单对象进行验证。证。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训（1）验证文本域 验证文本域用于在输入文本时，显示文本的状态（有效或无验证文本域用于在输入文本时，显示文本的状态（有效或无效。例如，在表单中添加一个验证文本域，用于用户输入电子邮效。例如，在表单中添加一个验证文本域，用于用户输入电子邮件地址，如果用户没有在电子邮件地址中键入件地址，如果用户没有在电子邮件地址中键入“”符号和句点，符号和句点，验证文本域会返回一条消息，声明用户输入的信息无效。验证文本域会返回一条消息，声明用户输入的信息无效。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训（2）验证文本区域 验证文本区域用于在用户输入几个文本句子时显示文本的状验证文本区域用于在用户输入几个文本句子时显示文本的状态（有效或无效。如果文本区域是必填域，而用户没有输入任何态（有效或无效。如果文本区域是必填域，而用户没有输入任何文本，将返回一条消息，声明必须输入值。验证文本区域的属性文本，将返回一条消息，声明必须输入值。验证文本区域的属性设置与验证文本域相似，这里不再详述。另外，可以添加字符计设置与验证文本域相似，这里不再详述。另外，可以添加字符计数器，以便当用户在文本区域中输入文本时知道自己已经输入了数器，以便当用户在文本区域中输入文本时知道自己已经输入了多少字符或者还剩多少字符。默认情况下，当添加字符计数器时，多少字符或者还剩多少字符。默认情况下，当添加字符计数器时，计数器会出现在构件右下角的外部。计数器会出现在构件右下角的外部。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训（3）验证复选框 验证复选框是表单中的一个或一组复选框，该复选框在用户验证复选框是表单中的一个或一组复选框，该复选框在用户选择（或没有选择）复选框时会显示其状态（有效或无效。例如，选择（或没有选择）复选框时会显示其状态（有效或无效。例如，向表单中添加一个验证复选框，要求用户进行两项选择。如果用向表单中添加一个验证复选框，要求用户进行两项选择。如果用户没有进行所有这两项选择，将会返回一条消息声明不符合最小户没有进行所有这两项选择，将会返回一条消息声明不符合最小选择数要求。默认情况下，验证复选框设置为选择数要求。默认情况下，验证复选框设置为“必需（单个）必需（单个）”。但是，如果在页面上插入了多个复选框，则可以指定选择范围，但是，如果在页面上插入了多个复选框，则可以指定选择范围，即设置为即设置为“强制范围（多个复选框）强制范围（多个复选框）”，然后设置【最小选择数，然后设置【最小选择数】和【最大选择数】参数。】和【最大选择数】参数。Dreamweaver CS3网 页 设 计 与 制 作任务二 验证表单项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训（4）验证选择 验证选择构件是一个下拉菜单，该菜单在用户进行选择时会验证选择构件是一个下拉菜单，该菜单在用户进行选择时会显示构件的状态（有效或无效。例如，可以插入一个包含状态列显示构件的状态（有效或无效。例如，可以插入一个包含状态列表的验证选择构件，这些状态按不同的部分组合并用水平线分隔。表的验证选择构件，这些状态按不同的部分组合并用水平线分隔。如果用户意外选择了某条分界线（而不是某个状态），验证选择如果用户意外选择了某条分界线（而不是某个状态），验证选择构件会向用户返回一条消息，声明他们的选择无效。构件会向用户返回一条消息，声明他们的选择无效。实训 制作在线调查网页 本本项项目着重介目着重介绍绍了插入表了插入表单对单对象及其属性象及其属性设设置以及置以及验证验证表表单单和和测试测试表表单单的基本方法。的基本方法。实训实训将将创创建如建如图图所示表所示表单单网网页页，以，以进进一步巩固表一步巩固表单单网网页页的相关知的相关知识识。Dreamweaver CS3网 页 设 计 与 制 作项目十二：项目十二：制作注册网制作注册网页页【实训目的】【实训目的】进一步掌握插入常用表单对象的方法。进一步掌握插入常用表单对象的方法。进一步掌握表单及表单对象属性的设置方法。进一步掌握表单及表单对象属性的设置方法。进一步掌握使用进一步掌握使用“检查表单检查表单”行为验证表单的基本方法。行为验证表单的基本方法。任务一小 结任务二实 训实训 制作在线调查网页Dreamweaver CS3网 页 设 计 与 制 作项目十二：项目十二：制作注册网制作注册网页页任务一小 结任务二实 训小结 本项目通过制作用户注册网页介绍了制作表单网页本项目通过制作用户注册网页介绍了制作表单网页的基本知识，包括插入表单对象及其属性设置、利用的基本知识，包括插入表单对象及其属性设置、利用“检查表单检查表单”行为验证表单的方法以及行为验证表单的方法以及Spry验证表单等。验证表单等。希望通过本项目的学习，能使读者对各个表单对象的作希望通过本项目的学习，能使读者对各个表单对象的作用有一个清楚的认识，并能够在操作中熟练运用。用有一个清楚的认识，并能够在操作中熟练运用。Dreamweaver CS3网 页 设 计 与 制 作项目十二：项目十二：制作注册网页制作注册网页任务一小 结任务二实 训谢谢！