《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第10章课件.ppt》由会员分享，可在线阅读，更多相关《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第10章课件.ppt（63页珍藏版）》请在三一办公上搜索。
1、第10章 表单,本章学习要点： 1创建表单 2插入表单对象 3表单及表单对象属性的设置,第10章 表单本章学习要点：,第10章 表单,网页设计中的交互性是用户与服务器之间的交互，通过页面设计为用户提供一个平等的交流平台，交互体验设计成为新媒体网页吸引用户的重要因素，这个功能主要由表单来实现。表单的作用是从访问网站的用户处获得信息，如注册、登录等信息。,第10章 表单 网页设计中的交互性是用户与服务,10.1 认识网页中的表单,表单是一种特殊的网页容器标签，是Internet用户同服务器进行信息交互的最重要的控件，它从Web用户那里收集信息，不仅可以收集用户访问的浏览路径，还可以收集用户填写的个
2、人资料。,10.1 认识网页中的表单,表单支持客户端/服务器关系中的客户端。用户在Web浏览器（客户端）的表单中输入信息后，单击【提交】按钮，这些信息即被发送到服务器端，由服务器端脚本或应用程序对这些信息进行处理。服务器向用户（客户端）返回所请求的信息或基于表单内容执行某些操作，以此进行响应，如图所示。,10.1 认识网页中的表单,表单支持客户端/服务器关系中的客户端。用户在W,10.2 创建表单,10.2.1 创建表单 将鼠标光标置于目标位置，选择【插入】/【表单】/【表单】命令，即可在鼠标光标所在行插入一个空白表单。在设计视图中，表单轮廓会以红色虚线表示，如图所示。,10.2 创建表单10
3、.2.1 创建表单,10.3.1 插入文本域 表单中的文本域分为文本域和文本区域，分别用于在表单中插入一个可以输入一行或多行文本的表单元素。 将鼠标光标置于表单域中，选择【插入】/【表单】/【文本域】命令，弹出【输入标签辅助功能属性】对话框，在该对话框中可以设置表单对象的属性，如图所示。,10.3 添加并设置表单对象的属性,10.3.1 插入文本域10.3 添加并设置表单对象的属性,属性设置完成后，单击【确定】按钮即可以在表单中插入一个文本域，如图所示。,10.3 添加并设置表单对象的属性,属性设置完成后，单击【确定】按钮即可以在表单,在文本域中可以输入任何类型的文本、数字和字母，也可以在文本
4、域【属性】检查器的【类型】中选择【密码】单选按钮，对文本进行加密显示；如果需要显示多行文本，则可以在文本域【属性】检查器的【类型】中选择【多行】单选按钮，如图所示。,10.3 添加并设置表单对象的属性,在文本域中可以输入任何类型的文本、数字和字,10.3.2 插入单选按钮和单选按钮组,1插入单选按钮 单选按钮是一种选择性表单对象，可以进行数据的选择，但一次只能选择一个选项，当用户选中其中一个单选按钮时，其他单选按钮将自动转换为未选中状态。,10.3.2 插入单选按钮和单选按钮组 1插入单选按钮,将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【单选按钮】命令，即可以在表单中插入一个单选
5、按钮，如图所示。,10.3.2 插入单选按钮和单选按钮组,将鼠标光标置于表单域的指定位置，选择【插入】,选中单选按钮，可以设置单选按钮属性，如图所示。,10.3.2 插入单选按钮和单选按钮组,选中单选按钮，可以设置单选按钮属性，如图所示,选中单选按钮，可以设置单选按钮属性，如图所示。,10.3.2 插入单选按钮和单选按钮组,选中单选按钮，可以设置单选按钮属性，如图所示。 10.3.2,2插入单选按钮组 当表单中有多组单选按钮需要使用时，使用单选按钮组承载不同组的单选按钮。 将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【单选按钮组】命令，弹出【单选按钮组】对话框，在该对话框可以设置单选
6、按钮组的属性，如图所示。,10.3.2 插入单选按钮和单选按钮组,2插入单选按钮组10.3.2 插入单选按钮和单选按钮组,插入的单选按钮组如左图所示。,10.3.2 插入单选按钮和单选按钮组,插入的单选按钮组如左图所示。 10.3.2 插入单选按钮和单,10.3.3 插入复选框和复选框组,1插入复选框 复选框表单对象用于设置预定义的选择对象，用户可以单击复选框按钮进行选择。复选框对每个单独的响应进行“打开”和“关闭”状态切换，因此，用户可以从复选框组中同时选择多个选项。 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【复选框】命令，即可以表单中插入一个复选框，选中复选框，可以设置复选
7、框的属性，如下图所示。,10.3.3 插入复选框和复选框组1插入复选框,10.3.3 插入复选框和复选框组,【复选框】属性检查器,插入复选框,10.3.3 插入复选框和复选框组【复选框】属性检查器插入复,2插入复选框组 当有多组复选框需要使用时，使用复选框组承载不同的复选框。将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【复选框组】命令，弹出【复选框组】对话框，在该对话框可以设置复选框组的属性，如图所示。,10.3.3 插入复选框和复选框组,2插入复选框组10.3.3 插入复选框和复选框组,10.3.4 插入列表/菜单,列表/菜单是一种重要的表单对象，用户可以在列表或菜单中方便地选择其
8、中某一个项目，在提交表单时，将选择的项目值传送到服务器中。 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【选择（列表/菜单）】命令，在表单中插入一个空白【列表/菜单】表单对象，选中该对象，设置属性如图所示。,10.3.4 插入列表/菜单 列表/菜单是一种,单击【列表值】按钮，可以设置列表值属性。,10.3.4 插入列表/菜单,单击【列表值】按钮，可以设置列表值属性。10.3.4 插入列,当选择【类型】中的【列表】时，【高度】和【选定范围】可用，设置插入列表的【高度】为“3”，并复选【允许多选】选项，插入的列表如图所示。,10.3.4 插入列表/菜单,当选择【类型】中的【列表】时，【
9、高度】和【选定范围】可用，,跳转菜单是一种带链接属性的选项弹出菜单，当单击该菜单时，即可跳转到指定的站内文件或其他网站的Web页面。 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【跳转菜单】命令，弹出【插入跳转菜单】对话框，设置跳转让菜单属性如图所示。,10.3.5 插入跳转菜单,跳转菜单是一种带链接属性的选项弹出菜单，当单,10.3.5 插入跳转菜单,插入的跳转菜单如图所示。,10.3.5 插入跳转菜单插入的跳转菜单如图所示。,10.3.6 插入按钮和图像域,表单按钮用于控制表单操作。使用表单按钮能够将输入表单的数据提交到服务器或重置表单，还可以将其他已经在脚本中定义的处理任务分
10、配给按钮。表单按钮可分为标准表单按钮和图片式表单按钮，即图像域。,10.3.6 插入按钮和图像域 表单按钮用于,1插入按钮 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【按钮】命令，即在表单中插入一个标准表单按钮，选中表单按钮，属性如图所示。,10.3.6 插入按钮和图像域,1插入按钮10.3.6 插入按钮和图像域,若想使用按钮图像作为提交按钮，就要使用图像域。图像域只能用作表单的提交按钮，而不能用于重置按钮。,10.3.6 插入按钮和图像域,若想使用按钮图像作为提交按钮，就要使用图像域,将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【图像域】命令，在弹出的【选择图像源文
11、件】对话框中选择所的图像，单击【确定】按钮，即在表单中插入一个图像域，选中插入的图像域，属性设置如图所示。,10.3.6 插入按钮和图像域,将鼠标光标置于表单域的指定位置，选择【插入】,文件域又称为文件上传域，允许用户将本机上的文件上传到服务器。文件域要求使用POST方法将文件从浏览器传输到服务器，该文件被发送到表单的操作域中所指定的地址。,10.3.7 插入文件域,文件域又称为文件上传域，允许用户将本机上的文件,10.3.7 插入文件域,将鼠标光标置于表单域指定位置，选择【插入】/【表单】/【文件域】命令，即可在表单中插入文件域。选中文件域，设置属性如图所示。,10.3.7 插入文件域 将鼠
12、标光标置于表单域指定位,10.3.8 插入隐藏域,隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域不可见。当表单被提交后，隐藏域会将信息用设置时定义的名称和值发送到服务器端。,10.3.8 插入隐藏域 隐藏域是用来收集或发,10.3.8 插入隐藏域,将鼠标光标置于表单域指定位置，选择【插入】/【表单】/【隐藏域】命令，即可在表单中插入隐藏域。选中隐藏域，属性如图所示。,10.3.8 插入隐藏域 将鼠标光标置于表单域指定位,具体操作步骤：1新建网页，输入文本“客户信息反馈表”，将文件另存为“examplechapter10fankuibiaoindex.html”。2插入表单
13、。将鼠标光标置于“客户信息反馈表”文本的下面，选择【插入】/【表单】/【表单】命令，在网页中插入一个空白表单。,10.3.9 课堂案例制作客户信息反馈表,具体操作步骤：10.3.9 课堂案例制作客户信息反馈表,3在表单中插入表格。将鼠标光标置于表单域中，选择【插入】/【表格】命令，在表单中插入一个【边框粗细】为“1”、【单元格间距】和【单元格边距】均为“2”、【表格宽度】为“80%”的6行4列的表格，设置表格名称为“fkxx”，并居中对齐，如图所示。,10.3.9 课堂案例制作客户信息反馈表,3在表单中插入表格。将鼠标光标置于表单域中，选择【插入】/,4布局表格。根据需要合并单元格，并调整单元
14、格宽度和高度，输入文本信息，如图所示。设置表格列宽分别为“15%”、“35%”、“15%”和“35%”，设置“购物途径”下面一行的行高为“150”，“您的建议”行高为“90”，其他行行高均为“40”。,10.3.9 课堂案例制作客户信息反馈表,4布局表格。根据需要合并单元格，并调整单元格宽度和高度，输,5插入表单元素。（1）将鼠标光标置于“您的名字”后的单元格中，选择【插入】/【表单】/【文本域】命令，插入一个文本域，设置文本域名称为“mz”，【类型】选择【单行】单选按钮。（2）将鼠标光标置于“性别”后的单元格中，分别插入两个单选按钮，设置两个单选按钮的名称均为“xb”，标签文本分别为“男”和
15、“女”。选中标签为“女”的单选按钮，设置【初始状态】为“已勾选”。,10.3.9 课堂案例制作客户信息反馈表,5插入表单元素。10.3.9 课堂案例制作客户信息反馈表,10.3.9 课堂案例制作客户信息反馈表,（3）将鼠标光标置于“年龄”后的单元格中，插入一个菜单/列表，设置【选择】名称为“nl”，列表值如图所示。,10.3.9 课堂案例制作客户信息反馈表（3）将鼠标光标置,（4）将鼠标光标置于“所购商品”后的单元格中，选择【插入】/【表单】/【选择（列表/菜单）】命令，插入一个列表/菜单，设置【选择】名称为“sp”，列表值如图所示。,10.3.9 课堂案例制作客户信息反馈表,（4）将鼠标光标
16、置于“所购商品”后的单元格中，选择【插入】/,（5）将鼠标光标置于“购物途径”行的下面右侧的单元格中，选择【插入】/【表单】/【单选按钮组】命令，插入一个单选按钮组，设置属性如图所示。,10.3.9 课堂案例制作客户信息反馈表,（5）将鼠标光标置于“购物途径”行的下面右侧的单元格中，选择,（6）将鼠标光标置于“问题的类型”行的下面右侧的单元格中，选择【插入】/【表单】/【复选框组】命令，插入一个复选框组，设置属性如图所示。,10.3.9 课堂案例制作客户信息反馈表,（6）将鼠标光标置于“问题的类型”行的下面右侧的单元格中，选,（7）将鼠标光标置于“您的建议”后的单元格中，选择【插入】/【表单】
17、/【文本区域】命令，插入一个文本区域，设置【文本域】名称为“jy”，【字符宽度】为“60”，【行数】为“6”，【类型】选择【多行】单选按钮。,10.3.9 课堂案例制作客户信息反馈表,（7）将鼠标光标置于“您的建议”后的单元格中，选择【插入】/,10.3.9 课堂案例制作客户信息反馈表,（8）将鼠标光标置于底部单元格中，选择【插入】/【表单】/【按钮】命令，分别插入两个按钮，设置【动作】分别为【提交表单】和【重设表单】，如图所示。,10.3.9 课堂案例制作客户信息反馈表（8）将鼠标光标置,6创建CSS样式（1）创建表格CSS样式。选中整个表格，选择【窗口】/【CSS样式】命令，打开【CSS样
18、式】面板，为ID为“fkxx”的表格创建CSS规则，设置属性如图所示。,10.3.9 课堂案例制作客户信息反馈表,6创建CSS样式10.3.9 课堂案例制作客户信息,（2）创建标题CSS样式。 新建一个名为“bt”的基本类，设置属性如图所示。,10.3.9 课堂案例制作客户信息反馈表,（2）创建标题CSS样式。10.3.9 课堂案例制作客户信,7应用标题样式。选中“客户信息反馈表”标题文本， 在【CSS样式】面板中右键单击“.bt”样式，在弹出的快捷菜单中选择【应用】。整个表单显示效果如图所示。,10.3.9 课堂案例制作客户信息反馈表,7应用标题样式。选中“客户信息反馈表”标题文本， 在【C
19、S,10.4 使用Spry验证表单,Spry表单验证允许用户建立丰富网页的一套JavaScript和CSS库，用户可以使用这个框架显示XML数据，创建交互效果。通过Spry验证，能够实现对表单元素内容的检测，以确保将正确的信息发送到服务器。,10.4 使用Spry验证表单 Spry表单,10.4.1 使用Spry验证文本域,Dreamweaver CS6提供了一个Ajax的框架Spry，Spry内置表单验证功能对于初学者来说非常实用和方便。Spry验证文本域构件是一个文本域，该域用于在站点访问者输入文本时判断文本域的合法或非法状态，例如有效或无效等。验证文本域可以检测多个状态，用户可以在【属性
20、】检查器中根据检查结果来设置这些状态。,10.4.1 使用Spry验证文本域 Drea,将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本域】命令，即在表单中插入一个Spry验证文本域，选中该文本域，可以设置Spry验证文本域属性，如图所示。,10.4.1 使用Spry验证文本域,将鼠标光标置于表单域的指定位置，选择【插入,使用Spry验证文本域的表单如图所示。,10.4.1 使用Spry验证文本域,使用Spry验证文本域的表单如图所示。10.4.1 使用Sp,与Spry验证文本域类似，都可以用于进行输入信息的判断，当Spry验证文本区域中必须输入数据，但用户没有输入任
21、何信息时，可根据其【属性】检查器的【提示】文本框中的内容进行提示。,10.4.2 使用Spry验证文本区域,与Spry验证文本域类似，都可以用于进行输入,将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本区域】命令，即在表单中插入一个Spry验证文本域，选中该文本区域，设置属性如图所示。,10.4.2 使用Spry验证文本区域,将鼠标光标置于表单域的指定位置，选择【插,使用Spry验证文本区域的表单效果如图所示。,10.4.2 使用Spry验证文本区域,使用Spry验证文本区域的表单效果如图所示。10,10.4.3 使用Spry验证复选框,Spry验证复选框能够对用户选
22、中复选框的行为进行验证，当用户选择复选框时，Spry验证复选框会显示合法或非法状态的复选框。,10.4.3 使用Spry验证复选框 Spry,10.4.3 使用Spry验证复选框,将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证复选框】命令，即在表单中插入一个Spry验证复选框，选中Spry验证复选框，设置属性如图所示。,10.4.3 使用Spry验证复选框 将鼠标光,10.4.3 使用Spry验证复选框,如果需要对多个复选框进行验证，即验证复选框组，则可以在Spry验证复选框的蓝色区域内部再插入多个普通复选框及标签，并设置所有复选框的【ID】属性值相同。然后单击Spry
23、验证复选框，选择【实施范围（多个）】单选按钮，复选【验证于】的【onBlur】属性，设置【最小选择数】和【最大选择数】属性值，如图所示。,10.4.3 使用Spry验证复选框 如果需要,Spry验证选择能够对用户选择的下拉菜单项目进行合法性验证，验证选择有多个常用状态。 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证选择】命令，即在表单中插入一个Spry验证选择对象。选中Spry验证选择对象，设置属性如图所示。,10.4.4 使用Spry验证选择,Spry验证选择能够对用户选择的下拉菜单项目,使用Spry验证选择的表单效果如图所示。,10.4.4 使用Spry验证选择,
24、使用Spry验证选择的表单效果如图所示。10.4.4 使用S,10.4.5 课堂案例制作用户注册表单,具体操作步骤：1打开素材文件“examplechapter10spryyzspryyanzheng.html”。2添加“用户昵称”Spry验证文本域。将鼠标光标置于“用户昵称”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“nc”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。,10.4.5 课堂案例制作用户注册表单具体操作步骤：,3添加“电子邮箱”Spry验证文本域。将鼠标光标置于“电子邮箱”文本后，选择【插入】
25、/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“yx”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。,10.4.5 课堂案例制作用户注册表单,3添加“电子邮箱”Spry验证文本域。将鼠标光标置于“电子,4添加Spry验证密码。将鼠标光标置于“登录密码”文本后，选择【插入】/【表单】/【Spry验证密码】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“mm”，单击【确定】按钮。选中Spry验证密码对象，设置属性如图所示。,10.4.5 课堂案例制作用户注册表单,4添加Spry验证密码。将鼠标光标置于“登录密码”文本后，,5添加
26、Spry验证确认。将鼠标光标置于“确认密码”文本后，选择【插入】/【表单】/【Spry验证确认】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“mmqr”，单击【确定】按钮。选中Spry验证确认对象，设置属性如图所示。,10.4.5 课堂案例制作用户注册表单,5添加Spry验证确认。将鼠标光标置于“确认密码”文本后，,6添加Spry验证复选框。将鼠标光标置于“我已阅读协议”文本前，选择【插入】/【表单】/【Spry验证复选框】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“OK”，单击【确定】按钮。选中Spry验证复选框对象，单击【必需（单个）】单选按钮。,10.4.5 课堂案
27、例制作用户注册表单,6添加Spry验证复选框。将鼠标光标置于“我已阅读协议”文,7添加按钮。将鼠标光标置于“我已阅读协议”文本的下一行，选择【插入】/【表单】/【按钮】命令，不设置任何属性，单击【确定】按钮。,10.4.5 课堂案例制作用户注册表单,7添加按钮。将鼠标光标置于“我已阅读协议”文本的下一行，选,8保存文件。选择【文件】/【保存】命令，系统会弹出【复制相关文件】对话框，如图所示。单击【确定】按钮，将文件进行保存。,10.4.5 课堂案例制作用户注册表单,8保存文件。选择【文件】/【保存】命令，系统会弹出【复制相,9按下F12键预览网页，网页效果如图所示。,10.4.5 课堂案例制作用户注册表单,9按下F12键预览网页，网页效果如图所示。10.4.5,
