新媒体网页设计与制作PPT-Dreamweaver CS6基础、案例、技巧实用教程第10-11章

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