《網頁設計》課程的綜合實驗設計

曹巍 尤曉東

摘要：在中國人民大學計算機教學的新一輪教學改革中，提高學生的動手實踐能力是核心和關鍵[2]，因此課程設計和實驗設計始終圍繞這一中心問題開展。文章探討教改中《網頁設計》課程的綜合實驗設計思路，以典型案例的方式，分析綜合實驗設計的幾個重要因素，并分享實驗實施以來的初步效果和進一步工作打算。

關鍵詞：計算機應用類;教學改革;實驗設計

中圖分類號：G642.0 ? ? 文獻標志碼：A ? ? 文章編號：1674-9324（2020）14-0114-03

一、課程背景簡介

《網頁設計》課程是中國人民大學本科全校共同課中的一門應用類課程，主要針對本科大一、大二的非計算機專業學生，這些學生中文科學生占大多數。隨著大數據和人工智能技術的發展，人文社科領域的研究越來越借助大數據和分析的技術，而網頁是大數據的重要來源之一，因此學習網頁的設計和制作，可以為學生今后在工作和在學術上進一步利用大數據打下有力的基礎。

本課程2學分，在18周中每周2學時教學，2學時上機。講授的主要內容集中在HTML、CSS、JavaScript三部分。由于文科學生沒有編程基礎，前兩部分內容從上手到熟練（講授和上機）基本各需5周時間，最后一部分內容主要介紹JavaScript作為編程語言的主要特征，目的是讓學生初步了解編程，更重要的是知道編程在網頁設計和制作中能做什么、為什么要有編程，以便為學生今后進一步學習編程起到入門的作用。

貫穿所有教學周，給學生布置大量的練習題目，一部分以上機練習的形式出現，主要在上機時段機房完成，會有教師和助教答疑;一部分以綜合實驗的形式出現，會有一周左右的期限，既可以在上機時段答疑完成，也可以課下繼續完成。題目的目的主要有三個：（1）鞏固課上所學;（2）拓展學生的知識視野，提升學生能力;（3）講求實用性，解決實際問題。題目設置考慮時機成熟度、學生完成的難易程度以及對后續學習的影響等因素。上機練習《媒體查詢和流動布局》就是基于這樣的考慮在第十二教學周布置的上機作業。現從這個典型題目設計分析入手，探討實驗設計對于課程設計和學生能力提升產生重要影響的因素。

二、實驗設計要素

在為《網頁設計》課程進行實驗設計時，主要從時間節點、題目內容、題目難易程度以及對后續自學的支持程度等方面進行考慮。下面以《媒體查詢和流動布局》這一綜合實驗展開說明。

1.時間節點考慮?！睹襟w查詢和流動布局》的實驗安排是在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分。

四、結語

在課程建設的過程中，提高學生的領悟理解能力與動手實踐水平始終是教學改革的核心。在建設《網頁設計》課程時，我們將教改重點放在實驗設計上，從時間節點、題目內容的貼合性、題目難易程度的把握以及對學生后續自學的影響等幾個因素來考慮設計題目?！睹襟w查詢和流動布局》這個綜合實驗是在這種設計理念下形成的典型案例，因此也在第四屆全國計算機類課程實驗教學案例設計競賽中獲得了二等獎。未來工作需要收集分析學生的反饋信息，給出評估實驗題目有效性的客觀評價方法。

參考文獻：

[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