《动态网站技术》课程教学改革的研究

叶子豪 张晓娇 许广林

【摘要】动态网站技术是上海立信会计金融学院计算機科学与技术专业的一门必修课，本文首先分析了该课程教学的现状，然后探索并尝试从教学内容、教学环节、实践环节、实验案例和网络教学平台等方面进行改进，从而提高学生对本门课程的兴趣和提升本门课程的教学效果和教学质量。

【关键词】动态网站技术  教学改革  网络化教学

【中图分类号】G42   【文献标识码】A 【文章编号】2095-3089（2021）34-0026-02

上海立信会计金融学院信息管理学院根据2020年高地大一流本科建设项目及学院人才培养实际需要，经学院教职工积极申报、院教学委员会审议等程序，对多个教学研究与改革项目予以立项作为二级子项目，《动态网站技术》被立项为院级优质在线课程。《动态网站技术》是信管学院计算机科学与技术高年级学生学习互联网Web应用开发技术的一门专业课，是一门理论和实践紧密结合的实用课程。主要讲授Web前端开发技术，包括JavaScript语言、可扩展标记语言（Extensible Markup Language）技术、jQuery技术、AJAX技术及Node.js。通过本门课的学习使学生掌握设计和开发一个Web应用系统前端的基本原则、方法和步骤，使学生具有扎实的Web前端开发理论基础、Web UI的设计能力和较强的动手开发能力。本文针对动态网站技术这门课，分析教与学的现状，深入探索建立网络信息平台与软件开发类课程融合机制，改进课程教学的各个环节，调动学生的学习积极性，全面提升教学效果和教学质量。

一、现状分析

《动态网站技术》是计算机科学与技术专业的学科基础平台必修课，已经开设三年。前期所需基础课程有《数据结构》和《高级程序设计》。本课程之所以安排在大二第一学期是因为它是后续的《响应式Web开发》和《JSP动态网站技术》等多门课程的基础。该课程的学习目的是通过学习，使学生对JavaScript、jQuery和Ajax技术有一个全面的认识，熟练掌握相关的知识点，在Web设计中，能够在前台设计中灵活地运用这三种技术。

（一）教学方面

因为本专业还开设了基于JSP、ASP.NET和PHP等的一系列网站开发课程，因此《动态网站技术》更侧重于Web前端的设计和开发，主要涉及的知识点有JavaScript的基本概念、基本语法及常用对象，DOM的处理和事件处理;jQuery的基本和高级过滤和选择技术，使用jQuery的DOM操作在节点中添加、删除或者更新内容，jQuery对表单和表格的操作，插件的调用，动画设计和网页嵌入式数据处理;Ajax部分包括了解Ajax的概况、Ajax工作原理和作用及Ajax的技术组成，掌握Ajax技术的编程结构和在实际的项目中应用Ajax技术。

作为一门程序开发类课程，目前教学方法主要是以通过PPT讲解课程的基本知识点和原理，然后根据知识点和原理，设计一个小应用，随后老师现场演示如何编写代码实现此小应用。老师在此应用的基础上设计一个类似应用，让学生根据老师的演示随堂编写代码实现此应用。不足之处在于有少部分同学动手能力偏弱，在代码编写和调试过程中遇到问题，无法解决，就逐渐失去对本门课的兴趣。还有部分同学动手能力很强，但是忽略了对知识点和原理性知识的掌握。

（二）实践方面

为了让学生能够更好地对所学知识综合应用和学会如何解决实际问题，本门课共设计了两个实验，第一个实验基于JavaScript，第二个实验基于jQuery。每个实验都是把相对应一章的知识点进行了整合，通过完成实验，学生可以更好地融会贯通本章学习的内容。实验指导手册给出实验的目的，实验的过程和样板代码，同学根据实验指导手册可以单独完成每个实验。存在的问题是实验项目的主题比较单一，学生只知道实验手册编写代码和完成相应的功能，并不一定真正理解到底在解决什么实际问题。

（三）网络教学辅助教学

现阶段本门课使用了一些网络辅助教学，比如在线和发放作业，电脑屏幕控制和电脑点名等。存在的问题是虽然在线收取作业但还需要人工评阅，机器点名无法避免替人签到。网络化的教学优势没有真正发挥出来。

二、教学的改革对策

本课程属于开发类型的课程，实践性非常强，无论是教学内容还是教学方式上都需要不断的创新，让学生产生浓厚的兴趣，并应用本门课程所学知识去设计和开发网站前端。针对本校动态网站技术课程的现状和高地大一流本科建设项目的要求，提出以下四点的改进方案。

（一）对教学大纲进行更新，增加一些流行的相关新技术。

JavaScript于2015年推出了新的ECMAScript 6标准，里面有大量新的内容，如引入Class概念，函数定义也不再使用关键字function，而是利用了=>来进行定义，在新的教学大纲中新增这部分内容。TypeScript是JavaScript 的一个超集，但是比JavaScript多了可选的静态类型和基于类的面向对象，目前也是非常流行的一门开发语言，在新的教学大纲也适当加入这部分内容。现在网页中存放临时小量数据成为趋势，相应增加jQuery对网页嵌入式数据处理的课时。自从主流浏览器禁止安装Flash插件以后，网页动画的实现更多基于jQuery和CSS3技术。这部分内容在实际中使用较多，并且因为交互性强更容易激发起学生的学习兴趣，因此适当增加这一部分的内容和课时，适当增加jQuery Mobile方面的内容。

（二）改进授课方式和随堂案例提高学生的兴趣和参与度。

动态网站技术的实践性强和理论性强是导致学生失去学习兴趣的重要原因，对于这个问题，可以使用三种方法进行解决。第一种方法对于学习理论性知识使用对比法。因为学生在大一学过基于C++的面向对象开发，因此在讲解类和函数定义这两部分时，可以和C++进行比较来让学生更加容易理解它们之间的差异;第二种解决方法是在案例代码中增加各种特效，如发生某一个事件后网页背景变色或者字体变大，通过这种特效吸引学生的注意力，激发学习兴趣;第三种方法是提高学生随堂代码练习的可运行性，因为假如学生不能够成功执行代码，会失去对本门课程的兴趣，因此在课堂上，老师把演示成功的代码发放给学生，让学生先可以直接成功运行，然后在此代码的基础上，提出进一步的任务，从而锻炼学生的软件开发能力。

（三）充分利用网络教学辅导平台提高教和学的效率。

使用网络化教学辅导平台可以大大提高教和学的效率。第一，录制完整的教学视频并上传到学习通平台。在线视频的优点是可以让学生在课前预习课后复习，并且反复重听课堂上没有掌握的知识点;第二，使用在线答疑，学生可以在学习通上留言、私信或者讨论区把遇到的问题发给老师，老师可以一一解答问题，并且把学生遇到的常见问题汇总在线发布并给出相对应的解决方案;第三，点名可以通过APP手势或者二维码点名，从而可以避免学生之间相互代替签名并且节约点名时间;第四，应用超星平台的在线作业功能布置在线作业，应用自动评分系统，提高作业评阅的效率，也方便学生及时发现和订正错题;第五，开设在线讨论功能和在线投票功能，让学生各抒己见并积极参与到一些技术问题的讨论中以及给课程提出一些问题和建议;第六，建设完整的在线题库，学生随时通过自我测试评判对知识的掌握程度，并根据评判结果对掌握差的知识点进行复习。

（四）改进实验案例。

通過多年的教学实践，发现实验案例越接近实际，学生会对实验越有兴趣。网页前台设计包括多项技术，如CSS5、HTML5、JavaScript和UI设计等等。因此如何在实验中把众多技术整合起来，而又突出所学知识点，同时使案例更加贴近实际是实验案例改进的两个主要方向，具体的改进有如下三点：首先为每个实验设置具体的主题从而激发学生的兴趣，比如第一个实验的主题设定为如何设计和开发电商平台的产品登陆页面，参考国内一些知名的电商网站，让学生理解产品需要哪些功能和如何人性化;第二个实验主题设定为门户网站的首页，可以参考国内各个高校的网站首页并分析它们的异同。实验和现实结合让学生感觉到每个实验的现实意义和通过实验理解如何用所学知识解决实际问题;其次每个实验整合多项Web开发技术，让学生理解每项技术在网页设计中的作用，以及如何把这些技术整合起来。比如让学生理解一个前台购物的实现包含UI设计，图片设计，HTML5编写，CSS3设计，最后通过JavaScript实现添加购物车功能和使界面人性化;最后就是避免学生无法独立完成实验。在以往的实验过程中，学生可能因为遇到某个问题无法解决因此无法完成整个实验，为了让学生能够顺利完成实验， 列出以往学生无法解决的问题并给出相应的解决方案，同时给出学生一个完整的代码实现方案供学生参考。

三、结束语

本文根据上海立信会计金融学院信息管理学院2020年高地大一流本科建设对子项目的要求，并结合多年的动态网站技术授课经验，对动态网站技术课程目前的状况进行了分析，并从教学和实验环节提出相应的改进方案。然而动态网站技术课程随着科技的发展而不断更新，因此在后续的教学中还要建立一套反馈机制，可以实时监控改进后教和学的质量，并根据反馈结果及时制定相应的整改措施，从而不断改进教学质量。

参考文献：

[1]张霞，陈秀.地方应用型本科高校高等数学课程教学改革的研究与实践[J].中国大学教学，2009（8）：31-32.

[2]赵厚宝，付剑锋，李琥.《高级语言程序设计》课程教学改革的研究[J].高教学刊，2020（9）：137-139.

[3]花红民，堵国梁，朱为.动态网站技术在“网络课程”设计中的应用[J].电气电子教学学报，2004，26（2）：100-102.

[4]许广林.“计算机网络”课程教学改革探索[J].课程教育研究，2020（17）：1.