单元4制作表单网页.ppt

单元4　制作表单网页 操作演练 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邮箱。 这个用于获取信息的网页称为表单，通常一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。 【教学导航】 教学目标 （1）学会制作用户注册网页和用户登录网页 （2）学会在网页中正确插入表单域和设置表单域的属性 （3）学会在表单域中正确插入文本域和文本区域 （4）学会在表单域中正确插入单选按钮、单选按钮组和复选框 （5）学会在表单域中正确插入列表/菜单、按钮和图像域 （6）学会在表单域中插入Spry验证密码域 （7）学会预设输入文字的字符宽度和最多字符数 （8）学会美化用户注册网页和用户登录网页 教学方法 任务驱动法、理论实践一体化、讲练结合 课时建议 6课时（包含考核评价） 【4.1　操作准备】 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，将光盘中的“单元4”（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元4”的本地站点。 【4.2　操作演练】 【任务4-1】制作用户注册网页 【任务描述】 （1）在网页文档0401.html中插入1个表单域。 （2）在表单域中插入1个9行3列的表格。 （3）在表格中插入6个单行文本域。 （4）在表格中插入2个密码文本域。 （5）在表格中插入2按钮。 （6）在表格中插入1个下拉式菜单。 （7）在表格中插入1个单选按钮组。 （8）在表格中插入1个复选框。 （9）在表格中插入1个图像域。 网页文档0401.html的浏览效果如图4-1所示。 图4-1　网页文档0401.html的浏览效果 【任务实施】 1．打开网页文档0401.html 直接打开文件夹4-1中的网页文档0401.html，也可以重新创建1个网页文档0401.html。 2．插入表格域 3．设置表单域的属性 4．在网页中插入表格 5．插入单行文本域 6．插入表单按钮 7．插入下拉式菜单 8．插入单选按钮组 9．插入复选框 10．插入图像域 11．保存网页与浏览网页效果 保存网页0401.html，然后按快捷键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-25　网页文档0402.html的浏览效果 【任务实施】 1．打开网页文档0402.html 直接打开文件夹4-2中的网页文档0402.html，也可以重新创建1个网页文档0402.html。 2．插入表单域 3．在网页中插入表格 4．插入文本域 5．插入Spry验证密码域 6．插入图像域 7．保存网页与浏览网页效果 保存网页0402.html，然后按快捷键F12浏览该网页，其浏览效果如图4-25所示。 【4.3　技术提升】 【任务4-3】美化用户注册网页 【任务描述】 （1）创建外部样式文件04global.css，在该样式文件中定义必要的CSS样式。 （2）创建外部样式文件04main.css，在该样式文件中定义必要的CSS样式。 （3）创建网页文档0403.html，该网页中所包含的内容与网页0401.html类似，网页0403.html主要应用CSS样式对表格、单元格和表单控件进行美化。 （4）编写代码实现以下功能：浏览网页时，当鼠标指针指向“用户名”和“密码”文本框时，该文本框自动获取焦点，并且文本框的背景颜色和边框颜色自动改变。当鼠标指针离开该文本框，则自动恢复默认的背景颜色和边框颜色。 （5