网页设计与制作任务驱动式实用教程单元制作表单网页

《网页设计与制作任务驱动式实用教程单元制作表单网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元7　制作表单网页单元7　制作表单网页【教学导航】教学目标（1）学会制作表单网页（2）在网页中正确插入表单域（3）在表单域中正确插入文本域和文本区域（4）在表单域中正确插入单选按钮、单选按钮组和复选框（5）在表单域中正确插入列表/菜单、跳转菜单、按钮和图像域（6）掌握检查提交表单数据的正确性的方法（7）预设输入文字的字体和大小（8）调用外部JavaScript脚本文件在网页中显示当前日期（9）调用外部JavaScript脚本文件动态改变网页中的菜单选项（10）调用外部JavaScript脚本文件验证表单数据（11）了解使用Spry验证控件实现对表单控件内容的检测本单元重点

2、（1）在网页中正确插入表单域，在表单域中正确插入各种表单元素（2）检查提交表单数据的正确性（3）调用外部JavaScript脚本文件实现表单网页所需的功能本单元难点（1）在表单域中插入列表/菜单和跳转菜单（2）使用Spry验证功能实现对表单元素的内容检测教学方法任务驱动法、分组讨论法、分析探究法、四步训练法课时建议6课时（含考核评价）【操作准备】1．新建1个本地站点（1）创建所需的文件夹，拷贝所需的资源（2）启动DreamweaverCS6（3）创建本地站点2．新建1个网页文档0701.html（1）新建1个网页文档（2）设置网页标题及其他属性（3）保存该网页。3．在网页中

3、插入表格（1）在网页0701.html中插入表格1（2）在网页0701.html中插入表格2（3）在网页0701.html中插入表格3（4）在表格3中插入表格3-1①插入4行1列表格3-1189单元7　制作表单网页②在表格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游调查的表单网

4、页网页主题E游调查计划工时120min网页制作任务描述（1）制作1个表格布局的网页（2）在网页插入表单域，且设置该表单域的属性（3）在表单域中分别插入单行文本域、文本区域、单选按钮、单选按钮组、复选框、下拉式菜单、列表、跳转菜单、表单按钮和图像域（4）预设文本域中输入文字的字体和大小，浏览网页时将鼠标移到该文本域时，实现自动选中提示信息，直接输入所需文本（5）使用Spry验证表单数据的有效性（6）在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能（7）调用外部JavaScript脚本文件实现表单网页所需的功能网页布局结构分析（1）表格布局结构，如图7-2所示。（2）无导

5、航栏网页色彩搭配分析网页中文字的颜色：#000000、#0000FF，背景颜色：#99CCCC、#99CCFF、#9BBB38网页组成元素分析主要包括表格、表单域、表单控件、文本和图像等网页元素任务实现流程分析制作表格布局的网页→插入表单域→插入表单控件→使用Spry验证表单数据的有效性→在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能→调用外部JavaScript脚本文件实现表单网页所需的功能配盘素材导引原始文件位置：startUnit07task07-1最终文件位置：resultUnit07task07-1本单元“引导训练”的任务跟踪卡如表7-6所示。表7

6、-6　单元7“引导训练”任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态本单元“引导训练”网页“0701.html”的预览效果如图7-2所示。189单元7　制作表单网页图7-2　网页“0701.html”的预览效果【任务7-1-1】插入表单域及其属性设置【任务描述】（1）在表格3的单元格中插入1个表单域。（2）设置表单域的“名称”、“动作”、“目标”和“方法”等属性。【任务实施】（1）将光标置于表格3的单元格中。（2）在DreamweaverCS6主界面中，选择命令【插入】→【表单】→【表单】。首先出现【标签编辑器-form】对话框，在该对话框的“操作”文本框中输

7、入“register_confirm.aspx”，在“方法”列表框中选择“get”，在“编码类型”列表框中选择“application/x-www-form-urlencoded”，在“名称”文本框中输入“form1”，在“目标”列表框中选择“_blank”。在【标签编辑器-form】对话框中单击【确定】按钮，在表格3单元格中光标处插入1个表单域，切换到“代码”编辑区域，将“表单”的结束标签“”移到该单元格的结束标签“”之前。【任务7-1-2】插入表单控件与设置其属性189单元7　制作表单网