TRL-SS整合模式在高校教学中的实施研究——以“网页布局与配色”课程为例

（常州机电职业技术学院信息工程系，江苏常州213164）

TRL-SS整合模式在高校教学中的实施研究
——以“网页布局与配色”课程为例

盛昀瑶，张力

（常州机电职业技术学院信息工程系，江苏常州213164）

目前，教学资源库（TRL）在高校教学中有举足轻重的作用。经过一年多的教学实践，发现TRL具有开放性不够、缺乏实时互动、缺少信息推送等不足。为使TRL更好地服务于教学，提高学生的学习主动性和课程教学效果，文章在研究社会性软件（SS）在教学中应用的基础上，提出TRL-SS整合模式，并以“网页布局与配色课程”为例，具体阐述TRL-SS模式在课程教学中的实施。经由对实施效果的调查分析，发现TRL-SS模式激发了学生的学习兴致，提高了学生的课堂参与度，取得了良好的教学效果。TRL-SS模式为高校教学改革提供了可借鉴的路径。

教学资源库；社会性软件；网页布局与配色；课程改革

教学资源库（Teaching Resource Library，本文简称TRL）作为高校数字化校园建设的重要产物，在资源共享、教学模式改革、终身学习环境构建等方面具有重要的作用。TRL在向多元化趋势发展的同时，也出现了不尽如人意之处。首先，平台开放性不够，没提供给学习者自我展示、合作学习的平台；其次，管理模式使用户访问速度受限，当大量用户同时访问集中在一起的资源时，会出现资源访问的瓶颈；最后，用户体验效果白璧微瑕，由于设计理念、技术水平等原因，TRL在信息推送、信息聚集方面差强人意，使得学习者不能立刻获知信息的更新，影响了TRL的使用效率。

1　TRL-SS整合模式

随着网络技术的飞速发展，一系列社会性软件（Social Software，本文简称SS）应运而生并不断推陈出新，社会性软件是构建于Web技术与Internet上，能够促进集体协作行为，支持全体交互的一类应用软件。深受学生青睐的社会性软件有视屏播放软件如优酷（YouKu），观点发表软件如博客（Blog），即时通讯工具如微信（WeChat）、QQ等。SS都由大公司运营，技术成熟，操作便捷，为获取信息、发布信息、交流讨论提供了非常便利的途径。目前，学生对SS的应用仅限于娱乐，忽略了SS在学习上的应用，具体情况见表1。

表1　SS在学习上的应用

不难发现，SS支持作品分享、实时互动、信息推送等特性恰巧弥补了TRL的不足。移动智能终端的普及、开放教育运动的发展及媒介生态环境的改变，使得学生具备了随时随地利用各种终端设备学习的硬件条件，SS应用于教育成为了可能。若教师能在教学中把TRL和SS结合，发挥学生个体自主性，必将提高学生学习的积极性和学习效果。

鉴此，为使TRL更好地服务于教学，营造宽松开放自主的教学环境，本文提出了TRL和SS整合的教学模式TRL-SS，并以“网页布局与配色”课程为例，探讨TRL-SS模式在课程中的具体应用，提出课程改革的思路与举措。

2　在教学中的应用

2.1教学实施的前端分析

2.1.1教学目标

知识目标：了解常见的网页设计风格，掌握网页布局方法；理解色彩基本知识，了解网页色彩模式，掌握网页中色彩运用的基本原则，掌握网页配色设计技巧；掌握网页BANNER、图标、文字、广告设计常用方法，掌握不同主题网页界面的设计。

能力目标：首先，能明确不同主题网页的风格定位，完成网页的信息结构布局设计，然后，能根据色彩的情感象征和不同的主题印象完成网页的配色方案设计；其次，能利用Photoshop完成网页界面元素的设计，最后，能利用Dreamweaver完成网页制作。

素质目标：培养学生举一反三、改进与创新的技术素养，培养学生的审美素养，培养学生在互联网上获取知识的素养，培养学生团队协作和知识分享的素养。

2.1.2教学内容

“网页布局与配色”课程共分成4个模块，教学内容如表2所示。

表2　“网页布局与配色”课程教学内容

2.1.3教学资源

教材：清华大学出版社，万宁主编的《创意PHOTOSHOP CS5网页设计与配色实战攻略》。

教辅：黎芳.网页设计与配色实例分析，旭日东升.网页设计与配色经典案例解析。

教学媒介：网页布局与配色TRL“http：//zxxx.cz mec.cn/suite/solver/classView.do？classKey=17846865”，微信公众号“网页布局与配色”，博客园“http：//www. cnblogs.com/shengyunyao”，YouKu。

2.1.4学生特征

本课程授课对象为计算机多媒体技术专业大二学生，学生自控能力较好，学习态度端正，有过自主学习和TRL学习经验，学生在学本课程前已学过图形图像处理课程，95%左右的学生掌握了PHOTOSHOP基础操作。每个学生都有笔记本电脑、智能手机，随时随地可以进入互联网，熟悉WebChat、Blog、YouKu等社会性软件的使用。

2.2教学策略

“网页布局与配色”课程以理论知识为基础，以实践能力培养为导向，以创意为突破，在教学中教师主要起支架作用，帮助学生发展，确定学生学习责任，让学生主动开展学习，提升学习能力，构建自己的知识体系［11］。具体策略如下：

1）日积月累渗透审美能力的培养

教师利用微信公众号每天向学生推送优秀的网页设计作品，学生发现出色的作品也推荐给教师，教师再反哺于学生，通过师生间的互动，让学生日濡月染，能在生活中能注意到美，捕捉到美，欣赏到美，从而能创作出优秀的网页。

2）与日俱增沉淀专业素养

教师指导学生利用信息聚合技术，订阅网页设计类的相关资讯，让学生及时掌握前沿的设计动态，使自己的专业素养聚沙成塔，提升竞争实力。

3）数字化教学资源营造开放的教学环境

本课程配套的TRL中按模块放置了教学课件、教学素材、重难点视频、课后练习等素材资源，让学生随时随地都可按需获取资源进行课程内容的学习。TRL中各种交互式的微视频支持各种终端播放，并具有操作提示，这使学生随时随地可以检测自己的操作水平，方便学生查漏补缺。

4）Blog、YouKu助力于知识管理

学生使用Blog创作或收录学习心得、创作技巧，使用YouKu记录网页元素的创作过程，并通过关注、分享、发朋友圈分享自己的学习体会、创作灵感，潜移默化地培养学生创新、分享、进行个人知识管理的素养。

5）多变的教学方法提高学习兴趣

一成不变的教学方法使课堂授课平淡无味，为提高学生学习兴趣，本课程根据模块内容不同采用教师讲授、学生小组协作、翻转课堂、引导文教学等多种教学方法，改变传统的课程全过程都由教师授课的格局，让学生主动参与到课堂中，主动汲取知识，分享知识。

2.3教学过程

根据“网页布局与配色”课程教学内容，本课程分为网页设计基础、网页色彩搭配、网页元素设计、网站整体设计四个模块。在每个模块中，教学内容不同，使用的教学方法和教学媒介也就不同。下面将从这四个模块论述TRL-SS在课程教学中的具体教学过程。

2.3.1网页设计基础

模块目标：让学生了解网页的结构，知道网页的设计流程，培养学生具有辨别优秀网页的素质，并引导学生回顾PHOTOSHOP的基础操作，使学生能灵活应用PHOTOSHOP的常用功能。

模块特点：侧重于理论知识介绍和操作技能复习。理论知识涉及知识面较广，但难度不大，若纯粹通过教师课堂讲授，学生学习较被动，学到的知识点会较少，因此学生完全有能力在课余把知识点学会，课堂应该是学生思考和师生交流的场所。操作技能的复习由于是温故，所以学生同样应在课余复习PHOTOSHOP的操作，教师在课堂上检验学习效果。

教学方法：翻转课堂、小组协作

教学媒介：TRL、SS（Blog）

实施过程：理论部分，课堂教师展示若干网页，让学生分组讨论各网页的优缺点，观点不同的同学利用Blog中小组话题讨论，各自展示自己的想法，教师指导，然后，让每组同学阐述自己的观点，教师点评，最后，学生完成TRL中交互理论测试视频，对本课理论知识掌握情况进行评估。实践部分，教师通过TRL中场景模拟视频布置任务，让学生完成，由于场景模拟视频只有操作正确才能继续下一步操作，所以教师很容易评估学生PHOTOSHOP的掌握情况，从而有针对性进行辅导。

2.3.2网页色彩搭配

模块目标：让学生了解色彩理论、色彩情感，认识网页色彩，掌握色彩管理，能对网站进行配色。

模块特点：理论知识很多，难点较多，色彩知识很抽象，学生很难获得感性认知。所以本模块主要采取形象、有趣的方法介绍枯燥、难理解的知识。

教学方法：课堂讲授、案例教学、趣味游戏

教学媒介：TRL、SS（网络工具、Blog）

实施过程：结合PHOTOSHOP中的图像调整讲授色彩知识，通过改变图像的各种通道，改变图像色彩，使学生形象地掌握色彩理论中色彩模式、色相环等难点知识。通过色彩情感游戏让学生了解各种色彩代表的情感。结合网络上网页配色工具（https：//color.adobe. com/）介绍网页色彩，让学生所思即所得，降低配色难度。

2.3.3网页元素设计

模块目标：了解网页各元素的作用，会创建符合主题的网页元素。

模块特点：创建网页元素需要用到很多PHOTOSHOP的技法，步骤很多，有的是基础操作，有的是学生没接触过的技巧，对学生操作技能要求很高，部分基础不扎实的同学在规定的时间完成任务比较困难，部分同学则能创作出另人耳目一新的作品，所以需要额外帮助知识薄弱的同学。

教学方法：现场演示、作品分享

教学媒介：TRL、SS（YouKu）

实施过程：学生在课前根据TRL中场景模拟视频练习本堂所需操作技能，课堂上教师现场演示操作难点，学生根据步骤完成任务，遇到难点可看视频或者询问老师，对于有创意的作品学生课后录制操作步骤，放到YouKu上供同学们欣赏、学习、评价。

2.3.4网站整体设计

模块目标：掌握各种主题网站的界面设计

模块特点：是综合训练模块，该模块需要让学生了解客户需求，根据客户要求设计出网站整体配色与版式，公司LOGO、网页BANNER、文字效果、图标、广告，需要学生有良好的操作能力，很好的沟通能力、理解能力以及一定的创新能力，对学生要求很高，教师要多加指导，本模块需要用到很多文档材料，教师要事先做好模版，供学生参考。

教学方法：引导文教学、场景模拟、小组协作、作品分享

教学媒介：TRL、SS（YouKu、Blog）

实施过程：教师可先根据学生的特质进行分组，3个同学一小组，一个负责与客户沟通，定计划、画草图，一个负责网站整体风格和版式，一个负责元素设计。2小组的同学又构成1大组，各自充当客户和网站设计人员，交流设计要求，教师发放网站设计引导文。各小组根据客户要求制作符合主题的需求说明书，给客户检查，并把说明书上传至TRL供教师审核，教师审核通过后学生进行草图、风格等设计并和客户沟通，修改至客户满意，教师通过观察，选取几个有典型问题的计划在课堂上讨论，本组同学阐述，其他小组充当客户提出意见，教师在旁引导，不符合要求的小组重做计划，其他小组完善计划。然后各小组根据计划设计网页，并把每堂课的设计效果发布到Blog，教师跟帖回复、点评并在小组话题中和同学一起讨论，让学生能及时修改自己的作品，最后邀请企业兼职教师选出优秀的作品并颁发奖励。课后，鼓励学生把创作时的想法、灵感已及难点操作录制成视频放到YouKu网上，供其他同学参考、学习。

3　TRL-SS整合模式的应用效果分析

为验证应用了TRL-SS整合模式后网页布局与配色课程的教学效果和师生感受，笔者采用了实证研究、访谈法和问卷调查法进行调查。

1）实证研究

对比采用TRL-SS整合模式授课的计算机多媒体技术2013级学生和采用传统方式授课的2012级学生成绩：综合作品成绩2013级平均分为89.4，2012级为78.3；理论成绩2013级平均分为84.2，2012级为71.2。

2）访谈法

对网页布局与配色课程组教师进行访谈，教师普遍反映需要学习和准备的东西多了，备课更费时费力了，但课堂氛围很好，学生学习积极性很高，出现了部分很有创作天赋的学生，教师教学成就感提高了。

3）问卷调查法

对2013级36名学生进行问卷调查，如表3所示，问卷采用5级制评分，最小值为1，最大值为5。分数越高说明此指标的重要性程度越高。对于收集到的有效数据采用SPSS statistics 19进行数据处理。

表3　调查问卷

表4　问卷调查统计表

通过表4可以看出，调查问卷的10个子指标中，T01、T02、T03、T04的均值都基本达到了4，说明绝大多数同学都很喜欢这种授课模式，大多数同学对本课程很感兴趣，课堂能积极参与，课后能主动学习本课程，且获得了不错的学习效果；T05平均分为3分，说明学生意识到自己的学习能力还不足；T06、T07、T08分值都不低，说明大部分同学都频繁使用TRL、BLOG、YouKu，特别是TRL和BLOG几乎每个同学都使用了；但是T09分值不高，说明学生对信息聚合技术使用不多，学生主动去关注行业发展、技术动态的素养还有欠缺；T10为3.9，说明学生认为自己的职业素养得到了一定的提升。

4　结语

从调查结果看，TRL-SS整合模式激发了学生的学习兴趣，提高了学生的学习主动性，锻炼了学生的团队协作能力、创新能力，取得了令人满意的学习效果。大多数教师和学生都很喜欢这种教学模式。

目前，各高校都在如火如荼地建设TRL，大量SS不仅免费而且操作简洁，因此，TRL-SS整合模式已具备了推广的物质条件，各学科可以借鉴此教学模式。但是如何建构行之有效的应用策略，教师还要根据实际教学内容和学生情况灵活设计和选择，以便更大限度地发挥TRL-SS整合模式的优势。

［1］吕晓燕，刘继斌，吴燕萍.网络教学资源库建设研究［J］.教育理论与实践，2014（1）：48-49.

［2］杜玉霞.信息化教学资源老化的影响因素探析［J］.中国电化教育，2014（2）：67-73.

［3］刘新阳.今年我国高校数字化教学资源建设与应用研究分析［J］.电化教育研究，2012（3）：29-34.

［4］王永花，殷旭彪，张军征.现状与反思：社会性软件国内教育应用研究十年［J］.现代教育技术，2013（10）：22-25.

［5］李凡，陈琳，殷旭彪.社会性软件支持下的大学生学习模式设计研究［J］.电化教育研究，2012（11）：72-78.

［6］徐玲，何巍.基于社会性软件的高校混合式教学策略研究［J］.黑龙江高教研究，2013（11）：174-177.

［7］高涵，唐智彬.信息化时代高职教育课程改革初探［J］.中国高教研究，2013（9）：107-110.

［8］余朝文，张际平.基于网络学习型社会的立体化教学资源建设研究［J］.中国电化教育，2011（6）：70-75.

［9］李群明.工学结合模式下高职共享型教学资源库建设的策略［J］.教育与职业，2014（5）：171-172.

［10］万宁.创意PHOTOSHOPCS5网页设计与配色实战攻略［M］.北京：清华大学出版社，2013.

［11］戴维，乔纳森等.学会用技术解决问题——一个建构主义者的视角［M］.北京：教育科学出版社，2007.

［12］Saskia Kistner，Katrin Rakoczy etc.Promotion of Self-Regulated Learning in Classrooms：Investigating Frequency，Quality，and Consequences for StudentPerformance［J］. Metacognition Learning，2010（5）：157-193.

［13］李利平.高职教育专业教学资源库建设的改革思考［J］.中国高教研究，2011（1）：90-91.

Implementation of TRL-SS integrationmode in college teaching——taking asan exam p le

SHENG Yun-yao，ZHANG Li
（Information Engineering Department，Changzhou Vocational InstituteofMechatronic Technology，Changzhou，Jiangsu，China213164）

Atpresent，the teaching resource library（TRL）playsadecisive role in college teaching.A ftermore than a year of teaching practice，it is found that TRL has some lack such as the open platform is notenough，the lack of real-time interaction and the lack of information push.To enable TRL to better serve the teaching and improve students'learning initiative and learning effect，this paper studies theapplicationofsocialsoftware（SS）in teachingand puts forward the integratedmodeof TRL-SS.TakingWebpage Layoutand Color Matching as an example，the paper expounds the implementation of TRL-SSmodel in the teaching of the course.Through the surveyand analysisof the implementation effect，it is found thatthe TRL-SSmode stimulatesstudents'interests in learning，improves the students'classroom participation and hasgood teachingeffect.TRL-SSmode provides some reference for teaching reform in collegesand universities.

teaching resource library；social software；；curriculum reform

10.3969/j.issn.2095-7661.2016.02.033】

TP393.092

A

2095-7661（2016）02-0104-05

2016-04-13

常州大学高等职业教育研究院2014年度立项课题“信息时代常州高职园区特色课程建设实践研究—以网页布局与配色课程为例”（课题编号：CDGZ2014014）；江苏省教育科学“十二五”规划2013年度课题“基于云计算的高职数字化校园建设的研究——以常州科教城为例”（课题编号：C-b/2013/03/007）。

盛昀瑶（1980-），女，江苏常州人，常州机电职业技术学院信息工程学院讲师，硕士，研究方向：教育信息化。