江海燕　杜　林　李樹金　趙　珂

文章編號：1672-5913(2009)02-0083-02

摘要：在網(wǎng)絡(luò)時代的今天，網(wǎng)頁設(shè)計的地位更顯重要，這對高?！熬W(wǎng)頁設(shè)計”課程的教學(xué)提出了更高的要求。本文首先分析了該課程常用的教學(xué)方法。然后從教學(xué)環(huán)節(jié)、教學(xué)內(nèi)容、教學(xué)方法、教學(xué)評價等角度精心設(shè)計了科學(xué)的教學(xué)方案。實踐證明該教學(xué)方案教學(xué)效果較好，但是還有待完善。

關(guān)鍵詞：網(wǎng)頁設(shè)計；教學(xué)方法；教學(xué)方案

中圖分類號：G642

文獻(xiàn)標(biāo)識碼：A

1“網(wǎng)頁設(shè)計”課程與常用教學(xué)法

進(jìn)入信息高速發(fā)展的2l世紀(jì)，網(wǎng)絡(luò)遍布世界，人類進(jìn)入網(wǎng)絡(luò)時代。網(wǎng)絡(luò)給傳統(tǒng)商業(yè)模式帶來了極大的機(jī)遇和挑戰(zhàn)，而且深刻地改變著人類社會的生產(chǎn)、生活和交往方式，并更為深刻地改變著人們的思想觀念和精神世界。網(wǎng)絡(luò)中所有的信息都需要網(wǎng)頁去呈現(xiàn),于是網(wǎng)頁設(shè)計作為一門新興的行業(yè)應(yīng)運而生。

網(wǎng)頁設(shè)計是一門集設(shè)計技術(shù)、資源、美學(xué)等為一體的綜合設(shè)計課程。它依據(jù)網(wǎng)站設(shè)計目標(biāo)，把各種頁面元素、網(wǎng)頁布局、色彩、風(fēng)格等有機(jī)地統(tǒng)一在網(wǎng)頁中。網(wǎng)頁設(shè)計也已經(jīng)成為藝術(shù)設(shè)計中的一個重要分支。如何使學(xué)生設(shè)計出風(fēng)格獨具的網(wǎng)頁？創(chuàng)新的網(wǎng)頁？實用的網(wǎng)頁？讓學(xué)生在實踐創(chuàng)作中學(xué)習(xí)知識，提高能力？這對高校的“網(wǎng)頁設(shè)計”課程的教學(xué)提出了更高的要求。

目前，在高校的“網(wǎng)頁設(shè)計”課程教學(xué)中常用的教學(xué)方法有案例教學(xué)法、項目驅(qū)動教學(xué)法、分層教學(xué)法、網(wǎng)絡(luò)教學(xué)法、工學(xué)結(jié)合教學(xué)法等。上述教學(xué)方法是實踐證明了的較好的“網(wǎng)頁設(shè)計”的教學(xué)方法，合理運用，定能大大提高教學(xué)效果。

2“網(wǎng)頁設(shè)計”課程教學(xué)方案設(shè)計

“網(wǎng)頁設(shè)計”課程具有較強(qiáng)的實踐性，如何上好“網(wǎng)頁設(shè)計”課？筆者結(jié)合多年的實際教學(xué)，以教學(xué)的時間先后為順序，設(shè)計了如下的教學(xué)方案。

2.1備課階段

首先是備教材。選用集成度更好的Dreamweaver8.0作為網(wǎng)頁開發(fā)環(huán)境。從教材、參考書以及網(wǎng)絡(luò)中，歸納總結(jié)出具有代表性的典型案例，為課堂教學(xué)做好準(zhǔn)備。并且準(zhǔn)備好在多媒體機(jī)房上課需要的課件。

然后是備學(xué)生。注意分層教學(xué)法的應(yīng)用。分析學(xué)生的專業(yè)學(xué)習(xí)特點和目前的學(xué)習(xí)狀況，分為良好和一般兩個層次。從而制定不同層次的教學(xué)目標(biāo)和教學(xué)評價。并在實踐教學(xué)中不斷調(diào)整，提高學(xué)生的學(xué)習(xí)熱情和興趣。

2.2教學(xué)階段

教學(xué)階段是從學(xué)生開始學(xué)習(xí)“網(wǎng)頁設(shè)計”這門課程開始的，它的周期又可按時間先后分為“引子部分”、“理論學(xué)習(xí)部分”、“主體部分”。教學(xué)的地點選在多媒體機(jī)房。電腦的編輯環(huán)境為Dreamwear8.0。

2.2.1引子部分(2課時)

好的開始是成功的一半?！耙印本褪且诘谝惶谜n就調(diào)動起學(xué)生學(xué)習(xí)的興趣和激情。

該部分的第一個任務(wù)是回答問題：網(wǎng)絡(luò)在現(xiàn)在社會中發(fā)揮怎樣的作用？通過互動式的討論，引出網(wǎng)頁的概念，激發(fā)學(xué)生的參與和思考。

第二個任務(wù)是回答問題：吸引你的網(wǎng)頁有哪些？為什么？引導(dǎo)學(xué)生進(jìn)一步思考。教師可以通過介紹淘寶、巨人網(wǎng)絡(luò)、百度等優(yōu)秀的網(wǎng)頁以及它們成功的故事、采用的技術(shù)，鼓勵學(xué)生自己的創(chuàng)作熱情。

第三個任務(wù)是讓學(xué)生明確本課程的教學(xué)目標(biāo)和教學(xué)計劃。目標(biāo)是熟練掌握以Dreamweaver8.0為主的網(wǎng)頁開發(fā)工具，創(chuàng)作出自己的網(wǎng)頁設(shè)計作品。要求在“理論學(xué)習(xí)部分”結(jié)束之前，提交和確定每個人想要的網(wǎng)頁設(shè)計主題與項目方案，以項目驅(qū)動教學(xué)的整個過程。在“主題部分”，主要是采用項目驅(qū)動教學(xué)法、案例教學(xué)法和網(wǎng)絡(luò)教學(xué)法，以學(xué)生為主體，進(jìn)行教學(xué)。學(xué)生在學(xué)期末提交作品，進(jìn)入“評價階段”，教師對每個學(xué)生的創(chuàng)意作品進(jìn)行考核和點評。使學(xué)生明確每個教學(xué)環(huán)節(jié)都是環(huán)環(huán)相扣，由淺及深。使每個學(xué)生確信他們有能力最終實現(xiàn)自己的審美情趣、藝術(shù)修養(yǎng)和個性追求。

2.2.2理論學(xué)習(xí)部分(4課時左右)

該部分主要是講授關(guān)于網(wǎng)站開發(fā)的基礎(chǔ)知識。通過板書和多媒體等教學(xué)手段澄清一些關(guān)于網(wǎng)絡(luò)的概念和知識。使學(xué)生掌握網(wǎng)站開發(fā)的基本流程。并補(bǔ)充相關(guān)知識，使學(xué)生明確Internet、WWW和IE的關(guān)系；IP地址、域名和URL的關(guān)系；明確IP地址的分類；了解Web2.0的互聯(lián)網(wǎng)新模式等。

2.2.3主題部分(64課時左右)

在“理論學(xué)習(xí)部分”結(jié)束前，由教師審核每位學(xué)生提交的網(wǎng)頁設(shè)計主題與項目方案。教師對其中較好的項目方案進(jìn)行當(dāng)眾點評，比如青島的學(xué)生提出“奧運在我家”的設(shè)計方案，從“我”的角度去“看”奧運和青島，角度較好；比如“經(jīng)典語言匯總網(wǎng)”，將人們在電視劇、小品、網(wǎng)絡(luò)等多種媒體中出現(xiàn)的經(jīng)典語言進(jìn)行分類匯總，角度很新穎獨特。針對不適合的創(chuàng)意，教師可單獨與學(xué)生交互，修改確定新的項目方案。

當(dāng)每個學(xué)生都明確了項目方案后，在項目驅(qū)動的前提下，才能根據(jù)項目需求準(zhǔn)備相關(guān)的內(nèi)容資料、素材，也才能科學(xué)的展開“主題部分”的教學(xué)。

在“主體部分”的教學(xué)中，將網(wǎng)頁設(shè)計的教學(xué)內(nèi)容整合為以下七個模塊。每個模塊的教學(xué)采用案例教學(xué)法，通過邊演示邊學(xué)習(xí)的方式讓學(xué)生在實踐中學(xué)習(xí)網(wǎng)頁設(shè)計的技術(shù)。

模塊一：創(chuàng)建站點。好的站點是學(xué)生進(jìn)行網(wǎng)頁設(shè)計的第一步，要讓學(xué)生學(xué)會建立條理清晰的站點，規(guī)劃好自己的工作文件夾。強(qiáng)調(diào)所有的網(wǎng)頁文件、圖片、聲音、視頻等都要分類放在不同的文件夾中；所有的文件名、文件夾名、圖片名都使用小寫字母或小寫字母數(shù)字組合，不能使用漢語；首頁文件名必須是index(.htm或.html)。

模塊二：編輯網(wǎng)頁元素。網(wǎng)頁元素包括文本、圖像、多媒體、超級鏈接、Logo、導(dǎo)航欄等。要求學(xué)生能夠熟練地編輯各種網(wǎng)頁元素。其中，Logo是網(wǎng)站的標(biāo)志，一般在網(wǎng)頁的左上角，內(nèi)容一般是網(wǎng)站有代表性的人物、動物、花草或者英文名稱等?？梢怨膭顚W(xué)生利用生成器或者Photoshop等設(shè)計好自己的網(wǎng)站Logo。超級鏈接是實現(xiàn)網(wǎng)頁跳轉(zhuǎn)的重要途徑。教師可以通過案例使學(xué)生掌握文本鏈接、圖像鏈接、Email鏈接、錨點鏈接、空鏈接、腳本鏈接等各種鏈接形式。

模塊三：設(shè)計網(wǎng)頁布局。網(wǎng)頁布局設(shè)計到網(wǎng)頁在瀏覽器中所顯示的外觀，決定著網(wǎng)頁設(shè)計的成敗。通過表格布局、布局模式布局、框架布局三種手段來定位網(wǎng)頁元素。其中，首頁的布局尤為重要?？梢赃\用各種形狀，如矩形、圓形、菱形等，“同”字形、“匡”字形、“三”字形、“川”字形等，或者是運用曲線組成的柔美的或不規(guī)則的圖形。然后將頁面元素放入其中，確定它們的位置，同時要考慮整個頁面的平衡、疏密等因素，編排出令人舒適的效果。最后確定頁面尺寸和頁面元素的尺寸。

模塊四：優(yōu)化網(wǎng)頁樣式。主要是通過Html標(biāo)簽對和CSS規(guī)則來優(yōu)化整個頁面的樣式，使整個網(wǎng)站的風(fēng)格較統(tǒng)一，并且有特色。其中，CSS層疊樣式表類似于Word中的樣式，它將網(wǎng)頁的排版從網(wǎng)頁文檔的制作中獨立出來。利用它可以批量地修改成百上千個網(wǎng)頁的外觀樣式，大大提高了工作效率。

模塊五：制作網(wǎng)頁特效。利用層來實現(xiàn)對頁面元素的精確定位；利用行為來動態(tài)響應(yīng)用戶的操作或者觸發(fā)任務(wù)；利用JavaScript語言實現(xiàn)動態(tài)的、實時的、交互的動態(tài)效果。其中，行為一方面是指Dreamweaver8.0提供的預(yù)定義行為。實現(xiàn)鼠標(biāo)經(jīng)過圖像、彈出信息、拖動層、顯示彈出式菜單等動態(tài)效果。另一方面是指結(jié)合時間軸，創(chuàng)建自定義的動態(tài)效果。教師可以適當(dāng)增加案例的數(shù)量，租金學(xué)生的學(xué)習(xí)興趣。關(guān)于JavaScript未做重點講解，只給學(xué)生提供—些特效代碼、插件、代碼下載網(wǎng)站，并演示如何使用現(xiàn)成的特效代碼。

模塊六：管理網(wǎng)站資源。通過資源面板批量的修改重復(fù)的網(wǎng)頁元素，從而高效的管理網(wǎng)頁中的各種資源。通過庫管理和更新多次重復(fù)使用的網(wǎng)頁元素。利用模板保存較好的文檔格式，作為中間件，需要時可以套用。

模塊七：其他相關(guān)知識的補(bǔ)充。主要是ASP語言、數(shù)據(jù)庫知識和Flash。要求能夠制作簡單的動態(tài)網(wǎng)頁。另外，F(xiàn)lash是一種簡單直觀、功能強(qiáng)大的動畫設(shè)計工具。在教學(xué)過程中，教師可以鼓勵學(xué)生通過案例的學(xué)習(xí)，自己動手制作網(wǎng)站片頭、主題文字的動態(tài)效果、背景、網(wǎng)頁切換等效果，增強(qiáng)網(wǎng)站的吸引力。

以上的七個模塊，就是對“網(wǎng)頁設(shè)計”課程全部教學(xué)內(nèi)容的一個整合。然而，在每個模塊的教學(xué)過程中，針對課堂上沒有解決的問題，可以通過網(wǎng)絡(luò)教學(xué)法，在課后進(jìn)行有益的交流和補(bǔ)充。并且，每個模塊學(xué)習(xí)結(jié)束后，都給學(xué)生時間將所掌握的技術(shù)應(yīng)用在各自的項目方案中。

總之，“網(wǎng)頁設(shè)計”課程是一門實踐性操作性很強(qiáng)的課程，無論怎樣安排教學(xué)內(nèi)容，無論使用怎樣的教學(xué)方法，都是要以學(xué)生為中心，提高學(xué)生的網(wǎng)頁設(shè)計能力。

2.3評價階段

當(dāng)完成教學(xué)階段的全部工作后，在學(xué)期末最后一周，由教師對學(xué)生的學(xué)習(xí)效果進(jìn)行考查。每一位學(xué)生都上講臺介紹自己的網(wǎng)站主題、內(nèi)容、所用技術(shù)等，然后，由老師當(dāng)場從創(chuàng)意、審美、內(nèi)容、技術(shù)、工作量五個角度進(jìn)行點評。最終依據(jù)學(xué)生平時的上機(jī)以及作業(yè)情況(30%)加上最終提交的網(wǎng)頁設(shè)計作品(70%)給出學(xué)生本學(xué)期的考核成績。成績分為優(yōu)秀、良好、中等、及格和不及格五個檔次。推薦優(yōu)秀作品的設(shè)計者參加網(wǎng)頁設(shè)計大賽、假期到公司實習(xí)或者考認(rèn)證。

這種評價方式是以能力為中心的全程化、開放式、全面的考核方式，能夠綜合考查學(xué)生平時參與課程的情況、每階段學(xué)習(xí)的狀況和最重的網(wǎng)頁設(shè)計效果，使學(xué)生的素質(zhì)和綜合能力得到提高。

3結(jié)束語

筆者根據(jù)多年來在“網(wǎng)頁設(shè)計”課程中的教學(xué)經(jīng)驗，本著以學(xué)生為中心的原則，對傳統(tǒng)的教學(xué)模式進(jìn)行改革，提出了創(chuàng)新的教學(xué)思路和實踐總結(jié)。筆者在“網(wǎng)頁設(shè)計”課程的教學(xué)過程中精心設(shè)計了科學(xué)的教學(xué)方案；采用了適合的多樣的教學(xué)方法；較合理地整合了網(wǎng)頁設(shè)計的教學(xué)內(nèi)容；采用了全程化的評價方式。實踐證明取得了較好的教學(xué)效果。但是仍需要加強(qiáng)教學(xué)環(huán)節(jié)的組織，更加充分的利用網(wǎng)上的教學(xué)資源，豐富課堂教學(xué)內(nèi)容，將“網(wǎng)頁設(shè)計”之教學(xué)推向更高的層次。

參考文獻(xiàn)

[1] 胡亞卓. 淺談網(wǎng)頁設(shè)計[J]. 科教文匯,2008,(02):180.

[2] 林菡,張軍. 優(yōu)良的網(wǎng)頁設(shè)計應(yīng)該注意的幾個要素[J]. 北京教育學(xué)院學(xué)報(自然科學(xué)版),2007,(8):12-15.

[3] 顏謙和,顏珍平. “網(wǎng)頁設(shè)計與制作”課程運用案例教學(xué)法初探[J]. 計算機(jī)教育,2007,(9):65-66.

[4] 吳建梅,周瑩. “任務(wù)驅(qū)動”教學(xué)法在高職“網(wǎng)頁設(shè)計”課程中的應(yīng)用[J]. 科技廣場,2007,(08):210-211.

[5] 余平. 項目驅(qū)動在網(wǎng)頁設(shè)計實踐教學(xué)中的應(yīng)用[J]. 實驗室科學(xué),2007,(5):94-95.

[6] 李若蘭. “網(wǎng)頁設(shè)計”課程之分層教學(xué)實踐[J]. 大眾科技,2007,(7):33.

[7] 韓慧. 關(guān)于“網(wǎng)頁設(shè)計”課教學(xué)改革的思考[J]. 山西財政稅務(wù)?？茖W(xué)校學(xué)報,2007,(10):79-80.

Teaching Exploration of Web Design

JIANG Hai-yan, DU Lin, LI Shu-jin, ZHAO Ke

(Department of Computer, Shandong Education Institute, Shandong Jinan 250013 , China)

Abstract: In the Network Age today, Web Design appears to be more important, which has brought a higher demand of teaching of this course. Firstly, this paper analyzes several teaching methods used in the course. And then, it presents us a scientific Teaching Project from the angles of Teaching Content, Teaching Methods, Teaching Evaluation and so on. Practice has proved that this Teaching Project can lead to good effect, though it needs to be improved later.

Key words: Web Design, Teaching Method, Teaching Project