《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)方法探析

摘要網(wǎng)頁(yè)設(shè)計(jì)與制作是一門綜合性、實(shí)踐性很強(qiáng)的計(jì)算機(jī)應(yīng)用課程。本課程教學(xué)的主要目的在于培養(yǎng)學(xué)生的實(shí)際動(dòng)手能力。如何將多種學(xué)科知識(shí)有機(jī)結(jié)合，采取有效的教學(xué)方法和手段培養(yǎng)學(xué)生實(shí)際動(dòng)手能力和創(chuàng)新能力是素質(zhì)教學(xué)改革的關(guān)鍵。文章首先分析了本課程的教學(xué)現(xiàn)狀，指出本課程教學(xué)中經(jīng)常遇到的一些問(wèn)題，然后分別從如何激發(fā)學(xué)生興趣，合理安排教學(xué)內(nèi)容，考核評(píng)價(jià)的改革等方面對(duì)教學(xué)方法做了思考和探討。

中圖分類號(hào):G423文獻(xiàn)標(biāo)識(shí)碼:A

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

1 課程教學(xué)現(xiàn)狀

以電子商務(wù)專業(yè)為例，本課程的主要任務(wù)是介紹網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)制作的基本知識(shí)、基本理論和基本應(yīng)用等方面的內(nèi)容。學(xué)習(xí)本課程的目的是希望學(xué)生能通過(guò)學(xué)習(xí)，首先能對(duì)網(wǎng)頁(yè)制作有個(gè)較全面的了解，其中包括HTML基礎(chǔ)知識(shí)、能通過(guò)Dreamweaver進(jìn)行簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)，能利用Fireworks、Photoshop等工具處理簡(jiǎn)單的圖片。同時(shí)更深入的可以掌握一些JavaScript基礎(chǔ)知識(shí)，動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)，再加上一些網(wǎng)站配置和數(shù)據(jù)庫(kù)相關(guān)的知識(shí)等?？偟膩?lái)說(shuō)，這是一門需要兼顧一定的基礎(chǔ)理論并實(shí)踐性很強(qiáng)的課程，它要求學(xué)生最終要有一定的實(shí)踐動(dòng)手能力，并能獨(dú)立制作一個(gè)簡(jiǎn)單的網(wǎng)站，所以，教學(xué)上經(jīng)常會(huì)遇到一些問(wèn)題:

(1)本課程的實(shí)踐教學(xué)受各院校上機(jī)條件或?qū)嶒?yàn)條件的影響較大。本課程要求有接近一半的課時(shí)是上機(jī)課時(shí)，但上機(jī)教室往往難當(dāng)負(fù)荷;(2)各專業(yè)對(duì)本課程的要求有較大的差別。學(xué)生專業(yè)基礎(chǔ)不同，水平差異大;(3)教學(xué)內(nèi)容較廣，使用軟件較多。這門課應(yīng)有計(jì)算機(jī)基礎(chǔ)、數(shù)據(jù)庫(kù)應(yīng)用等課程作為前驅(qū)課程做基礎(chǔ)，但教學(xué)計(jì)劃并非如此;(4)欠缺有豐富網(wǎng)頁(yè)制作經(jīng)驗(yàn)的教師;(5)某些學(xué)生對(duì)制作網(wǎng)頁(yè)并無(wú)興趣。

2 教學(xué)方法的思考

2.1 激發(fā)學(xué)生興趣，引導(dǎo)學(xué)生主動(dòng)學(xué)習(xí)

(1)上好第一節(jié)課，激發(fā)學(xué)生的學(xué)習(xí)熱情。興趣是學(xué)習(xí)的最大動(dòng)力。上好Dreamweaver的第一節(jié)課──網(wǎng)頁(yè)欣賞課十分重要，它能使學(xué)生對(duì)這門課有一個(gè)整體的認(rèn)識(shí)，讓學(xué)生了解使用Dreamweaver進(jìn)行網(wǎng)頁(yè)制作可以在頃刻之間完成許多令人驚嘆的效果。同時(shí)也能開(kāi)闊視野，提高欣賞力，增強(qiáng)學(xué)習(xí)的信心，為下一步的學(xué)習(xí)奠定良好的基礎(chǔ)。

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

2.2 合理安排教學(xué)內(nèi)容，要與時(shí)俱進(jìn)，詳略得當(dāng)

教學(xué)內(nèi)容的安排應(yīng)由易到難、由淺到深，并且詳略得當(dāng)。網(wǎng)頁(yè)設(shè)計(jì)與制作的教學(xué)內(nèi)容大致分為三個(gè)階段。

(1)第一階段，即初級(jí)階段。通過(guò)這一階段的學(xué)習(xí)，學(xué)生能夠制作出簡(jiǎn)單的網(wǎng)頁(yè)、網(wǎng)站，能把各種現(xiàn)成的素材放到網(wǎng)頁(yè)中，制作成一個(gè)個(gè)網(wǎng)頁(yè)，并能在網(wǎng)頁(yè)中對(duì)這些內(nèi)容進(jìn)行簡(jiǎn)單的排版，且能將些網(wǎng)頁(yè)鏈接起來(lái)，構(gòu)成一個(gè)完整的網(wǎng)站。這一部分是學(xué)好以后網(wǎng)頁(yè)知識(shí)的基礎(chǔ)，也可以說(shuō)是這是學(xué)生學(xué)習(xí)網(wǎng)頁(yè)制作的入門階段。(參看圖1)

圖1網(wǎng)頁(yè)設(shè)計(jì)與制作教學(xué)初級(jí)階段內(nèi)容

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

圖2網(wǎng)頁(yè)設(shè)計(jì)與制作教學(xué)中級(jí)階段內(nèi)容

在這個(gè)階段，教師需要注意的是:在網(wǎng)站設(shè)計(jì)上應(yīng)提供給學(xué)生各類優(yōu)秀網(wǎng)站讓學(xué)生自我體會(huì)、感悟，教學(xué)中教師應(yīng)該根據(jù)學(xué)生所做作品的特點(diǎn)有引導(dǎo)性地讓學(xué)生學(xué)習(xí)某些符合他自身特點(diǎn)的色彩搭配和網(wǎng)頁(yè)布局，并設(shè)計(jì)出有自身特點(diǎn)的作品。不能簡(jiǎn)單地給出一個(gè)或幾個(gè)模板套路，這樣只會(huì)束縛學(xué)生的思想，限制他們發(fā)揮自己的創(chuàng)造力。

(3)第三階段，也稱為高級(jí)階段。這一階段是使學(xué)生掌握網(wǎng)頁(yè)特效的制作和中小型網(wǎng)站的建立方法，學(xué)習(xí)除了能讓網(wǎng)頁(yè)更有技術(shù)含量、更有動(dòng)感外，還能掌握中小型網(wǎng)站的建立方法，同時(shí)也為基于后臺(tái)數(shù)據(jù)庫(kù)的網(wǎng)站制作打基礎(chǔ)。(參看圖3)

圖3網(wǎng)頁(yè)設(shè)計(jì)與制作教學(xué)高級(jí)階段內(nèi)容

在這三個(gè)階段進(jìn)行的過(guò)程中，教師除了讓學(xué)生不斷學(xué)習(xí)新知識(shí)，還要不斷地復(fù)習(xí)已學(xué)知識(shí)，每一教學(xué)單元結(jié)束后，都要開(kāi)展綜合實(shí)踐課，將新舊知識(shí)融會(huì)貫通，綜合運(yùn)用。

另外，值得一提的是，互聯(lián)網(wǎng)是在不斷發(fā)展的，在發(fā)展的過(guò)程中肯定有很多新技術(shù)的融入，在教學(xué)中，也應(yīng)該對(duì)這些新的知識(shí)有所講述，教學(xué)一定要與時(shí)俱進(jìn)。

2.3 HTML代碼要與實(shí)際操作相結(jié)合

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

2.4 任務(wù)驅(qū)動(dòng)促使學(xué)生能夠自發(fā)的主動(dòng)學(xué)習(xí)

在教學(xué)過(guò)程中，為了能幫助學(xué)生很好的完成目標(biāo)，我們可以通過(guò)組織一個(gè)大的建站實(shí)例來(lái)貫穿到整個(gè)課程的教學(xué)中。這個(gè)實(shí)例首先從需求分析開(kāi)始，逐步擴(kuò)展到設(shè)計(jì)頁(yè)面、整體框架的搭建、素材的添加、圖片、動(dòng)畫和一些特效的制作等。在整個(gè)教學(xué)過(guò)程中，循序漸進(jìn)的深入任務(wù)，直到最后學(xué)生們通過(guò)自己的努力完成任務(wù)。這種任務(wù)驅(qū)動(dòng)的模式，在網(wǎng)頁(yè)制作這門課程中可以讓學(xué)生學(xué)習(xí)起來(lái)更有目的性和主動(dòng)性同時(shí)又因?yàn)槭且詫?shí)際為樣板，能讓學(xué)生足夠的鍛煉了自己的動(dòng)手能力，從而做到了從書本中學(xué)來(lái)，用到實(shí)際工作中去。

2.5 有效利用網(wǎng)絡(luò)資源，培養(yǎng)創(chuàng)新意識(shí)

學(xué)習(xí)不能只知道書本的知識(shí)，更應(yīng)該放眼于現(xiàn)實(shí)。網(wǎng)頁(yè)制作的最終目的是為了在互聯(lián)網(wǎng)上進(jìn)行信息的發(fā)布、交互以及共享的。因此在平時(shí)的教學(xué)過(guò)程中教師應(yīng)該充分發(fā)揮互聯(lián)網(wǎng)的作用，多多鼓勵(lì)和引導(dǎo)學(xué)生主動(dòng)思考主動(dòng)通過(guò)互聯(lián)網(wǎng)去發(fā)現(xiàn)問(wèn)題并解決問(wèn)題，同時(shí)能夠互相交流，進(jìn)而做到取長(zhǎng)補(bǔ)短，共同學(xué)習(xí)，共同提高。

2.6 考核評(píng)價(jià)改革

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

3 結(jié)語(yǔ)

通過(guò)實(shí)踐證明，具有針對(duì)性的教學(xué)內(nèi)容可以很好的避免學(xué)生學(xué)習(xí)的盲目性，分級(jí)分階段的上機(jī)實(shí)驗(yàn)課程和適當(dāng)?shù)陌咐虒W(xué)法能極大的調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性從而激發(fā)學(xué)生的學(xué)習(xí)興趣，同時(shí)提高課程的教學(xué)效果。除了進(jìn)行教學(xué)方法改革外，還要加上學(xué)校各部門、教師和學(xué)生的共同協(xié)作和支持，才可能真正提高網(wǎng)頁(yè)制作課程的教學(xué)質(zhì)量。

參考文獻(xiàn)

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

[2]李吉梅.網(wǎng)頁(yè)設(shè)計(jì)實(shí)用教程[M].北京:清華大學(xué)出版社，2008.

[3]蔡立燕，梁芳.網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京:清華大學(xué)出版社，2008.

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

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

[6]張偉娜.《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)的探討與實(shí)踐[J].中國(guó)教育信息化，2008(3):77-78.

[7]宋平，李曉輝，宋曉強(qiáng).網(wǎng)絡(luò)建設(shè)與網(wǎng)頁(yè)設(shè)計(jì)課程改革與實(shí)踐[J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2007(3):78-79.

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