《網頁設計與編程》課程網站開發與教學實例的結合初探

摘要:課程網站的開發及利用是網絡課程建設的重要手段。本文通過介紹《網頁設計與編程》課程網站設計及開發，探討了如何將將課程網站的開發技術與本課程的教學實例進行有效的結合，從而提高學生的學習興趣，為課程的建設及教學改革提供了新的思路。

關鍵詞:網頁設計與編程;XHTML;CSS;JavaScript;教學改革

中圖分類號:G642文獻標識碼:A文章編號:1009-3044(2009)14-3829-04

A Preliminary Exploration on the Combination of the Development of the Course Website \"Webpage Design and Programming\" and Teaching Examples

MO Xiao-mei

(Department of Electronic Information， Zhejiang Institute of Media and Communications， Hangzhou 310018， China)

Abstract: The development and utilization of course website is an important method of the construction of network course. According to the introduction of design and development of the course website \"Webpage Design and Programming\"， this paper discusses how to combine effectively the development technology of course website and the teaching examples of this course， thus inspires the students’ interest of course study， and proposes a new way of the course's construction and reformation.

Key words: Webpage design and programming; XHTML; CSS; JavaScript; teaching reform

1 引言

網絡教學是教育發展的趨勢。網絡課程是指綜合運用網絡技術、計算機技術和多媒體技術的輔助教學課程。網絡課程的建設是建設數字化校園、推進教育信息化和現代化進程的重要環節，也是滿足學生多形式、多樣化學習，提高教學質量的重要途徑。課程網站是網絡教學的主要平臺，網絡課程的建設主要是通過課程網站提供的各種功能如:教學資源共享、課堂內外的教學平臺、作品展示及評選、以及師生網絡交流互動的方式實現。

《網頁設計與編程》是計算機專業課中的一門實踐性、操作性、綜合性較強的課程，其主要內容為XHTML、CSS及JavaScript三大網頁設計核心技術。在網絡教學迅速發展的今天，建立《網頁設計與編程》課程的教學網站不僅是教學改革與建設的要求，更是課程教學內在的要求。通過課程網站的建設，一方面為本課程的教學提供更豐富的教學資源及有效的教學手段;另一方面，教師可以將課程網站建設的各個方面作為本課程的具體案例，結合課程教學的展示，能夠更進一步激發學生的學習興趣。

2 《網頁設計與編程》課程網站的設計

2.1 網站的結構設計

為了充分滿足課程建設的需求，同時結合本課程的特點，我們將《網頁設計與編程》課程網站分為5大功能模塊，分別是:課程信息、課程學習、實踐教學、課后練習及討論答疑。其中每個模塊下又分為3個欄目，共15個欄目。這些內容較完整的涵蓋了課程教學及建設的各個方面。網站的基本結構如圖1所示。

2.2 課程信息

課程信息模塊包括課程簡介、教學大綱及教師團隊。這些欄目可以幫助學生了解課程的概況、本科及專科的教學大綱要求以及教師的信息等。

2.3 課程學習

課程學習的模塊分為網絡課程、電子教案及網絡資源。“網絡課程”欄目按章節以網頁的形式提供教學課件，方便學生課后自學;“電子教案”欄目則提供課堂教學的教案下載，方便教師的課堂教學及學生課后的復習;“網絡資源”欄目包括技術網址、常用術語、參考文獻及軟件下載等。

2.4 實踐教學

實踐教學模塊分為實驗指導、課程設計及學生作品。“實驗指導”欄目包括實驗目錄、實驗內容簡介及效果預覽，并提供實驗指導書的下載使用;“課程設計”欄目提供本科及專科的課程設計大綱、歷年的課程設計任務書及時間安排表、課程設計指導書，以及課程設計報告書的參考格式;“學生作品”欄目則提供一些優秀的學生作品網站欣賞。

2.5 課后練習

課后練習模塊包括習題配備、作業布置及自測練習。“習題配備”欄目提供與課程相關的3大技術的練習題題庫，并允許瀏覽者利用相應的按鈕來顯示各題的答案;“作業布置”欄目明確各章的課后作業題及要求;“自測練習”欄目則提供XHTML、CSS及JavaScript的自測練習題，允許瀏覽者用單選按鈕選擇題目的答案，并利用“交卷”按鈕來反饋答題的正確、錯誤及漏答的題數，利用“清除”按鈕來重新答題，并提供顯示答案的功能，以對照自己的選項正誤。

本模塊中的“習題配備”及“自測練習”部分綜合運用了課程教學內容中的3大核心技術:XHTML、CSS及JavaScript進行編寫，可以在課程教學的后期為學生展示3大技術的綜合應用。

2.6 討論答疑

討論答疑模塊主要通過BBS論壇的功能來實現。論壇提供3大功能板塊:討論區、作業區和我的推薦，分別用于討論答疑、作業提交、資源及優秀作品推薦和展示。

討論答疑模塊使用ASP技術開發，數據庫采用Access。這里也為學生后續學習ASP動態網站開發埋下了一個伏筆。

3 課程網站開發技術與教學實例的結合

由于《網頁設計與編程》課程網站的開發過程中用到Web標準中的3大主流技術:XHTML、CSS及JavaScript，而這些技術同時也屬于課程的主要教學內容，因此可為課程的教學提供一些現實的案例。比如，在講XHTML語言的文本標記時，可以利用“課程簡介”頁面中的文字內容進行變化，來講解不同標記的應用效果;在講解CSS的應用時，可以結合課程網站的總體風格及其相應的CSS文件進行講解;在課程網站的課程測試模塊中，“習題配備”部分的顯示答案和隱藏答案部分，綜合應用了CSS的層屬性及JavaScript的按鈕對象編程功能;而“自測練習”頁面的各項功能，更能直觀的展示JavaScript語言綜合編程的應用，適合作為補充性的案例引導學生進行分析和修改，提高學生的自學能力。

下面我們以“習題配備”及“自測練習”欄目的實現為例，探討如何利用XHTML、CSS及JavaScript三大網頁設計的核心技術來實現許多課程網站中提供的“學生自測”功能，包括顯示和隱藏答案、以及利用表單編程來顯示測試結果等功能。并對這些實例在課程的案例教學中的適用情況進行了分析和建議。

3.1 “習題配備”中的顯示和隱藏答案功能

3.1.1 顯示和隱藏答案的頁面效果

“習題配備”欄目提供基礎及XHTML知識、CSS、JavaScript三大網頁設計核心技術的練習題庫，形式上有填空、選擇、判斷、簡答4種題型。這些題目考慮到為學生課后復習提供方便，為每一小題各配備了一個同時具備顯示和隱藏答案功能的按鈕，如圖2所示。這樣學生可以在看到某一題目的時候有意識的先思考一下自己是否已經掌握了相應的知識點，然后通過對應的按鈕進行核對答案。

當瀏覽者單擊某一題目的按鈕，如第一題的“顯示答案”按鈕時，則顯示相應題目的答案，同時按鈕表面的文字由“顯示答案”，變為“隱藏答案”，如圖3所示。再次單擊同一按鈕則回到開始的狀態，如圖2所示。

3.1.2 顯示、隱藏答案的功能函數及其頁面應用

1) 函數的定義

首先定義一個實現顯示和隱藏功能的JavaScript函數，并把該函數放在頁面的頭部(與之間)。函數代碼如下:

其中sname參數對應調用該函數的按鈕對象，sid參數對應按鈕所控制表格的id值。

2) 頁面編輯及函數的調用

用XHTML及CSS編輯頁面。其中第一題的頁面內容代碼如下:

1.JavaScript有四種基本的數據類型，它們是:_______類型、_______類型、_______類型和_______類型

(1)數值(2)字符(3)布爾(4)對象

整個題目區域用一個表格來定義，這里答案顯示區域為第二行第二列單元格中的一個嵌套表格，并用style=\"display:none\"的CSS屬性定義其初始內容為隱藏狀態，用id=\"t1\"定義該隱藏表格的id值為t1。第二行的第一列單元格中放置的就是“顯示答案”按鈕，并通過onclick=\"showhide(this，t1);\"的代碼實現單擊事件編程，進而調用前面所定義的顯示、隱藏功能函數。通過單擊按鈕時調用函數來改變t1表格的顯示、隱藏狀態，同時相應的改變按鈕自身的顯示文字

該頁面實例所運用到的知識點主要包括:XHTML表格及表單元素的編輯、用CSS定義表格或層中的顯示、隱藏屬性、JavaScript的按鈕事件編程，以及JavaScript函數的定義和調用，比較適合于作為JavaScript函數應用的教學實例。

3.2 “自測練習”中的JavaScript表單編程

3.2.1 “自測練習”的頁面效果

“自測練習”欄目包括XHTML、CSS、JavaScript三組在線自測題目，全部采用單選題型，便于學生自查自己的課程知識掌握情況。瀏覽者在完成每組測試題后可以通過“交卷”按鈕交卷，也可以通過“清除”按鈕重新答題，如圖4所示。

當瀏覽者單擊“交卷”按鈕時，首先彈出一個確認對話框以供確認，如圖5所示，單擊其中的“確定”按鈕后即彈出測試結果提示框，如圖6所示。

“自測練習”欄目還提供了類似于“習題配備”欄目中的顯示、隱藏答案功能，可以一次性顯示或隱藏本次測試中所有題目的答案，以供瀏覽者核對。

3.2.2 “自測練習”中的JavaScript編程及實現

1) 數組定義及函數功能

首先在頁面頭部插入如下的JavaScript代碼，用數組標識本組測試題的答案，并編寫相應的函數統計瀏覽者交卷后的答題情況。代碼如下:

2) 頁面設置及JavaScript的表單編程

自測頁面采用表單設計，其中包括每一小題的題目、選項、所有相應的單選按鈕，以及三個功能按鈕都屬于同一表單。表單的內部用表格進行排版。為了與頁面頭部的JavaScript函數所使用的函數相對應，頁面中每一小題用到的同組單選按鈕name屬性分別為a1、a2、a3……，其中每一組按鈕對應的value值分別為a、b、c、d。然后分別對三個功能按鈕的代碼進行設置。

“交卷”按鈕的代碼為:

“清除”按鈕的代碼為:

“顯示答案”按鈕的代碼為:

其中按鈕的onclick 事件調用了showhide函數，函數中的第一個參數s對應按鈕本身的id，第二個參數ans對應按鈕下方的一個隱藏表格的id，表格中的內容就是自測題的答案。

該頁面實例編程的主要難點是JavaScript表單編程中較為復雜的函數定義，以及函數與表單界面中各元素命名的結合，尤其適合作為鍛煉學生綜合的網頁編程能力的教學實例。在實際的教學中，可以把自測結果所考慮到的各種情況由簡入繁，從簡單到全面，采用啟發式教學，培養學生的發散性思維，以及嚴謹的編程方法和能力。

4 小結

對于《網頁設計與編程》課程網站來說，除了實現課程所需要的網絡教學平臺的功能以外，其開發過程所用到的許多技術本身也屬于課程的教學內容，因此可以作為一個貫穿整個教學過程的綜合案例，使其充分發揮課程網站的作用。《網頁設計與編程》課程網站的這雙重功能已經成為本課程教學建設和改革中新的亮點和特色，并在實際的教學過程中取得較好的效果。