探“網頁設計”之教學

江海燕　杜　林　李樹金　趙　珂

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

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

關鍵詞：網頁設計；教學方法；教學方案

中圖分類號：G642

文獻標識碼：A

1“網頁設計”課程與常用教學法

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

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

目前，在高校的“網頁設計”課程教學中常用的教學方法有案例教學法、項目驅動教學法、分層教學法、網絡教學法、工學結合教學法等。上述教學方法是實踐證明了的較好的“網頁設計”的教學方法，合理運用，定能大大提高教學效果。

2“網頁設計”課程教學方案設計

“網頁設計”課程具有較強的實踐性，如何上好“網頁設計”課？筆者結合多年的實際教學，以教學的時間先后為順序，設計了如下的教學方案。

2.1備課階段

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

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

2.2教學階段

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

2.2.1引子部分(2課時)

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

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

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

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

2.2.2理論學習部分(4課時左右)

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

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

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

當每個學生都明確了項目方案后，在項目驅動的前提下，才能根據項目需求準備相關的內容資料、素材，也才能科學的展開“主題部分”的教學。

在“主體部分”的教學中，將網頁設計的教學內容整合為以下七個模塊。每個模塊的教學采用案例教學法，通過邊演示邊學習的方式讓學生在實踐中學習網頁設計的技術。

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

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

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

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

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

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

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

以上的七個模塊，就是對“網頁設計”課程全部教學內容的一個整合。然而，在每個模塊的教學過程中，針對課堂上沒有解決的問題，可以通過網絡教學法，在課后進行有益的交流和補充。并且，每個模塊學習結束后，都給學生時間將所掌握的技術應用在各自的項目方案中。

總之，“網頁設計”課程是一門實踐性操作性很強的課程，無論怎樣安排教學內容，無論使用怎樣的教學方法，都是要以學生為中心，提高學生的網頁設計能力。

2.3評價階段

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

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

3結束語

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

參考文獻

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

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

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

[4] 吳建梅,周瑩. “任務驅動”教學法在高職“網頁設計”課程中的應用[J]. 科技廣場,2007,(08):210-211.

[5] 余平. 項目驅動在網頁設計實踐教學中的應用[J]. 實驗室科學,2007,(5):94-95.

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

[7] 韓慧. 關于“網頁設計”課教學改革的思考[J]. 山西財政稅務?？茖W校學報,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