《網(wǎng)頁(yè)設(shè)計(jì)與編程》課程網(wǎng)站開(kāi)發(fā)與教學(xué)實(shí)例的結(jié)合初探

摘要:課程網(wǎng)站的開(kāi)發(fā)及利用是網(wǎng)絡(luò)課程建設(shè)的重要手段。本文通過(guò)介紹《網(wǎng)頁(yè)設(shè)計(jì)與編程》課程網(wǎng)站設(shè)計(jì)及開(kāi)發(fā)，探討了如何將將課程網(wǎng)站的開(kāi)發(fā)技術(shù)與本課程的教學(xué)實(shí)例進(jìn)行有效的結(jié)合，從而提高學(xué)生的學(xué)習(xí)興趣，為課程的建設(shè)及教學(xué)改革提供了新的思路。

關(guān)鍵詞:網(wǎng)頁(yè)設(shè)計(jì)與編程;XHTML;CSS;JavaScript;教學(xué)改革

中圖分類(lèi)號(hào):G642文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):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 引言

網(wǎng)絡(luò)教學(xué)是教育發(fā)展的趨勢(shì)。網(wǎng)絡(luò)課程是指綜合運(yùn)用網(wǎng)絡(luò)技術(shù)、計(jì)算機(jī)技術(shù)和多媒體技術(shù)的輔助教學(xué)課程。網(wǎng)絡(luò)課程的建設(shè)是建設(shè)數(shù)字化校園、推進(jìn)教育信息化和現(xiàn)代化進(jìn)程的重要環(huán)節(jié)，也是滿(mǎn)足學(xué)生多形式、多樣化學(xué)習(xí)，提高教學(xué)質(zhì)量的重要途徑。課程網(wǎng)站是網(wǎng)絡(luò)教學(xué)的主要平臺(tái)，網(wǎng)絡(luò)課程的建設(shè)主要是通過(guò)課程網(wǎng)站提供的各種功能如:教學(xué)資源共享、課堂內(nèi)外的教學(xué)平臺(tái)、作品展示及評(píng)選、以及師生網(wǎng)絡(luò)交流互動(dòng)的方式實(shí)現(xiàn)。

《網(wǎng)頁(yè)設(shè)計(jì)與編程》是計(jì)算機(jī)專(zhuān)業(yè)課中的一門(mén)實(shí)踐性、操作性、綜合性較強(qiáng)的課程，其主要內(nèi)容為XHTML、CSS及JavaScript三大網(wǎng)頁(yè)設(shè)計(jì)核心技術(shù)。在網(wǎng)絡(luò)教學(xué)迅速發(fā)展的今天，建立《網(wǎng)頁(yè)設(shè)計(jì)與編程》課程的教學(xué)網(wǎng)站不僅是教學(xué)改革與建設(shè)的要求，更是課程教學(xué)內(nèi)在的要求。通過(guò)課程網(wǎng)站的建設(shè)，一方面為本課程的教學(xué)提供更豐富的教學(xué)資源及有效的教學(xué)手段;另一方面，教師可以將課程網(wǎng)站建設(shè)的各個(gè)方面作為本課程的具體案例，結(jié)合課程教學(xué)的展示，能夠更進(jìn)一步激發(fā)學(xué)生的學(xué)習(xí)興趣。

2 《網(wǎng)頁(yè)設(shè)計(jì)與編程》課程網(wǎng)站的設(shè)計(jì)

2.1 網(wǎng)站的結(jié)構(gòu)設(shè)計(jì)

為了充分滿(mǎn)足課程建設(shè)的需求，同時(shí)結(jié)合本課程的特點(diǎn)，我們將《網(wǎng)頁(yè)設(shè)計(jì)與編程》課程網(wǎng)站分為5大功能模塊，分別是:課程信息、課程學(xué)習(xí)、實(shí)踐教學(xué)、課后練習(xí)及討論答疑。其中每個(gè)模塊下又分為3個(gè)欄目，共15個(gè)欄目。這些內(nèi)容較完整的涵蓋了課程教學(xué)及建設(shè)的各個(gè)方面。網(wǎng)站的基本結(jié)構(gòu)如圖1所示。

2.2 課程信息

課程信息模塊包括課程簡(jiǎn)介、教學(xué)大綱及教師團(tuán)隊(duì)。這些欄目可以幫助學(xué)生了解課程的概況、本科及專(zhuān)科的教學(xué)大綱要求以及教師的信息等。

2.3 課程學(xué)習(xí)

課程學(xué)習(xí)的模塊分為網(wǎng)絡(luò)課程、電子教案及網(wǎng)絡(luò)資源?！熬W(wǎng)絡(luò)課程”欄目按章節(jié)以網(wǎng)頁(yè)的形式提供教學(xué)課件，方便學(xué)生課后自學(xué);“電子教案”欄目則提供課堂教學(xué)的教案下載，方便教師的課堂教學(xué)及學(xué)生課后的復(fù)習(xí);“網(wǎng)絡(luò)資源”欄目包括技術(shù)網(wǎng)址、常用術(shù)語(yǔ)、參考文獻(xiàn)及軟件下載等。

2.4 實(shí)踐教學(xué)

實(shí)踐教學(xué)模塊分為實(shí)驗(yàn)指導(dǎo)、課程設(shè)計(jì)及學(xué)生作品?！皩?shí)驗(yàn)指導(dǎo)”欄目包括實(shí)驗(yàn)?zāi)夸洝?shí)驗(yàn)內(nèi)容簡(jiǎn)介及效果預(yù)覽，并提供實(shí)驗(yàn)指導(dǎo)書(shū)的下載使用;“課程設(shè)計(jì)”欄目提供本科及專(zhuān)科的課程設(shè)計(jì)大綱、歷年的課程設(shè)計(jì)任務(wù)書(shū)及時(shí)間安排表、課程設(shè)計(jì)指導(dǎo)書(shū)，以及課程設(shè)計(jì)報(bào)告書(shū)的參考格式;“學(xué)生作品”欄目則提供一些優(yōu)秀的學(xué)生作品網(wǎng)站欣賞。

2.5 課后練習(xí)

課后練習(xí)模塊包括習(xí)題配備、作業(yè)布置及自測(cè)練習(xí)。“習(xí)題配備”欄目提供與課程相關(guān)的3大技術(shù)的練習(xí)題題庫(kù)，并允許瀏覽者利用相應(yīng)的按鈕來(lái)顯示各題的答案;“作業(yè)布置”欄目明確各章的課后作業(yè)題及要求;“自測(cè)練習(xí)”欄目則提供XHTML、CSS及JavaScript的自測(cè)練習(xí)題，允許瀏覽者用單選按鈕選擇題目的答案，并利用“交卷”按鈕來(lái)反饋答題的正確、錯(cuò)誤及漏答的題數(shù)，利用“清除”按鈕來(lái)重新答題，并提供顯示答案的功能，以對(duì)照自己的選項(xiàng)正誤。

本模塊中的“習(xí)題配備”及“自測(cè)練習(xí)”部分綜合運(yùn)用了課程教學(xué)內(nèi)容中的3大核心技術(shù):XHTML、CSS及JavaScript進(jìn)行編寫(xiě)，可以在課程教學(xué)的后期為學(xué)生展示3大技術(shù)的綜合應(yīng)用。

2.6 討論答疑

討論答疑模塊主要通過(guò)BBS論壇的功能來(lái)實(shí)現(xiàn)。論壇提供3大功能板塊:討論區(qū)、作業(yè)區(qū)和我的推薦，分別用于討論答疑、作業(yè)提交、資源及優(yōu)秀作品推薦和展示。

討論答疑模塊使用ASP技術(shù)開(kāi)發(fā)，數(shù)據(jù)庫(kù)采用Access。這里也為學(xué)生后續(xù)學(xué)習(xí)ASP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)埋下了一個(gè)伏筆。

3 課程網(wǎng)站開(kāi)發(fā)技術(shù)與教學(xué)實(shí)例的結(jié)合

由于《網(wǎng)頁(yè)設(shè)計(jì)與編程》課程網(wǎng)站的開(kāi)發(fā)過(guò)程中用到Web標(biāo)準(zhǔn)中的3大主流技術(shù):XHTML、CSS及JavaScript，而這些技術(shù)同時(shí)也屬于課程的主要教學(xué)內(nèi)容，因此可為課程的教學(xué)提供一些現(xiàn)實(shí)的案例。比如，在講XHTML語(yǔ)言的文本標(biāo)記時(shí)，可以利用“課程簡(jiǎn)介”頁(yè)面中的文字內(nèi)容進(jìn)行變化，來(lái)講解不同標(biāo)記的應(yīng)用效果;在講解CSS的應(yīng)用時(shí)，可以結(jié)合課程網(wǎng)站的總體風(fēng)格及其相應(yīng)的CSS文件進(jìn)行講解;在課程網(wǎng)站的課程測(cè)試模塊中，“習(xí)題配備”部分的顯示答案和隱藏答案部分，綜合應(yīng)用了CSS的層屬性及JavaScript的按鈕對(duì)象編程功能;而“自測(cè)練習(xí)”頁(yè)面的各項(xiàng)功能，更能直觀(guān)的展示JavaScript語(yǔ)言綜合編程的應(yīng)用，適合作為補(bǔ)充性的案例引導(dǎo)學(xué)生進(jìn)行分析和修改，提高學(xué)生的自學(xué)能力。

下面我們以“習(xí)題配備”及“自測(cè)練習(xí)”欄目的實(shí)現(xiàn)為例，探討如何利用XHTML、CSS及JavaScript三大網(wǎng)頁(yè)設(shè)計(jì)的核心技術(shù)來(lái)實(shí)現(xiàn)許多課程網(wǎng)站中提供的“學(xué)生自測(cè)”功能，包括顯示和隱藏答案、以及利用表單編程來(lái)顯示測(cè)試結(jié)果等功能。并對(duì)這些實(shí)例在課程的案例教學(xué)中的適用情況進(jìn)行了分析和建議。

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

3.1.1 顯示和隱藏答案的頁(yè)面效果

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

當(dāng)瀏覽者單擊某一題目的按鈕，如第一題的“顯示答案”按鈕時(shí)，則顯示相應(yīng)題目的答案，同時(shí)按鈕表面的文字由“顯示答案”，變?yōu)椤半[藏答案”，如圖3所示。再次單擊同一按鈕則回到開(kāi)始的狀態(tài)，如圖2所示。

3.1.2 顯示、隱藏答案的功能函數(shù)及其頁(yè)面應(yīng)用

1) 函數(shù)的定義

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

其中sname參數(shù)對(duì)應(yīng)調(diào)用該函數(shù)的按鈕對(duì)象，sid參數(shù)對(duì)應(yīng)按鈕所控制表格的id值。

2) 頁(yè)面編輯及函數(shù)的調(diào)用

用XHTML及CSS編輯頁(yè)面。其中第一題的頁(yè)面內(nèi)容代碼如下:

1.JavaScript有四種基本的數(shù)據(jù)類(lèi)型，它們是:_______類(lèi)型、_______類(lèi)型、_______類(lèi)型和_______類(lèi)型

(1)數(shù)值(2)字符(3)布爾(4)對(duì)象

整個(gè)題目區(qū)域用一個(gè)表格來(lái)定義，這里答案顯示區(qū)域?yàn)榈诙械诙袉卧裰械囊粋€(gè)嵌套表格，并用style=\"display:none\"的CSS屬性定義其初始內(nèi)容為隱藏狀態(tài)，用id=\"t1\"定義該隱藏表格的id值為t1。第二行的第一列單元格中放置的就是“顯示答案”按鈕，并通過(guò)onclick=\"showhide(this，t1);\"的代碼實(shí)現(xiàn)單擊事件編程，進(jìn)而調(diào)用前面所定義的顯示、隱藏功能函數(shù)。通過(guò)單擊按鈕時(shí)調(diào)用函數(shù)來(lái)改變t1表格的顯示、隱藏狀態(tài)，同時(shí)相應(yīng)的改變按鈕自身的顯示文字

該頁(yè)面實(shí)例所運(yùn)用到的知識(shí)點(diǎn)主要包括:XHTML表格及表單元素的編輯、用CSS定義表格或?qū)又械娘@示、隱藏屬性、JavaScript的按鈕事件編程，以及JavaScript函數(shù)的定義和調(diào)用，比較適合于作為JavaScript函數(shù)應(yīng)用的教學(xué)實(shí)例。

3.2 “自測(cè)練習(xí)”中的JavaScript表單編程

3.2.1 “自測(cè)練習(xí)”的頁(yè)面效果

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

當(dāng)瀏覽者單擊“交卷”按鈕時(shí)，首先彈出一個(gè)確認(rèn)對(duì)話(huà)框以供確認(rèn)，如圖5所示，單擊其中的“確定”按鈕后即彈出測(cè)試結(jié)果提示框，如圖6所示。

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

3.2.2 “自測(cè)練習(xí)”中的JavaScript編程及實(shí)現(xiàn)

1) 數(shù)組定義及函數(shù)功能

首先在頁(yè)面頭部插入如下的JavaScript代碼，用數(shù)組標(biāo)識(shí)本組測(cè)試題的答案，并編寫(xiě)相應(yīng)的函數(shù)統(tǒng)計(jì)瀏覽者交卷后的答題情況。代碼如下:

2) 頁(yè)面設(shè)置及JavaScript的表單編程

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

“交卷”按鈕的代碼為:

“清除”按鈕的代碼為:

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

其中按鈕的onclick 事件調(diào)用了showhide函數(shù)，函數(shù)中的第一個(gè)參數(shù)s對(duì)應(yīng)按鈕本身的id，第二個(gè)參數(shù)ans對(duì)應(yīng)按鈕下方的一個(gè)隱藏表格的id，表格中的內(nèi)容就是自測(cè)題的答案。

該頁(yè)面實(shí)例編程的主要難點(diǎn)是JavaScript表單編程中較為復(fù)雜的函數(shù)定義，以及函數(shù)與表單界面中各元素命名的結(jié)合，尤其適合作為鍛煉學(xué)生綜合的網(wǎng)頁(yè)編程能力的教學(xué)實(shí)例。在實(shí)際的教學(xué)中，可以把自測(cè)結(jié)果所考慮到的各種情況由簡(jiǎn)入繁，從簡(jiǎn)單到全面，采用啟發(fā)式教學(xué)，培養(yǎng)學(xué)生的發(fā)散性思維，以及嚴(yán)謹(jǐn)?shù)木幊谭椒ê湍芰Α?/p>

4 小結(jié)

對(duì)于《網(wǎng)頁(yè)設(shè)計(jì)與編程》課程網(wǎng)站來(lái)說(shuō)，除了實(shí)現(xiàn)課程所需要的網(wǎng)絡(luò)教學(xué)平臺(tái)的功能以外，其開(kāi)發(fā)過(guò)程所用到的許多技術(shù)本身也屬于課程的教學(xué)內(nèi)容，因此可以作為一個(gè)貫穿整個(gè)教學(xué)過(guò)程的綜合案例，使其充分發(fā)揮課程網(wǎng)站的作用?！毒W(wǎng)頁(yè)設(shè)計(jì)與編程》課程網(wǎng)站的這雙重功能已經(jīng)成為本課程教學(xué)建設(shè)和改革中新的亮點(diǎn)和特色，并在實(shí)際的教學(xué)過(guò)程中取得較好的效果。