课堂教学的轻量级教学网站基础设计

王斌

（武警警官学院 四川 ·成都 610213）

摘 要：目前市场的发展趋势下，移动端占有率促使H5加快了更新和推广最新标准，移动端和电脑端的双端开发也越来越被重视。一次开发，平台通用成了web2.0的目标，也是下一代的进化趋势。在入门门槛较高的大学校园环境中，这种跨平台的技术与课堂教学结合并不紧密。目前除商业化较好的慕课系统外，其他自主研发使用的以教学为目的的网站开发一直很少关注和获得投入。如何设计一个框架简单并且维护成本低的教学辅助网站成为了具有一定价值的实践科目。

关键词：轻量框架，教学辅助功能

0 引言

目前高校教学中，使用office或者WPS套件实施课堂教学依然是主力。目前商业化开发的教学平台或者教学系统大多是在慕课类系统基础之上添加在线直播和录播回放的功能。在学校内部的课堂上，使用PPT的仍然是大多数老师的选择。甚至对于中小学课堂教学是否使用PPT也存在的一定范围内的探讨。

从教学组分工合作的角度，个人难以完成的移动端教学展示网站得以实现。该教学网站的主要功能应该承接PPT的功能，并在此基础之上能形成更多帮助教学的功能。

1 教学网站应具有的基础特点

（1）从设计维护角度来说推荐使用轻量级框架。这类内容呈现类的网站几乎不需要后台的支持，无需实现用户的相关功能。在这样的指导思想下，网站的建设和维护成本将大大降低。将庞大的工程化简为教学组专人就可以完成的中小项目。

（2）使用自适应分辨率的解决方案。为了方便在电脑端和移动端都能有良好且一致的内容传达和用户体验。选择带有屏幕自适应的框架，保证一次开发，多端使用。在网站搭建大框架时就做好自适应适配，在今后的内容添加时就可以使用通用的模板，省去的适配的麻烦。

（3）使用统一的入口。一个教学组内部可能有多个教学内容或者将来会增加教学内容。使用一个统一的入口页面并让用户自行选择相应的科目学习，同时入口页面还能提供相关资料等其他内容。

（4）极简化的页面风格。要支持移动端的小屏幕和电脑端的大屏幕，素材往往需要向移动端靠拢。复杂的页面风格适用于媒体类内容的展示，在教学的页面中更需要简约的内容布局设计。

（5）长页面内的知识点导航。与PPT有着显著区别的是网页没有长度限制，可以根据内容延长、折叠或者隐藏并再现相应内容。这样的能力使得用户能够在一个连贯的图文流中进行理解和学习，不必收到PPT切换带来的感官断层。在这个长页中，使用锚点技术可以将所有的知识点提炼出来并制作成按钮列表实现快捷跳转。

（6）基于H5和CSS3的框架支持丰富内容展示页面效果。通过轮播、弹出框、弹框、弹窗、表单、巨幕、折叠、模态框等技术，使得在教学页面中能够展示出层次更加丰富的内容。在屏幕有限区域内技能清晰展示教学素材又能通过按钮有序的切换局部内容，这样得以不打断学生思路的情况下展示更多内容。

（7）同域内容同步切换的功能。在教学中，会遇到文字与媒体配合演示的情况，而且相关的教学内容是前后连续的。在展示的区域内，让文字改变的同时改变。尤其是在讲解具有历史时间线或者逻辑前后顺序的内容中，使用这种同步切换的展示方式更加帮助学生理解内容逻辑的前后关系。

（8）通过JS实现并在页面中能够是实现选择、判断、填空等传统题型的功能，也能实现类似物理演示、逻辑演示等实验内容展示。在类似物理、化学、历史等内容中会产生比较好的逻辑关联展示效果。

2 教学网站应具有的优点

在web2.0不断升级和统一标准下，各家浏览器的接口逐渐统一，功能越发完善。目前浏览器已经能够完成除大型游戏以外的几乎所有软件功能。移动端开发APP的框架之间竞争激烈、功能完善，给开发者带来的好处是灵活多变、开发进度大幅度缩短、系统健壮性和修改稳定性都很好。

框架的良性发展让网站制作难度和时间消耗大幅降低，这使得如学校的样的机构能完成形式和功能都更加丰富的教学素材提供平台。教学组内只要分工明确，采用集中需求、集中修改的方式能够满足建设需求。教学设计组提供课堂逻辑、文本和媒体文件，再由内部或者独立的制作小组实现。这样的方式将会带来如下好处：

（1）版本统一。在页面模式的基础上制作的教学内容得到很好地统一，一旦发现错误就可以及时修改。相比之下，PPT模式的错误修改只能发生在一个副本中，因此修改后需要扩散。但每次修改都需要在教学组内扩散，每个人的修改也要扩散，就导致内容版本碎片化，随着时间的推移，一致性越来越低，变得不在可选范围。

（2）支持个性化内容展示。在展示内容统一后，教师对于个性化的教学表达受到阻碍，内容过于一致导致教学死板并不是想要的。然而目前的隐藏、折叠、轮换配合弹框和弹出子页面等，能够实现在一个简约的页面下，教学者可以根据个人的需要展现不同的内容，实现个性化展示。

（3）访问容易。目前安装软件并保持版本更新本身就是一种不得不的消耗，然而浏览器本身已经支持APP能实现的几乎所有功能。那么，对于教学类的辅助网站便不再担心功能问题，与此同时统一的入口就成了明显的优点。不论是手机、平板还是电脑，都自带了浏览器，只要通过浏览器就能快速进入并开始学习，这是教学中非常需要的特性。

（4）自适应分辨率。由于目前的浏览方式多样化，不同尺寸的屏幕上都有需要展示网页的时机，访问并正常浏览内容也是教学的刚性需要。内容布局能够自适应屏幕分辨率从而自动调整内容大小和排布，该功能目前已经有完善的前端框架支持且使用简单。

（5）支持丰富内容展示。相比PPT用来展示教学内容，页面支持的媒体格式更加全面且丰富。对视频的支持效果远远优于PPT软件，同时使用JS实现的任何展示功能都可以运行。这方面良好运用可以在各个学科中结合教学内容制作生动有趣的互动实验。

3总结

将web2.0技术结合教学的内容展示是目前有探索但范围较小的，主要原因还在于有一定的门槛和组织分工需求。随着国内教育的不断重视和提高，这样的工作在国内有着可期的前景。

参考文献

[1] 周迈.基于“双项目”驱动教学的网站设计与开发教学改革[J]. 现代职业教育,2018.17

[2] 罗海涛.课程教学网站设计与实现[J]. 电脑知识与技术,2018.17

[3] 姚明.“设计模式”课程教学网站的设计与实现[J]. 电脑知识与技术，2018.9