《網頁設計與制作》教學方法探析

摘要網頁設計與制作是一門綜合性、實踐性很強的計算機應用課程。本課程教學的主要目的在于培養學生的實際動手能力。如何將多種學科知識有機結合，采取有效的教學方法和手段培養學生實際動手能力和創新能力是素質教學改革的關鍵。文章首先分析了本課程的教學現狀，指出本課程教學中經常遇到的一些問題，然后分別從如何激發學生興趣，合理安排教學內容，考核評價的改革等方面對教學方法做了思考和探討。

中圖分類號:G423文獻標識碼:A

當今社會，上網已成為一種習慣。人們從網上傳播和獲取信息，而網頁則是信息的基本載體，越來越多的人開始在網上進行通信、工作、購物、娛樂，甚至在網絡上建立自己的網站。于是，網絡的迅速發展和普及醞釀出一個全新的領域——網頁設計與制作。一方面，人們認為設計和制作網頁是學習網絡相關知識、學習信息傳播、電子商務和網絡創業的有效途徑;另一方面，各公司、企業、事業單位在當今的信息化革新和互聯網戰略中迫切需要吸納大量懂得網絡相關知識、有網頁設計和制作經驗及能力的人參與其中。因此，很多高等學校和高職院校都相繼開設了網頁設計與制作這門課程，以適應社會大眾對人才的需要。目前，《網頁設計與制作》課程是計算機、電子商務等專業的主干課程，但很多其他專業也把他作為公共基礎課或素質選修課來設置，目的是希望讓學生了解甚至掌握網絡知識、網頁的本質，以提高計算機應用能力和綜合素質。

1 課程教學現狀

以電子商務專業為例，本課程的主要任務是介紹網頁設計、網頁制作的基本知識、基本理論和基本應用等方面的內容。學習本課程的目的是希望學生能通過學習，首先能對網頁制作有個較全面的了解，其中包括HTML基礎知識、能通過Dreamweaver進行簡單的網頁設計，能利用Fireworks、Photoshop等工具處理簡單的圖片。同時更深入的可以掌握一些JavaScript基礎知識，動態網頁設計，再加上一些網站配置和數據庫相關的知識等。總的來說，這是一門需要兼顧一定的基礎理論并實踐性很強的課程，它要求學生最終要有一定的實踐動手能力，并能獨立制作一個簡單的網站，所以，教學上經常會遇到一些問題:

(1)本課程的實踐教學受各院校上機條件或實驗條件的影響較大。本課程要求有接近一半的課時是上機課時，但上機教室往往難當負荷;(2)各專業對本課程的要求有較大的差別。學生專業基礎不同，水平差異大;(3)教學內容較廣，使用軟件較多。這門課應有計算機基礎、數據庫應用等課程作為前驅課程做基礎，但教學計劃并非如此;(4)欠缺有豐富網頁制作經驗的教師;(5)某些學生對制作網頁并無興趣。

2 教學方法的思考

2.1 激發學生興趣，引導學生主動學習

(1)上好第一節課，激發學生的學習熱情。興趣是學習的最大動力。上好Dreamweaver的第一節課──網頁欣賞課十分重要，它能使學生對這門課有一個整體的認識，讓學生了解使用Dreamweaver進行網頁制作可以在頃刻之間完成許多令人驚嘆的效果。同時也能開闊視野，提高欣賞力，增強學習的信心，為下一步的學習奠定良好的基礎。

(2)案例教學，通過適當的案例來激發學生的興趣。充分合理的運用案例教學，將會讓學生更愿意主動的來學習網頁制作這門課程。對于一般的網頁制作這種課程來說，很多老師采取的是按部就班的根據教材來教學，在日常教學中我們發現如果任課老師長期這樣教學的話很容易讓學生感覺到枯燥甚至開始抵觸學習。因此作為教學工作者應該主動來避免這種問題的發生，特別是對于網頁制作這門課程，教師可以利用大量的實際案例來引導學生。比如可以讓學生去訪問相關的網站，然后在課堂上可學生討論，并盡量的引導學生有意識的思考，別人的網站為什么要這樣設計，好處是什么?同時有沒有可以優化的地方?總的來說網頁制作與設計這門課程不應該拘泥于教材而應該充分利用案例教學，特別突出在引導和激發學生興趣，讓學生自然的去主動學習。

2.2 合理安排教學內容，要與時俱進，詳略得當

教學內容的安排應由易到難、由淺到深，并且詳略得當。網頁設計與制作的教學內容大致分為三個階段。

(1)第一階段，即初級階段。通過這一階段的學習，學生能夠制作出簡單的網頁、網站，能把各種現成的素材放到網頁中，制作成一個個網頁，并能在網頁中對這些內容進行簡單的排版，且能將些網頁鏈接起來，構成一個完整的網站。這一部分是學好以后網頁知識的基礎，也可以說是這是學生學習網頁制作的入門階段。(參看圖1)

圖1網頁設計與制作教學初級階段內容

(2)第二階段，我們稱為中級階段，就是對網頁的美化和規劃設計，包括各類素材的處理，網站整體的色彩搭配、頁面的布局、欄目的規劃，使學生能根據已經掌握了的Flash和Photoshop的基本知識，對自己做的網站進行設計美化。(參看圖2)

圖2網頁設計與制作教學中級階段內容

在這個階段，教師需要注意的是:在網站設計上應提供給學生各類優秀網站讓學生自我體會、感悟，教學中教師應該根據學生所做作品的特點有引導性地讓學生學習某些符合他自身特點的色彩搭配和網頁布局，并設計出有自身特點的作品。不能簡單地給出一個或幾個模板套路，這樣只會束縛學生的思想，限制他們發揮自己的創造力。

(3)第三階段，也稱為高級階段。這一階段是使學生掌握網頁特效的制作和中小型網站的建立方法，學習除了能讓網頁更有技術含量、更有動感外，還能掌握中小型網站的建立方法，同時也為基于后臺數據庫的網站制作打基礎。(參看圖3)

圖3網頁設計與制作教學高級階段內容

在這三個階段進行的過程中，教師除了讓學生不斷學習新知識，還要不斷地復習已學知識，每一教學單元結束后，都要開展綜合實踐課，將新舊知識融會貫通，綜合運用。

另外，值得一提的是，互聯網是在不斷發展的，在發展的過程中肯定有很多新技術的融入，在教學中，也應該對這些新的知識有所講述，教學一定要與時俱進。

2.3 HTML代碼要與實際操作相結合

目前很多網頁制作類教材都將HTML標記作為一個獨立的章節都講授，這種簡單的介紹標記符的講解方法很容易讓學生感覺是在聽一門文科課程而漸漸失去興趣。而在實際授課過程中我們可通過結合實際需求來講解，通過對每個元素如表單、超鏈接、圖像、表格等來講解，再結合軟件自己生成的源代碼以及我們設計這部分代碼的目的，這樣學習的效果顯著得多。這里我們拿表單的制作為例，其實表單的制作本身并不太復雜，但是實際中表單的制作往往是和動態程序在一起去實現一些我們所想要達到的目的的。有的是為了進行搜索、有的是為了注冊信息、有的可能是為了返回某個特定值等等。那么在授課的過程中就我們可以結合這些實際需求來講解，這樣學生可以帶著樂趣來學習我們一直認為比較枯燥的HTML標記了，同時使學生更容易理解和掌握教師講授的知識。

2.4 任務驅動促使學生能夠自發的主動學習

在教學過程中，為了能幫助學生很好的完成目標，我們可以通過組織一個大的建站實例來貫穿到整個課程的教學中。這個實例首先從需求分析開始，逐步擴展到設計頁面、整體框架的搭建、素材的添加、圖片、動畫和一些特效的制作等。在整個教學過程中，循序漸進的深入任務，直到最后學生們通過自己的努力完成任務。這種任務驅動的模式，在網頁制作這門課程中可以讓學生學習起來更有目的性和主動性同時又因為是以實際為樣板，能讓學生足夠的鍛煉了自己的動手能力，從而做到了從書本中學來，用到實際工作中去。

2.5 有效利用網絡資源，培養創新意識

學習不能只知道書本的知識，更應該放眼于現實。網頁制作的最終目的是為了在互聯網上進行信息的發布、交互以及共享的。因此在平時的教學過程中教師應該充分發揮互聯網的作用，多多鼓勵和引導學生主動思考主動通過互聯網去發現問題并解決問題，同時能夠互相交流，進而做到取長補短，共同學習，共同提高。

2.6 考核評價改革

擁有一個好的考核方式，既可以較全面、真實地反映學生的學習情況，且更有利于刺激學生的學習積極性。網頁作品需要體現的是學生的創造性和創新性，該課程可以采用展示作品的方式檢驗學生的學習成果，脫離理論試卷的束縛，使學生的創造性得以有效發揮。但作為教師不能只依靠作品就輕易判斷學生的學習情況，更應該考慮到學生的學習過程，多鼓勵學生注重細節一步一步提高自己。在實際教學中，這種考核模式往往能讓很多有想法但動手能力相對滯后的學生逐步提升自信心，甚至某些同學到后期能設計出令人刮目相看的作品出來。

3 結語

通過實踐證明，具有針對性的教學內容可以很好的避免學生學習的盲目性，分級分階段的上機實驗課程和適當的案例教學法能極大的調動學生學習的積極性從而激發學生的學習興趣，同時提高課程的教學效果。除了進行教學方法改革外，還要加上學校各部門、教師和學生的共同協作和支持，才可能真正提高網頁制作課程的教學質量。

參考文獻

[1]馬龍工作室.新編網頁三劍客從入門到精通[M].北京:人民郵電出版社，2008.

[2]李吉梅.網頁設計實用教程[M].北京:清華大學出版社，2008.

[3]蔡立燕，梁芳.網頁設計與制作[M].北京:清華大學出版社，2008.

[4]覽眾，張曉景.DIV+CSS網頁布局商業案例精粹[M].北京:電子工業出版社，2008.

[5]謝柏青，張銘.計算機基礎教學方式改革研究[J].計算機教育，2005(10):40-41.

[6]張偉娜.《網頁設計與制作》課程教學的探討與實踐[J].中國教育信息化，2008(3):77-78.

[7]宋平，李曉輝，宋曉強.網絡建設與網頁設計課程改革與實踐[J].農業網絡信息，2007(3):78-79.

[8]白晨希，尹柯.《網頁制作》課程教學方法探討[J].計算機教學與教育信息化，2008(3):510-513.