清华大学版信息技术八下 4.15 信息互动——制作表单网页 课件 (共24张PPT)

信息互动———制作表单网页 任务导航 网页不仅能够提供信息让用户浏览，还能够从用户那里收集信息。表单就是一种比较常用的收集信息的形式，它是网站管理者与浏览者之间沟通的桥梁。表单常用于申请邮箱、注册个人信息、填写调查报告以及购物信息等。 本课，学习利用表单制作“有奖问答”网页，网页效果如图所示。 1.设计网页 （1）规划“有奖问答”文件夹 打开“安全自护”站点，在“文件”面板中新建yjwd文件夹，在yjwd文件夹中新建images和other两个文件夹，将素材库中提供的图片素材存放到images文件夹中。 （2）新建网页文件 在yjwd文件夹中新建网页文件，文件名为yjwd.html。修改网页标题为“有奖问答”，设置背景颜色为#EAFF8A，上边距为0。 （3）利用表格规划网页 步骤1：插入一个4行3列的表格，边框粗细为0，单元格边距为0，单元格间距为0，表格宽度为680像素，居中对齐。 步骤2：合并第1行所有单元格，设单元格高度为90像素。分别设定第2行第1列、第2行第3列、第4行第1列及第4行第3列的单元格宽度为18像素，高度为19像素，如图所示。 步骤3：在表格1的下面再插入一个2行1列的表格，边框粗细为0，单元格边距为0，单元格间距为0，表格宽度为900像素，居中对齐。设定第1行的单元格高度为55像素，如图所示。 （4）修饰表格 利用表格规划完网页后，根据需要在表格中插入所需的图像文件，设置单元格的背景颜色和背景图像。修饰后的表格如图所示。 2.制作表单 （1）插入表单域 步骤1：将光标放置在表格1的第3行第2列单元格中，设置单元格内容的垂直对齐方式为“顶端”。 步骤2：执行“插入”→“表单”→“表单”命令，一个表单域便插入到了网页中，它在网页编辑窗口中显示为一个红色虚线框的范围，如图所示。 步骤3：将光标置于表单域（红色虚线框）中，在“属性检查器”中设置表单的属性，如图所示。 （2）插入文本域 步骤1：在表单域中插入一个15行1列的嵌套表格，边框粗细为0，单元格边距为0，单元格间距为0，表格宽度为90%。设置表格居中对齐，所有单元格的高度为25像素，分别将第2、3、4行单元格拆分为2列。 步骤2：在第1行中输入“请准确填写用户信息，带*的必须填写”。将光标放置在第2行第1列中，执行“插入”→“表单”→“文本域”命令，打开如图所示的“输入标签辅助功能属性”对话框。 步骤3：在“标签”输入框中输入“姓名：”，单击“确定”按钮，一个文本域便插入到了网页中，如图所示。 步骤4：选中文本域，打开“属性检查器”，修改文本域名称为name，设置“字符宽度”为20，如图所示。 (3)插人选择(列表/菜单) 步骤1：将光标放置在第2行的第2个单元格中，执行“插人”→“表单”→“选择(列表/菜单)”命令，在“输人标签辅助功能属性”对话框的“标签”输人框中输人“性别：”，单击“确定”按钮，一个选择(列表/菜单)便插人到了网页中，如图所示。 步骤2：选中“性别”选择(列表/菜单)，打开“属性检查器”，修改“选择”的名称为sex，在“类型”项目中选择“列表”单选按钮，如图所示。 步骤3：单击“属性检查器”中的“列表值”按钮，打开“列表值”对话框，单击“+”按钮，添加当前列表的选择项目“男”、“女”，如图所示。 (4)插人单选按钮组 步骤1;在表格的第5行中输人文字内容：“1. 你喜欢网站的风格吗?”。将光标放置在第6行的单元格中，执行“插人”→“表单” →“单选按钮组”命令，打开“单选按钮组”对话框，如图所示。 步骤2：修改单选按祖组的名称questionl。单击“+”按钮，添加新的单选按钮，分别修改单选按钮的标签为“非常喜欢”、“比较喜欢”、“不太喜欢”，值为a、b、c，如图所示。 步骤3：单击“确定”按钮，单选按钮组便插人到了网页中，如图15.15(a)所示。 (5)插人复选框 ... ...