1、 网页设计与制作网页设计与制作 使用 DIV+CSS 布局网页 2017 年广东省中等职业学校教师信息化教学大赛 1 网页设计与制作网页设计与制作网页布局网页布局 教教 学学 设设 计计 【课【课 题】题】 网页布局网页布局使用使用 DIV+CSSDIV+CSS 布局网页布局网页 【教【教 材】材】 网页设计与制作网页设计与制作 【授课班级】【授课班级】 中等职业学校网络专业二年级中等职业学校网络专业二年级 【教【教 时】时】 4 4 课时课时 【教材分析及学情分析】【教材分析及学情分析】 本次课采用的教材是国家十二五规划教材 网页设计与制作 ， 其中 DIV+CSS 布局 网页是重要的教学单
2、元。本教材内容通俗易懂、图文并茂，并且包含有丰富的信息化 实训案例。 本次课的教学对象为中职学校二年级学生，他们未来主要从事网页前端设计师的 工作，要求具备网页前端设计的能力。在本次课之前，我们的学生已经掌握了 Dreamweaver 网页设计的相关知识，具备了网页美工的基础，学生学习热情较高，喜 欢团队合作的探究学习方式，但学生自主创新能力不足，学习代码编写有一定困难， 因此本课重点讲解如何使用 DIV+CSS 布局网页的知识内容。 【教学目标】【教学目标】 依据本教材的内容，结合学生的学情分析，本着提高学生的知识水平及分析处理 能力为宗旨，我制定了知识目标、技能目标、情感目标相结合的三维教
3、学目标： 知识目标：知识目标： （1）学会 DIV+CSS 网页布局方式 （2）掌握 DIV+CSS 布局的定位方法 技能目标：技能目标： （1）能熟练使用 CSS 对网页中对象的位置精确排版； （2）灵活应用 DIV+CSS 进行网页布局； 情感目标：情感目标： （1）培养学生团队合作意识； 2 （2）提高学生责任感和职业素养； 【教学重点与难点】【教学重点与难点】 教学重点：DIV+CSS 网页布局方式、方法 。 教学难点：灵活使用 DIV+CSS 布局定位。 【设计意图】【设计意图】其中，使用 DIV 既是重点，也是难点，正确理解和学会这一知识点，是 学生灵活使用 DIV 布局网页的关键
4、。 【教学设计】【教学设计】 课前利用该课程的学习网站和微课资源库让学生自主预习。课中采用信息化的混 合式教学法、项目驱动法等多种方法相结合的形式来激发学生的学习兴趣，并且利用 微课资源库来突破教学难点；在教学效果上采用多元评价检测方法，让学生体验成功 的乐趣；最后老师进行归纳总结，进行知识拓展，延伸学生的知识面。使学生在不知 不觉中实现知识的传递、迁移和融合。 【学法分析】【学法分析】 学生是学习的主体，教师是组织者和引导者，引导学生学会学习的方法，才能构 建有效的课堂。在教学过程中我注重学生自主学习能力、体验探究能力和总结反思能 力的培养，转变学生的学习方式，由之前的我学会变成现在的我会学
5、 。 【教学手段】【教学手段】 教法：教法： 混合式教学法 项目驱动法 学法：学法： 自主探究 小组合作 【设计意图】【设计意图】在教学中我们采用混合式教学法、项目驱动法、同伴教学法、多元评价 法等多种信息化教学手段，充分体现“做中教，做中学”的职业教学特色，从而达到 良好的教学效果。 【教学过程【教学过程-课前预习】课前预习】 随着互联网的普及和信息化技术在教育领域的应用日益广泛，为了更好的突出学 3 生在学习中的主体地位及教师在教学过程中的主导地位，在课前预习阶段老师通过 QQ、微信群发布项目任务书，同时在课程网站、微课资源库中提供了课件、教案和教 学视频，提供在线的辅导，要求学生完成课前
6、预习调查问卷，教师能够提前了解学生 在预习过程中遇到的困难，可以有针对性的给予有效的辅导，同学之间的相互交流更 有助于促进学生知识的吸收内化过程。 【教学过程【教学过程-课中教学】课中教学】 课中主要由情境设置、小组讨论、项目设计、展示点评和知识总结 5 个步骤完成 整个教学过程。 一一 、 情境设置引入本次课内容（情境设置引入本次课内容（1010 分钟）分钟） 1) 让学生观看 flash 动画， 让学生观看 flash 动画， 深夜加班的程序员由于之前 使用表格布局的网页，导致网页后期修改困难，而无法按时完成老板交给的任务，陷 入崩溃状态。 如何寻求新的布局方法来解决这个问题呢？进而引入本
7、次课的教学内容， 用 DIV+CSS 布局网页。 学生自主预习网站 4 【设计意图】【设计意图】通过 flash 动画情景导入引入本次课的教学内容，可以激发学生的学习 兴趣，让学生能带着期望带着学习热情进入到内容的学习。 二、二、混合式混合式教学法突破教学教学法突破教学重点重点（3030 分钟）分钟） 结合学生完成的课前预习调查问卷结果的反馈，设置课堂测试题，学生使用蓝墨 云班课 APP 完成答题，并得到课堂测试的结果。根据测试结果，教师使用蓝墨云班课 APP 的“摇一摇”提问功能，有针对性地提问、答疑、讲解知识点，实现了突破教学 重点的目标。 5 三、任务分解、微课库化解难点（三、任务分解、
8、微课库化解难点（8080 分钟）分钟） 根据具体项目要求，学生分小组进行任务分解，每个小组经过提问、讨论、研究 之后确定任务分工和最终的设计方案。分工明确之后，每个同学按照各自的项目分工 进入设计状态。学生在设计过程中遇到疑难问题时，可以小组讨论、询问老师、也可 以通过观看微课资源库来化解难点， 多种方式供不同个性的学生选择， 做到因材施教。 【设计意图】【设计意图】通过小组讨论让学生的思想进行碰撞，不懂的知识点可以得到组内同学 的帮助讲解， 同时新的想法和创意得到激发， 也可以通过观看微课库资源来化解难点。 1 1、学生完成基本任务、学生完成基本任务 学生遇到疑难问题时，可以通过以下方式解决
9、。 1) 询问老师教师引导。 2) 小组讨论小组合作。 突出重点，化解难点 3) 观看微课强化感知。 多种方式供不同个性的学生选择，做到因材施教。 2 2、学生完成拓展任务、学生完成拓展任务 1) 欣赏往届学生作品拓展思路，激发灵感 2) 创作独特个性作品自主探究，有效迁移 开放式的任务照顾了学生追求个性的需求，使大家都能充分动起来，爱上信息技 术课的课堂。 四、四、 展示点评（展示点评（3030 分钟）分钟） 每个小组选出一名同学到前面进行作品展示，讲解作品的设计思想、突出亮点， 学生自评后请其他组的同学对其进行点评， 提出存在的问题、 需要改进和完善的地方， 最后老师对作品进行点评、总结、
10、评分。同时邀请企业老师在线参与整个评比过程， 并对后期需要改进的地方予以讲解和指导。最后，评选出本次课的最优作品，奖励最 佳团队，旨在激发学生学习兴趣，树立学习榜样。 举一反三，融会贯通 6 学生完成任务后，首先通过自评，组内互评，每个小组将自己组的作品进行展示。 再其他组同学们和老师共同评价。我遵循的评价原则是： 1、及时评价：学生能在本节课后马上知道自己的作品的好坏，评价及时，对学生 的学习积极性有很大的促进作用。 2、全面评价：对每一个作品都认真点评。若课堂上没有时间评价每一个作品进行 点评的话，课下一定完成，在下次课之前展示给学生。 课后，我将学生的作品上传到该课程的学习网站上，以投票
11、的形式让同学们选出 自己最喜爱的作品。 7 五、五、 知识总结（知识总结（1010 分钟）分钟） 每个小组点评过后，通过对比大家都对自己的作品有了新的认识，更深入了解了 后续的改进方法。最后老师对本节课的知识点进行归纳总结，并布置课后作业。 【设计意图】【设计意图】整个教学过程中坚持以学生为主体、以教师为主导的教学理念，变传统 单一的讲授为学生自主学习和合作探究的学习模式，在教学中构建了一种学生自主学 习、合作学习、生生互动、师生互动的创新教学模式。 【教学过程【教学过程-课后巩固拓展】课后巩固拓展】 我将学生修改后的最终作品上传到网站上进行交流学习，学生在课程网站上完成 老师布置的作业，在云
12、班课 APP 上完成本次课的满意度调查问卷，以便老师找出教学 中存在的不足，今后加以改进。学生最终需要完成项目评价总结表，对本次项目进行 自我评价总结，并留档保存。学生还可以自主学习网站和微课上的拓展资源，观看课 堂录像，通过各种信息化平台与老师互动，实现课后辅导，以此帮助学生对所学知识 进行巩固和提升，引导学生将所学知识转化为实际操作的能力和解决问题的方法。 8 【教学反思】【教学反思】 1、 利用课程学习网站的资源， 有效的帮助学生解决自学和复习中遇到的各种问题。 2、利用 flash 动画导入本次课的教学任务，激发学生的学习兴趣。 3、利用手机端的云班课平台，大大方便了学生课前预习、课中练习测验 4、利用线上线下相结合的混合式教学法、项目驱动法，突破教学重点。 5、利用微课资源库、同伴教学法，有效地化解教学难点。
