藝術(shù)設(shè)計(jì)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)研究

前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了藝術(shù)設(shè)計(jì)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)研究范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

《網(wǎng)頁(yè)設(shè)計(jì)》是一門(mén)綜合性的“大課程”，鑒于其專(zhuān)業(yè)的特殊性，至目前藝術(shù)設(shè)計(jì)專(zhuān)業(yè)開(kāi)設(shè)的此課程尚沒(méi)有相對(duì)完善的教材，教學(xué)內(nèi)容和教學(xué)方法也處于探索階段。筆者結(jié)合多年從事web開(kāi)發(fā)和網(wǎng)頁(yè)設(shè)計(jì)教學(xué)經(jīng)驗(yàn)，對(duì)藝術(shù)設(shè)計(jì)專(zhuān)業(yè)《網(wǎng)頁(yè)設(shè)計(jì)》課程目標(biāo)、教學(xué)內(nèi)容設(shè)計(jì)、教學(xué)方法三方面進(jìn)行探討，期待構(gòu)建《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)的大致框架。隨著信息時(shí)代的到來(lái)，互聯(lián)網(wǎng)技術(shù)改變了人們傳統(tǒng)的生產(chǎn)和生活方式。網(wǎng)絡(luò)資源的共享和發(fā)展已經(jīng)融入社會(huì)生活，門(mén)戶網(wǎng)站、網(wǎng)頁(yè)瀏覽已經(jīng)成為一種生活習(xí)慣。作為服務(wù)于社會(huì)經(jīng)濟(jì)發(fā)展的高校專(zhuān)業(yè)設(shè)置，為適應(yīng)時(shí)代需求，如計(jì)算機(jī)、電子商務(wù)及藝術(shù)設(shè)計(jì)等專(zhuān)業(yè)都開(kāi)設(shè)了《網(wǎng)頁(yè)設(shè)計(jì)》課程。就專(zhuān)業(yè)技術(shù)而言，《網(wǎng)頁(yè)設(shè)計(jì)》課程綜合性較強(qiáng)，涵蓋的知識(shí)面較為廣泛，一個(gè)網(wǎng)頁(yè)的建立到過(guò)程，涉及到了網(wǎng)絡(luò)基礎(chǔ)知識(shí)，W3C標(biāo)準(zhǔn)和與之對(duì)應(yīng)的結(jié)構(gòu)：（X）HTML語(yǔ)言，表現(xiàn)：CSS樣式，動(dòng)作：JavaScipt，圖像處理、動(dòng)畫(huà)制作等諸多領(lǐng)域。鑒于其專(zhuān)業(yè)基礎(chǔ)的特殊性，這也導(dǎo)致了該課程針對(duì)不同專(zhuān)業(yè)在教學(xué)內(nèi)容、教學(xué)模式、教學(xué)方法等方面存在很大差異。理工科專(zhuān)業(yè)多側(cè)重于程序語(yǔ)言的編寫(xiě)學(xué)習(xí)，較為重視純技術(shù)方面，而藝術(shù)設(shè)計(jì)專(zhuān)業(yè)則更多偏向于網(wǎng)頁(yè)界面的版面設(shè)計(jì)，包括形式美感、色調(diào)處理等。但在實(shí)際人才應(yīng)用中，用人單位更想兼顧以上兩方面的技術(shù)應(yīng)用型人才。目前藝術(shù)設(shè)計(jì)專(zhuān)業(yè)《網(wǎng)頁(yè)設(shè)計(jì)》課程并沒(méi)有相對(duì)完善的專(zhuān)門(mén)教材，教學(xué)方法與內(nèi)容也處于探索階段。由于大環(huán)境和師資的局限，開(kāi)設(shè)該課程的很多高校在教學(xué)上并沒(méi)有結(jié)合藝術(shù)設(shè)計(jì)專(zhuān)業(yè)的自身特點(diǎn)，往往“復(fù)制”和計(jì)算機(jī)等理工科專(zhuān)業(yè)一樣的課程教學(xué)模式，“教”和“學(xué)”都陷入一定的尷尬境地，達(dá)不到本專(zhuān)業(yè)所需一定程度的教學(xué)目標(biāo)。另一方面，藝術(shù)設(shè)計(jì)專(zhuān)業(yè)的學(xué)生，具有一定的美術(shù)基礎(chǔ)和審美意趣，制作網(wǎng)頁(yè)有一定的美感優(yōu)勢(shì)，但有時(shí)也過(guò)于追求美觀而忽略用戶體驗(yàn)，脫離實(shí)際，華而不實(shí)。筆者結(jié)合多年從事web開(kāi)發(fā)和網(wǎng)頁(yè)設(shè)計(jì)教學(xué)的相關(guān)經(jīng)驗(yàn)，對(duì)藝術(shù)設(shè)計(jì)專(zhuān)業(yè)《網(wǎng)頁(yè)設(shè)計(jì)》課程目標(biāo)、教學(xué)內(nèi)容設(shè)計(jì)、教學(xué)方法三方面進(jìn)行探討，期待構(gòu)建《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)的大致框架。其中的藝術(shù)設(shè)計(jì)專(zhuān)業(yè)，尤其是視覺(jué)傳達(dá)方向的平面設(shè)計(jì)專(zhuān)業(yè)都開(kāi)設(shè)了《網(wǎng)頁(yè)設(shè)計(jì)》課程。

一、課程目標(biāo)

眾所周知，課程目標(biāo)決定一門(mén)課程構(gòu)建和發(fā)展的最終導(dǎo)向，一方面可以為學(xué)生指明正確的課程學(xué)習(xí)方向，另一方面也為教師傳授正確的知識(shí)理念提供依據(jù)，真正做到“教”和“學(xué)”的“有的放矢”。結(jié)合藝術(shù)設(shè)計(jì)專(zhuān)業(yè)學(xué)生的個(gè)性特點(diǎn)，注重網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言的學(xué)習(xí)，將藝術(shù)和技術(shù)有機(jī)的緊密結(jié)合。在課程目標(biāo)制定的過(guò)程中，弱化一些在前期專(zhuān)業(yè)基礎(chǔ)課程中已經(jīng)學(xué)習(xí)過(guò)的相關(guān)知識(shí)（如PS圖像處理等），做好簡(jiǎn)單的銜接，將重點(diǎn)放到藝術(shù)設(shè)計(jì)專(zhuān)業(yè)學(xué)生相對(duì)薄弱的知識(shí)點(diǎn)（如網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言等）。Dreamweaver是目前最好的網(wǎng)頁(yè)制作與設(shè)計(jì)軟件工具，作為可視網(wǎng)頁(yè)編輯工作的標(biāo)準(zhǔn)，它一直在代碼編輯和應(yīng)用程序開(kāi)發(fā)方面的功能比較強(qiáng)大。更重要的是它是所見(jiàn)即所得類(lèi)型的網(wǎng)頁(yè)設(shè)計(jì)軟件，對(duì)藝術(shù)設(shè)計(jì)專(zhuān)業(yè)的學(xué)生來(lái)說(shuō)，學(xué)習(xí)和應(yīng)用的難易程度非常合適。同時(shí)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)素材的制作和處理，動(dòng)畫(huà)素材可以選擇Flash，圖片素材可以選擇photoshop，這里強(qiáng)調(diào)并要求和Dreamweaver相匹配和適應(yīng)。作為網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)理念，在制定《網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)目標(biāo)時(shí)，必須考慮將W3C標(biāo)準(zhǔn)相關(guān)的新理念、新做法等元素考慮進(jìn)來(lái)，強(qiáng)調(diào)使用規(guī)范化語(yǔ)義標(biāo)簽語(yǔ)言（X）HTML書(shū)寫(xiě)頁(yè)面結(jié)構(gòu)，并強(qiáng)調(diào)CSS樣式表的使用，同時(shí)遵循W3C標(biāo)準(zhǔn)，了解div+css和標(biāo)準(zhǔn)頁(yè)面的優(yōu)勢(shì)所在，使用“div+css”實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)代碼與表現(xiàn)樣式相分離，以及對(duì)后面制作標(biāo)準(zhǔn)頁(yè)面所起到的促進(jìn)作用等。

二、教學(xué)內(nèi)容

（一）在藝術(shù)設(shè)計(jì)專(zhuān)業(yè)的人才培養(yǎng)計(jì)劃中，網(wǎng)頁(yè)設(shè)計(jì)課程

一般安排在課程學(xué)習(xí)的中后時(shí)間段。就本課程而言，我建議教學(xué)內(nèi)容并時(shí)間安排如下：

1.Dreamweaver軟件的學(xué)習(xí)和應(yīng)用為重點(diǎn)講解，講授和實(shí)踐為5+5個(gè)學(xué)時(shí)。Dreamweaver軟件的主要任務(wù)就是完成網(wǎng)頁(yè)設(shè)計(jì)的版面架構(gòu)，教學(xué)中，主要講解本地站點(diǎn)的創(chuàng)建和頁(yè)面結(jié)構(gòu)搭建。在早期的網(wǎng)頁(yè)排版中一般使用網(wǎng)頁(yè)表格（table）及其嵌套的模式布局頁(yè)面，隨著技術(shù)更新和用戶需求，表格結(jié)構(gòu)已不適合現(xiàn)在時(shí)展的需要，即不適合手機(jī)及平板電腦的用戶瀏覽，呈現(xiàn)逐漸被淘汰的趨勢(shì)?，F(xiàn)今網(wǎng)頁(yè)版面架構(gòu)大都采用div+css的方式設(shè)計(jì)，具有瀏覽速度快，適合在手機(jī)或平板電腦上瀏覽的優(yōu)勢(shì)。結(jié)構(gòu)和樣式的相分離，也便于日后的網(wǎng)頁(yè)改版的便利；

2.網(wǎng)頁(yè)編程基礎(chǔ)方面：HTML語(yǔ)言、CSS樣式、JavaScipt，講授和實(shí)踐7+7學(xué)時(shí)。非計(jì)算機(jī)專(zhuān)業(yè)的學(xué)生一般錯(cuò)誤的認(rèn)為使用Dreamweaver這樣所見(jiàn)即所得的工具學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，不再需要學(xué)習(xí)太多的“語(yǔ)言”。其實(shí)不然，HTML是網(wǎng)頁(yè)的靈魂，它不像C語(yǔ)言那樣“生澀難懂”，相對(duì)藝術(shù)設(shè)計(jì)學(xué)生而言，完全有能力學(xué)會(huì)和掌握。CSS通俗講是控制網(wǎng)頁(yè)中內(nèi)容的顏色、字體大小、寬度背景等樣式，并由此來(lái)實(shí)現(xiàn)各種各樣網(wǎng)頁(yè)樣式的統(tǒng)稱(chēng)，也是需要熟悉和掌握的。JavaScipt與C語(yǔ)言不同，它提供一定的面向?qū)ο竽芰Γ虼四K、名字空間、類(lèi)、對(duì)象、封裝、函數(shù)等功能在JavaScipt中的實(shí)現(xiàn)方式是其教學(xué)的重頭戲，它們才是現(xiàn)代JavaScipt語(yǔ)言的精髓；

3.Flash動(dòng)畫(huà)，講授和實(shí)踐6+4學(xué)時(shí)。Flash主要制作二維動(dòng)畫(huà)，體積小，便于使用，學(xué)習(xí)難度小，能夠滿足網(wǎng)頁(yè)設(shè)計(jì)的需要，如：網(wǎng)頁(yè)Banner條的設(shè)計(jì)、片頭動(dòng)畫(huà)、課件等；

4.網(wǎng)站客戶端的表現(xiàn)原則、開(kāi)發(fā)流程、面向客戶的網(wǎng)站設(shè)計(jì)，講授和實(shí)踐2+0學(xué)時(shí)；

5.photoshop為輔助2學(xué)時(shí)，藝術(shù)設(shè)計(jì)專(zhuān)業(yè)的學(xué)生已經(jīng)學(xué)習(xí)并掌握photoshop的使用方法。因此，減少這方面的講解，給其他新知識(shí)點(diǎn)留下更充裕的時(shí)間。

（二）結(jié)合網(wǎng)絡(luò)技術(shù)發(fā)展和用戶體驗(yàn)要求，本課程教學(xué)還需注意下面要點(diǎn)：

1.面向用戶體驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)：學(xué)生在學(xué)習(xí)和制作網(wǎng)頁(yè)時(shí)，總是以“自我”的感覺(jué)為主導(dǎo)，很少考慮并分析用戶需求，以為自己的設(shè)計(jì)有相當(dāng)?shù)摹拔Α钡菍?duì)于訪問(wèn)者來(lái)說(shuō)，大多數(shù)的設(shè)計(jì)過(guò)于空洞、內(nèi)容繁冗，徒有漂亮的外觀。所以學(xué)生應(yīng)該明確，網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該以“用戶”為中心，而不是展示、甚至炫耀網(wǎng)頁(yè)技術(shù)或技巧。因此，有必要引進(jìn)面向用戶的網(wǎng)頁(yè)設(shè)計(jì)教學(xué)。

2.當(dāng)前互聯(lián)網(wǎng)技術(shù)飛速發(fā)展，網(wǎng)絡(luò)資源共享已成趨勢(shì)，學(xué)生獲取知識(shí)的渠道已不僅僅滿足于課堂上教師的講解，包括每一步所要學(xué)習(xí)的知識(shí)點(diǎn)。充分利用網(wǎng)絡(luò)，包括豐富的教學(xué)資源和便利的搜索功能，面對(duì)現(xiàn)實(shí)中存在的問(wèn)題，引導(dǎo)學(xué)生如何利用互聯(lián)網(wǎng)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)方面的前沿知識(shí)，發(fā)現(xiàn)并解決。鼓勵(lì)學(xué)生使用博客、論壇，通過(guò)發(fā)現(xiàn)其中有趣的文章，得到解決問(wèn)題的新方法和代碼片段。向?qū)W生介紹開(kāi)源社區(qū)，并鼓勵(lì)他們?cè)诰€發(fā)表自己的代碼，使用社交媒體進(jìn)行資源查找，并形成專(zhuān)業(yè)的社交媒體互動(dòng)，更加專(zhuān)注于他們的代碼與工作，真正激發(fā)學(xué)生的學(xué)習(xí)興趣。

三、教學(xué)方法

《網(wǎng)頁(yè)設(shè)計(jì)》課程具有交叉學(xué)科性質(zhì)，結(jié)合藝術(shù)設(shè)計(jì)專(zhuān)業(yè)學(xué)生的自身特點(diǎn)，在教學(xué)過(guò)程中，我運(yùn)用任務(wù)驅(qū)動(dòng)法、模塊教學(xué)法和項(xiàng)目教學(xué)法等多重手段，給學(xué)生明確的思路，引導(dǎo)學(xué)生多動(dòng)腦，勤動(dòng)手，發(fā)現(xiàn)問(wèn)題，分析問(wèn)題，解決問(wèn)題。

（一）任務(wù)驅(qū)動(dòng)法

任務(wù)驅(qū)動(dòng)法，即通過(guò)創(chuàng)設(shè)問(wèn)題情境來(lái)調(diào)動(dòng)學(xué)生的學(xué)習(xí)興趣，進(jìn)而啟發(fā)學(xué)生的求知欲?！芭d趣是最好的老師”，只有發(fā)現(xiàn)問(wèn)題，才有任務(wù)和動(dòng)力，教師利用專(zhuān)業(yè)知識(shí)，結(jié)合課堂所講章節(jié)內(nèi)容，分析并解決問(wèn)題。只有這樣才能有利于培養(yǎng)學(xué)生獨(dú)立分析問(wèn)題、解決問(wèn)題的能力和創(chuàng)新能力。具體到《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)中，通過(guò)導(dǎo)入新課環(huán)節(jié)，將所要講授的新知識(shí)隱含在一個(gè)或幾個(gè)任務(wù)之中，引導(dǎo)學(xué)生對(duì)所提出的任務(wù)進(jìn)行分析討論，明確大體涉及所需知識(shí)，承前啟后，找出哪些是需要復(fù)習(xí)鞏固的知識(shí)，哪些是需要探索學(xué)習(xí)的新知識(shí)，在教師的指導(dǎo)下找出解決問(wèn)題的方法，通過(guò)任務(wù)的完成實(shí)現(xiàn)對(duì)所學(xué)知識(shí)的構(gòu)建。

（二）模塊教學(xué)法

團(tuán)隊(duì)合作、模塊運(yùn)營(yíng)是現(xiàn)代企業(yè)生存和發(fā)展之道，網(wǎng)頁(yè)設(shè)計(jì)公司亦是如此，很多網(wǎng)站界面都實(shí)行模塊化，每個(gè)部門(mén)負(fù)責(zé)完成自己的任務(wù)。為和現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)公司相適應(yīng)，《網(wǎng)頁(yè)設(shè)計(jì)》課程嘗試實(shí)施有目標(biāo)、有任務(wù)、有內(nèi)容的模塊教學(xué)法，將本課程教學(xué)內(nèi)容有意識(shí)地分化為幾個(gè)模塊，針對(duì)每一個(gè)模塊設(shè)定具體的教學(xué)目標(biāo)、任務(wù)和要求，將課堂所講內(nèi)容和現(xiàn)實(shí)所需實(shí)踐有機(jī)結(jié)合。同時(shí)讓學(xué)生自由組合成一個(gè)個(gè)小團(tuán)隊(duì)，團(tuán)隊(duì)之間、團(tuán)隊(duì)之內(nèi)分工協(xié)作，團(tuán)隊(duì)合作，真正做到鍛煉學(xué)生綜合能力的教學(xué)和實(shí)踐。

（三）項(xiàng)目教學(xué)法

通過(guò)實(shí)施一個(gè)完整的“項(xiàng)目”而進(jìn)行教學(xué)活動(dòng)，其目的是在課堂教學(xué)中把理論與實(shí)踐有機(jī)的結(jié)合起來(lái)，充分發(fā)揮學(xué)生的創(chuàng)造潛能，提高學(xué)生解決實(shí)際問(wèn)題的能力?！毒W(wǎng)頁(yè)設(shè)計(jì)》課程相對(duì)來(lái)說(shuō)，有非常多的“項(xiàng)目”可供實(shí)施。一般是在知識(shí)體系講解完全后，給出一個(gè)具體的項(xiàng)目命題，如學(xué)生（或?qū)W校）個(gè)人（或創(chuàng)業(yè)小店）的網(wǎng)站、網(wǎng)絡(luò)上征稿的企業(yè)網(wǎng)站等，在實(shí)施這些“項(xiàng)目”過(guò)程中發(fā)現(xiàn)問(wèn)題并且解決問(wèn)題，一方面可以鍛煉學(xué)生的實(shí)踐能力，更重要的是及早讓學(xué)生有實(shí)戰(zhàn)意識(shí)，真正實(shí)現(xiàn)課堂教學(xué)和單位實(shí)習(xí)的“零距離”。

（四）雙師教學(xué)法

聘請(qǐng)工作在網(wǎng)頁(yè)設(shè)計(jì)一線，且具有豐富實(shí)踐經(jīng)驗(yàn)的設(shè)計(jì)師作為兼職教員，加入到課程教學(xué)中來(lái)。兼職教員能制作最專(zhuān)業(yè)的網(wǎng)站，對(duì)本行業(yè)的最新趨勢(shì)有著完整的把控力，對(duì)網(wǎng)頁(yè)設(shè)計(jì)實(shí)際工作中有可能遇到的問(wèn)題有著獨(dú)到的見(jiàn)解。他們可為學(xué)生開(kāi)設(shè)講座、解惑答疑，結(jié)合全職教師對(duì)教學(xué)內(nèi)容和方法的深入研究，兩種教師互補(bǔ)，增強(qiáng)學(xué)生的學(xué)習(xí)體驗(yàn)和興趣，提高教學(xué)質(zhì)量。

四、結(jié)語(yǔ)

藝術(shù)設(shè)計(jì)專(zhuān)業(yè)的《網(wǎng)頁(yè)設(shè)計(jì)》課程是隨著互聯(lián)網(wǎng)而產(chǎn)生的新興課程，同時(shí)也是為適應(yīng)地方社會(huì)經(jīng)濟(jì)發(fā)展和普通用戶的生活體驗(yàn)的?；ヂ?lián)網(wǎng)技術(shù)的日新月異、社會(huì)經(jīng)濟(jì)的迅猛發(fā)展和普通用戶的生活便捷也決定了課程的必須不斷更新變革。教學(xué)是動(dòng)態(tài)的過(guò)程，只有確立好課程目標(biāo)、梳理好教學(xué)內(nèi)容、掌控好教學(xué)方法，根據(jù)實(shí)施過(guò)程中的具體情況靈活調(diào)整，并不斷充實(shí)完善，才能取得更好的教學(xué)效果，真正做到培養(yǎng)網(wǎng)頁(yè)設(shè)計(jì)的應(yīng)用型專(zhuān)業(yè)人才，服務(wù)于社會(huì)，以人為本。

作者：華俊