单元4制作表单网页

1、操作演练操作演练1.2技术提升技术提升1.3操作准备操作准备1.1考核评价考核评价1.4操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备4.1操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练4.2技术提升技术提升1.3技术提升技术提升1.3技术提升技术提升4.3考核评价考核评价1.4考核评价考核评价4.4 我们都曾申请过E-mail邮箱，在申请过程必须在网页上输入个人信息，然后提交信息，提交成功后，才能获得E-mail邮箱。 这个用于获取信息的网页称为表单，通常

2、一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，将光盘中的“单元4”（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元4”的本地站点。【任务4-1】制作用户注册网页【任务描述】 （1）在网页文档0401.html中插入1个表单域。 （2）在表单域中插入1个9行3列的表格。 （3）在表格中插入6个单行文本域。 （4）在表格中插入2个密码文本域。 （5）在表格中插入2按钮。 （6）在表格中插入1个下拉

3、式菜单。 （7）在表格中插入1个单选按钮组。 （8）在表格中插入1个复选框。 （9）在表格中插入1个图像域。 网页文档0401.html的浏览效果如图4-1所示。图图4-14-1网页文档网页文档0401.html0401.html的浏览效果的浏览效果【任务实施】 1打开网页文档0401.html 直接打开文件夹4-1中的网页文档0401.html，也可以重新创建1个网页文档0401.html。 2插入表格域 3设置表单域的属性 4在网页中插入表格 5插入单行文本域 6插入表单按钮 7插入下拉式菜单 8插入单选按钮组 9插入复选框 10插入图像域 11保存网页与浏览网页效果 保存网页0401.h

4、tml，然后按快捷键F12浏览该网页，其浏览效果如图4-1所示。【任务4-2】制作用户登录网页【任务描述】 （1）在网页文档0402.html中插入1个表单域。 （2）在表单域中插入1个3行2列的表格。 （3）在表格中插入1个文本域。 （4）在表格中插入1个Spry验证密码。 （5）在表格中插入1个图像域。 网页文档0402.html的浏览效果如图4-25所示。图图4-254-25网页文档网页文档0402.html0402.html的浏览效果的浏览效果 【任务实施】 1打开网页文档0402.html 直接打开文件夹4-2中的网页文档0402.html，也可以重新创建1个网页文档0402.htm

5、l。 2插入表单域 3在网页中插入表格 4插入文本域 5插入Spry验证密码域 6插入图像域 7保存网页与浏览网页效果 保存网页0402.html，然后按快捷键F12浏览该网页，其浏览效果如图4-25所示。【任务4-3】美化用户注册网页【任务描述】 （1）创建外部样式文件04global.css，在该样式文件中定义必要的CSS样式。 （2）创建外部样式文件04main.css，在该样式文件中定义必要的CSS样式。 （3）创建网页文档0403.html，该网页中所包含的内容与网页0401.html类似，网页0403.html主要应用CSS样式对表格、单元格和表单控件进行美化。 （4）编写代码实现

6、以下功能：浏览网页时，当鼠标指针指向“用户名”和“密码”文本框时，该文本框自动获取焦点，并且文本框的背景颜色和边框颜色自动改变。当鼠标指针离开该文本框，则自动恢复默认的背景颜色和边框颜色。 （5）编写代码实现以下功能：游览网页时，在“字符”文本框中单击时，该文本框获取焦点且背景颜色和边框颜色自动改变。当该文本框失去焦点时，则自动恢复默认的背景颜色和边框颜色。 网页0403.html的浏览效果如图4-28所示。图图4-284-28网页网页0403.html0403.html的浏览效果的浏览效果【任务实施】 1创建外部样式文件04global.css 2创建外部样式文件04main.css 3创建

7、网页文档0403.html 4保存网页与浏览网页效果 保存网页0403.html，然后按快捷键F12浏览该网页，其浏览效果如图4-28所示。【任务4-4】美化用户登录网页【任务描述】 （1）创建外部样式文件04common.css，在该样式文件中定义必要的CSS样式。 （2）创建外部样式文件04user_login.css，在该样式文件中定义必要的CSS样式。 （3）创建网页文档0404.html，该网页中所包含的内容与网页0402.html类似，网页0404.html主要应用CSS样式对表格、单元格和表单控件进行美化。 网页0404.html的浏览效果如图4-29所示。【任务实施】 1创建外

8、部样式文件04common.css 2创建外部样式文件04user_login.css 3创建网页文档0404.html 4保存网页与浏览网页效果 保存网页0404.html，然后按快捷键F12浏览该网页，其浏览效果如图4-29所示。图图4-294-29网页网页0404.html0404.html的浏览效果的浏览效果【考核任务描述】 教材配套光盘中已提供了考核评价项目所需的起点网页文件0405.html，在该网页中完成以下操作。 （1）在表格的第2行第2个单元格中插入1个单行文本域，字符宽度设置为16，最多字符数设置为20。 （2）在表格的第2行第4个单元格中插入2个单选按钮，标签名称分别为“

9、男”和“女”。 （3）在表格的第3行第2个单元格中插入1个单元文本域，字符宽度设置为30，最多字符数设置为40。在该单元格插入1个Spry验证文本域，其类型为“电子邮件地址”，预览状态“无效格式”。 （4）在表格的第3行第4个单元格中插入1个单元文本域，字符宽度设置为6，最多字符数设置为6。在该单元格插入1个Spry验证文本域，其类型为“邮政编码”，预览状态“无效格式”。 （5）在表格的第4行第2个单元格中插入1个列表，列表包括“公务员”、“公司职员”、“企业职员”、“教师”、“农民”、“经商人员”、“学生”和“其他”。 （6）在表格的第4行第4个单元格中插入1个单选按钮组，名称为“age”，

10、成员名称分别为“16岁以下”、“1625”、“2535”、“3545”、“4555”和“55岁以上”。 （7）在表格的第5行第2个单元格中插入5个复选框，标签名称分别为“自然风光”、“人文景观”、“民风民俗”、“休闲游”和“探险游”。 （8）在表格的第6行第2个单元格中插入1个跳转菜单，菜单项分别为“黄山旅游网”、“桂林旅游网”、“张家界旅游网”和“九寨沟旅游网”，对应的网址分别为：http:/http:/http:/http:/ （9）在表格的第7行第2个单元格中插入1个单选按钮组，该单选按钮组包括7个成员，其标签名称分别为“五一”、“十一”、“春节”、“元旦”、“暑假”、“周末”和“其他时间”。 （10）在表格的第8行第2个单元格中插入1个单选按钮组，该单选按钮组包括5个成员，其标签名称分别为“飞机”、“火车”、“汽车”、“自驾车”和“徒步”。 （11）在表格的第9行第2个单元格中插入1个多行文本域，字符宽度设置为80，行数设置为4，初始值设置为“请多提宝贵建议”。 （12）在表格的第10行单元格中插入2个按钮，其值分别为“提交”和“重置”。 本单元的考核评价任务完成后，网页0405.html的最终浏览效果如图4-30所示。图图4-304-30网页网页0405.html0405.html的最终浏览效果的最终浏览效果【评价要点】 本单元的考核评价表如表4