基于“任务驱动、项目导向”的《CSS+DIV网页样式与布局》课程教学改革研究

摘要：本文针对传统的高职《CSS+DIV网页样式与布局》课程教学中存在的问题进行了教学改革研究，探索了比较实用的“任务驱动、项目导向”的教学方法，以期培养具有劳模精神、工匠精神、敬业精神的“知识型、技能型、创新型”的高素质人才，提升学生就业的核心竞争力。

关键词：任务驱动;项目导向;理实一体化;教学改革

中图分类号：TP311        文献标识码：A

文章编号：1009-3044（2019）22-0115-02

开放科学（资源服务）标识码（OSID）：

1 《CSS+DIV网页样式与布局》课程教学改革的重要性

随着社会的进步与发展，传统的教学模式、教学方法已经很难满足毕业生就业的岗位需要。一方面大量的毕业生无法找到满意的工作，另一方面，用人单位无法招聘到符合岗位需求的应用型、技能型职业人才，人才供需两方无法匹配。《CSS+DIV网页样式与布局》课程是应用性极强的课程，也是高职电子商务专业、网络营销专业、计算机应用专业、网页设计专业的核心课程。目前，符合Web标准的“HTML+CSS”网页设计方式已经取代了传统的网页设计方式，其中“CSS+DIV”的网页布局方法是每个网页设计人员必须掌握的核心技能。为了能使《CSS+DIV网页样式与布局》课程从传统的偏重理论教学转向注重职业能力培养，让学生兴趣学习、学以致用，提高学生的实际操作能力，必须对《CSS+DIV网页样式与布局》课程进行教学改革。

2 传统《CSS+DIV网页样式与布局》课程教学中存在的问题

2.1忽视了学生的主体作用

课堂教学的主体是学生，学生只有学习到能用、够用的知识和技能，才能说是有效教学。而傳统《CSS+DIV网页样式与布局》课程教学过度的强调理论教学，任课教师花费了大量的时间、精力介绍网页制作的知识点、难点、模型及理论概念，甚至变成了单一的理论教学，忽视了学生的主体作用，忽视了学生的参与性。

2.2忽视了实践的重要性

在传统的《CSS+DIV网页样式与布局》课程教学中，重点在基础知识和原理的灌输，没有更多的时间让学生实践，课下的学生几乎也不会自觉地去实际操作或实战。这种重理论轻实践的传统教学方式，就会导致“哑巴英语”的现象，培养出的学生“高分低能”、不能设计网页，无法满足企业岗位技能的需求。

2.3忽视了核心技能的培养

在传统的《CSS+DIV网页样式与布局》课程教学中，任课教师没有把学生的必备的核心技能通过实践锻炼、理实一体化、反复实训的方式灌输到学生的综合技能中。培养出来的毕业生几乎不具备本专业的核心技能，无法实现零距离上岗。

2.4忽视了学生综合素质的提升

当今，社会急需要具有劳模精神、工匠精神、敬业精神的“知识型、技能型、创新型”的高素质人才。在传统的《CSS+DIV网页样式与布局》课程教学中，没有把学生的劳模精神、工匠精神、敬业精神、团队精神、集思广益的分析方法贯穿到课程中，致使学生毕业时单打独斗、思维局限，不利于学生的素质教育，也不利于学生的就业与创业。

2.5课程考核方式不科学

传统的《CSS+DIV网页样式与布局》课程考核内容主要是纸质试卷，以理论考核为主，弱化了学生的技能考核、淡化了学生的实际操作能力。而这一点恰恰就是企业所急需的，应用型技能也是零距离上岗的必备条件。

3 基于“任务驱动、项目导向”的《CSS+DIV网页样式与布局》课程教学改革

3.1强调学生的主体性、参与性

《CSS+DIV网页样式与布局》使用最新的以任务为驱动为主的项目教学方式，将每个项目分解为多个任务，每个任务都要包括“任务说明”“任务实施”“支撑知识点”和“第二课堂”。“任务说明”可以使学生自觉的了解本任务需要制作的项目效果;“任务实施”是项目制作具体实施过程;“支撑知识”对学生动手实操中相关的要点和技能进行系统讲解;“第二课堂”是关联本任务的拓展，有利于学生的发散性思维和创新创意创业技能的培养。大多数任务实施都分为构建网页HTML结构和构建CSS+DIV样式两个部分，学生在完成项目实施过程中掌握了HTML结构和CSS+DIV样式的相关技能。这就调动了学生学习《CSS+DIV网页样式与布局》课程的积极性和参与性。

3.2增强了应用实践的过程

高职《CSS+DIV网页样式与布局》课程是高职电子商务专业、网络营销专业、计算机应用专业、网页设计专业的核心课程，对学生的理论知识、实践实训都有严格的要求。以“任务驱动、项目导向”的《CSS+DIV网页样式与布局》课程教学改革的核心点在于提高学生的应用实践性，打破传统的理论教学体系，重构新的符合学生学情的教学内容;系统地将知识点、技能点，通过任务驱动、项目导向整合起来，强化“职业技能”“理实一体化”，在“学中做、做中学，学中练、练中学”的环节中实现零距离上岗的要求，系统提升学生的技能素养。

3.3重视学生核心技能的培养

通过任务驱动、项目导向，可以把高职《CSS+DIV网页样式与布局》课程进行项目化改革，将教材分为十三个项目，根据每个项目的不同分为3到8个任务。打破传统教学体系，构建十三个系统系项目，如：项目一——网站开发入门（项目导读;学习目标;任务一：了解网站开发流程，任务二：动手创建Dreamweaver站点，任务三：动手制作简单的HTML+CSS页面）。项目二——HTML标签与CSS样式基础;项目三——使用CSS设置文字效果;项目四——使用CSS设置图片效果与网页背景;项目五——使用CSS设置导航栏;项目六——制作表格并使用CSS美化;项目七——制作表单并使用CSS美化;项目八——CSS与浏览器兼容问题;项目九——CSS标准流布局;项目十——CSS浮动布局;项目十一——CSS定位布局;项目十二——综合应用1;项目十三——综合应用2。

以项目一的任务三“动手制作简单的HTML+CSS页面”为列，就包括了任务说明、任务实施（构建HTML结构、构建CSS样式）、支撑知识点（HTML与CSS简介、HTML基础语法、网页的基本结构、静态页面与动态页面、网页的Web标准）等培养学生核心技能的要点。

以项目八——CSS与浏览器兼容问题为列，在项目导读时就给学生一种探索奥秘的感觉：在制作网页的过程中，最难的并不是各种各样的新技术，而是对浏览器兼容性的处理，对于W3C标准，各大浏览器的解读并不一致，这就导致对页面的显示各自不同，加上浏览器对CSS解析时存在各种BUG，使CSS与浏览器的兼容问题变得更加复杂，让我们一起解决这个难以解决的问题，包括：任务一——无序列表的兼容性;任务二——浮动在IE下产生的双倍距离;任务三在IE6中图片下方有空隙产生;任务四——3像素问题;任务五——浏览器不能自适应高度;任务六——margin值加倍问题。项目总结——浏览器兼容性介绍、解决浏览器问题的技巧;“第二课堂”——一起动手解决CSS与浏览器兼容问题，破解兼容、成为IT高手。

再以项目十三——综合应用2“制作本区域的旅游网页首页”项目中任务为列，包括了项目导读、案例分析，六个子任务（任务一——搭建页面整体框架，任务二——制作网页头部;任务三——制作主体内容的上面部分;任务四——制作主体内容的下面部分）;任务五——制作友情鏈接栏目;任务六——制作页面底部）。这极大地提高了学生的动手能力，激发了学生学习的积极性。

3.4提升学生的综合素质和核心竞争力

通过打破传统的教学体系，形成十三个项目，每个项目由任务支撑，这就会给班级学生划分为若干个实训小组。每个实训小组就会围绕任务驱动，一起做任务、一起讨论、一起创新。这样，偏重理工科的计算机学生就会在集思广益中提升自身的交际能力、沟通能力、团队精神、指挥能力、发散思维，进而提升学生的应用技能、综合素质和核心竞争力。

3.5建立科学的考评体系

积极组织网页设计专业技能应用大赛，探索“以赛代考”的考评体系。职业院校的毕业生最受企业喜欢的就是能零距离上岗的“职业能力”。围绕学生的就业问题，改革传统的《CSS+DIV网页样式与布局》课程考核体系，推行“过程评价占总成绩的30%”“网页设计专业技能应用大赛占总成绩的70%”，根据网页设计专业技能应用大赛的奖项细分（一等奖70分、二等奖50分、三等奖30分）。这种考评体系强化了学生实际操作能力、动手能力，也将极大地提高学生做任务和参加技能大赛的积极性。

4  结语

《CSS+DIV网页样式与布局》课程是一门应用性、实操性极强的重要课程，根据课程的性质、特点，在学情调查、教材处理、教学模式、教学方法、理实一体化、考核方式等环节进行了教学改革。要积极培养企业所渴望的具有劳模精神、工匠精神、敬业精神的“知识型、技能型、创新型”的高素质人才，就要切实提高学生的参与性、积极性、创新性。基于“任务驱动、项目导向”的《CSS+DIV网页样式与布局》课程教学改革使得学生能系统地掌握课程内容、项目实训、任务实施和岗位技能。通过任务驱动，提高了学生分析问题、解决问题的能力，提高了学生的团队合作精神和创新意识，有利于提高其综合素质和核心竞争力。

参考文献：

[1] 徐琴，张晓颖.CSS+DIV网页样式与布局[M].北京：航空工业出版社，2018.

[2] 欧阳芳.项目教学法在《HTML网页设计》教学中的探讨[J].电脑知识与技术，2010（11）.

[3] 柳永念.基于项目教学法的非计算机专业计算机教学改革探讨[J].教育与职业，2011（24）.

[4] 高慧.基于项目教学法《网页设计与制作》课程开发与教学设计[J].价值工程，2011（33）.

[5] 周溢辉，田源.“任务驱动法”在VFP教学中的应用[J].科技信息（科学教研），2008（2） .

[6] 田振坤.非计算机专业学生学习数据库课程的特点探析与对策[J].中国劳动关系学院学报，2013（4）.

[7] 韩秀枝，曹源.基于现代信息技术ASP.NET开发工具的高职教务管理信息系统的设计及应用研究[J].广西轻工业，2010（10）.

【通联编辑：唐一东】