一体化课程教案
编号：QD-0707-05
版本号：D/0
流水号：
编制：教研室
批准: 成振洋
2011/2012 学年度  第 二  学期  计算机系（部） 任课教师  颜虹   
一体化课程
网络编程基础
学习任务
CSS表格表单样式设计
授课时数
6
授课日期
2012.5.17
周次
13
审批
年 月 日
教学班级
10计网1
学习目标
学习重点及
其化解方法
根据教材上要求，通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。本次课程的学习内容应该是学生比较感兴趣的知识，我们可以从简单例子入手，到复杂的网页效果实现，再结合书本要求完成的综合实例，还可以让学生自由创作。这样学生既理解了书上的表格表单CSS样式设计的用法，真正具备进行网页设计的能力。
学习重点：分析并制作出网页表格、表单的样式表。
学习难点及
其化解方法
        学习难点：指导学生的自主学习和正确评价自己和他人的设计
多看优秀的表单表格设计例子，例如google的日历视图等网页上实例。
教学准备
教学设备：电脑、投影、PowerPoint软件、Dreamweaver软件
教学准备：  示例网页、素材图片、任务书
教
学
组
织
流
程
计划任务:
（1）通过学习和实践，会使用CSS设置表格各种边框样式。
（2）通过学习和实践，会利用CSS设置仿Google日历表格样式。
（3）通过学习和实践，会利用CSS设置多彩的表单样式。
（4）通过学习和实践，完成书本206页综合实例。
教学情景创设与流程设计：
    播放酷站网页、激发兴趣、引出主题→分析表格的CSS样式设置方法→学生自主完成表格边框练习→分析仿Google日历表格样式设置方法→学生自主完成日历表格练习→分析表单css样式设置方法→学生自主完成彩表单练习→学生完成书本综合实例→学生互评→教师总结
学习情况设计：
通过播放比较精彩的酷站网站，提高学生的学习兴趣和审美意识。学生在欣赏作品的同时受到启发。本节课的主要任务是介绍对表格、表单的CSS样式进行分析，利用CSS进行美化。让学生打开服务器上的素材进行浏览，分析，总结。在此过程中，学生还可以互相交流，取长补短，在交流中不断总结问题，加深对知识点理解。
问题设计：
1、欣赏优秀的网页作品（有书本素材，也有校园网站，还有网上的酷站），提出疑问：我们上一节课学习了CSS样式，它能美化网页，但是CSS样式还可以干什么呢？以前，我们学会了表格HTML标记，利用<table>的属性也能实现表格的边框变化，但是通过使用CSS样式更能够做出不同的表格效果。演示一：点击按钮更换表格边框样式，提问：为什么表格边框线转瞬间就变了呢?(说明：这就是CSS控制表格边框的技术强大，而用HTML标记完成这样的工作是不可能的。)演示二：鼠标移到表单的某个元素时（例如文本框），该文本框的背景颜发生变化。提问：这种设计是使你在填写表单时更加吸引你注意，特别是检验表单数据时，通过改变背景来提示你那个文本框的内容填写有错误。你们想不想试试？（激发学生兴趣和求知欲）
2、教师启发：其实也不需要大量代码实现，别人能做的我相信同学们也一定能。通过我们以前的经验，借助Dreamweaver这样的应用软件，利用CSS样式知识和HTML知识，只要我们认真去探究，就一定会有新的发现，一定也会做出优秀的作品。（启发、鼓励学生，增强自信）
实施
    按任务项目一个个完成
评价
    由学生自我评价与老师评价结合
教学反思

教学内容（课时  6  ）：
教学环节
教师活动
学生活动
引出主题
导入新课
1、 [创设情景]教师首先展示示例网站，演示表格边框变化网页。
2、 [提问]用<table>标记能不能实现实时更换表格边框？
3、 [引导启发] 如果我们现能把握表格、表单在网页中适当应用，并用CSS进行美化，就能设计出漂亮、高效的网站。（此时，可展示以前一些学生的优秀作品，鼓励学生，增强自信）
[导入新课]css表格样式本单元的主要任务是掌握表格、表单的CSS样式设计，本课的任务是表格或表单类网页的制作。
欣赏
观察，回答问题。
认真倾听，提起兴趣。
认真倾听思考。
欣赏网页
1、 欣赏酷站。
2、 [提问]思考这些网站表格的CSS样式有哪些？
观察。
认真观察，回答问题。
分析任务要点
1、任务一：绘制交换颜变化的表格。
任务分析：第一步设置细边框线，编辑tbody td类的样式表，边框的style设置为solid，width为1px，color为#f60。第二步设置自定义类，设置td的background-color。
2、任务二：仿照google日历制作相应的样式表格。
任务分析：第一步先参照样表，画好表格。第二步将表格边框线按上例设置成细边框线。第三步添加层，并置于最顶层，放在相关位置显示日历事项。
3、 任务三：制作彩表单。
任务分析：第一步参照样表，制作好表单。第二步将表格边框线按上例设置成细边框线。第三步制作样式表，设置th\td的颜。第四步设置样式表，当鼠标经过过改变单元格颜。
4、 任务四：按书本206页要求完成综合实例。以及209页的操作题。
任务分析：第一步利用onmouseover\onmouseout事件改变表格背景。第二步设置表格样式。
认真看书，动手实践。
思考，确定主题及表达主题所需要的素材。
自主学习，达到教师要求。
设计评价
1、 小组互评，推荐优秀作业。
2、 教师展示优秀作业，对学生从主题、内容、效果、技巧等方面进行评价。
学生互相：从主题、技能、美学、效果等多方面进行评价。
课堂小结
1、 [提问]通过这节课的学习，你们都学到了哪些知识，掌握了哪些技能？
2、 我们已经掌握了利用CSS制作不同表格样式效果的方法，下节课我们将继续针对CSS布局进行讲解。
总结本课的收获

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。