07单元7制作表单网页概要.ppt

网页设计与制作任务驱动式教程　陈承欢 网页设计与制作 任务驱动式教程 单元7　制作表单网页 【教学导航】 （1）在网页中正确插入表单域，在表单域中正确插入各种表单元素 （2）检查提交表单数据的正确性 （3）调用外部JavaScript脚本文件实现表单网页所需的功能 本单元重点 （1）在表单域中插入列表/菜单和跳转菜单 （2）使用Spry验证功能实现对表单元素的内容检测 本单元难点 任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练） 教学方法 6课时（含考核评价） 课时建议 （1）学会制作表单网页 （2）在网页中正确插入表单域 （3）在表单域中正确插入文本域和文本区域 （4）在表单域中正确插入单选按钮、单选按钮组和复选框 （5）在表单域中正确插入列表/菜单、跳转菜单、按钮和图像域 （6）掌握检查提交表单数据的正确性的方法 （7）预设输入文字的字体和大小 （8）调用外部JavaScript脚本文件在网页中显示当前日期 （9）调用外部JavaScript脚本文件动态改变网页中的菜单选项 （10）调用外部JavaScript脚本文件验证表单数据 （11）了解使用Spry验证控件实现对表单控件内容的检测 教学目标 【操作准备】 【引导训练】 【任务7-1】制作1个E游调查的表单网页 本单元“引导训练”的任务卡如表7-5所示。 【引导训练】 【任务7-1】制作1个E游调查的表单网页 本单元“引导训练”网页“0701.html”的预览效果如图7-2所示。 图7-2　网页“0701.html”的预览效果 【引导训练】 （1）在表格3的单元格中插入1个表单域。 （2）设置表单域的“名称”、“动作”、“目标”和“方法”等属性。 【任务描述】 【任务7-1-1】插入表单域及其属性设置 【任务实施】 （1）将光标置于表格3的单元格中。 （2）在Dreamweaver CS6主界面中，选择命令【插入】→【表单】→【表单】。 首先出现【标签编辑器-form】对话框，在该对话框的“操作”文本框中输入“register_confirm.aspx”，在“方法”列表框中选择“get”，在“编码类型”列表框中选择“application/x-www-form-urlencoded”，在“名称”文本框中输入“form1”，在“目标”列表框中选择“_blank”。 在【标签编辑器-form】对话框中单击【确定】按钮，在表格3单元格中光标处插入1个表单域，切换到“代码”编辑区域，将“表单”的结束标签“/form”移到该单元格的结束标签“/td”之前。 【引导训练】 （1）插入3个单行文本域。 （2）插入1个文本区域。 （3）插入2个单选按钮。 （4）插入3个单选按钮组。 （5）插入23个复选框。 （6）插入2个下拉式菜单。 （7）插入1个列表。 （8）插入1个跳转菜单。 （9）插入2个表单按钮。 （10）插入1个图像域。 【任务描述】 【任务7-1-2】插入表单控件与设置其属性 【引导训练】 （1）预设文本域中文本的字体为“楷体_GB2312”，大小为“14px”。 （2）浏览网页时将鼠标移到该文本域时，实现自动选中提示信息，直接输入所需文本。 【任务描述】 【任务7-1-3】预设文本域中输入文字的字体和大小 【任务实施】 在网页【设计】视图中单击选中“姓名”单行文本域，然后单击【文档】工具栏中的【显示“代码”视图】按钮，切换到【代码】视图，“姓名”文本域的HTML代码如下所示：input name=name type=text class=style3 id=name value=请输入您的姓名 size=16 maxlength=20 / 将光标置于“/”的左侧，按空格键，然后输入“style=font-size: 14px; font-family: 楷体_GB2312;”， 在input /中输入以下代码“onMouseOver=this.focus() onFocus=this.select()”，浏览网页时将鼠标移到该文本域时，会自动选中提示信息，直接输入所需文本即可。 【引导训练】 插入1个“Spry验证文本域”，限制“邮政编码”文本域中只能输入6位数字，无法输入非自然数，也无法输入超过6位的邮政编码。 【任务描述】 【任务7-1-4】使用Spry验证表单数据的有效性 【任务实施】 （1）插入“Spry验证文本域”(Dreamweaver8中没有) 在网页文档的【设计】视图中单击选中“邮政编码”文本域，然后单击【插入】面板“表单”工具栏中的【Spry验证文本域】按钮，此时会插入1个“Spry文本域”，并且【属性】面板会自动切换到“Spry文