《网页设计与制作》教案第16讲 表单和Spry表单项目.docx

《网页设计与制作》教案第16讲 表单和Spry表单项目.docx

《《网页设计与制作》教案第16讲 表单和Spry表单项目.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》教案第16讲 表单和Spry表单项目.docx（13页珍藏版）》请在冰豆网上搜索。

《网页设计与制作》教案第16讲表单和Spry表单项目

第16讲布局技术-模板、库二

1.1教学目标：

◆知识目标

1.熟练掌握如何在表单网页中插入表单域。

2.检查表单行为的运用。

3.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry验证选择组件。

4.使用Spry框架组件制作具有验证功能的表单。

◆技能目标

1.掌握快速制作表单页面的方法。

2.能够创建不同形式的表单页面来满足用户间的交互。

◆品质目标

培养学生认真细致、踏实进取的精神

1.2教学重点：

1.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry验证选择组件。

2.使用Spry框架组件制作具有验证功能的表单。

1.3教学难点

1.理解Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry验证选择组件。

2.使用Spry框架组件制作具有验证功能的表单。

1.4教学方法：

讲练结合，任务驱动、分子任务操练

1.5课时安排：

2课时

1.6教学对象分析：

这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：

一、激趣导入，揭示课题

对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。

二、使用表单

页面不但要向用户提供信息，而且要与之进行交流。

在页面中，表单充当了信息接收者的角色。

访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮向服务器提交这些信息。

0.1表单概述

使用表单可以制作简单的交互式页面，收集来自用户的信息，是网站管理者与浏览者之间沟通的桥梁。

收集、分析用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。

有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”。

表单常用于制作调查表、订单、用户注册表和搜索界面等。

一个完整的表单有两个重要组成部分：

一是页面中进行描述的HTML代码；二是服务器端的应用程序或客户端脚本，如CGI、ASP，C等，用于分析处理用户在表单中输入的信息。

通过表单收集到的用户反馈信息，通常是一些用分隔符（如逗号、分号等）分隔的文字资料。

这些资料可以导入到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。

使用Dreamweaver可以创建表单，可以给表单中添加对象，还可以通过使用行为来验证用户输入信息的正确性。

用户可以透过表单的界面，把信息传给后端服务器处理，处理的结果可以存放在后端数据库或再传回给前端用户。

不过，必须使用文本编辑器自行编写脚本或应用程序以处理表单数据。

浏览器处理表单的过程一般是这样的：

用户在表单中输入数据，然后提交表单，浏览器根据表单体中的设置处理用户输入的数据。

若表单指定通过服务器端的脚本程序进行处理，则该程序处理完毕后将结果反馈给浏览器（即用户看到的反馈结果）；若表单指定通过客户端的脚本程序处理，则处理完毕后也会将结果反馈给用户。

两种表单数据处理方法各有个有优缺点。

服务器端方式的主要优点是能全方位地处理用户输入的数据，但占用服务器的资源；客户端方式的优点的不占用服务器资源，反馈速度快，但只能对用户输入的数据进行有限的处理。

ASP、Per、PHP、JSP、C、VBScript等是常用的服务器端脚本程序编写语言，而JavaScript、VBScript（可在客户端运行）等是常用的客户端脚本程序编写语言。

服务器端脚本程序的运行一定要在服务器环境下，而客户端脚本程序运行只需浏览器环境即可。

0.2认识表单对象

表单是用来接收用户输入信息的区域，用户要输入的信息由多个项目组成，这些项目是由表单域分别接收的。

可以通过执行“插入/表单”或使用插入面板的“表单”对象组加入表单体和表单元素，如图3-73所示。

图3-73表单对象面板

1．表单体

表单体在文档中定义一个表单区域，表单对象都是插入在这个表单区域中的。

插入表单之前应先定义表单体，否则Dreamweaver会提示是否添加表单标签。

创建表单体后，会在文档中出现一个红色的虚线框，如图3-74所示。

图3-74在文档中插入表单体

2．文本框

文本框可用来接受任何类型的字母、数字文本输入内容。

文本框非常通用，大多数信息都可以以文本框的形式输入。

文本可以以单行或多行显示，也可以以密码域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号。

如图3-75所示。

图3-75文本框

3．隐藏字段

用于保存某些在页面中需要连续传递的信息。

存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。

4．单选按钮

代表互相排斥的选择。

在某单选按钮组（由两个或多个共享同一名称的按钮组成）中选择一个按钮，就会取消选择该组中的所有其它按钮。

如图3-76所示。

图3-76单选按钮

5．复选框

在复选框中，用户可以同时选择任意多个适用的选项。

复选框可以单独使用，也可成组使用。

复选框如图3-77所示。

图3-77复选框

6．列表框/菜单

可生成下拉列表框，如图3-78所示。

用户可在其中弹出的列表中任选一个值。

也可与跳转菜单合用生成菜单列表框。

图3-78下拉列表框

7．单选按钮组

一次可以选择一组（多个）单选项

8．多行文本框

多行文本框的作用与单行文本框作用相同，用来接受任何类型的字母、数字和文本输入内容。

但是可以任意输入多行文本，一般用于需要输入比较多的字符内容。

窗体右边和下方往往带有滚动条。

如图3-79所示。

图3-79多行文本框

9．.按钮

在鼠标单击时执行操作。

通常，表单中的按钮有两种，一个是Submit（提交或发送）按钮，用来把用户输入的数据送往Web服务器；另一个是Reset（复位）按钮，则用来清除表单中所有的内容，把该表单还原为默认或初始状态。

10．跳转菜单

是可导航的列表或弹出菜单，允许插入一个菜单列表框，并将菜单中的每一项链接到指定的页面。

当选择跳转菜单中的某项后，浏览器即打开该项链接的页面。

11．图像字段

可以使用图片替代提交按钮的作用，生成图形化按钮。

12．文件字段

使用户可以浏览到本地计算机上的某个文件并将该文件作为表单数据上传。

0.3表单制作实例

下面我们来制作一个用于进行会员注册的表单。

1．创建表单

新建HTML页面，左上角的标题栏中显示出页面标题为“无标题文档”。

在工具栏“标题”项右侧的输入框中输入本页面的标题“会员注册”，在页面内空白区域单击，标题栏中就会有相应的变化。

如图3-80所示。

图3-80输入页面的标题

插入页面的标题图像，并插入水平线。

将插入点定位到标题图像下，单击新增表单按钮，加入表单区域。

如图3-81所示。

图3-81创建表单

2．在表单中添加文本域图标

选择“插入/表格”命令，在弹出的“插入表格”对话框中输入行值为5，列值为3，宽度为90，单位为百分比，在边框粗细文本框中输入0，如图3-82所示。

然后单击“确定”按钮，表单区域内出现了一个5行3列的表格。

图3-82在表单中插入布局表格

单击第1行第1列的单元格定位插入点，输入“姓名”两个字，然后单击文本域图标，插入文本域图标。

如图3-83所示。

图3-83输入文本域

选中插入的文本域按钮后，在“属性”面板中的“类型”选择“单行”，“字符宽度”输入框内输入12。

如图3-84所示。

图3-84设置文本域的属性

3．在表单中添加单选按钮

在第1行第2列的单元格内输入“性别”后，单击单选图标，接着输入“男”。

再一次单击单选图标，然后输入“女”字，如图3-85所示。

图3-85在表单中添加单选按钮

将“男”字前面的单选按钮选中后，在“属性”面板中将其“初始状态”选择为“已勾选”，如图3-86所示。

图3-86设置单选按钮的属性

4．在表单中添加列表图标

在第1行第3列的单元格中输入“年龄”后，单击列表图标，加入列表图标。

如图3-87所示：

图3-87添加列表图标

选中列表按钮，在“属性”面板中单击“列表值”按钮，在弹出的对话框中输入1个年龄段。

然后单击“+”按钮后输入第2个年龄段，同理输入其他年龄段，如图3-88所示。

图3-88设置列表值

单击“确定”按钮后回到页面状态，在“属性”面板的“初始化时选定”列表内选择“20-25岁”，这样在浏览器中“20-25岁”便成为初始选择项。

如图3-89所示：

图3-89设置默认值

5．添加复选按钮

将第2行的单元格全部选中，单击“属性”面板中的“合并”图标进行合并。

输入“您喜欢的栏目包括：

”字样后，按下回车键，然后单击表单中的复选框按钮，输入栏目的名称“户外探险”。

同理输入其他栏目，复选框设置的内容可以进行多项选择。

如图3-90所示。

图3-90添加复选按钮

6．添加文本区域

合并第3行的单元格后，输入“您对网站的建议”字样，然后单击文本区域图标，在“属性”面板中将“宽度”加大，并将“类型”选择为“多行”。

如图3-91所示。

图3-91设置多行文本区域

合并表格第4行的单元格，输入“您的E-mail地址”，然后单击文本区域图标，在“属性”面板中设定宽度数值为53，并将“类型”选择为“单行”。

如图3-92所示。

图3-92设置单行文本区域

7．添加确定按钮

合并第5行的单元格后，输入“现在发送”字样，然后单击按钮图标，在“属性”面板内选择“提交表单”，在“标签”项内输入按钮上显示的字样“是”。

如图3-93所示。

图3-93设置按钮属性

单击按钮图标，在“属性”面板内选择“动作”为“重设表单”，在“标签”文本框内输入按钮上显示的字样“重填”。

至此便完成了一个会页注册的表单，结果如图3-94所示。

图3-94表单的最终效果

按F12键在浏览器中预览调查表的显示状态及可选项。

0.4制作跳转菜单

跳转菜单的用处比较广泛，例如在许多网站的首页友情链接上，需要链接大量的网站，如果全部列出来，将占据很大的页面，使用Dreamweaver制作跳转菜单就可以解决这个问题。

跳转菜单的制作步骤如下：

1．打开或新建一个HTML文档，在“插入”工具栏的下拉菜单中选择“表单”，然后单击“跳转菜单”图标

，于是弹出“插入跳转菜单”对话框。

2．在“文本”文本框中键入菜单文字“Macromedia中文站”，然后在“选择时，转到URL”文本框中键入网址：

。

3．单击对话框左上方的加号按钮

，继续添加其他网站，如图3-95所示。

图3-95设置跳转菜单选项

4．在“菜单项”列表框中选中某一项，然后单击箭头按钮可将其移到最上方

。

5．设置好后单击“确定”按钮，完成跳转菜单的插入。

1.8归纳总结：

本节从对表单的简介开始，依次介绍了各种常用的表单元素，包括文本域、单选按钮、复选框、列表/菜单和按钮等。

通过在网页中加入表单元素，可以实现网页与用户的互动。

使用表单可以收集来自用户的信息，它是管理者与浏览者之间沟通的桥梁。

收集、分析用户的反馈意见，作出科学、合理的决策，是一个网站成功的重要因素。

有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”，也由被动转变为主动。

1调查表、订单和搜索界面；

2表单的提交。

3通过这节的学习我们对网页制作更深入了一步，还需要举一反三反复练习。

1.9课后作业题：

1.表单的作用？

2.Spry验证文本域、Spry验证文本区域组件、Spry验证复选框、Spry验证选择组件的作用？

3.如何应用Spry框架组件制作具有验证功能的表单？