网页设计与制作案例教案—Dreamweaver cs6电子教案-第8章.pptx

网页设计与制作案例教程

电子教案

本章学习目标

理解表单域和表单

了解各类表单对象

掌握在表单中插入各类表单对象的方法

第八章表单的应用设计

表单的基本概念

表单是网页中收集用户信息、与用户进行交互的元素，是一个专业网站必不可少的内容。表单可以实现人机交互的动态网页功能，访问者在表单中填入数据，发出查询条件的请求，提交的信息数据就会被发送到相应的Web服务器上，经过处理后给出访问者需要的信息。通过表单可以得到访问者反馈的信息，如用户的注册登录、调查问卷、留言、收发订单等。

通常在表单页面中有多个表单对象，在制作时先插入一个表单作为这些对象的容器，然后再逐个创建这些表单对象，如文本域、复选框、单选按钮、下拉列表、密码域、按钮、图像域等，而这些对象在表单内的定位，采用表格工具进行布局。

教学案例:新用户注册页面的制作

案例描述和分析

本案例介绍的是一个注册页面的制作过程，通过用户进行信息的输入并单击“注册”按钮，把用户输入的信息发送到服务器端。通过本案例的制作，学会创建一个表单网页的制作方法，理解表单元素的概念，能插入并设置各种表单对象

实现步骤

1. 新建CSS样式

新建CSS样式规则

2. 创建表单

(1)在body中插入一个form表单。

(2)单击“插入”→“表单”→“表单”命令，或单击“插入”面板的“表单”类别中的表单按钮。

3. 使用表格进行页面布局

在form表单中，用table整体布局。插入一个表，作为表单的格式框架，设置表为8行2列，表格宽度为500px，边框为1px，单元格间距为10px。

4. 插入表单对象

在添加用户名、密码、确认密码、E-mail(文本字段)

添加性别(单选框)

添加兴趣爱好(复选框)

添加通信地址(下拉列表)

添加提交按钮

知识准备

一、表单概述

表单是网站管理者与访问者之间的链接纽带，利用表单可以实现浏览网页的用户与服务器之间的信息交流。用户将填写好的表单信息提交到服务器，交由服务器端的脚本或应用程序(如CGI、JSP、ASP等)处理，并将处理完的信息返回给用户。所以说，有了表单的辅助，访问者就能更好地与网站进行互动。

使用表单应先在网页上插入表单，一个网页中可以包含一个或多个表单，每个表单可以相互独立也可以相互联系。

知识准备

二、创建表单

步骤1:将鼠标定位在要插入表单的位置。

步骤2:选择菜单中的“插入”→“表单”→“表单”命令，或单击“插入”工具栏上的“表单”中的“表单”按钮。

步骤3:在文档窗口出现一个红色的虚线框，表示插入一个表单，如图8-13所示。如果没有看到此轮廓线，请检查是否选中了“查看”→“可视化助理”→“不可见元素”。

插入的表单

知识准备

三、设置表单属性

1.设置表单属性的2种方法

方法1:在“设计视图”窗口中，单击该表单选中，或者在标签选择器中选择form#form1标签(标签选择器位于“设计视图”窗口的左下角)。

方法2:在菜单栏中单击“窗口”→“属性”(或按【Ctrl+F3】组合键)，打开表单属性面板。

2.“表单属性”参数含义

“动作”域是用来键入指定到处理该表单的动态页或脚本的路径。

“方法”下拉菜单中，选择将表单数据传输到服务器的方法。POST:在HTTP请求中嵌入表单数据。GET:将值追加到请求该页的URL中。

知识准备

2.表单参数含义

默认:使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为GET方法。

“编码类型”下拉菜单可以指定对提交给服务器进行处理的数据使用的MIME编码类型。

“目标”下拉菜单指定一个窗口，在该窗口中显示调用程序所返回的数据。目标值有四种类型:_blank、_parent、_self、_top，此值可用于确保目标文档占用整个窗口，即可使原始文档显示在框架中。

温馨提示：

由于使用GET方法传递信息不安全，所以在发送机密用户名和密码、信用卡号或其他机密信息时，不要使用GET方法。

知识准备

四、表单对象

在Dreamweaver中，表单输入类型称为表单对象。表单的功能主要由各个表单对象来完成。表单对象包括文本域、文本区域、按钮、复选框、单选按钮、列表/菜单、文件域、图像域、隐藏域、单选按钮组、跳转菜单、字段集和标签。

通过选择“插入”→“表单”可以插入表单对象，或者选择“窗口”→“插入”(或按【Ctrl+F2】组合键)，打开“插入”面板的“表单”选项卡，单击“表单”选项来访问各种表单对象。

扩展知识

添加验证表单行为

如果网站需要收集用户的信息，那么肯定希望用户能按要求认真填写内容。这时，最简单有效的方法就是利用“检查表单”行为，验证用户在文本输入框中输入的信息是否正确，以避免接收垃圾信息。

操作步骤:

1.点击“文档”窗口左下角标签选择器中的fo