全国“创新杯”计算机类说课大赛一等奖作品：《DIV+CSS布局网页》教学设计方案

网页设计与制作——

使用DIV+CSS布局网页

《网页设计与制作——网页布局》

教学设计

【课题】网页布局——使用DIV+CSS布局网页

【教材】《网页设计与制作》

【授课班级】中等职业学校网络专业二年级

【教时】 4课时

【教材分析及学情分析】

本次课采用的教材是国家十二五规划教材《网页设计与制作》，其中DIV+CSS布局网页是重要的教学单元。本教材内容通俗易懂、图文并茂，并且包含有丰富的信息化实训案例。

本次课的教学对象为中职学校二年级学生，他们未来主要从事网页前端设计师的工作，要求具备网页前端设计的能力。在本次课之前，我们的学生已经掌握了Dreamweaver网页设计的相关知识，具备了网页美工的基础，学生学习热情较高，喜欢团队合作的探究学习方式，但学生自主创新能力不足，学习代码编写有一定困难，因此本课重点讲解如何使用DIV+CSS布局网页的知识内容。

【教学目标】

依据本教材的内容，结合学生的学情分析，本着提高学生的知识水平及分析处理能力为宗旨，我制定了知识目标、技能目标、情感目标相结合的三维教学目标：知识目标：

（1）学会DIV+CSS网页布局方式

（2）掌握DIV+CSS布局的定位方法

技能目标：

（1）能熟练使用CSS对网页中对象的位置精确排版；

（2）灵活应用DIV+CSS进行网页布局；

情感目标：

（1）培养学生团队合作意识；

（2）提高学生责任感和职业素养；

【教学重点与难点】

●教学重点：DIV+CSS网页布局方式、方法。

●教学难点：灵活使用DIV+CSS布局定位。

【教学设计】

课前利用该课程的学习网站和微课资源库让学生自主预习。课中采用信息化的混合式教学法、项目驱动法等多种方法相结合的形式来激发学生的学习兴趣，并且利用微课资源库来突破教学难点；在教学效果上采用多元评价检测方法，让学生体验成功的乐趣；最后老师进行归纳总结，进行知识拓展，延伸学生的知识面。使学生在不知不觉中实现知识的传递、迁移和融合。

【学法分析】

学生是学习的主体，教师是组织者和引导者，引导学生学会学习的方法，才能构建有效的课堂。在教学过程中我注重学生自主学习能力、体验探究能力和总结反思能力的培养，转变学生的学习方式，由之前的‘我学会’变成现在的‘我会学’。

【教学过程---课前预习】

随着互联网的普及和信息化技术在教育领域的应用日益广泛，为了更好的突出学

生在学习中的主体地位及教师在教学过程中的主导地位，在课前预习阶段老师通过QQ、微信群发布项目任务书，同时在课程网站、微课资源库中提供了课件、教案和教学视频，提供在线的辅导，要求学生完成课前预习调查问卷，教师能够提前了解学生在预习过程中遇到的困难，可以有针对性的给予有效的辅导，同学之间的相互交流更有助于促进学生知识的吸收内化过程。

学生自主预习网站

【教学过程---课中教学】

课中主要由情境设置、小组讨论、项目设计、展示点评和知识总结5个步骤完成整个教学过程。

一、情境设置引入本次课内容（10分钟）

1)让学生观看flash动画，让学生观看flash动画，深夜加班的程序员由于之前使用表格布局的网页，导致网页后期修改困难，而无法按时完成老板交给的任务，陷入崩溃状态。如何寻求新的布局方法来解决这个问题呢？进而引入本次课的教学内容，用DIV+CSS布局网页。

【设计意图】通过flash动画情景导入引入本次课的教学内容，可以激发学生的学习兴趣，让学生能带着期望带着学习热情进入到内容的学习。

二、混合式教学法突破教学重点（30分钟）

结合学生完成的课前预习调查问卷结果的反馈，设置课堂测试题，学生使用蓝墨云班课APP完成答题，并得到课堂测试的结果。根据测试结果，教师使用蓝墨云班课APP 的“摇一摇”提问功能，有针对性地提问、答疑、讲解知识点，实现了突破教学重点的目标。

三、任务分解、微课库化解难点（80分钟）

根据具体项目要求，学生分小组进行任务分解，每个小组经过提问、讨论、研究之后确定任务分工和最终的设计方案。分工明确之后，每个同学按照各自的项目分工进入设计状态。学生在设计过程中遇到疑难问题时，可以小组讨论、询问老师、也可以通过观看微课资源库来化解难点，多种方式供不同个性的学生选择，做到因材施教。

【设计意图】通过小组讨论让学生的思想进行碰撞，不懂的知识点可以得到组内同学的帮助讲解，同时新的想法和创意得到激发，也可以通过观看微课库资源来化解难点。

1、学生完成基本任务

学生遇到疑难问题时，可以通过以下方式解决。

1)询问老师——教师引导。

2)小组讨论——小组合作。突出重点，化解难点

3)观看微课——强化感知。

多种方式供不同个性的学生选择，做到因材施教。

2、学生完成拓展任务

1)欣赏往届学生作品——拓展思路，激发灵感

举一反三，融会贯通

2)创作独特个性作品——自主探究，有效迁移

开放式的任务照顾了学生追求个性的需求，使大家都能充分动起来，爱上信息技术课的课堂。

四、展示点评（30分钟）

每个小组选出一名同学到前面进行作品展示，讲解作品的设计思想、突出亮点，学生自评后请其他组的同学对其进行点评，提出存在的问题、需要改进和完善的地方，最后老师对作品进行点评、总结、评分。同时邀请企业老师在线参与整个评比过程，并对后期需要改进的地方予以讲解和指导。最后，评选出本次课的最优作品，奖励最佳团队，旨在激发学生学习兴趣，树立学习榜样。

学生完成任务后，首先通过自评，组内互评，每个小组将自己组的作品进行展示。再其他组同学们和老师共同评价。我遵循的评价原则是：

1、及时评价：学生能在本节课后马上知道自己的作品的好坏，评价及时，对学生的学习积极性有很大的促进作用。

2、全面评价：对每一个作品都认真点评。若课堂上没有时间评价每一个作品进行点评的话，课下一定完成，在下次课之前展示给学生。

课后，我将学生的作品上传到该课程的学习网站上，以投票的形式让同学们选出自己最喜爱的作品。