表格表单css样式设计教案.doc

《表格表单css样式设计教案.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、一体化课程教案编号：QD-0707-05版本号：D/0流水号：编制：教研室批准:成振洋2011/2012学年度第二学期计算机系（部）任课教师颜虹一体化课程网络编程基础学习任务CSS表格表单样式设计授课时数6授课日期2012.5.17周次13审批年月日教学班级10计网1学习目标学习重点及其化解方法根据教材上要求，通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。本次课程的学习内容应该是学生比较感兴趣的知识，我们可以从简单例子入手，到复杂的网页效果实现，再结合书本要求完成的综合实例，还可以让学生自由创作。这样学生既理解

2、了书上的表格表单CSS样式设计的用法，真正具备进行网页设计的能力。学习重点：分析并制作出网页表格、表单的样式表。学习难点及其化解方法学习难点：指导学生的自主学习和正确评价自己和他人的设计多看优秀的表单表格设计例子，例如google的日历视图等网页上实例。教学准备Ø教学设备：电脑、投影、PowerPoint软件、Dreamweaver软件Ø教学准备：示例网页、素材图片、任务书教学组织流程计划任务:（1）通过学习和实践，会使用CSS设置表格各种边框样式。（2）通过学习和实践，会利用CSS设置仿Google日历表格样式。（3）通过学习

3、和实践，会利用CSS设置多彩的表单样式。（4）通过学习和实践，完成书本206页综合实例。教学情景创设与流程设计：播放酷站网页、激发兴趣、引出主题→分析表格的CSS样式设置方法→学生自主完成表格边框练习→分析仿Google日历表格样式设置方法→学生自主完成日历表格练习→分析表单css样式设置方法→学生自主完成彩色表单练习→学生完成书本综合实例→学生互评→教师总结学习情况设计：通过播放比较精彩的酷站网站，提高学生的学习兴趣和审美意识。学生在欣赏作品的同时受到启发。本节课的主要任务是介绍对表格、表单的CSS样式进行分析，利用CSS进行

4、美化。让学生打开服务器上的素材进行浏览，分析，总结。在此过程中，学生还可以互相交流，取长补短，在交流中不断总结问题，加深对知识点理解。问题设计：1、欣赏优秀的网页作品（有书本素材，也有校园网站，还有网上的酷站），提出疑问：我们上一节课学习了CSS样式，它能美化网页，但是CSS样式还可以干什么呢？以前，我们学会了表格HTML标记，利用

5、术强大，而用HTML标记完成这样的工作是不可能的。)演示二：鼠标移到表单的某个元素时（例如文本框），该文本框的背景颜色发生变化。提问：这种设计是使你在填写表单时更加吸引你注意，特别是检验表单数据时，通过改变背景色来提示你那个文本框的内容填写有错误。你们想不想试试？（激发学生兴趣和求知欲）2、教师启发：其实也不需要大量代码实现，别人能做的我相信同学们也一定能。通过我们以前的经验，借助Dreamweaver这样的应用软件，利用CSS样式知识和HTML知识，只要我们认真去探究，就一定会有新的发现，一定也会做出优秀的作品。（启发、鼓励学

6、生，增强自信）实施按任务项目一个个完成评价由学生自我评价与老师评价结合教学反思教学内容（课时6）：教学环节教师活动学生活动引出主题导入新课1、[创设情景]教师首先展示示例网站，演示表格边框变化网页。2、[提问]用

7、答问题。认真倾听，提起兴趣。认真倾听思考。欣赏网页1、欣赏酷站。2、[提问]思考这些网站表格的CSS样式有哪些？观察。认真观察，回答问题。分析任务要点1、任务一：绘制交换颜色变化的表格。任务分析：第一步设置细边框线，编辑tbodytd类的样式表，边框的style设置为solid，width为1px，color为#f60。第二步设置自定义类，设置td的background-color。2、任务二：仿照google日历制作相应的样式表格。任务分析：第一步先参照样表，画好表格。第二步将表格边框线按上例设置成细边框线。第三步添加层，并置

8、于最顶层，放在相关位置显示日历事项。1、任务三：制作彩色表单。任务分析：第一步参照样表，制作好表单。第二步将表格边框线按上例设置成细边框线。第三步制作样式表，设置thtd的颜色。第四步设置样式表，当鼠标经过过改变单元格颜色。2、任务四：按书本206页要求完成综