制作包含表单的网页

江西工业职业技术学院教案

具体内容

7.1 表单在网页用中的作用及其组成元素

最早的时候，人们将Web设计为全球共享和浏览静态信息的媒体，现在它已经发展为一种交互式媒体，而最普通的交互方式就是数据输入表单。表单可以是单一的搜索对话框，也可以是多页面的调查问卷保单形式。如图6-1所示。

图7-1 旅游调查表

一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

7.2 制作包含表单的网页

表7-1 模仿型任务卡

7.2.1 创建并规划站点“旅游调查”

1、创建站点

在本地磁盘的文件夹“旅游指南”的根目录下创建子文件夹“旅游调查”，然后通过“站点定义”对话框中的“高级”选项卡创建一个名为“旅游调查”的网站，该网站的存储目录指向文件夹“旅游调查”。如图6-2所示。

图7-2 创建站点“旅游调查”

2、规划站点

在“文件”面板中的“旅游调查”站点根目录下创建“webpages”、“images”、“flash”三个子目录，并将文件夹“images”设置为站点的“默认图像文件夹”，

，如图5-3所示。

图7-3 站点“旅游调查”文件面板

7.2.2 创建网页文档index07.html

1、创建网页文档

在“旅游调查”站点的根目录下创建网页文档“index07.html”，并在“文档”工具栏的“标题”文本框中输入网页标题“旅游调查”，然后保存网页。如图6-4所示。

图7-4 设置网页标题

2、设置网页属性

单击页面“属性”面板中的“页面属性”按钮，打开页面属性对话框，选中分类列表框中的“外观”，将页面字体设置为“宋体”，大小为“14像素”，然后保存网页。

7.2.3 插入表单域并设置其属性

1、在网页中插入表单域

表单是由表单域和表单项共同组成，且所有的表单项必须要放在表单域里面才会将它们采集到的信息随表单一起提交给服务器，所以，制作表单页面的第一项工作就是在网页中插入表单域。

在Adobe Dreamweaver CS3主界面中，单击【插入记录】→【表单】→【表单】命令，如图7-5所示，或单击“插入”工具栏“表单”选项卡中的表单域按钮，在网页的光标处插入一个表单域。

图7-5 插入“表单”菜单

表单域插入到网页中后，我们可以在文档窗口看到一个有红色虚线构成的方框，这就是表单域了，所有的表单项必须放入到这个区域内才能生效。

2、设置表单域的属性

在HTML中，表单使用

…

标记把输入域组合起来，并且说明了表单提交的方式和地点。form 标签有许多属性，如name等。在form 中还有许多不同的标签，它们组成了表单的各种成分。

选中表单，查看表单的“属性面板”，如图7-6所示。

图7-6 表单属性面板

1)“表单名称”：输入唯一的名称以标识表单。

2)“动作”：指定处理该表单的动作页或脚本的路径。

3)“方法”：选择表单数据传输到服务器的方法，有以下3 种：

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

♦GET：将值追加到请求页的URL 中。

♦POST：在HTTP 请求中嵌入表单数据。

4)“MIME 类型”：弹出式菜单可以制定对提交给服务器进行处理的数据使用

MIME 编码类型。

5)“目标”：制定一个窗口，在该窗口中显示调用程序返回的数据。目标值有

以下几种：

♦＿blank：在未命名的新窗口中打开目标文档。

♦＿parent：在显示当前文档的父窗口中打开目标文档。

♦＿self：在提交表单所使用的窗口中打开目标文档。

♦＿top：在当前窗口的窗体内打开目标文档。此值可以用于确保目标文档占用整个窗口，即原始文档显示在框架中。

7.2.4 在表单域中插入表格进行布局

如果我们只是机械地将表单项不做任何的排版布局就插入到表单域里面的话，那么最终只能得到一个杂乱无章的表单网页，所以，在将表单项插入到表单域之前，应该先行用表格对表单域进行划分，如图7-7所示。

表7-2 表单域中表格一览表

图7-7 表单域布局结构

1、插入表格1

在网页index07.html中插入2行2列的表格1，表格宽度设置为“780像素”，“边框粗细”、“单元格边距”和“单元格间距”均设置为“0”，“对齐”设置为“居中对齐”。

♦将表格1第1行第1列单元格的宽度设置为“200像素”，高度为“100像素”，并在该单元格内插入素材包中的图像文件“jxlogo.jpg”；

♦将表格1第1行第2列单元格的宽度设置为“580像素”，高度为“100像素”，并在该单元格中插入素材包中的动画文件“formtitle.swf”；

♦将表格1第2行的两个单元格合并，高度设置为“40像素”，背景颜色为“#66CCCC”，“水平”和“垂直”对齐方式设置为“居中对齐”。在

单元格中输入文本“旅游调查表”，字体设置为“楷体”，大小为“24像

素”，颜色为“#CC0000”，系统自动生成样式表“STYLE1”。

2、插入表格2

在表格1的下方插入一个5行4列的表格2，表格宽度设置为“780像素”，“边框粗细”设置为“1”，“单元格边距”和“单元格间距”均设置为“0”，“对齐”设置为“居中对齐”，“边框颜色”为“#66CC66”。

♦将表格2第1行的高度设置为“40像素”，第2、3、4、5行高度为“35像素”；

♦将表格2第1列的宽度设置为“25%”，第2列为“35%”，第3列为“15%”，第4列为“25%”。

♦将表格2第1行的背景颜色设置为“#82CA9C”，并将该行的前3列单元格合并后插入素材包中的图像文件“mark.png”，该图像的对齐方式为“绝

对居中”，然后在图像文件之后输入文本“个人信息”，字体设置为“黑

体”，系统自动生成样式表“STYLE2”。

♦将表格2第1行第2个单元格的“水平”和“垂直”对齐方式设置为“居中对齐”，切换到“代码视图”，在单元格代码之间输入如下代

码，用于显示系统当前日期。

♦将表格2的第2、3、4、5行的第1列和第3列的单元格的“水平”对齐方式设置为“右对齐”，并在其中输入“姓名：”、“职业：”、“所在省市：”、

“E-Mail邮箱：”、“性别：”、“教育水平：”、“邮政编码：”和“QQ号码”

等文本信息，均设置为“STYLE2”样式。