任海　华智杰　靳晓敏

【摘要】基于互联网+教育模式下，传统的教学模式、课堂教学结构、课程资源都不能适合目前高校的前端课程教学，本文以软件工程专业的Web前端课程为例，构建了基于S-CMS的开放、协作、分享的渐进式线上前端项目案例，并给出了具体实现步骤，强调以学生自主学习为中心，有助于培养学生实际动手能力。

【关键词】前端课程  S-CMS  渐进式项目案例

一、概述

随着国家颁布中长期教育规划纲要和教育信息化工作要点，提出了优质教育资源的开发与应用、强化实践教育环节的背景下，各种在线教育资源平台如雨后春笋般出现，几乎覆盖所有的线下教育，如何强化教师利用信息技术所提供资源，如何深化创新人才培养模式，形成个性化数字教育平台资源，就尤其重要。

余晓兰提出了基于MOOC平台SPOC模式与传统《网页设计与制作》课程课堂教学的混合教学模式，培养学生自主学习优质教学资源能力;宗月萍提出了基于清华优慕课教学平台的《网页设计与制作》课程为例线上线下混合式教学;王菁等阐述了基于云平台的“网页设计与制作”的课程辅助教学平台，通过制定合理教学内容，提高教学效果;为提高教学质量和培养学生的创新能力，汪荣提出了基于网络教学平台下《网页设计与制作》网络教学平台;为了运用信息化手段进行教学改革，顾盼提出了基于雨课堂平台的混合式的教学方式;为了加强在线课程的建设，汤智华提出了基于互联网+背景下，并以"网页设计与制作"课程为例，从课程建设、课程内容、资源建设进行了相关的研究和探讨;以上论述从不同角度阐述了基于互联网+模式下的前端课程改革的必要性和紧迫性。

二、渐进式线上项目案例的建设

（一）渐进式线上项目案的设计理念

伴随着教育信息化的迅猛发展，特别是教育大数据、云计算、MOOC、翻转课堂、微课、创客和智慧教育等线上教学平台的出现，教育模式发生了巨大的变革，传统的Web前端课程如何跟进时代的发展，改变教学观念，更新教学方法，提高教学效果就尤其迫切，本文提出了基于S-CMS的渐进式线上前端项目案例建设为核心理念，强调吸收整合互联网最新的前端资源，以学生自主为中心的研究性、探究性的学习模式，支持学生和教师共同参与建设项目案例，以项目为主导，学生从【前端理论学习】->【项目案例实践】->【线上项目应用】，三位一体、一站式的个性化的教学模式。

（二）渐进式线上项目案例平台的选择

本文所采用的平台为S-CMS作为线上前端项目案例主要的实现方式。该系统提供了完整电脑端模板、移动端模板、生成APP和微信小程序四大核心功能，其所提供的后台管理系统，所有学生可以直接通过添加后台数据，将数据显示到前端页面，降低学生后端开发的难度，满足当前所有前端教学案例的集成与实现。

（三）渐进式线上项目案例资源的选择

主要范围涉及校企合作案例、在线专业教育平台案例、自主开发案例、学生推荐案例、典型教材案例、微信公众号案例、前端技术类APP和网站案例等，整合优质典型的前端項目案例，通过S-CMS制作对应的线上前端案例，供所有相关人员进行交流和学习。

（四）渐进式线上项目案例的构建步骤

无论是移动端的项目案例还是PC端的项目案例，均可以通过移动端或PC端模板来制作，或者通过系统扩展进行微信小程序和App的开发，具体的操作流程如下：

第一步：开发环境的安装：首先，注册阿里云，登录购买云服务器ECS，并在所购买的云服务器上安装PHPstudy做为服务器环境，并将对应的S-CMS系统进行安装云服务器上。

第二步：登录后台主界面，学生和教师分别注册管理员权限，了解S-CMS文件结构，PC版模板和移动版模板存放的文件夹，掌握S-CMS模板共9种类型常见的页面结构及其引用方式。

第三步：S-CMS提供了丰富的函数和标签，以满足不同模板的开发，函数格式：{$函数名（参数1，参数2，参数3）}和标签格式：{@SL_标签名称}。其中标签为后台数据库与前端页面之间的中介，通过前端页面调用系统标签来显示相应的数据内容。标签分为两类：通用标签和功能标签，功能标签又分为简介页面、新闻列表页标签、新闻内容页标签、产品列表页标签、产品内容页标签、万能表单页标签和联系页面标签。

第四步：前端项目案例，均可以上述标签和函数，将前端页面改写成对应的页面模板。然后，登录后端管理界面，添加后台页面数据，更新缓存数据，真正把前端项目案例页面通过S-CMS所提供的标签和函数，变成具体项目案例的线上实际应用案例。

三、结束语

本文借助S-CMS系统，降低前端学习过程中，后端的零门槛开发，学生和教师只需要整合现有的优质项目案例，进行模板转化，就可以轻松开发出移动端或PC端网站页面应用，因此，渐进式线上项目的构建，既能充分调动学生学习积极性和主动性，将理论实践应用一站式的学习模式，又能提升教师熟练掌握前端理论与实践，不断更新教学观念，改进教学方法，提高教学效果和教学质量，全面推进前端人才培养的新机制。

参考文献：

[1]余晓兰.MOOC平台基于SPOC的混合教学模式在高职《网页设计与制作》课程中的实践探索[J].科技经济市场，2019（04）：145-147.

[2]宗月萍.基于清华优慕课教学平台的线上线下混合式教学实践分析——以高职计算机专业《网页设计与制作》课程为例[J].中国新通信，2019，21（07）：202-203.

[3] 王菁，曾文娟.基于云平台的“网页设计与制作”课程教学实践探索[J].信息系统工程，2019（02）：168-169.

[4] 汪荣.基于网络教学平台下《网页设计与制作》课程创新能力培养的教学设计研究实践思考[J].才智，2018（34）：169-170.

基金项目：课题： 吉林省教育科学“十三五”规划一般规划课题，课题名称：《吉林省西部高校Web前端课程教学改革的研究》，课题编号（ GH180580）。

作者简介：邵英安（1982-），男，汉族，籍贯：吉林白城，学历：硕士，研究方向：Web全栈开发;张强（1963-），男，汉族，籍贯：吉林松原，学历：硕士，研究方向：软件工程;白南石（1982-），男，汉族，籍贯：吉林白城，学历：硕士，研究方向：Web程序开发;李婧（1977-），女，汉族，籍贯：吉林白城，学历：硕士，研究方向：程序算法;杨春岩（1982-），女，汉族，籍贯：吉林白城，学历：硕士，研究方向：前端设计。