文档介绍：第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)在本地硬盘创建文件夹
(2)启动Dreamweaver CS3
(3)创建名称为“E游调查”的本地站点
(1)新建一个网页文档
(2)设置网页标题
(3)保存该网页。
在网页中插入表格
1、
2、
3、
4、在表格3中插入表格3-1
(1)插入4行1列表格3-1
(2)在表格3-1第1行的单元格中插入表格3-1-1
(3)在表格3-1第3行的单元格中插入表格3-1-3
(4)在表格3第2行的单元格中插入表格3-1-2
(5)在表格3第4行的单元格中插入表格3-1-4
课堂引导训练及评价
【课堂引导训练任务描述】
1、网页制作任务卡
网页制作任务卡如表7-5所示。
表7-5 网页制作任务卡
任务编号
07-1
任务名称
制作表单网页
网页主题
E游调查
计划工时
120min
网页制作任务描述
(1)制作一个表格布局的网页
(2)在网页插入表单域,且设置该表单域的属性
(3)在表单域中分别插入单行文本域、文本区域、单选按钮、单选按钮组、复选框、下拉式菜单、列表、跳转菜单、表单按钮和图像域
(4)预设文本域中输入文字的字体和大小,浏览网页时将鼠标移到该文本域时,实现自动选中提示信息,直接输入所需文本
(5)使用Spry验证表单数据的有效性
(6)在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能
(7)引用外部JavaScript脚本文件实现表单网页所需的功能
网页布局结构分析
(1)表格布局结构,如图7-所示。
(2)无导航栏
网页色彩搭配分析
网页中文字的颜色:#000000、#0000FF,背景颜色:#、#FF、# 9BBB38
网页组成元素分析
主要包括表格、表单域、表单控件、文本、图像等网页元素
任务实现流程分析
制作表格布局的网页→插入表单域→插入表单控件→使用Spry验证表单数据的有效性
→在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能→引用外部JavaScript脚本文件实现表单网页所需的功能
配盘素材导引
原始文件位置:start\07第7章制作表单网页\task07-1
最终文件位置:result\07第7章制作表单网页\task07-1
2、网页制作任务跟踪卡
网页制作任务跟踪卡如表7-6所示。
表7-6 网页制作任务跟踪卡
任务编号
开始时间
完成时间
计划工时
实际工时
当前状态
【网页效果展示】
网页“”的预览效果如图7-2所示。
图7-2 网页“”的预览效果
【任务完成过程】
插入表单域
【操作要求】
在表格3的单元格中插入一个表单域。
【实施过程】
(1)将光标置于表格3的单元格中。
(2)在Dreamweaver CS3主界面中,单击菜单【插入记录】→【表单】→【表单】,如图7-3所示,在表格3单元格中光标处插入一个表单域。
设置表单域的属性
【操作要求】
设置表单域的“名称”