《网页设计》课程的综合实验设计

曹巍 尤晓东

摘要：在中國人民大学计算机教学的新一轮教学改革中，提高学生的动手实践能力是核心和关键[2]，因此课程设计和实验设计始终围绕这一中心问题开展。文章探讨教改中《网页设计》课程的综合实验设计思路，以典型案例的方式，分析综合实验设计的几个重要因素，并分享实验实施以来的初步效果和进一步工作打算。

关键词：计算机应用类;教学改革;实验设计

中图分类号：G642.0     文献标志码：A     文章编号：1674-9324（2020）14-0114-03

一、课程背景简介

《网页设计》课程是中国人民大学本科全校共同课中的一门应用类课程，主要针对本科大一、大二的非计算机专业学生，这些学生中文科学生占大多数。随着大数据和人工智能技术的发展，人文社科领域的研究越来越借助大数据和分析的技术，而网页是大数据的重要来源之一，因此学习网页的设计和制作，可以为学生今后在工作和在学术上进一步利用大数据打下有力的基础。

本课程2学分，在18周中每周2学时教学，2学时上机。讲授的主要内容集中在HTML、CSS、JavaScript三部分。由于文科学生没有编程基础，前两部分内容从上手到熟练（讲授和上机）基本各需5周时间，最后一部分内容主要介绍JavaScript作为编程语言的主要特征，目的是让学生初步了解编程，更重要的是知道编程在网页设计和制作中能做什么、为什么要有编程，以便为学生今后进一步学习编程起到入门的作用。

贯穿所有教学周，给学生布置大量的练习题目，一部分以上机练习的形式出现，主要在上机时段机房完成，会有教师和助教答疑;一部分以综合实验的形式出现，会有一周左右的期限，既可以在上机时段答疑完成，也可以课下继续完成。题目的目的主要有三个：（1）巩固课上所学;（2）拓展学生的知识视野，提升学生能力;（3）讲求实用性，解决实际问题。题目设置考虑时机成熟度、学生完成的难易程度以及对后续学习的影响等因素。上机练习《媒体查询和流动布局》就是基于这样的考虑在第十二教学周布置的上机作业。现从这个典型题目设计分析入手，探讨实验设计对于课程设计和学生能力提升产生重要影响的因素。

二、实验设计要素

在为《网页设计》课程进行实验设计时，主要从时间节点、题目内容、题目难易程度以及对后续自学的支持程度等方面进行考虑。下面以《媒体查询和流动布局》这一综合实验展开说明。

1.时间节点考虑。《媒体查询和流动布局》的实验安排是在CSS内容的最后一次课，至此，学生们初步掌握了HTML和CSS的有关静态网页内容、结构和样式设计（后续的内容是相对较抽象的JS语言）。此次的综合实验可视为对前一部分所学内容的总结。

2.题目内容的贴合性考虑。CSS的最后一次课介绍了媒体查询和流动布局，此次综合实验考查并巩固学生对这一部分所学，同时兼顾题目趣味性和实用性的考虑，采用了模仿校园邮箱首页的形式完成。邮箱首页也是学生较熟悉且经常访问的网页，但是其流式布局的设计却少有学生留意到。采用模拟校园邮箱首页的方式也比较贴合学生的生活，如下图所示。

3.题目难易程度的把握。本题通过图片展示给学生应该完成的效果。实际给学生的代码是共享编程平台Codepen的代码链接，需要学生自己根据课上所学给出代码，实现题目效果。题目中有一些预先给定的代码，减少学生录入代码的工作量。实际给学生的代码和效果如下图所示。

学生需要在现有代码的基础上补充完整原网页中缺失的图片和文字，以及按照要求进行页面流动布局。具体说来，为完成题目学生们需要：（1）查找人大邮箱首页资源的信息，将缺失的邮箱logo图片添加至页面头部的合适位置。（2）查找人大邮箱首页资源的信息，将相关的提示图片作为背景图片添加在表单元素中。（3）查找人大邮箱首页资源的信息，将相关的提示图片作为伪元素加入指定的位置。（4）为网页添加响应式设计，通过使用CSS媒体查询，当用户的屏幕宽度在1000px以上时，页面呈三列显示;当用户的屏幕宽度在600px—1000px之间时，呈两列显示;当用户的屏幕宽度在600px以下时，呈一列显示。

题目设计通过对题面适当增加代码和减少代码调节难度。增加适当的代码，既为学生提供示范代码，也减少了学生的重复编码工作量;适当减少代码，为学生答题设置一些“障碍”，促使学生寻找相关资源，从而更深刻地理解网页结构和网页设计。

4.课程后续自学的考虑。这次题目在讲解阶段会为学生演示分析邮箱官网页面的结构，以及如何找到指定元素的方法。通过这一实例，为学生演示查看网页代码的方法，供学生继续学习鉴赏其他优秀网页以及制作网页。另一方面，由于课时有限，没有来得及讲授的CSS动画和CSS多类名等内容在实验的提示代码中都有出现，学生对这几部分可以依据兴趣自己探索自学。

总之，在HTML和CSS这两部分授课结束时，我们希望通过这个综合实验为学生开一扇窗，看到网页世界的丰富多彩，并能通过有力的工具在这个世界中继续遨游、学习。

三、评价标准和实施效果

本实验满分10分，各项的评分标准如下表所示。

实验效果良好，实验实施3个学期，115名学生选课，该实验的完成率为100%，平均成绩9分。

四、结语

在课程建设的过程中，提高学生的领悟理解能力与动手实践水平始终是教学改革的核心。在建设《网页设计》课程时，我们将教改重点放在实验设计上，从时间节点、题目内容的贴合性、题目难易程度的把握以及对学生后续自学的影响等几个因素来考虑设计题目。《媒体查询和流动布局》这个综合实验是在这种设计理念下形成的典型案例，因此也在第四届全国计算机类课程实验教学案例设计竞赛中获得了二等奖。未来工作需要收集分析学生的反馈信息，给出评估实验题目有效性的客观评价方法。

参考文献：

[1]中国人民大学本科计算机公共课教学改革内部资料[Z].

[2]潘旭燕，尤晓东.浅议大学公共计算机教学改革与教学资源建设[J].科学咨询（科技管理），2019，（06）：11-12.

Abstract：In the new round of teaching reform of computer-related compulsory courses in our university，improving students' practical coding ability is the core and key.Therefore，curriculum design and assignment design always revolve around this central issue.This paper discusses the idea of laboratory assignment design for the course of "Web Design" in teaching reform，analyzes several important factors which dominate such design by way of typical cases，and shares the preliminary outcome since deployment and further work plan for the next step.

Key words：computer application;teaching reform;experiment design