网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

1 网页设计与制作 Dreamweaver CS6 标准教程
第13章 表单 网页设计与制作 Dreamweaver CS6 标准教程

2 本章学习的主要内容： 1. 使用表单 2. Spry验证

3 13.1 使用表单 表单（Form）技术可以实现浏览者同服务器之 间的信息交互和传递。目前表单主要应用在用 户注册、论坛登录等。
一个表单由三个基本组成部分：表单标签、表 单域和表单按钮。 表单标签包含了处理表单数据所用的URL地址以 及数据提交到服务器的方法。表单域包含了文 本域、文本区域、隐藏域、复选框、单选按钮、 选择列表和文件域等。表单按钮包括提交按钮 和复位按钮，确定将数据传送到服务器上或者 重新输入。

4 13.1 使用表单 13.1.1 课堂案例-办公用品公司 13.1.2 表单及属性 13.1.3 文本域 13.1.4 单选按钮和单选按钮组
复选框和复选框组 选择列表/菜单 跳转菜单 文件域 图像域 提交和重置按钮

5 13.1.1课堂案例-办公用品公司 案例学习目标：学习表单的基本操作。
案例知识要点：选择菜单【插入】|【表单】或使 用【插入】面板【表单】选项卡创建表单。在表 单中，插入各种表单元素，并利用【属性】面板 进行设置。 素材所在位置：光盘/案例素材/ch13/课堂案例- 办公用品公司。 案例效果如图13-1所示。

6

7 13.1.2 表单及属性 在网页中创建表单的操作步骤如下。 将光标定位在要插入表单的位置上。
选择【插入】|【表单】|【表单】，或单击 【插入】面板【表单】选项卡中的【表单】按 钮，或将【表单】面板中的【表单】按钮拖入 网页文档窗口。 在网页中创建了由红色虚线框所确定的表单 区域。

8 13.1.3 文本域 文本域用来接收用户输入的信息，它包括单行 文本域、文本区域和密码域三种类型。 1．单行文本域 2．文本区域 3．密码域
4．文本域属性

9 单选按钮和单选按钮组 1．单选按钮 2．单选按钮组

10 复选框和复选框组 1．复选框 2．复选框组

11 选择列表/菜单 选择列表/菜单用来创建一个列表或菜单来显示一组选 项，并且可以设置允许单选或多选。插入选择列表/菜 单的操作步骤如下。 将光标置于要插入选择列表/菜单的位置。 选择菜单【插入】|【表单】|【选择（列表/菜单）】 或单击【插入】面板【表单】选项卡中的【选择（列表 /菜单）】按钮 插入一个选择（列表/菜单。 选中插入的选择列表/菜单，单击【属性】面板中 【列表值…】按钮 ，在【列表值】对话框中添加列表值， 如图13-37所示。单击【确定】按钮，效果如图13-38 所示。 根据需要修改【属性】面板中其他设置，如图13-39 所示。

12 13.1.7 跳转菜单 跳转菜单可以将某个网页URL与菜单列表中的选 项建立关联，用户从跳转菜单中选择一个菜单项 就会打开相关联的网页。
在网页中插入跳转菜单的操作步骤如下。 将光标置于要插入跳转菜单的位置。 选择菜单【插入】|【表单】|【跳转菜单】或单 击【插入】面板【表单】选项卡中的【跳转菜单】 按钮 ，打开【插入跳转菜单】对话框，如图13- 42所示，在【文本】项中输入菜单项内容，在【选 择时，转到URL】选项中输入要跳转到的网页URL 地址，单击【确定】按钮，效果如图13-43所示。

13 文件域 文件域由一个文本框和一个显示“浏览”字样 的按钮组成，它的作用是使访问者能浏览到本 地计算机上的某个文件，并将该文件作为表单 数据上传。 在网页中插入文件域的操作步骤如下。 将光标置于要插入文件域的位置。 选择菜单【插入】|【表单】|【文件域】或单 击【插入】面板【表单】选项卡中的【文件域】 按钮 插入一个文件域，如图13-44所示。 选中文件域，在【属性】面板中进行相应设 置，如图13-45所示。

14 13.1.9 图像域 通过插入图像域可以使用漂亮的图像按钮或根 据网站风格制作按钮来代替普通按钮。 在网页中插入图像域的操作步骤如下。
将光标置于要插入文件域的位置。 选择菜单【插入】|【表单】|【图像域】或单 击【插入】面板【表单】选项卡中的【图像域】 按钮 ，打开【选择图像源文件】对话框，如图 13-46所示，并查找到并选择所需的图像，单 击【确定】按钮。 在图像域【属性】面板中进行相应设置，保 存网页文档，如图13-47所示。

15 提交和重置按钮 按钮能够控制对表单内容的操作，如提交或重 置。要将表单的内容发送到远程服务器上，需 要使用提交按钮；要清除现有表单内容，需使 用重置按钮。 在网页中插入按钮的操作步骤如下。 将光标置于要插入按钮的位置。 选择菜单【插入】|【表单】|【按钮】或单击 【插入】面板【表单】选项卡中的【按钮】按 钮 插入一个按钮，如图13-49所示。 在按钮【属性】面板中设置相应的属性，如 图13-50所示。

16 13.2 Spry验证 表单在提交到服务器端之前必须进行验证，以确 保输入数据的合法性，如必须输入数据的文本域 是否输入了数据、输入电子邮件的格式是否正确 等。在Dreamweaver中可以通过插入Spry验证构 件来检查表单。 在实际应用中，可以直接使用Spry验证构件创建 表单，即创建了表单，也完成了对表单的验证。

17 13.2 Spry验证 13.2.1 课堂案例-网页设计 13.2.2 Spry验证文本 13.2.3 Spry验证密码

18 13.2.1课堂案例-网页设计 案例学习目标：学习Spry验证的基本操作。
素材所在位置：光盘/案例素材/ch13/课堂案例 -网页设计。 案例效果如图13-51所示。

19

20 13.2.2 Spry验证文本 Spry验证文本域用于验证文本域表单对象的有效 性。与普通文本域的区别在于它可以对用户输入 的信息进行验证。

21 Spry验证密码 Spry验证密码用于密码类型的文本域的验证，例 如要求用户输入的密码最少必需几位、必需几位 大写字母、必需几位数字等。 在网页中插入Spry验证密码的操作步骤如下。 将光标置于要插入Spry验证密码的位置。 选择菜单【插入】|【表单】|【Spry验证密码】或 单击【插入】面板【表单】选项卡中的【Spry验证 密码】按钮 。 完成【输入标签辅助功能属性】对话框设置，然 后单击【确定】，即可插入Spry验证密码，如图 13-70所示。

22 Spry验证复选框 Spry验证复选框是HTML表单中的一个或一组复选 框，该复选框在用户选择（或没有选择）复选框 时会显示相应状态（有效或无效）。 在网页中插入Spry验证复选框的操作步骤如下。 将光标置于要插入Spry验证复选框的位置。 选择菜单【插入】|【表单】|【Spry验证复选框】 或单击【插入】面板【表单】选项卡中的【Spry验 证复选框】按钮 。 完成【输入标签辅助功能属性】对话框设置，然 后单击【确定】，即可插入Spry验证复选框，如图 13-72所示。

23 13.2.5 Spry验证单选按钮组 Spry验证单选按钮组用来验证单选按钮组的选中 情况。

24 13.2.6 Spry验证确认 Spry验证确认是一个文本域或密码域，当用户 输入的值与同一表单中类似域的值不匹配时， 将显示无效状态。

25 13.3 练习案例 13.3.1练习案例-咖啡 13.3.2练习案例-儿童培训

26 13.3.1练习案例-咖啡 案例练习目标：练习表单的基本操作。 案例操作要点：
1． 在页面中部已经插入一个表单和一个内嵌表 格，继续完成餐厅预订信息的表单。各单元格插 入表单元素并设置如下。 预订时间分为年、月、日以及中午、晚上选项和 具体时间，均采用选择（列表/菜单）； 就餐人数分为成人和儿童两类，均采用文本域， 字符宽度为4； 订餐内容分为小点心、正餐、酒水、水果和其他， 采用复选框； 订餐类型分为家宴、商宴和婚宴，采用单选按钮；

27 13.3.1练习案例-咖啡 其他说明采用文本域，字符宽度为50，行数为6； 顾客名称采用文本域，字符宽度为10；
性别分为男和女，采用单选按钮组； 手机电话采用文本域，字符宽度为25； 电子邮件采用文本域，字符宽度为25。 提交按钮和重置按钮采用图像域，其ID分别设为 submit和Reset。 2．在页面右下角插入第二个表单并在其中添加一 个跳转菜单，列表值为：--新闻链接--、搜狗、 新浪和凤凰以及相应网站网址，勾选“更改URL后 选择第一项目”。 素材所在位置：光盘/案例素材/ch13/练习案例- 咖啡，效果如图13-79所示。

28

29 13.3.2练习案例-儿童培训 案例练习目标：练习Spry验证的基本操作。 案例操作要点：
小朋友姓名采用Spry验证文本域，最小字符数 为4，勾选onBlur； 性别采用Spry验证单选按钮组，必填； 兴趣与特长采用Spry验证复选框，最小选择数 为1；

30 13.3.2练习案例-儿童培训 年龄采用Spry验证选择，列表值分别为四岁、 五岁、六岁、七岁，对应值为4、5、6、7， 不允许空值；
素材所在位置：光盘/案例素材/ch13/练习案 例-儿童培训，效果如图13-80所示。

31