“双高计划”背景下“Web前端设计”课程设计与实践

何妹 龙江腾 乐小军

摘  要：文章以“双高计划”课程建设为背景，对课程进行线上线下混合式教学设计，从课程资源、学情分析、教学策略、教学实施、教学评价五个方面对本课程进行改革探索和实践。深度采用案例探索模式，提高教师业务水平和授课水平；邀请企业专家合作编写教材，使教材内容与职业岗位能力要求相契合；并建立以实践应用能力为导向的课程考核体系，改变课堂上重理论、轻实践的学习现状。

关键词：双高计划；Web前端设计；线上线下混合式；课程设计

中图分类号：TP39；G434    文献标识码：A    文章编号：2096-4706（2023）10-0182-05

Abstract： With the construction of “Double High Plan” course as the background， this paper carries on a online and offline blended teaching design for the course， exploring and practicing the reform of this course from five aspects： course resources， learning situation analysis， teaching strategies， teaching implementation， and teaching evaluation. Deeply adopting case exploration mode to improve teachers' professional level and teaching level; Invite enterprise experts to collaborate in writing textbooks to ensure that the content of the textbooks aligns with the requirements of professional abilities; And establish a course assessment system guided by practical application ability， changing the current situation of emphasizing theory over practice in the classroom.

Keywords： double high plan; Web front-end design; online and offline blending mode; course design

0  引  言

2018年《江西省高水平高等职业院校和优势特色专业建设实施方案》正式印发，吹响了江西省新时代职业教育高水平发展的集结号。2018年11月27日，江西省教育厅发文公布“江西省高等职业院校优势特色专业拟立项名单”，江西信息应用职业技术学院软件技术专业成功入选特色专业。

“双高计划”的总体目标是引领新时代职业教育实现高质量发展，而高等职业教育高质量发展的核心和重要载体是课程建设。针对软件技术专业的核心课程进行线上线下混合式教学设计，既是“双高计划”建设的重要内容，也是适应“互联网+职业教育”发展需求的重要探索，对于提高课堂教学质量，促进课程改革有着积极的意义。

1  线上线下混合式课程设计

1.1  课程介绍

“Web前端设计”是软件技术专业开设的一门核心专业基础课程，培养具有前端开发设计基础的高等技能型实践人才，对学生的职业岗位能力、职业素养养成起支撑作用，是程序员、软件设计师等职业资格证书和1+X Web前端开发职业技能等级证书所必备的技能。

本课程开设在第一学期，共80个学时，教学内容涵盖网页基础知识、网页结构和标签、CSS样式、网页选择器、CSS美化网页元素、盒子模型、CSS3属性和综合案例八个项目，内容层层递进，紧密衔接，皆在培养学生的网页设计能力。教学过程以专题案例形式有机融入爱国情怀、工匠精神、奉献精神、职业道德等思政元素，在提升专业技能的同时，注重爱国主义、社会主义核心价值观的培养。

1.2  学情分析

1.2.1  对象分析

授课对象是高职软件技术专业的2021级大一新生，还不具备前端开发技能相关的专业知识，同期所学课程有C语言程序设计，后期相继会学习“前端框架技术”“JavaScript程序设计”“响应式网页开发”等课程。高职学生的主动学习意识较为薄弱，创新能力不足，理论联系实际应用的视野不够宽，但他们对借助互联网的学习颇感兴趣。Web课程在软件技术专业人才培养方案中的地位如图1所示。

1.2.2  教材分析

課程教学采用2020年新编高职教材《Web前端设计案例教程》，内容编排依据“1+X”Web前端开发职业技能等级证书标准，以“项目+任务”的形式分解知识内容，浅显易懂，层层深入，可供学生自主探究学习。同时，教材配套完整的数字化学习资源，满足开放式学习需求。教学架构如图2所示。

1.2.3  学习基础分析

本门课程教授的学生为软件技术专业大一的学生，学生好奇心强，喜欢动手和实践，但学习缺少主动性，不能很好地将理论和实践结合。同时学生对超星学银在线学习平台和学习通APP的使用非常熟练，能够开展个性化自主学习。

学习情况实时更新，学期中期根据超星学习通平台数据反馈，如图3所示，学生对DIV+CSS网页布局技术基础知识在理解方面存在较大困难，65%的学生还停留在了解知识的层面，只有10%的学生能够自行完成实训，整体应用水平有待提高；学生普遍倾向于用网络平台开展学习，比较关注社会热点。因此我们引入乡村振兴专题案例，并通过信息化手段融入教学，激发学生的自主学习意识，培养和营造良好的学习兴趣。

1.3  教学策略

1.3.1  采用“五学”线上线下混合式教学模式

遵循“学生主体、教师主导”的教学理念，采用“自学-促学-探学-互学-深学”线上线下混合式教学模式，教师将翻转课堂和混合式学习理念引入传统教学，把学银在线学习平台作为课堂内容的主要传授方式形成翻转课堂，或将其作为课堂教学的强化与补充，形成混合式教学模式。

本次课程采用的教学方法非常丰富，但又不会冗余，通过不同的教学方法和教学手段，让课程的节奏稳步推进同时又环环相扣，形成了一套完整的教学和实践的闭环，让学生每一分钟的学习都能进入到最佳的状态，全程保持高度的学习注意力，且课后也保持旺盛的学习兴趣，达到最佳的教学效果。其主要使用的教学方法依次如表1所示。

1.3.2  形成以项目任务为驱动的“六位一体”翻转课堂

引入社会热点“乡村振兴”专题网页案例，激发学生的学习兴趣。以完成“乡村振兴”专题网页为总项目，对接相应知识模块。通过项目引导、任务驱动的教学方法，重点突出教学过程中的“学、引、析、探、练、延”，激发学生自主学习，完成课前探究、课中提升、课后拓展的学习过程，最终完成项目任务，真正做到做中学，做中教。利用微课、动画等信息化资源辅助教学，有利于帮助学生突破重难点。超星学银在线网络平台对教学过程数据实时跟踪采集，依据平台记录，实现个性化学习和差异化指导。

1.3.3  构建多元化考核评价方式

借助超星学银在线网络平台，采用过程性评价和综合性评价相结合的评价原则。线上采集学生自主学习课程资源的数据、参与课堂互动的数据，线下提交完成的综合项目，构建教师评价、企业导师评价与学生小组互评、自评相结合的多元化考核评价方式。

2  教学实施过程

课程教学始终围绕以学生为中心，通过借助信息技术、互联网技术和网络学习平台，合理设计翻转课堂，开展线上线下混合式教学，充分依赖学习通APP功能，广泛拓展师生的知识交流与探讨范畴，激发学生的求知欲望。在不同的教学环节中融入适合的乡村振兴等思政元素，持续搜集先进人物事迹素材，建立实践教学素材库，并根据实际授课效果及新的技术发展趋势以及思政元素的新提法，不断完善与更新教学素材库。利用网络资源，将中华优秀传统文化、革命文化、社会主义先进文化有机融入平台建设，使学生正确认识世界和中国发展大势，坚定理想信念。同时，抓住重大历史事件纪念活動节点，在课堂开展内容丰富的主题活动吸引学生参与。

由于本课程各个任务的教学过程大致相同，下面以任务“盒子浮动”为例展示教学实施过程，整个教学过程分为课前探究、课中提升和课后拓展三个部分。

2.1  课前探究

课前1～2天，教师在超星学银在线平台发布学习资源（包括微课、教案、习题等），明确学习任务，下发督学通知，及时了解学生学习情况，对学习滞后的同学给予提醒。学生完成内容自学，查看应用案例效果，借助微课自主探究网页图片排列方法，并完成课前测验题，收集学习难点，平台记录学生学习数据，强化学生竞争意识。界面展示如图4、图5所示。

2.2  课中提升

课中提升包括引案例、析方法、探方案、练技能4个环节。

2.2.1  引案例

经过小组讨论后，由小组学生代表阐述近年来我国的各项政策及事件，以此引入社会热点“乡村振兴战略”，并提出“乡村振兴”专题网页案例设计，从而引出学习任务，理论联系实际，激发学生学习兴趣。

2.2.2  析方法

结合课前所学知识，分组采用“找不同得积分”的趣味形式由学生对“乡村振兴”专题网页案例展开分析，初步提出应用浮动知识完成的网页内容。同时，反观平台数据，对课前学习不理解的知识，特别是浮动元素不占物理空间的难点知识，教师现场通过PPT课件、动画演示、现场实操的形式讲解元素浮动产生的网页效果变化。

2.2.3  探方案

在自学、分析、讨论的基础上，学生查阅相关资料，小组探究制定网页内容设计方案，包含所用知识点与操作步骤，在头脑风暴中提炼想法，并将小组方案进行分享。

2.2.4  练技能

学生根据教师提供的案例效果与素材，结合课中对案例的分析，集中完成网页中的横向图片排布效果。期间教师巡回指导，对学生实训中出现的问题及时做出答疑。

2.3  课后拓展

课后，采用线上方式，学生在平台社区交流学习心得，分享设计方法。教师下发合作企业提供的真实项目，学生分层完成部分项目内容，同时，由企业工程师介绍行业岗位前端设计人才的技能标准，让学生不断了解当前社会技术的变化与需求。

3  教学实施成效

3.1  教学效果

3.1.1  专题案例培养技能

整个教学过程以“乡村振兴”专题网站为项目，按照“项目+任务”的总分形式，以小组协助开展网页内容设计，充分发挥了学生的学习主动性，强化学生技能的同时，培养学生的爱国情怀、奉献精神和精益求精的工匠精神。

3.1.2  层层递进强效果

融合了信息资源的递进式教学过程，层层深入，符合高职学生的认知规律。学生满意度、课后测试正确率、实训任务完成率、1+X考证率均明显提升，圆满完成教学任务。如图6、图7所示。

3.1.3  实战演练提能力

通过专题网站实战演练，结合前端设计岗位标准，有利于激发学生学习的自主性和创造性，同时培养学生的团队意识、精益求精的工作意识和责任心。学生参与项目的热情得到提升，项目的完成质量明显高于同级其他班级。

3.2  特色创新

3.2.1  依据实时数据实施因材施教

学银在线网络教学平台适时采集数据，为教师掌握学生学习情况提供数据分析，准确锁定问题，及时调整教学策略，满足不同层次学生的学习需求。

3.2.2  借助二维动画促进知识理解

学生通过观看Flash二维动画，能够非常直观地理解盒子浮动、定位等知识，为知识的应用奠定基础。

3.2.3  嵌入乡村振兴激发爱国情怀

整个项目以乡村振兴专题案例贯穿知识讲解的始终，充分挖掘课程思政元素，无声育人，既锻炼学生职业能力，又培养学生的无私奉献精神。

4  结  论

教学过程合理利用信息化手段，适时采用视频、电子课件、动画、项目案例，顺水推舟，丰富有趣，有效提升学生参与课堂的积极性，营造课堂中学生的存在感与获得感。以职业为本位，以能力为前提，打造“教、学、做、评、用”的立体式课堂，促进学生的职业能力和职业素养快速提高。软件技术日新月异，需要进一步深化校企合作模式，提供更多的校内企业模式的工作环境，将更多的企业案例和技术标准引进课堂，帮助学生提前明确专业课程学习的作用，找准方向，为学生就业做好铺垫。

参考文献：

[1] 孔祥阳，李传偉，李欣星.“双高计划”背景下高职高等数学“金课”建设的路径探索 [J].内江科技，2022，43（3）：140-141.

[2] 姚文静，林树燕，徐勇.线上线下混合式教学在高校“普通生物学”课程中的应用 [J]. 教育教学论坛，2021（51）：69-72.

[3] 高广银，储久良，成艳，等.线上线下混合式一流课程建设研究与实践——以“Web前端开发技术”课程为例 [J].计算机时代，2022（4）：77-79.

[4] 教育部.教育部关于印发《高等学校课程思政建设指导纲要》的通知 [R/OL].（2020-05-28）[2022-10-23].http：//www.gov.cn/zhengce/zhengceku/2020-06/06/content_5517606.htm.

[5] 张扬.高职学生关键能力培养的模式变革研究 [D].上海：华东师范大学，2022.

作者简介：何妹（1992—），女，汉族，湖南永州人，助教，硕士研究生，研究方向：移动计算、前端开发；龙江腾（1990—），男，汉族，江西南昌人，讲师，硕士研究生，研究方向：软件开发、VR开发；乐小军（1990—），男，汉族，江西抚州人，助教，硕士研究生在读，研究方向：公共管理学。