《网页设计与制作》.ppt

网页设计与制作,第6章 表单,实例导入：创建用户信息注册表,创建表单,插入表单对象,本章主要介绍了通过表单可以实现浏览器与服务器之间的信息交流，在WWW上表单被广泛用于各种信息的收集和反馈，如图所示。【本章学习目的】本章通过一个用户注册信息表的实例，重点介绍了表单的创建、表单对象的插入，通过本章的学习，读者应了解表单的用途，掌握插入表单和表单对象的方法，了解通过Dreamweaver内部行为验证用户输入信息的正确性。,6.1实例导入：利用表单创建用户信息注册表,表单是使网站实现交互功能的重要途径，通过表单可以收集站点访问者的信息。表单可以简单用做调查工具和收集客户登录信息，也可用于制作复杂的电子商务系统。一般表单的工作流程如下：访问者在浏览有表单的网页时，填写必须的信息，然后按下按钮提交；这些信息是通过Internet传送到服务器上；服务器上的表单处理应用程序（CGI），或脚本程序（ASP、PHP）对数据进行处理；数据处理完毕后，服务器反馈处理信息。从表单的工作流程来看，表单的开发分为两部分，一是具体在网页上制作的表单项目，这一部分称为前端，主要在Dreamweaver中制作，另一部分是编写处理表单信息的应用程序，这一部分称为后端，如：ASP、CGI、PHP、JSP等。本章内容主要讲解的是前端的设计，后台的开发将在网络程序开发中具体介绍。,【例6.1】利用表单创建用户信息注册表，如图所示。,在本实例主要涉及到以下知识点：布局网页；创建表单；在表单中插入表单对象；将表单信息提交到网络管理者的邮箱。,6.2 创建表单,表单相当于一个容器，它容纳的是承载数据的表单对象，例如：文本框、复选框等。因此一个完整的表单包括二部分：表单及表单对象，二者缺一不可。,6.2.1 表单网页的布局,在包含表单的网页，一般仍采用表格排版方式。其操作步骤如下：步骤1新建一个网页，添加页面背景，插入一个表单，出现一个红色虚线框。步骤2在表单中，插入表格，采用表格排版，在表格中，插入图像或动画、文本加以修饰，并用CSS样式美化网页。如图所示。步骤3最后在表格中插入表单对象。,6.2.2 创建表单,1.插入表单 插入表单常用的方法有以下两种：方法一：单击“插入”栏“表单”选项“表单”按钮。方法二：选择“插入”菜单“表单”“表单”命令。在网页中出现一个红色的虚线框。表单的作用是当访问者单击表单的“提交”按钮时，浏览器将表单对象所包含的数据发送到服务器，因此表单对象必须置于表单中。,2.设置表单属性 单击“表单”外框，或单击“文档”窗口左下角的标签，选择表单。在“属性”面板中设置表单属性。,表单面板共有14个表单域对象。,6.3 插入表单对象,1.文本字段和文本区域（1）文本字段文本字段是用来输入文本信息的。单击“插入”栏“表单”选项“文本字段”按钮，或选择“插入”菜单“表单”“文本域”命令，弹出“标签输助功能属性”的对话框，如图所示，输入标签文本，如用户名，单击“确定”按钮，即插入了一个文本字段。单击“文本字段”对象，将其选中，在“属性”面板中设置“文本字段”的属性。,（2）文本区域 文本区域同样也是用来输入文本信息的，当文本字段的类型选择为多行时，即是文本区域。其属性与文本字段相同。单击“插入”栏“表单”选项“文本区域”按钮，或选择“插入”菜单“表单”“文本区域”命令，即插入“文本区域”对象。,2.复选框 复选框是指从一组选项中选择多个选项。操作步骤如下：单击“插入”栏“表单”选项“复选框”按钮，或选择“插入”菜单“表单”“复选框”命令，即插入“复选框”对象。单击“复选框”对象，将其选中，在“属性”面板中设置“复选框”的属性，如图所示。,3.单选按钮及单选按钮组（1）单选按钮“单选按钮”是指从一组选项中只能选择一个选项。其操作步骤如下：单击“插入”栏“表单”选项“单选”按钮，或选择“插入”菜单“表单”“单选按钮”命令，即插入单选按钮。单击“单选按钮”对象，将其选中，在“属性”面板中设置“单选按钮”的属性：“单选按钮”的名称、选定值、初始状态等，如图所示。,（2）单选按钮组 由于“单选按钮”通常是由多个组成一组来使用，因此Dreamweaver提供了“单选按钮组”的功能。单击“插入”栏“表单”选项“单选按钮组”按钮，或选择“插入”菜单“表单”“单选按钮组”命令，弹出“单选按钮组”对话框。,4.列表菜单“列表”和“菜单”可以在有限的空间内为用户提供更多的选项。“列表”在滚动条中显示选项值，并可允许用户在列表中选择多个选项。“菜单”在下拉式菜单中显示选项值，只允许用户选择一个选项。操作步骤如下：单击“插入”栏“表单”选项“列表菜单”按钮，或选择“插入”菜单“表单”“列表菜单”命令，即插入“列表或菜单”。单击“列表菜单”，将其选中，在“属性”面板中设置“列表菜单”的属性，如图所示。,5、跳转菜单“跳转菜单”与“菜单列表”对象有所不同，菜单的每一个列表项目都链接到一个URL地址。一般常用于友情链接。单击“插入”栏“表单”选项“跳转菜单”按钮，或选择“插入”菜单“表单”“跳转菜单”命令，弹出“插入跳转菜单”的对话框，如图所示。,6.文件域“文件域”的作用是用户在表单中选择文件，然后将选中的文件内容发送到服务器。例如：用户在撰写电子邮件时，采用文件域的方式，附加文件作为附件传送。单击“插入栏”“表单”选项“文件域”按钮，或选择“插入”菜单“表单”“文件域”命令。单击“文件域”对象，将其选中，在“属性”面板中设置“文本域”的属性：文本域的名称、字符宽度、最多字符数等，如图所示。,7.隐藏域“隐藏域”通常用来在表单之间传递数据，一般只用于脚本编程。单击“插入栏”“表单”选项“隐藏域”按钮，或选择“插入”菜单“表单”选项“隐藏域”命令。8.按钮“按钮”的作用是控制表单操作。使用表单按钮将输入表单的数据提交到应用程序，或者重置该表单，也可以用来执行脚本指定的自定义功能。单击“插入”栏“表单”选项“按钮”按钮，或选择“插入”菜单“表单”“按钮”命令，即插入“按钮”。单击“按钮”，将其选中，在“属性”面板中设置按钮的属性，如图所示。,9.图像域“图像域”实质上是以图像形式显示的提交按钮，它的功能等同于提交按钮。单击“插入”栏“表单”选项“图像域”按钮，或选择“插入”菜单“表单”“图像域”命令，即插入“图像域”。单击图像域，将其选中，在“属性”面板中设置图像域的属性，如图所示。,6.3.3 会员注册表实例制作过程,本小节讲解【例6.1】创建用户信息注册表的制作过程，插入一个表单，再插入表单对象，而浏览者在浏览本网页时，填写表单信息，然后将信息提交到网络管理员的电子邮件地址中。网络管理员通过电子邮件来收集网站浏览者的信息。,6.3.4 验证表单,利用Dreamweaver中“检查表单”的内部行为，检查浏览者填写表单对象的内容是否符合事先设定的要求。一般使用OnSubmit事件将检查表单的行为附加到表单上，当用户单击“提交”按钮时，同时对多个表单对象进行检查。分析上一小节表单实例，为了防止浏览者不填某些信息或乱填信息，这里设置登录名、电子邮件地址必须填写，年龄必须是数字且数字范围为1-99，电子邮件必须是电子邮件的格式，针对这些要求，其操作步骤如下：步骤1选择“窗口”菜单“行为”命令，打开“行为”面板。步骤2单击“文档”窗口左下角的标签，选中整个表单，在“行为”面板中，单击“添加行为”按钮，在弹出菜单中选择“检查表单”命令，打开“检查表单”对话框，进行相关参数的设置。,本章通过会员注册信息表的实例讲解，重点介绍了以下几点：插入表单及表单属性的设置。在表单域中，插入表单对象并设置表单对象属性。将表单提交到管理员电子邮箱中进行处理。,本章小结,本章练习题,1.选择题（1）表单中的按钮对象分为（）。A提交、重置 B提交、普通 C提交、重置、普通 D提交、图像、普通（2）单选按钮组中的多个单选按钮名称应（）。A相同 B不同 C任意 D以上都可以（3）文本域的类型有几种（）。A2种 B3种 C4种 D5种 2.简答题什么是表单？简述表单的基本工作原理。表单对象包括哪些？如何验证表单？,上 机 实 训,1.背景知识 本章所学的插入表单、表单对象以及Dreamweaver内部行为的检验表单等知识，再结合前面所学的网页编辑、页面排版的知识，制作反馈表单。2.实训准备工作 实训素材及网页样图，发送到学生的主机中，以供学生参考使用。3.实训要求 创建一个空白表单。插入表格，利用表格排版网页，并插入图片及应用CSS样式美化网页。插入表单对象，并通过“属性”面板设置其属性。最后利用Dreamweaver内部行为验证表单。反馈表单效果图如图6.26所示。4.课时安排：2课时,