郑 超 ，郑 蕊 ，田美艳 ，林宗朝

（1厦门华天涉外职业技术学院 福建 厦门 361100）

（2厦门市同安职业技术学校 福建 厦门 361100）

1 引言

国务院出台的《国务院关于加快发展现代职业教育的决定》一文中指出，建立以职业需求为导向、以实践能力培养为重点、以工学结合培养专业技术人员的培养模式。推动课程内容与职业需求对接，教学过程与工作过程对接。在这种工学结合的教改理念的指引下，计算机专业的课程改革已然成为各高职院校积极探索与研究的重要课题之一。

2 课程教学存在的问题

目前，各高职院校该课程教学存在的问题如下：（1）偏局部轻整体。课程内容被分成几大独立的知识模块，每个知识块以独立的案例进行实训。学生完成其中的一个案例只能掌握独立的知识点，并不能自主完成知识的扩展和衍生，以及理解知识块之间的衔接和递进。（2）忽略训练职业岗位的工作过程。学生只掌握了其中的工作技能，并不了解该对应岗位的具体工作流程以及具体内容，进而培养出的学生无法满足现阶段计算机前端开发人才岗位的需求。

3 课程对应目标岗位分析

通过对国内大中城市的人才招聘信息进行分析，从数万份招聘信息中筛选出了与高职院校《HTML5 UI设计实训》课程相关的工作岗位有：web前端开发人员、HTML5前端开发工程师、HTML5/JS前端开发工程师等，将技能要求相似的岗位合并分析后，我们得到课程对应岗位所需要的2个技能目标。

（1）知识目标：学习和掌握作为一线前端UI设计师需要掌握的html5、CSS样式、Javascript脚本等核心知识。

（2）能力目标：具备从最开始的客户沟通，网站页面布局剖析，到在浏览器中呈现界面布局，到最终完成交互功能实现完整站点，做前端设计师的能力。

4 课程教学模式改革思路

4.1 课程设计思路

《HTML5 UI技术实训》该课程应该以职业岗位工作过程为主线，通过以上对课程对应目标岗位分析，再根据学生的学习规律发布教学案例，形成与工作过程相对应的课程及专题组合，包括内容和顺序[1]。

该课程的主要任务是以培养一线前端UI设计师岗位为目标，根据高级HTML5编码，中级CSS样式设计，初级Javascript脚本、知识、能力要求为目标。因此设计该课程为一门基于工作过程的项目化课程，以工作项目为导向的任务驱动的教学方式，用以激发学生的学习积极性。

4.2 课程内容设计

《HTML5 UI技术实训》课程的教学内容与其他传统的学科课程相比具有鲜明的特点：课程的教学过程可以有较强的操作性和实践性。在教学内容方面，设置以就业为导向，将学生以后毕业到相应行业就业可能遇到的问题，纳入到教学内容中来，突出“学以致用”[2]。

为了适应网页应用的变化，改革后的课程引入兼容不同设备及屏幕的响应式网页开发内容[3]。课程内容的章节以模拟的实际项目的工作进度来划分“布局分析─界面局部设计─样式设计─交互性设计─汇总站点”，让学生更好地体验工作过程。

4.3 教学模式与方法设计

以职业岗位工作过程为主线，根据确定的学生已有知识状态和学习特点，分析学生已有知识到目标之间应掌握的知识与技能，让学生以团队的形式合作完成相应的工作任务。

小组合作实施模拟项目工作，应用的基本过程是遵循着“以小组为单位接收教师发放的整套网站的psd原图─以小组为单位进行布局分析─学生进行自主项目分工─模拟工作模式下制作网页─以小组为单位验收网站”的基本流程。

以教师为引导，学生为主体的模式，可以有效地调动学生的学习积极性和主动性，进而引导、吸引、集中、维持学生的注意力，做到知识有效迁移，学生通过任务引领实现对所学知识的构建。将教学内容与教学方法、教学手段相结合，同时还实施发现探究教学、自我教学单元、理论实践一体化教学、小组协作型教学发等方法。

在教学过程中，教师相当于实际工作中的售前工程师，通过与客户的沟通，确定了整个网站所需要的模块数、模块名称以及各模块所需要实现的功能。同时也是网页设计师，提供设计图稿并对最终浏览器呈现的效果进行把控，这个“最终呈现的效果”包括站点的LOGO、背景、字体大小、版面布局、浏览方式、交互性等诸多要素。现在很多设计类网站可供下载网站模板，教师可以利用网站资源，实战教学。选取一组学生的知识储备能够驾驭的，页面模块完整的，网站的整体形象符合现代企业需求的网站设计图稿作为案例样稿及任务的目标模板。

学生是工作过程的主体，相当于H5前端设计师、web前端设计师等，将教师发布的案例样稿组作为最终网站呈现的效果图。学生被划分为多个小组，以团队的形式接收设计任务。首先以组长为代表作为前端设计师与老师沟通，并通过查看样稿，了解任务要求以及应该做的哪些知识的准备。随后组长负责首页模块，其余组员各自选择1个模块页面，由组长组织小组讨论剖析各个模块页面的布局，并画出相应的结构布局图。随后各组员将自己负责的页面，使用图片处理软件把素材图通过裁剪处理等方法保存到站点文件夹下的图库里。组长负责的首页部分特殊处理，将头部和底部的HTML、CSS、JavaScript独立出来，作为整个网站的通用模块。其余组员将自己负责的页面主体部分，根据小组分析的网页结构布局图，通过选择对应的HTML5标签，将页面上的文字、图片、表格等结构搭建起来，选择CSS样式将页面上的背景、鼠标指上去的效果、定位等设计出来，最后使用JavaScript以及衍生出来的各种技术、框架，完成创建Web页面的前端界面。最后由团队合作整合各个模块的主体内容，加上共用的头部和底部，并呈现出来，实现互联网产品的用户界面交互。作品完成后，组长组织全体组员根据浏览器最终呈现的网站界面效果，回顾整个过程所运用的知识，进行集体消化吸收，并积累经验教训，进而尝试向更专业更简洁的工作过程转化。

4.4 考核方式设计

改革后的考核方式应该明确了任务目的，各组成员根据教师提供的网页设计稿，编写自己制作的功能模块，并画出结构布局图，由组长汇总提交给教师，作为前期的网页布局剖析工作总结。教师通过文档结构了解学生对网页布局分析的是否到位，并结合最终完成的网页效果给出相应的分值，作为考核的成绩。

由于这门课程是以培养学生实践能力为主要目标，改革后的考核方式，通过项目考核的方式真正考察学生对于知识的应用能力，从而真正培养出学生符合职业需求、实践能力强、工学结合的专业技术能力。

5 结语

通过“基于工作过程导向”教学模式的探索，建立以职业需求为导向, 以实践能力培养为重点,将“工学结合”很好地融入到教学训练的过程中。在实施任务的过程中，学生了解了工作的过程，实现了知识的构建、技能的提升、职业素养的养成。做到课程教学内容与职业标准对接，教学过程与实际工作过程对接，进而提高学生的就业能力。