07第7章制作表单网页.

第7章制作表单网页

通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。

【教学导航】

7.1课前准备

7.1.1新建一个站点

（1）在本地硬盘创建文件夹

（2）启动Dreamweaver CS3

（3）创建名称为“E游调查”的本地站点

7.1.2新建一个网页文档index0701.html

第7章制作表单网页（1）新建一个网页文档

（2）设置网页标题

（3）保存该网页。

7.1.3在网页中插入表格

1、在网页index0701.html中插入表格1

2、在网页index0701.html中插入表格2

3、在网页index0701.html中插入表格3

4、在表格3中插入表格3-1

（1）插入4行1列表格3-1

（2）在表格3-1第1行的单元格中插入表格3-1-1

（3）在表格3-1第3行的单元格中插入表格3-1-3

（4）在表格3第2行的单元格中插入表格3-1-2

（5）在表格3第4行的单元格中插入表格3-1-4

7.2课堂引导训练及评价

【课堂引导训练任务描述】

1、网页制作任务卡

网页制作任务卡如表7-5所示。

表7-5网页制作任务卡

177

178

2、网页制作任务跟踪卡

网页制作任务跟踪卡如表7-6所示。

表7-6 网页制作任务跟踪卡

【网页效果展示】

网页“index0701.html ”的预览效果如图7-2所示。

图7-2 网页“index0701.html ”的预览效果

【任务完成过程】

7.2.1 插入表单域

第7章制作表单网页

【操作要求】

在表格3的单元格中插入一个表单域。

【实施过程】

（1）将光标置于表格3的单元格中。

（2）在Dreamweaver CS3主界面中，单击菜单【插入记录】→【表单】→【表单】，如图7-3所示，在表格3单元格中光标处插入一个表单域。

7.2.2设置表单域的属性

【操作要求】

设置表单域的“名称”、“动作”、“目标”和“方法”等属性。

【实施过程】

将光标置于表单域中，即可看到表单域的“属性”面板，在该属性面板中设置表单域的属性。

“属性”面板上各项属性的设置如下：

（1）“表单名称”：用来设置表单的名称。这里设置为“Form1”。

（2）“动作”：用来设置处理该表单的动态网页或用来处理表单数据的程序路径，这里假设处理该表单的动态网页为“Register_Confirm.aspx”。

（3）“目标”：用来设置表单被处理后，反馈网页打开的方式。默认的打开方式是在原窗口中打开，这里设置“目标”为“_blank”，有利于提高浏览速度。

（4）“方法”：用来设置表单数据发送到服务器的方式。这里选择“POST”方式

（5）“MIME类型”用来设置发送数据的MIME编码类型。如果表单中包含文件上传域，则应该选择“multipart/form-data”编码类型。

7.2.3插入表单控件

【操作要求】

（1）插入3个单行文本域。

（2）插入1个文本区域。

（3）插入2个单选按钮。

（4）插入3个单选按钮组。

（5）插入23个复选框。

（6）插入2个下拉式菜单。

（7）插入1个列表。

（8）插入1个跳转菜单。

（9）插入2个表单按钮。

（10）插入1个图像域。

【实施过程】

1、插入单行文本域

在表单的文本域中，可以输入文本、数字或字母。输入的内容可以单行显示，也可以是多行显示，还可以将密码以星号形式显示。

插入文本域的过程如下：

（1）将光标置于“您的姓名：”一行（表格3-1-2的第1行）的第2列的单元格中。

179

Dreamweaver CS3网页制作案例教程

（2）单击“插入”工具栏的【表单】选项卡中的【文本字段】按钮，如图7-5所示。

（3）设置文本域的属性

（4）保存网页，预览其效果。

2、插入文本区域

（1）将光标置于“您的建议：”一行（表格3-1-4的第5行）的第2个单元格中。

（2）单击“插入”工具栏的【表单】选项卡中的【文本区域】按钮，在弹出的【输入标签辅助功能属性】对话框的“ID”文本框中输入该文本框的标识“suggest”，其他属性保持默认值不变，然后单击【确定】按钮，在光标插入一个多行文本域。

（3）设置多行文本域的属性

（4）保存网页，预览其效果。

3、插入单选按钮

（1）将光标置于“性别：”一行（表格3-1-2的第1行）的第4个单元格中。

（2）单击“插入”工具栏的【表单】选项卡中的【单选按钮】按钮，弹出【输入标签辅助功能属性】对话框，在该对话框的“ID”文本框中输入该单选按钮的“选定值”为“men”，“标签文字”文本框输入“男”，“位置”选中“在表单项后”单选按钮，如图7-11所示。然后单击【确定】按钮，在光标位置插入一个单选按钮。

（3）设置单选按钮属性

单击选中一个单选按钮，在“单选按钮”的属性面板中设置其属性，两个单选按钮的初始状态都设置为“未选中”，标识名称分别为“radio1”和“radio2”，单选按钮的属性设置结果如图7-12所示。

将两个单选按钮的“标签文字”的大小都设置为“12”。

（4）保存网页，预览其效果。

4、插入单选按钮组

（1）将光标置于“您的年龄：”一行（表格3-1-2的第4行）的第2个单元格中。

（2）单击“插入”工具栏的【表单】选项卡中的【单选按钮组】按钮，弹出如图7-13所示的【单选按钮组】对话框。

（3）单击按钮，向单选按钮组中添加新的单选按钮，然后单击“标签”一列的文字，输入新的内容，可以使用汉字，这里分别输入“16岁以下”、“16～25”、“25～35”、“35～45”、“45～55”、“55岁以上”；单击“值”一列的文字，输入需要的值，只能使用英文半角字符，这里分别输入“<16”、“25”、“35”、“45”、“55”、“>55”。

（4）单击【确定】按钮，在光标位置插入单选按钮组，将6个单选按钮调整为三行布局，将各个单选按钮标签文本的大小设置为“12”，然后通过插入多个空格，使其对齐，如图7-15所示。

（5）设置单选按钮属性

选中单选按钮组中的一个单选按钮，然后在属性面板中设置其属性，如图7-16所示。

（6）保存网页，预览其效果。

5、插入复选框

（1）将光标置于“您喜爱的旅游项目：”一行（表格4-1-4的第1行）的第2个单元格中。

（2）单击“插入”工具栏的【表单】选项卡中的【复选框】按钮，弹出“复选框”的【输入标签辅助功能属性】对话框，在“ID”文本框中输入该复选框的标识文本“item01”，

180