论文部分内容阅读
摘 要：针对高校“网页设计与制作”课程在传统教学模式下存在的弊端，基于工作过程的教学思路，文章对项目教学法借助信息化教学平台在教学中的具体设计、方法和实施的效果进行实践性研究。学生在课堂上既学习了知识也掌握了企业网站开发流程，通过项目训练使得学生在校期间就积累了丰富的项目经验，真正实现与真实岗位对接。
关键词：工作过程;项目教学法;网页制作
Abstract：In view of the drawbacks of the traditional teaching mode of “Web Design and Production” course in colleges and universities，through the teaching ideas based on the work process，the article conducts practical research on the specific design，method and implementation effect of project teaching method with the help of information teaching platform in teaching. In the classroom，students have both learned knowledge and mastered the corporate website development process. Through project training，students have accumulated a wealth of project experience during school，and truly realize the connection with real positions.
Keywords：work process;project teaching method;webpage production
0 引 言
“网页设计与制作”课程是高校计算机专业的必修课，其主要的培养目标就是学生系统性地学习并掌握网站开发的理论知识，同时能够熟练进行网页的设计和制作，从而能有效应用于将来的网站开发工作中。随着计算机网络的普及和发展，市场对网站开发的人才需求会越来越大，作为高校，应更好地服务于经济发展和企业人才需求，需要使课程设置与工作岗位更为贴合，这样才能够培养出面向市场需求的技术型人才。
基于实际工作过程的项目教学是符合高职教育坚持“职业化、员工化”的教学改革思路，其人才培养目标和模式必须适应市场经济对人才的需求。可以激发学生的学习兴趣，提高学生的团结协作能力、分析和解决问题的能力，真正体现高职教育特点[1]。
在基于实际工作过程的项目教学过程中，教师不再是处于教学的主体，而是作为引导者，帮助及促进学生进行项目学习，学生在项目实践过程中发挥其学习主体性，在完成工作任务的过程中完成知识和技能的学习并解决实际问题[2]。
1 网页设计与制作课程概况
本文以计算机网络技术专业“网页设计与制作”课程中的表单设计与制作模块为例，以本校2018级计算机网络技术专业学生为教学对象，进行基于工作过程的项目式教学应用研究。
“网页设计与制作”是计算机网络技术专业的一门专业课程，开设时间是大一第二学期，共18个教学周，每周4课时，共72学时。本门课包含“Web前端开发工程师”岗位需求三要素：HTML、CSS和JavaScript，主要是为专业培养目标中的“网站建设”起支撑作用，和“数据库应用技术”“网站建设与开发”等课程结合，培养网站建设与管理方向高素质的技能型人才。
整个课程选取学生寒假实践承接的政府公益性网站“助农网”，将完整的“助农网”工作项目贯穿始终，包括：需求分析、网站策划和设计、网站建设与制作、网站部署和验收。按照项目开发流程结合教学实际，划分成5个子项目，本研究选取表单模块，依据Web前端开发工程师典型职业岗位，选取与本课程相关的典型职业技能，整合“助农网”教学项目，选取表单设计与制作这项典型工作任务进行实践性研究。
2 基于工作任务的项目教学实施
本文以表单模块为例，验证基于工作过程的项目教学是符合人才培养目标的，通过在课程中实施基于实际工作過程的项目教学法，促进学生在学习专业知识的同时能够做到更好地掌握岗位技能，对于培养学生们的职业能力和职业素养有很大的促进作用，充分体现出高职教育的职业化特点[3]。
2.1 教学目标
依据计算机网络技术专业人才培养方案中对“Web应用开发能力”的培养要求，结合“1+X——Web前端开发”职业能力标准中的技能要求，以及课程标准中的岗位目标，并结合学生学情，以政府公益性网站“助农网”的设计与制作为主线，整合教学内容，设定表单模块的三维教学目标如表1所示。
学生经过前期章节的学习，学生熟悉了网页项目的开发工具和开发流程;经过本章节前面知识的学习，学生掌握了表单标签（form、input、textarea、select）和属性、表单的布局和美化等基本知识。从学生的课前微课学习和理论测试结果来看，学生对于新课知识点掌握良好;从学生提交的原型图来看，设计稿基本能满足客户需求和用户体验，但综合应用能力较欠缺。经过一学期通识课程的学习，学生面临基础教育到职业教育学习模式的转变，具有职业理想，亟待形成专业认知和岗位认知，同时对先进的互联网技术很感兴趣，对新兴的信息化技术有较大的热情。
2.2 教学设计
本次教学选取来自政府公益性项目“助农网”的表单模块为载体，要求学生完成“助农网”四个表单模块的设计和制作。按照企业实际开发网站的流程：需求分析-网页设计网页制作-部署验收来策划教学内容，可以激发学生的学习兴趣，体验真实的职业情境。四个教学任务都按照实际工作流程来组织教学过程，基于实际的工作过程，以任务为驱动，对接技术活动全过程，优化教学环节。 2.3 教学内容
教师首先要和企业导师一起，结合企业中“Web前端开发设计师”的岗位标准，练习本章的教学内容，创设出本模块的典型工作任务——“助农网”四个表单页面的设计与制作，引导学生先明确网页需求，根据需求进行页面设计并熟练的制作出页面。根据学生的认知特点和知识点递进关系，将表单项目分解序化成4个典型工作任务，分别为登录表单、留言反馈表单、注册表单、商家表单。其中登录表单主要知识点为认识表单;留言反馈表单主要知识点为表单布局;注册表单主要知识点为表单空间选择;商家信息表单主要知识点为表单的综合应用。其设置包含了表单所需的知识点，同时加强了学生的实践操作过程，四个任务环环相扣，其流程有利于学生学习掌握相应知识点。
2.4 教学实施流程
在具体的教学实施过程中，利用超星学习通在线学习平台，4个表单子任务皆采用“线上+线下”混合式教学模式，整个企业任务贯穿课前、课中和课后，教学实施流程图如图1所示。
2.5 教学具体实施
根据教学内容分析和学情分析，确定教学目标和重难点。依据职业教育改革要求，践行“以学生为主体”的理念，以“助农网”真实任务为驱动，合理采用多样化教学策略和信息化手段，构建高效课堂。
课前老师通过学习通平台发布每个学习任务书，指定教学资源。初步了解表单任务。学生根据学习任务书，解读需求分析并设计原型图初稿，教师在在线学习平台发布微习题，课前测试如图2所示，根据平台测试结果，掌握学生知识准备情况，调整教学策略。测试结果分析如图3所示。
课中情境引入，通过查看常用网站的真实案例引导学生知道什么是表单。通过展示“助农网”表单空白页面明确本次课的任务，通过教师自制的Flash视频动画，演示表单工作原理，变抽象为形象，更好帮助学生理解什么是表单解决教学难点，学生进行挑战答题，寓教于乐，在答题的过程中掌握表单的相关概念和原理。教师根据测试结果进行有效的阶段性评价。
针对课前原型图初稿的问题，在学校教师的讲解指导下，帮助学生充分考虑客户需求和用户体验。再次解读需求说明书，帮助学生通过头脑风暴明确修改意见。并通过在线原型图工具修改完善原型图，并在线学习平台提交，学生对前后提交的原型图进行对比，评选出改进最大的组，并由该组上台进行汇报，其他组进行补充，教师根据各个任务原型图评分标准对各组提交的原型图进行评分，并提出进一步修改意见。团队成员对原型图进行进一步完善，通过反复对原型图改进，培养学生精益求精的工匠精神，提高页面设计的能力，突出教学重难点。
各组根据完善后的原型图，使用企业专业的编辑工具——Visual Studio Code，小组协作制作完成每个模块的表单，如图4所示，并提交至在线学习平台。通过真实的企业协同软件，体验真实的生产环境，真正体现工学结合;学生根据评分标准对各组提交的作品进行小组互评，票选出得分最高的一组，由票选出来的冠军组，上台分享协作经验;师生结合标准共同分析各组作品的优缺点以供改进，强化教学重难点。
课后根据评价指标以及教师的提出的修改意見，对作品进一步完善，并根据Web标准对作品进行优化。表单项目各作品的冠军组部署到阿里云供企业进行验收，其他组本地部署供教师进行验收。本地和云端部署网站都是计算机网络技术专业必备的职业能力，通过部署熟悉真实的生产环境，巩固学习成果，学生在教学平台上根据成员表现评分标准进行组内互评。教师及时掌握学生课堂情况以便下一次的教学优化。教师和企业导师对作品共同进行总结点评，明确达成客户需求和用户体验的目的。冠军组作品如图5所示。
3 教学实施效果
从学生调查问卷结果来评价分析。对于“网页设计与制作”课程，学生表现出了很大的学习兴趣，能够接受并适应基于实际工作过程的项目教学方式，对本门课程的教材、教学案例、实训操作等都比较满意，觉得课程非常有意义。通过本学期的课程学习，班级中58%的学生对于“网站设计和开发”工作岗位的工作流程有很好地了解，42%的学生基本了解，说明经过基于实际工作任务的项目教学过程，学生们对未来相关的工作岗位有了一定的认识，对整体工作流程有了一定的熟悉感，提高了学生对今后工作的适应能力，在毕业进入职场后能尽快的进入工作状态[1]，如图6所示。
4 结 论
本研究按照标准化工作流程组织了教学过程。学生按照真实标准化工作流程，采用角色扮演法沉浸式学习，在小组协作过程中，有效提升学生的合作能力、岗位操作能力和职业素养，通过不断完善作品，培养学生精益求精的工匠精神，目前，“助农网”已经部署到阿里云试运行。通过基于工作过程的教学思路，对项目教学法在教学中的具体设计、方法和实施的效果进行实践性研究，使学生掌握了课堂知识的同时也掌握了实际的工作流程，在校期间就积累了丰富的项目经验，未来能够更快更好的适应网站开发的工作岗位。
参考文献：
[1] 张洁.基于工作任务的项目教学在高职课程中的应用研究 [D].石家庄：河北师范大学，2012.
[2] 凌云.高职计算机专业教学引入项目教学法的实践 [J].职业技术教育，2007，28（11）：32-33.
[3] 朱鹏.基于就业能力导向的高职院校人才培养模式的创新研究 [D].长沙：湘潭大学，2015.
作者简介：黄莺（1984—），女，汉族，安徽马鞍山人，计算机教师，本科，学士学位，研究方向：Linux应用、计算机网络技术。
关键词：工作过程;项目教学法;网页制作
Abstract：In view of the drawbacks of the traditional teaching mode of “Web Design and Production” course in colleges and universities，through the teaching ideas based on the work process，the article conducts practical research on the specific design，method and implementation effect of project teaching method with the help of information teaching platform in teaching. In the classroom，students have both learned knowledge and mastered the corporate website development process. Through project training，students have accumulated a wealth of project experience during school，and truly realize the connection with real positions.
Keywords：work process;project teaching method;webpage production
0 引 言
“网页设计与制作”课程是高校计算机专业的必修课，其主要的培养目标就是学生系统性地学习并掌握网站开发的理论知识，同时能够熟练进行网页的设计和制作，从而能有效应用于将来的网站开发工作中。随着计算机网络的普及和发展，市场对网站开发的人才需求会越来越大，作为高校，应更好地服务于经济发展和企业人才需求，需要使课程设置与工作岗位更为贴合，这样才能够培养出面向市场需求的技术型人才。
基于实际工作过程的项目教学是符合高职教育坚持“职业化、员工化”的教学改革思路，其人才培养目标和模式必须适应市场经济对人才的需求。可以激发学生的学习兴趣，提高学生的团结协作能力、分析和解决问题的能力，真正体现高职教育特点[1]。
在基于实际工作过程的项目教学过程中，教师不再是处于教学的主体，而是作为引导者，帮助及促进学生进行项目学习，学生在项目实践过程中发挥其学习主体性，在完成工作任务的过程中完成知识和技能的学习并解决实际问题[2]。
1 网页设计与制作课程概况
本文以计算机网络技术专业“网页设计与制作”课程中的表单设计与制作模块为例，以本校2018级计算机网络技术专业学生为教学对象，进行基于工作过程的项目式教学应用研究。
“网页设计与制作”是计算机网络技术专业的一门专业课程，开设时间是大一第二学期，共18个教学周，每周4课时，共72学时。本门课包含“Web前端开发工程师”岗位需求三要素：HTML、CSS和JavaScript，主要是为专业培养目标中的“网站建设”起支撑作用，和“数据库应用技术”“网站建设与开发”等课程结合，培养网站建设与管理方向高素质的技能型人才。
整个课程选取学生寒假实践承接的政府公益性网站“助农网”，将完整的“助农网”工作项目贯穿始终，包括：需求分析、网站策划和设计、网站建设与制作、网站部署和验收。按照项目开发流程结合教学实际，划分成5个子项目，本研究选取表单模块，依据Web前端开发工程师典型职业岗位，选取与本课程相关的典型职业技能，整合“助农网”教学项目，选取表单设计与制作这项典型工作任务进行实践性研究。
2 基于工作任务的项目教学实施
本文以表单模块为例，验证基于工作过程的项目教学是符合人才培养目标的，通过在课程中实施基于实际工作過程的项目教学法，促进学生在学习专业知识的同时能够做到更好地掌握岗位技能，对于培养学生们的职业能力和职业素养有很大的促进作用，充分体现出高职教育的职业化特点[3]。
2.1 教学目标
依据计算机网络技术专业人才培养方案中对“Web应用开发能力”的培养要求，结合“1+X——Web前端开发”职业能力标准中的技能要求，以及课程标准中的岗位目标，并结合学生学情，以政府公益性网站“助农网”的设计与制作为主线，整合教学内容，设定表单模块的三维教学目标如表1所示。
学生经过前期章节的学习，学生熟悉了网页项目的开发工具和开发流程;经过本章节前面知识的学习，学生掌握了表单标签（form、input、textarea、select）和属性、表单的布局和美化等基本知识。从学生的课前微课学习和理论测试结果来看，学生对于新课知识点掌握良好;从学生提交的原型图来看，设计稿基本能满足客户需求和用户体验，但综合应用能力较欠缺。经过一学期通识课程的学习，学生面临基础教育到职业教育学习模式的转变，具有职业理想，亟待形成专业认知和岗位认知，同时对先进的互联网技术很感兴趣，对新兴的信息化技术有较大的热情。
2.2 教学设计
本次教学选取来自政府公益性项目“助农网”的表单模块为载体，要求学生完成“助农网”四个表单模块的设计和制作。按照企业实际开发网站的流程：需求分析-网页设计网页制作-部署验收来策划教学内容，可以激发学生的学习兴趣，体验真实的职业情境。四个教学任务都按照实际工作流程来组织教学过程，基于实际的工作过程，以任务为驱动，对接技术活动全过程，优化教学环节。 2.3 教学内容
教师首先要和企业导师一起，结合企业中“Web前端开发设计师”的岗位标准，练习本章的教学内容，创设出本模块的典型工作任务——“助农网”四个表单页面的设计与制作，引导学生先明确网页需求，根据需求进行页面设计并熟练的制作出页面。根据学生的认知特点和知识点递进关系，将表单项目分解序化成4个典型工作任务，分别为登录表单、留言反馈表单、注册表单、商家表单。其中登录表单主要知识点为认识表单;留言反馈表单主要知识点为表单布局;注册表单主要知识点为表单空间选择;商家信息表单主要知识点为表单的综合应用。其设置包含了表单所需的知识点，同时加强了学生的实践操作过程，四个任务环环相扣，其流程有利于学生学习掌握相应知识点。
2.4 教学实施流程
在具体的教学实施过程中，利用超星学习通在线学习平台，4个表单子任务皆采用“线上+线下”混合式教学模式，整个企业任务贯穿课前、课中和课后，教学实施流程图如图1所示。
2.5 教学具体实施
根据教学内容分析和学情分析，确定教学目标和重难点。依据职业教育改革要求，践行“以学生为主体”的理念，以“助农网”真实任务为驱动，合理采用多样化教学策略和信息化手段，构建高效课堂。
课前老师通过学习通平台发布每个学习任务书，指定教学资源。初步了解表单任务。学生根据学习任务书，解读需求分析并设计原型图初稿，教师在在线学习平台发布微习题，课前测试如图2所示，根据平台测试结果，掌握学生知识准备情况，调整教学策略。测试结果分析如图3所示。
课中情境引入，通过查看常用网站的真实案例引导学生知道什么是表单。通过展示“助农网”表单空白页面明确本次课的任务，通过教师自制的Flash视频动画，演示表单工作原理，变抽象为形象，更好帮助学生理解什么是表单解决教学难点，学生进行挑战答题，寓教于乐，在答题的过程中掌握表单的相关概念和原理。教师根据测试结果进行有效的阶段性评价。
针对课前原型图初稿的问题，在学校教师的讲解指导下，帮助学生充分考虑客户需求和用户体验。再次解读需求说明书，帮助学生通过头脑风暴明确修改意见。并通过在线原型图工具修改完善原型图，并在线学习平台提交，学生对前后提交的原型图进行对比，评选出改进最大的组，并由该组上台进行汇报，其他组进行补充，教师根据各个任务原型图评分标准对各组提交的原型图进行评分，并提出进一步修改意见。团队成员对原型图进行进一步完善，通过反复对原型图改进，培养学生精益求精的工匠精神，提高页面设计的能力，突出教学重难点。
各组根据完善后的原型图，使用企业专业的编辑工具——Visual Studio Code，小组协作制作完成每个模块的表单，如图4所示，并提交至在线学习平台。通过真实的企业协同软件，体验真实的生产环境，真正体现工学结合;学生根据评分标准对各组提交的作品进行小组互评，票选出得分最高的一组，由票选出来的冠军组，上台分享协作经验;师生结合标准共同分析各组作品的优缺点以供改进，强化教学重难点。
课后根据评价指标以及教师的提出的修改意見，对作品进一步完善，并根据Web标准对作品进行优化。表单项目各作品的冠军组部署到阿里云供企业进行验收，其他组本地部署供教师进行验收。本地和云端部署网站都是计算机网络技术专业必备的职业能力，通过部署熟悉真实的生产环境，巩固学习成果，学生在教学平台上根据成员表现评分标准进行组内互评。教师及时掌握学生课堂情况以便下一次的教学优化。教师和企业导师对作品共同进行总结点评，明确达成客户需求和用户体验的目的。冠军组作品如图5所示。
3 教学实施效果
从学生调查问卷结果来评价分析。对于“网页设计与制作”课程，学生表现出了很大的学习兴趣，能够接受并适应基于实际工作过程的项目教学方式，对本门课程的教材、教学案例、实训操作等都比较满意，觉得课程非常有意义。通过本学期的课程学习，班级中58%的学生对于“网站设计和开发”工作岗位的工作流程有很好地了解，42%的学生基本了解，说明经过基于实际工作任务的项目教学过程，学生们对未来相关的工作岗位有了一定的认识，对整体工作流程有了一定的熟悉感，提高了学生对今后工作的适应能力，在毕业进入职场后能尽快的进入工作状态[1]，如图6所示。
4 结 论
本研究按照标准化工作流程组织了教学过程。学生按照真实标准化工作流程，采用角色扮演法沉浸式学习，在小组协作过程中，有效提升学生的合作能力、岗位操作能力和职业素养，通过不断完善作品，培养学生精益求精的工匠精神，目前，“助农网”已经部署到阿里云试运行。通过基于工作过程的教学思路，对项目教学法在教学中的具体设计、方法和实施的效果进行实践性研究，使学生掌握了课堂知识的同时也掌握了实际的工作流程，在校期间就积累了丰富的项目经验，未来能够更快更好的适应网站开发的工作岗位。
参考文献：
[1] 张洁.基于工作任务的项目教学在高职课程中的应用研究 [D].石家庄：河北师范大学，2012.
[2] 凌云.高职计算机专业教学引入项目教学法的实践 [J].职业技术教育，2007，28（11）：32-33.
[3] 朱鹏.基于就业能力导向的高职院校人才培养模式的创新研究 [D].长沙：湘潭大学，2015.
作者简介：黄莺（1984—），女，汉族，安徽马鞍山人，计算机教师，本科，学士学位，研究方向：Linux应用、计算机网络技术。