基于项目化教学的“网页设计与布局”课程教学研究

李艳霞，杨 威，李翠红,2

（1.山西师范大学教育技术与传媒学院，山西临汾041000；2.山西信息职业技术学院山西临汾 041000）

基于项目化教学的“网页设计与布局”课程教学研究

李艳霞1，杨 威1，李翠红1,2

（1.山西师范大学教育技术与传媒学院，山西临汾041000；2.山西信息职业技术学院山西临汾 041000）

文章以高职计算网络技术专业网页设计与布局项目化课程为例，将中国传统文化（书法文化）网站建设为项目载体融入该课程教学中，以职业活动为主线，通过项目展示、项目分析、项目实施、项目拓展、项目评估、项目实战等过程，实现了对知识的直接迁移，使学生获得与工作过程相关的职业能力，同时弘扬了中国传统文化，对提高教学质量进行了有益的探索。

中国传统文化；网页设计与布局；工作过程；项目化课程

一、引言

近年来，项目课程在高职教育中得到广泛运用和推广[1]，在实施过程中，项目课程以职业岗位工作过程为导向，以培养学生职业能力为核心。根据高职计算机网络技术专业人才培养方案，Web应用开发方向，其中Web前端工程师是核心岗位之一，要求学生必须掌握基本的Web前端开发技术、网站性能优化，学会运用各种工具进行辅助开发，并且熟悉网站后台开发和应用的能力。网页设计与布局项目化课程（HTML+CSS+DIV）是计算机网络技术专业核心基础课程。教职成[2015]6号文件中，提出要把中华优秀传统文化教育系统融入课程和教材体系，书法文化课是全院第二课堂一门拓展性课程，将书法文化网以工作过程融入网页设计与布局项目化课程中，激发了学生的学习动力，同时弘扬和传承了中华传统文化[2]。本项目化课程，集专业知识与文化建设一体化的平台，提升了学生的传统文化素养，促进了学生高效的学习网页设计与布局项目化课程。

二、项目化教学课程内容设计思路

该项目课程是依据“计算机网络技术专业工作任务与职业能力分析表”中的Web前端工程师工作领域设置的。网页设计与布局项目课程，采用了循环式模式[1]，课程内容从简单到复杂的多个项目进行组织，每个项目都包括该课程全部任务所构成的完整工作过程，且其与企业工作过程基本一致。其中“书法文化网站”建设是其中的一个项目，该项目教学内容选择主要根据Web前端工程师的工作任务及其所具备的职业能力的培养要求，注重对学生职业能力的训练，理论知识的选取紧紧围绕“书法文化网”建设中制订的工作任务完成的需要来进行，同时还考虑高等职业教育对理论知识学习的需要，并融合Web前端工程师资格证书对知识、技能和态度的要求以及学生在工作过程中所对应的工作岗位，本项目设计以构思设计（内容分析）、原型设计、页面设计、页面制作、动画制作、技术扩展、发布测试为线索来架构。教学过程中，通过仿真模拟的网站开发案例和校内实训基地、网站开发工作室作为辅助，以真正做到教、学、练结合。

“书法文化网站”项目是以山西信息职业技术学院“书法联谊协会”工作流程进行建站，界面设计要以传承中华书法文化艺术为主旨，渲染校园文化艺术气氛，提高广大会员的书法技能，以达到修身养性的目的。本项目属于课程网站建设范畴，经过对项目的分析，需开发静态页面站点，项目主要采用HTML+CSS+DIV技术布局本站点，后期采用CSS技术扩展来维护站点，决定本项目分解为7个分项项目来完成，通过书法文化网站建设学习如何设计与布局页面，基于项目化教学内容设计如表1所示。

三、基于项目化课程教学具体实施

“书法文化网站”建设是一个在教师指导下由学生独立完成的项目。根据学生实际及教学任务，项目实施过程分为六个环节，分别是项目展示、项目分析、项目实施、项目拓展、项目评估、项目实战。项目实施以小组为单位，全班分成若干小组，每个小组设置一个项目部，1名组长，负责分工、协调、组织讨论，每个项目部设置多个角色，每个角色对应指定的工作岗位，每个小组3-6人，每人1台配备电脑（可自备），以保证实际的工作需求。在实际运行过程中，通过合作互助学习，让接受能力较强的学生对接受能力较弱的学生进行帮扶，充分发挥学生学习主动性，锻炼学生团结互助品质，同时每组组员工作岗位迭代循环角色互换，让每一个学生体验到真正工作过程的环节，促进发展，实现知识迁移。

表1 基于项目化教学的内容设计

1.项目展示，激发动机。提供真实的企业网站，将页面的颜色、布局、内容结构、功能直观展示给学生。比如协会简介、新闻动态、书坛人物、书法研究、鉴赏收藏、协会风采、作品展示、书法论坛、会员注册模块，明确本项目的具体工作任务，同时引导学生思考，使其尽快进入工作状态，为项目化教学的实施做好准备。本环节让学生对网站进行赏析，对网页的布局、色彩搭配形成初步印象，提高学习兴趣，激发学习动机，让学生明确本项目是解决“做什么”的问题。

2.项目分析，任务细分。师生共同通过项目分析了解网页设计以及网页布局的组成，制定工作任务，下发任务单，包括具体的任务描述，任务目标，具体实施步骤，要求项目设计过程记录清楚，设计中出现的问题，如何解决要有详细的记录，以及提供项目中所需教学资源，明确页面中版块设计。除此之外，在设计网页时，更要关注页面的内容是否满足用户需求。本环节以教师引导，学生思考为主，通过细分工作任务，收集整理页面中模块素材，为项目实施做好充分准备。

3.项目实施，辅导操练。在项目实施过程中，学生可以自带设备（BYOD）进入理实一体化主动学习教室。学生明确工作任务的操作流程及其实现方法，教师提供指导，引导学生独立完成，同时学生观察、思考，以小组为单位进行项目实施。以教学内容中安排的7个分项项目进行对整个项目的实施，以“书法文化网站”建设为线索，在每个分项项目的具体工作任务的实施过程中，以“学生为主体、教师为主导-＞教师指导、示范、鼓励-＞学生理解、操练、反思和巩固-＞学生主动完成工作任务”迭代循环的教学过程，最终完成了整个项目的设计。实施中对课堂提问、学生出勤情况、工作任务单与拓展任务单日志完整情况等作详细的记录作为学生的考评依据。本环节是学生具体实施项目的过程，师生共同完整的完成了整个项目，教师放手操练，请优秀学生协助未完成的学生一起进步，增强学生的自信心与学生主动性，培养学生团队合作精神。

4.项目拓展，变式操练。每一个工作任务的完成，学生对新获得的知识技能有一定的感性认识，教师以网页的形式呈现新问题的具体工作，同时下发拓展任务单，进行变式训练，学生反思、巩固、进行自主拓展，课后自主探索，寻求解决问题的方法。本环节让学生们把新获得的知识技能迁移到日常生活中，学以致用，达到融会贯通之效。解决“为什么”的问题。

5.项目评估，总结归纳。通过学生自评、学生互评、教师评价、学生完成工作任务程度、项目答辩、成果（网页）的审核等方式，对学生完成每个工作任务根据课程标准中制定的评分标准进行多方位的考核[4]。每个工作任务，师生共同归纳出本工作任务实现所需要的知识点，学会辨析知识应用的正误，提炼出工作任务中求解过程中的关键操作和解决问题的技巧。同时，教师对典型作品与学生共同分析，肯定成绩，同时指出存在的问题以及改进的方法。本环节通过自评、互评，师生共同总结，培养学生分析能力和自我反思能力，解决了“做得怎么样”的问题。

6.项目实战，实践探究。为了让学生对所学的知识进行拓展和应用，在学生课后的拓展项目中，学生灵活应用所获得的新知，通过团队合作以学院 “摄影社团”网站、“剪纸社团”网站、“清风棋社”网站进行了拓展项目实战，素材资源由自己去收集、整理、加工，最后以小组为单位进行项目比赛，不仅培养了学生的综合知识应用能力，而且培养了团队意识，自我学习能力，促进学生的职业能力发展。本环节主要解决“知识技能拓展应用”的问题。

四、结束语

通过采用基于学生生活实际的真实产品建站流程进行了本项目化课程的教学应用，同时融入了中国的传统文化元素，提升了学生网页设计创新思维，促进了学生综合职业能力发展，满足了岗位能力需求。在以后教学实践中，尝试多专业合作，社会设计项目等引入课堂，使学生在校期间获得实际技能，适应社会人才需求。

[1]李雄杰.职业教育理实一体化课程研究[M].北京:北京师范大学出版社,2011:1-70.

[2]沙聪颖.中国传统文化融入高职校园文化建设实践探索——以大连职业技术学院为例[J].辽宁高职学报, 2013(11):14-16.

[3]劳飞.基于项目化教学的“网页设计与制作”课程改革与实践[J].教育与职业.2014(29):139-140.

[4]杨向东,黄小瑞.教育改革时代的学业测量与评价[M].上海:华东师范大学出版社,2013.10:109-116.

[5]温谦,周建国,练源.网页设计与布局项目化教程(HTML+CSS+DIV)[M].北京:人民邮电出版社,2014: 146-201.

（编辑：郭桂真）

G712

A

：1673-8454（2017）04-0016-03