《Web前端技术》课程图文混排单元教学设计

康英健 马蕾

【摘要】本文体现职教以实际操作为中心的特色，以实际动手操作完成任务带动理论课的学习。老师采用案例活动教学，学生采用研究性学习，利用任务驱动法，在任务的完成过程中，学生自主创新设计，并采用研究性学习来激发学生自主学习，突出锻炼学生综合知识与综合能力的实际应用。

【关键词】 任务驱动法 研究性学习 动手操作 自主学习 创新设计

一、案例教学活动课的教学理念及设想

《Web前端技术》是计算机专业学生的必修课程，本课程采用任务驱动法，在任务完成的过程中，采用研究性学习来激发学生创新的自主学习。前期铺垫以够用为原则的基础知识，以实际动手操作完成任务带动相关理论的学习，抓住大、中专学生以形象思维方式为主的特点，在教学中以实际操作作为切入点，逐渐激发带动学生的各项智能的不同程度的提高。通过学生在完成任务时的自主设计，创新设计，引发学生的发现欲望和想象思维，在学生自主不断的发现探究过程中，激发学生的潜能，达到开启智能提高学生素质的目的。

二、案例教学活动课的教学设计思路与教学模式

整个教学体系分为基础篇和操作篇两部分。基础篇为以够用为原则的基础知识铺垫。操作篇中Html，CSS，JavaScript部分的内容都围绕着任务进行，任务以案例的形式出现，且彼此相关，自成一体。（表1）

学生在案例教学活动课中通过完成任务，使其进一步体会所学知识的使用要领；利用任务驱动法，对学生个体进行多元智能的开发和提升；在任务的完成过程中，学生自主创新设计，并采用研究性学习，使得学生积极主动地投入活动。在学生与他人合作共事的基础上，进行自我管理和自我发展，并在安排自己的任务和解决问题的过程中使其综合能力得以提高。在学生自己不断的发现探究过程中，其创新思维得到了培养，归纳思维和演绎思维得到了锻炼，程序代码在学生的反复修改调试中得以反复应用，从而使所学理论知识不断巩固深化。

三、案例教学活动课的教学活动设计

1、学生组织

组织案例活动小组。案例活动小组采用学生自由组合，老师适当调整的方法来组成。

2、教学案例的活动设计

在《图文混排》课中，整体教学思路设计围绕一个环节两个行动展开：教学环节、教师行为和学生活动。具体的教学环节分为6步：

任务1：项目演示。展示完成的案例“三种人不宜长时间使用手机”，用分析组成元素的方法来引导学生探究学习，明确学习任务，激发学习兴趣。

任务2：搭建html基础页面。通过学生观察网页，讨论分析网页构成，编写html代码，完成基础页面的创建。

任务3：演示操作。把word中文本设置的知识点迁移到网页设中，便于学生对知识点的理解与掌握，学生观察老师的操作示范。

任务4：实际演练。每个学生根据自己的实际情况，从名片、贺卡、班刊封面三个难易程度不同的任务中挑选一个进行分析，并应用文本属性的设置方法，实现最初设计效果。

任务5：组内评价。从效果实现以及代码规范的角度对组内的成员进行相互评价。

任务6：归纳总结。梳理知识点，点评学生掌握完成情况，布置下课任务。

具体的教学实施如下：

（1）任务引入

√ 教师引导学生欣赏做好的网页，让学生体会美的效果，引起学生的学习需求。通过这个网页，让学生清楚认识到：文本和图片是网页的核心内容，是网页主要传达信息的方法。文字和图片的设计直接影响网页的整体效果。

√ 进一步进行网页对比，让学生观察使用CSS设定样式之后的效果与仅使用HTML定“结构”的页面效果的异同。

√ 通过两组不同的对比，让学生明确：Html可以对文本和图片进行简单的样式设置，但是不够灵活，文件较大，浏览速度慢；使用CSS对文本图片的样式进行设置更灵活、精确，更加丰富多彩，文件容积小，浏览速度快。

（2）完善html基础页面

√ 老师抛出任务，演示做好的网页，引导学生观察，引出本次的任务：如何利用css设计文字与图片的属性，设计网页的显示效果，要求学生能够具体指出对文本和图片进行哪些设置，培养学生的观察能力与语言表达能力，由于把word中图文混排的知识点迁移过来，直接降低了学习的难度，帮助学生轻松接受任务。

√ 具体实现步骤：教师下发基础的html页面，引导学生根据根据前面的分析思考如何修改页面；学生以小组为单位，观察讨论，统一思想，要实现演示效果，应该如何修改html页面，才能进一步进行css设计。要求学生根据讨论结果独立的修改基础页面。这个环节中要求学生要巩固掌握巩固掌握CSS选择器及其应用，严格遵守web标准与编码规范。

（3）操作演示

√ 教师针对每个实际设计效果，讲解相应属性名称、演示操作步骤，实现本节的知识目标。

√ 学生模仿操作完成整体设计，并在浏览器中正确显示出来。

√ 达到目的：学生能利用css设置文字的字体、字号、颜色等各种属性；能够严格遵守编码规范，应用html设计网页结构，css设计网页的显示效果，不断强化学生遵守开发web标准。

（4）实际演练

√ 老师布置训练题目，将德育教育与专业教育想融合，巡视学生开发过程，为学生提供必要的帮助。

名片设计：难度：低，规划自己的人生，为未来的自己设计名片，培养学生自信、自立的情感。

贺卡设计：难度：中 新年快到了，设计一份贺卡送给你的父母、老师，培养学生尊重长辈、热爱师长的情感。

班刊封面设计：难度：高 班级要创办一份班刊，请你进行封面的设计，激发学生对班级的热爱。

√ 学生领取任务单，明确案例要求，根据自己的程度，合理选择练习题目，要求学生：

能够独立进行 页面分析与设计，合理的利用资源

能够独立编写html代码，实现基础页面

能够合理设计文字与图片属性达到美化网页的目的，在浏览器中显示效果

（5）任务评价

（6）梳理总结

课后记：本次课程从演示案例入手，让学生观察发现要学习的知识点，帮助学生明确学习任务，获取相关的知识和技能。考虑到学生的层次参差不齐，改变了以往同一任务的做法，设计了名片、贺卡、杂志封面三个难易程度不同的任务，并引导他们把这三个任务分别和自己的人生，亲人，学校等联系起来，学生的兴趣浓厚，为整个学习过程奠定了感情基础。

在课堂教学中，采用案例教学，用分析组成元素的方法来引导学生探究学习方法，充分体现了学生的主体地位。在学生对各组成元素的制作方法有了大致了解后，让学生自主选择任务、协作学习。学生既能练习到相应的操作，又培养了学生的合作精神。由学生自己先做，发现问题时，教师引导学生解决问题，再由先解决问题的学生来介绍经验，这样学生更容易接受，知识点和技巧也得到了加强。最后学生对自己的学习情况进行了客观的自评。整体课堂气氛活跃，完成效果比较好。

四、结束语

在案例教学活动课的教学过程中，只要找到学习者的个体差异点，通过合理安排案例活动，让每个人找到自己的长处，确定好自己的位置，就容易使学生体验到成功的喜悦，进而转变为内在动力，努力学习、做事，自信心稳步提升，即使以后遭遇到挫折，也容易克服，从而为学生的终身发展打下基础。