基于OBE理念《HTML5+CSS3网页设计》课程教学改革探析

(长江工程职业技术学院，武汉 430212)

随着互联网信息技术的广泛应用和发展，Internet已改变人们的工作和生活方式，成为人们获得资讯和信息交流的重要渠道。互联网技术的发展和普及，促使Web前端网页设计人才供不应求，Web前端开发工程师已成为具有发展潜力且社会需求量大的紧缺人才。

《HTML5+CSS3网页设计》是一门培养学生网站前端开发能力必修的专业技能支撑课程，是学生具备B/S架构项目开发能力的基础课程之一。传统教育教学模式中，该课程通常采取教学设计为课程导向的正向设计，即学生学完本课程后，被动的“适应”社会及企业等的外部需求，无法实现职业岗位零距离对接。成果导向是逆向思维过程，采用反向设计来进行教学设计，采用正向方式进行实施，充分保证了教育目标、教育成果的高度一致[1]。笔者试将OBE教育理念应用于《HTML5+CSS3网页设计》课程教学中，探索适合培养高职院校计算机应用技术专业学生的教学模式和评价体系。

1 OBE教学理念

OBE(Outcome-based Education)教学理念是由美国学者斯派帝(Spady W.D)于20世纪80年代提出的。OBE教学理念教学设计、教学实施的目标是学生最后所获得的学习成果，以最终学习成果反向设计课程体系的教育方法，先明确学生预期学习成果，反向进行设计教学环节，构建课程体系，确定教学的策略，组织教学活动，多元、梯次评价结果不断持续改进教学，帮助学生获得预期学习成果[2]。OBE理念作为以结果为前提，依据当前教育方针，结合学生学情，为学生提出十分明确学习目标，通过不懈努力，实现最终的教学目标。落实OBE理念进行教学过程中，首先，需要根据企业岗位需求正确认知教育工作的最终结果，然后在这个基础上反向进行教学设计与组织，打破传统以教师为主的单向理论课堂传输模式，将真实案例引入课堂，模拟企业场景，采用多种教学方法与策略，调动学生学习热情，使其主动地参与到教学活动中来，培养学生适应未来工作岗位实践能力，从而达到最终学习目标，进而提升教育教学的质量。

2 《HTML5+CSS3网页设计》课程教学现状

《HTML5+CSS3网页设计》是高职院校计算机大类开设的一门专业基础课程，在教学实践过程中，发现存在着如下现象。

2.1 教学对象

学生计算机基础较薄弱，学习兴趣差异对比明显，缺乏学习主动性，一般不加思考疲于应付地将老师提供的代码从上到下录入一遍，接受相关知识与技能比较被动，运行出现bug不知如何解决，对知识理解的深度不足。教学案例代码数量普遍比较多，为了能够让学生在有限时间里多学技能，教学中教师采取程序式的方式让学生写代码，从而导致学生不能够从多角度、多层次理解问题，知识不能内化，很多学生虽然学习了课程，但很难设计出让别人甚至让自己满意的作品，不能够充分表达并展示将个人的想法，独立解决问题的能力弱，网页开发过程中缺乏想象力和创造力。

2.2 教学方法

基本均采用案例驱动教学法，课堂上教师通过案例讲解使学生充分掌握相关的理论知识点，但是，传统的案例教学方法以教师教学为主，学生被动聆听；同时，每节课时间有限，进行分级-分层项目化教学有一定困难，知识点没法具体化，很难融合到大的项目中进行教学，没有真正做到工学结合，与现实应用脱节，无法满足就业的要求，无法灵活运用所学理论知识解决实际工作问题，使模式多流于形式[3]。

2.3 教材

通过对比对近三年出版的《HTML5+CSS3网页设计》教材研究发现，主要有两种类型：①理论知识点传统型，以讲解理论知识点为主，围绕相应知识点，设计少量案例，通过案例的应用说明知识点的含义及用法。这类教材主要侧重讲解理论知识，没有结合实际项目，实践操作性不强；②项目开发类型，此类教材通过实用性案例开发讲解知识点，设计新颖，但选取的案例相对独立，与真实完整网页项目开发有偏差，学生难以系统掌握网页项目开发的工作流程和方法[4]。

2.4 教学考核与评价

教学考核与评价单一，缺乏形成性评价，老师布置的学习任务学生是否及时、独立、高效完成，缺乏相应的评判准则。现有教学成绩评定按权重由平时成绩(20%)+实验成绩(20%)+考试成绩(60%)组成，虽然教师上课过程中对学生的平时成绩与实验成绩都有记录和考察，但最后在实际成绩评定过程中，仍以期末上机统一闭卷考试作为考试成绩，考试试卷统一，评价标准统一，侧重于横向比较，学生往往临时抱佛脚死记硬背知识点应付考试，不利于综合素质培养。

3 基于OBE理念《HTML5+CSS3网页设计》教学改革

在OBE教学模式的理论指导下，以产出为导向，结合《HTML5+CSS3网页设计》教学学情，对授课内容进一步优化，改进教学模式，构建网络教学资源库和新形态教材，改革评价反馈机制，创新人才培养模式，提高教学质量。

3.1 以岗位职业能力为导向，完善课程体系建设

在OBE教学模式的理论指导下，以产出为导向，结合Web前端开发工程师的岗位需求与工作过程为导向，打破了传统的学科体系的模式，以教学内容改革为核心，通过学生有体验感的实际案例项目(如网易、小米等)为载体导入课堂引导进行教学，通过情境设计、教学设计、编写学习任务书、教学资源开发等环节进行课程内容的开发，培养学生熟练掌握“DIV+CSS3网页布局设计”的能力，能熟练运用HTML5、CSS3进行网站前端开发，熟悉Web国际标准，确保教学内容设计合理，具有实用性和前瞻性，培养学生掌握Web前端分析、设计、布局、测试的职业能力，同时，培养学生具备自我学习、沟通交流、团队协作等综合职业素养。

3.2 采用“三化”课程教学方法，培养学生实践能力和创新精神

(1)翻转课堂信息化

改变传统教师“讲授”知识的课堂教学模式，采用“学习通”信息化教学平台进行翻转课堂教学。教师通过学习通教学平台，将课程教学课件、PPT、题库、视频、拓展学习资料等资源提供给学生，根据教学进展，开放学习节点，学生课前进行预习，在线完成学习任务。课堂上，教师将理论与案例结合，引导学生思考，通过案例演示方式循序渐进讲授知识重、难点，根据学生提出的疑问，通过小组讨论创设自由学习气氛的头脑风暴式教学，培养启发学生从多个角度去思考问题、解决问题能力。

(2)真实案例项目驱动化

OBE理念以学生预期达成的最终学习成果为导向，在实际教学过程中，选用贴近学生的真实案例分析知识点，对教学内容进行重构与设计，通过模拟制作真实网页页面，以此激发学生的学习兴趣，增强自信心，提高学生解决实际问题的能力，从而“零距离”无缝对接前端开发工程师岗位。教学实践中，基于OBE理念对CSS盒子模型教学内容进行了重构与设计。

①以“成果为导向”，笔者选取网易门户网站实时体育新闻为素材进行教学设计，以“制作网易体育新闻列表”案例开展教学，任务效果如图1所示。CSS盒子模型是网页布局的基础，是《HTML5+CSS3网页设计》课程教学重点，只有理解了盒子模型的概念，掌握盒子模型相关属性，才能更好地在网页中对各元素进行布局，呈现完美设计效果。为帮助学生理解、掌握盒子模型知识点，通过查看网易源代码方式，让学生理解盒子模型网页布局概念。

图1 “制作网易体育新闻列表”效果图

②以“学生为中心”进行分组讨论，如何利用CSS盒子模型对网页进行排版，引出教学内容盒子模型结构：内容content、内边距padding、边框border和外边距margin，盒子模型结构如图2所示。为帮助学生理解，选用生活中常见的手机包装盒为教具，直观演示盒子模型结构，然后，教师通过学习通flash动画、PPT方式对“CSS盒子模型”的概念、特点、属性进行讲解。

图2 盒子模型结构

教师通过极域教师端屏幕广播教学，在HBuilder软件中使用CSS盒子模型控制网页中的元素，进行“制作网易体育新闻列表”案例演示。部分样式源代码如下：

学生上机实操，教师巡回点对点指导，调试错误程序代码，对共性问题通过屏幕广播进行演示操作，答疑解惑。

③持续改进。通过学习通教学课程评价、QQ或微信二维码课程信息反馈收集表、学生学情座谈等方式，了解学生知识掌握情况，对存在问题进行教学反思，修改教学内容设计，改进教学手段和方法，提高教学质量。

(3)团队协作化

具有良好的沟通和团队协作能力是Web前端工程师必备素养，通过模拟企业团队开发模式，培养学生团队协作精神。学生自我评估，根据个人能力自行组成团队进行学习与项目实训。在实训过程中，根据现实项目设计开放性作业和小项目实训，需要小组成员进行团结协作，小组长根据每个成员的特点分配项目任务，各小组成员收集、查阅资料，解决开发过程中出现的实际问题，制作完成不同页面及文档，从而配合完成整个实训项目任务。通过团队协作化的教学方法，学生的自主学习能力得以提升，培养了良好的团队合作精神，极大地提高了学生参与度与学习兴趣。

3.3 构建网络教学资源库和新形态教材

(1)持续化建设课程资源

本课程自开设以来，不断建设和完善课程资源，资源包括课程介绍、课程标准、师资队伍、教学大纲、实训大纲、授课计划、教学进度、作业、课件、考试大纲、参考素材、学生作品等，按照工学结合的理念更新课程教学体系，解决传统理论课程与就业岗位对接问题。

(2)案例驱动式教学，构建教学单元资源

教学过程按照案例驱动式教学，实现“理实一体”“教学做合一”的教学模式，每一个教学单元分为教学设计、任务单、重难点、演示文稿、教学视频、电子教案、考核评价、必备知识、作业习题、学习指南等多个子类，便于学生课后复习。

(3)丰富的素材和软件

为方便学生课后学习和提高，建立丰富的素材资源库，共享好用的应用软件，拓展学生掌握一些课堂上不讲授的技能，制作出更专业的网页效果。

(4)体现职业教育特色的高职高专新形态教材

基于OBE理念，针对高等职业教育教学的特点，开发具有鲜明高职特色高水平的示范性教材，采用真实项目编写教材，以项目为中心组织教材内容即教学内容按照“总体项目—分解任务—实践知识—理论知识—一般抽象理论—拓展知识—练习与实训”的模式展开，以真实项目案例教学为载体，通过实际案例的制作过程讲解和实践体验，帮助学生理解和掌握相关知识点。

3.4 以职业院校教学工作诊断与改进为契机，改革评价反馈机制

新形势下，推进职业院校教学工作诊断与改进是提升职业院校人才培养质量的重要举措。落实诊改工作常态化，提高Web前端开发工程师人才培养质量，基于成果导向理念，对《HTML5+CSS3网页设计》课程教学效果评价反馈机制进行改革十分必要。依据教学工作诊断与改进平台数据分析掌握学生学习状态，《HTML5+CSS3网页设计》课程采取形成性评价与终结性评价相结合的多元化考核方式，详见表1，强调对学习过程、学习结果评价。

表1 《HTML5+CSS3网页设计》课程考核形式与内容

具体教学过程中，可以采用小组项目汇报方式，各小组推选一名同学组成评审小组，以学生为主导对项目进行提问、评价，教师进行知识归纳、拓展，实现“学生+教师”相结合评价机制。同时，教师可以制作QQ或微信二维码调查问卷、教学信息反馈座谈会等方式倾听学生的心声和建议，及时调整教学设计与考核方式，不断总结，积累经验，做到持续改善。

3.5 加强校企合作，创新人才培养模式

基于OBE理念，创新人才培养模式，加强与地方企业、龙头企业联系，与企业建立教学合作，开展定单式教学，成立校外教学实训基地，诚邀企业具有扎实理论水平和丰富实践经验的工程师担任专业的教学顾问和兼职教师，深度参与本课程的建设，收集课程资源，开展课程教学；鼓励教师承担企业的培训项目和实际开发项目，开展横向项目研究，服务地方经济，紧跟新技术的发展，与企业工程师互通有无，相互学习。通过校企合作共同育人模式，师生接触到网页开发真实案例，切实了解信息技术行业对人才的需求，避免出现人才培养与社会需求脱节现象，培养适应市场的Web前端开发高质量应用人才。

4 实践效果

OBE教学模式的理论指导，以产出为导向，应将知识、能力、素质等多方面的学习产出进行综合评价，注重学生学习态度、学习过程等形成性评价，强调学习过程的重要性，同时，学生根据个人自身专长，按5-6人组成小组，随着课程不断深入的学习，确定期末综合项目主题，要求每名学生独立完成一个页面，并使用外部样式表实现相应布局和特效，最后一节课进行小组项目PPT汇报，评审小组通过对页面的整体布局、功能、特效等多方面进行提问与评价，教师点评、归纳、总结，将知识进行拓展。通过笔者所在学校多个教学班级的实践，学生不仅灵活掌握了《HTML5+CSS3网页设计》的理论知识，而且学生在制作ppt、讲解内容、团结协作等各方面能力得到锻炼，综合能力得到提升。

5 结 语

采用OBE理念对《HTML5+CSS3网页设计》进行课程教学质量改革，以学生最终学习成果为目标，分析教学现状，优化构建课程体系，改革教学策略与方法，创新课程评价方式，培养学生适应未来工作岗位的能力。学生反映在这门课程的学习中不仅深入理解了《HTML5+CSS3网页设计》的基本知识，还锻炼了制作ppt、独立讲解及团队协作的综合素养。经过教学改革与实践，本课程基本取得了预期的教学成果，具有一定的示范作用。