中职高教版《网页设计与制作任务驱动教程》7.1制作1个E游调查的表单网页课件

1 单元7　制作表单网页 【任务7-1】制作1个E游调查的表单网页 《网页设计与制作任务驱动教程（第3版）》 1 2 网页0701.html的预览效果如图7-2所示。 图7-2　网页0701.html的预览效果 《网页设计与制作任务驱动教程（第3版）》 3 【任务描述】 【任务7-1-1】插入表单域及其属性设置 （1）在表格2的单元格中插入1个表单域。 （2）设置表单域的“名称”、“动作”、“目标”和“方法”等属性。 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 制作表单页面的第一步是插入表单域。 （1）打开网页文档“0701.html”，该页面初始内容如图7-1所示。将光标置于表格2的单元格中。 图7-1　表单网页“0701.html”的基本布局与初始内容 《网页设计与制作任务驱动教程（第3版）》 5 （2）在Dreamweaver CC主界面中，选择命令【插入】→【表单】→【表单】。 在表格2单元格中光标处插入1个表单域，切换到“代码”编辑区域，将“表单”的结束标签“</form>”移到该单元格的结束标签“</td>”之前。 1个表单域插入到网页中，在编辑窗口中显示为1个红色虚线框，其他的表单对象必须要放入这个框内才能起作用。 《网页设计与制作任务驱动教程（第3版）》 6 将光标置于表单域中，即可看到表单域的【属性】面板，在表单域【属性】面板中设置表单域的属性。在“ID”文本框中输入“form1”，在“Method”列表框中选择“GET”，在“Enctype”列表框中选择“application/x-www-form-urlencoded”，在“Target”列表框中选择“_blank”，表单域【属性】面板的设置结果如图7-5所示。 图7-5　表单域的【属性】面板 《网页设计与制作任务驱动教程（第3版）》 6 7 【任务描述】 【任务7-1-2】插入表单控件与设置 其属性 （1）插入3个文本框。 （2）插入1个文本区域。 （3）插入2个单选按钮。 （4）插入2个单选按钮组。 （5）插入23个复选框。 （6）插入2个下拉式菜单。 （7）插入1个列表。 （8）插入2个表单按钮。 （9）插入1个图像域。 《网页设计与制作任务驱动教程（第3版）》 8 【任务实施】 1．插入文本框 插入文本框的过程如下： （1）将光标置于“您的姓名：”一行（表格2-1-2的第1行）的第2列的单元格中。 （2）单击【插入】面板的【表单】工具栏中的【文本】按钮。于是，在光标位置插入1个文本框。 《网页设计与制作任务驱动教程（第3版）》 9 （3）设置文本框的属性 选中插入的文本框，在“文本框”【属性】面板中设置文本框的属性，在“Size”文本框中输入“16”，设置文本框中能显示8个汉字； 在“MaxLength”文本框中输入“20”，设置文本框最多能输入10个汉字； 在“Value”文本框输入“请输入您的姓名”,“Class”列表框中选择“sytle3”，样式sytle3设置文字大小为12像素。 《网页设计与制作任务驱动教程（第3版）》 10 文本框的属性设置结果如图7-7所示。 图7-7　文本框的属性设置 用同样的方法在“E-mail地址：”一行（表格2-1-2的第3行）的第二个单元格、“邮政编码”一行（表格2-1-2的第3行）的第四个单元格分别插入1个“文本框”。 （4）保存网页，预览其效果。 《网页设计与制作任务驱动教程（第3版）》 11 2．插入文本区域 文本区域也称为文本区域，可以直接利用【文本区域】按钮插入，也可以先插入文本框，然后在“文本框”【属性】面板选择“多行”类型。 （1）将光标置于“您的建议：”一行（表格2-1-4的第4行）的第2个单元格中。 （2）单击【插入】面板【表单】工具栏中的【文本区域】按钮，在光标插入1个文本区域。 《网页设计与制作任务驱动教程（第3版）》 11 12 （3）设置文本区域的属性 在Text Area【属性】面板的“Cols”文本框中输入“80”，“Rows”文本框中输入“4”，文本区域的属性设置如图7-10所示。 图7-10　文本区域的属性设置 （4）保存网页，预览其效果。 《网页设计与制作任务驱动教程（第3版）》 13 3．插入单选按钮 （1）将光标置于“性 别：”一行（表格2-1-2的第1行）的第4个单元格中。 （2）单击【插入】面板【表单】工具栏中的【单选按钮】按钮，在光标位置插入1个单选按钮，标签文字为“男”。以同样的方法插入另1个单选按钮，标签文字为“女”。 《网页设计与制作任务驱动教程（第3版）》 13 14 （3）设置单选按钮属性 单击选中1个单选按钮，在“单选按钮”的【属性】面板中设置其属性，两个单选按钮的初始状态都设置为“未选