项目12制作表单网页.doc.doc

《 网页设计与制作 》课程教案 一、教案头 教学单元标题：制作表单网页 教学时数 2学时 上课地点 北区实D602，D603，D304 授课班级 15软件1班 15软件2班 15软件3班 上课时间 周三5-8节 周四5-6节，周五1-2节 周四7-8节，周五3-4节 教 学 目 标 能力（技能）目标 知识目标 1.表单的概念 2.创建表单 3.插入表单对象 1、添加表单域 2、添加文本字段 3、添加文本区域 4、添加复选框与复选框组 5、添加单选按钮与单选按钮组 6、添加列表/菜单 7、制作跳转菜单 8、添加图像域 9、添加文件域 10、添加按钮 教 学 重 难 点 教学难点 教学重点及解决方式 添加表单域 添加各种表单控件 设置表单属性 添加表单域 添加文本字段 添加复选框 添加单选按钮与单选按钮组 添加菜单与列表 添加按钮 1. 杨颖，杨秀萍，胡国生. Dreamweaver CS6网页设计与制作项目驱动教程[M].重庆：西南师范大学出版社，2014 2. 钟阳晶，赖小平，马国勤.网页设计与制作[M].北京：北京师范大学出版社，2011 二、参考网站： 1. 《网页设计与制作》精品资源共享课程8:8080/skills/solver/classView.do?classKey=9109747 2. W3School 3. 素材资源库 4. 设计资源站 5. 网页制作大宝库 6. 站酷 7. 圆点视线 8. 站长素材 9. 千图网 / 10. 太平洋学院 /pcedu/sj/wz 11. 蓝色理想 12. 天极网 13. 网页设计师联盟 14. 七色鸟设计空间 二、教学设计 教学步骤 教学内容 教学方法 教学手段 学生活动 时间分配 知识基础 一、 表单概述 在Dreamweaver CS6中表单是一种较为特殊的对象，它是用于实现网页浏览者（即用户）与服务器（即网页所有者）之间信息交互的一种页面元素，在 WWW 上被广泛用于各种信息的搜集和反馈。通过表单，可以将浏览者的信息发送到Internet服务器上，以供处理。例如，用户可以询问浏览者的用户名和电子邮件地址，或者让浏览者做一个调查问卷、在访问簿上签名。图12-1显示了一个网站会员注册的表单页面。 图12-1 注册表单网页 不同于网页上其他的页面元素（如表格、图像等），表单需要服务器端特定程序的支持。因此表单包括两个部分：一部分是HTML源代码，用于描述表单（如表单域和表单对象）；另一部分是服务器或客户端的脚本或应用程序（如ASP、PHP、JSP脚本等），通过它实现对用户信息的处理。 不通过脚本，用户就不能搜集表单数据。 二、 插入表单对象 1、添加表单域 2、添加文本字段 3、添加文本区域 4、添加复选框与复选框组 5、添加单选按钮与单选按钮组 6、添加列表/菜单 7、制作跳转菜单 8、添加图像域 9、添加文件域 10、添加按钮 理论讲授 教学多媒体课件及图片展示 明确问题准备资料小组讨论学习、交流共享表单 的素材page1.html，在其中添加表单及表单对象，网页效果如图12-34所示。 （1）添加表单； （2）在表单域中插入“姓名”、“密码”、“E-mail”文本字段； （3）在表单域中插入“性别”单选按钮； （4）在表单域中插入“年龄”下拉菜单； （5）在表单域中插入“兴趣爱好”复选框； （6）在表单域中插入“意见”文本域； （7）在表单域中插入“提交”及“重置”两个按钮； 图12-34 注册表单页面效果 任务驱动教学法、问题引导教学法 Dreamweaver软件操作演示 实践应用提交网页后台程序 一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 理论讲授、小组讨论反思会创建表单，并添加各种常用的表单对象，设置每个表单对象的属性使用对表单元素进行美化。部分对表单属性设置还需多加练习效果良好。