网页设计与制作任务驱式实用教程07单元7制作表单网页1.docVIP

单元7　制作表单网页 【教学导航】 教学目标 （1）学会制作表单网页 （2）在网页中正确插入表单域 （3）在表单域中正确插入文本域和文本区域 （4）在表单域中正确插入单选按钮、单选按钮组和复选框 （5）在表单域中正确插入列表/菜单、跳转菜单、按钮和图像域 （6）掌握检查提交表单数据的正确性的方法 （7）预设输入文字的字体和大小 （8）调用外部JavaScript脚本文件在网页中显示当前日期 （9）调用外部JavaScript脚本文件动态改变网页中的菜单选项 （10）调用外部JavaScript脚本文件验证表单数据 （11）了解使用Spry验证控件实现对表单控件内容的检测 本单元重点 （1）在网页中正确插入表单域，在表单域中正确插入各种表单元素 （2）检查提交表单数据的正确性 （3）调用外部JavaScript脚本文件实现表单网页所需的功能 本单元难点 （1）在表单域中插入列表/菜单和跳转菜单 （2）使用Spry验证功能实现对表单元素的内容检测 教学方法 任务驱动法、分组讨论法、分析探究法、四步训练法 课时建议 6课时（含考核评价） 【操作准备】 1．新建1个本地站点 （1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6 （3）创建本地站点 2．新建1个网页文档0701.html （1）新建1个网页文档 （2）设置网页标题及其他属性 （3）保存该网页。 3．在网页中插入表格 （1）在网页0701.html中插入表格1 （2）在网页0701.html中插入表格2 （3）在网页0701.html中插入表格3 （4）在表格3中插入表格3-1 ① 插入4行1列表格3-1 ② 在表格3-1第1行的单元格中插入表格3-1-1 ③ 在表格3-1第3行的单元格中插入表格3-1-3 ④ 在表格3-1第2行的单元格中插入表格3-1-2 ⑤ 在表格3-1第4行的单元格中插入表格3-1-4 【引导训练】 【任务7-1】制作1个E游调查的表单网页 本单元“引导训练”的任务卡如表7-5所示。 表7-5　单元7“引导训练”任务卡 任务编号 7-1 任务名称 制作1个E游调查的表单网页 网页主题 E游调查 计划工时 120min 网页制作任务描述 （1）制作1个表格布局的网页 （2）在网页插入表单域，且设置该表单域的属性 （3）在表单域中分别插入单行文本域、文本区域、单选按钮、单选按钮组、复选框、下拉式菜单、列表、跳转菜单、表单按钮和图像域 （4）预设文本域中输入文字的字体和大小，浏览网页时将鼠标移到该文本域时，实现自动选中提示信息，直接输入所需文本 （5）使用Spry验证表单数据的有效性 （6）在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能 （7）调用外部JavaScript脚本文件实现表单网页所需的功能 网页布局结构分析 （1）表格布局结构，如图7-2所示。 （2）无导航栏 网页色彩搭配分析 网页中文字的颜色：#000000、#0000FF，背景颜色：#99CCCC、#99CCFF、# 9BBB38 网页组成元素分析 主要包括表格、表单域、表单控件、文本和图像等网页元素 任务实现流程分析 制作表格布局的网页→插入表单域→插入表单控件→使用Spry验证表单数据的有效性→在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能→调用外部JavaScript脚本文件实现表单网页所需的功能 配盘素材导引 原始文件位置：start\Unit07\task07-1 最终文件位置：result\Unit07\task07-1 本单元“引导训练”的任务跟踪卡如表7-6所示。 表7-6　单元7“引导训练”任务跟踪卡 任务编号 开始时间 完成时间 计划工时 实际工时 当前状态 本单元“引导训练”网页“0701.html”的预览效果如图7-2所示。 图7-2　网页“0701.html”的预览效果 【任务7-1-1】插入表单域及其属性设置 【任务描述】 （1）在表格3的单元格中插入1个表单域。 （2）设置表单域的“名称”、“动作”、“目标”和“方法”等属性。 【任务实施】 （1）将光标置于表格3的单元格中。 （2）在Dreamweaver CS6主界面中，选择命令【插入】→【表单】→【表单】。 首先出现【标签编辑器-form】对话框，在该对话框的“操作”文本框中输入“register_confirm.aspx”，在“方法”列表框中选择“get”，在“编码类型”列表框中选择“application/x-www-form-urlencoded”，在“名称”文本框中输入“form1”，在“目标”列表框中选择“_blank”。 在【标签编辑器-form】对话框中单击【确定】按钮，在表格3单元格中光标处插入1个表单