前言：本站為你精心整理了網(wǎng)站設(shè)計課程教學(xué)內(nèi)容研究范文，希望能為你的創(chuàng)作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

[內(nèi)容摘要]藝術(shù)設(shè)計專業(yè)的網(wǎng)站設(shè)計課程應(yīng)該包含界面設(shè)計與網(wǎng)站建設(shè)技術(shù)兩方面的內(nèi)容，學(xué)生應(yīng)該通過該課程學(xué)會如何設(shè)計、制作網(wǎng)站，理解網(wǎng)站建設(shè)中藝術(shù)與技術(shù)的關(guān)系。本文結(jié)合當(dāng)前藝術(shù)院校網(wǎng)站設(shè)計課程的現(xiàn)狀對藝術(shù)院校網(wǎng)站設(shè)計課程的教學(xué)內(nèi)容提出一些建議。

[關(guān)鍵詞]藝術(shù)設(shè)計網(wǎng)站設(shè)計教學(xué)內(nèi)容

一、國內(nèi)藝術(shù)院校網(wǎng)站設(shè)計課程現(xiàn)狀

國內(nèi)部分藝術(shù)院校開設(shè)網(wǎng)站設(shè)計課程已經(jīng)有15年以上的歷史。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展與普及化，現(xiàn)代生活中已經(jīng)很難離開這種媒體形式。網(wǎng)站作為互聯(lián)網(wǎng)的“窗口”，向人們展示了精彩的世界，拉近了人與人之間的距離，也讓人們在辦公、娛樂、學(xué)習(xí)等領(lǐng)域越來越多元化。近幾年電子商務(wù)帶來的巨大利益，讓更多的企業(yè)和個人把大筆資金投入網(wǎng)絡(luò)市場，大量的網(wǎng)站相關(guān)的設(shè)計人員缺口和相對較高的待遇，導(dǎo)致很多在傳統(tǒng)設(shè)計領(lǐng)域工作的設(shè)計師紛紛轉(zhuǎn)入這個行業(yè)，很多學(xué)生也逐漸對這個領(lǐng)域感興趣。網(wǎng)站設(shè)計課程也因為互聯(lián)網(wǎng)經(jīng)濟發(fā)展導(dǎo)致市場需求大增。網(wǎng)站建設(shè)技術(shù)包括互聯(lián)網(wǎng)基礎(chǔ)知識、前臺程序、后臺程序、顯示設(shè)備的一些基礎(chǔ)知識等。網(wǎng)站建設(shè)技術(shù)是網(wǎng)站界面設(shè)計過程中非常重要的依據(jù)，單純運用藝術(shù)設(shè)計原理進行網(wǎng)站設(shè)計有可能會給后期技術(shù)開發(fā)造成麻煩。例如，很容易在程序開發(fā)過程中實現(xiàn)不了，或者實現(xiàn)起來增加開發(fā)成本等。網(wǎng)站的界面建立在屏幕顯示的基礎(chǔ)上，因此，設(shè)計師必須了解像素等相關(guān)基礎(chǔ)知識才能在設(shè)計開始階段合理創(chuàng)建文檔，從而進一步深入設(shè)計。網(wǎng)站是展示與交互的結(jié)合，網(wǎng)站建設(shè)不是單純地把界面設(shè)計美觀就可以了，了解相應(yīng)的開發(fā)知識、交互技術(shù)特點，才能夠有效地設(shè)計出美觀、實用的界面。當(dāng)前，很多院校對網(wǎng)站設(shè)計課程從教學(xué)方法、教學(xué)內(nèi)容等方面進行了探索和改革。個別院校從師資配備上具有專業(yè)的技術(shù)教師，例如國內(nèi)某美術(shù)學(xué)院在網(wǎng)站設(shè)計課程教學(xué)中分為網(wǎng)站設(shè)計和網(wǎng)站技術(shù)兩方面教學(xué)內(nèi)容，前四周為設(shè)計專業(yè)教師授課，然后是三周計算機專業(yè)教師授課。這種教育方式相比早期的網(wǎng)站設(shè)計教育有著本質(zhì)的不同，讓學(xué)生對網(wǎng)站相關(guān)知識了解深刻并且更具有專業(yè)性。還有些院校能夠和企業(yè)合作，由企業(yè)派出技術(shù)人員參與教學(xué)任務(wù)的完成。由此可見，很多院校對網(wǎng)站設(shè)計的技術(shù)教學(xué)給予了足夠的重視。

二、當(dāng)今藝術(shù)院校網(wǎng)站設(shè)計課程教學(xué)內(nèi)容

一個完整的網(wǎng)站建設(shè)往往都是由一個團隊合作完成，包括策劃、界面設(shè)計、交互設(shè)計、程序設(shè)計、運營維護等。很多專業(yè)都開設(shè)有網(wǎng)站相關(guān)課程，從授課內(nèi)容來說區(qū)別比較大。例如，計算機專業(yè)網(wǎng)站課程主要從網(wǎng)站前、后臺的程序方面進行講解，而藝術(shù)院校則主要講解界面設(shè)計原理與方法。但是近些年隨著教學(xué)改革的進行，一些有條件的藝術(shù)院校增加了前臺開發(fā)程序的學(xué)習(xí)。當(dāng)今藝術(shù)院校網(wǎng)站設(shè)計課程大部分還是以設(shè)計為主，但一些有條件開設(shè)相關(guān)技術(shù)內(nèi)容的院校教學(xué)內(nèi)容主要分為兩個部分。一部分是傳統(tǒng)的設(shè)計方面的內(nèi)容，包括網(wǎng)站策劃、版式設(shè)計、色彩、圖標、字體、圖片等方面，有些內(nèi)容在前導(dǎo)課程中有所學(xué)習(xí)，但是網(wǎng)站課程會針對網(wǎng)站的特點進行專門的版式、色彩等方面的訓(xùn)練。另一部分是技術(shù)方面的內(nèi)容，主要講解的是前臺程序，包括HTML、CSS、JavaScript等瀏覽器端語言，使用的軟件主要是Photoshop，AI，Dreamweawer等。如果條件允許，也會介紹一些后臺程序的實現(xiàn)原理等方面的基礎(chǔ)知識進行擴展學(xué)習(xí)。不是所有的藝術(shù)院校都會開設(shè)前臺程序課程，有些只是講解一下Dreamweawer軟件的操作方式。網(wǎng)站設(shè)計作為一門應(yīng)用性強、專業(yè)跨度大的課程，非常注重行業(yè)能力的訓(xùn)練，學(xué)生的實踐過程非常重要。網(wǎng)站設(shè)計的實踐能力不僅僅體現(xiàn)在設(shè)計、制作網(wǎng)站上，還包括團隊合作、語言表達等方面的能力。教師一言堂的課程能起到基礎(chǔ)的了解目的，但如果能讓學(xué)生參與整個網(wǎng)站的制作過程，對于學(xué)生的理解和動手實踐能力會有更大的幫助。

三、網(wǎng)站設(shè)計課程技術(shù)內(nèi)容授課難點

藝術(shù)專業(yè)的學(xué)生掌握網(wǎng)站界面設(shè)計同時了解網(wǎng)絡(luò)相關(guān)技術(shù)知識，對他的學(xué)習(xí)和今后的工作有非常大的幫助。但是，在實際的教學(xué)過程中，技術(shù)知識的講解存在很多難點。1.錯誤認識網(wǎng)站技術(shù)課程學(xué)習(xí)對于一個成熟的網(wǎng)站設(shè)計師而言，他對于設(shè)計有了較深的理解，需要程序開發(fā)等技術(shù)知識來進一步提高他的專業(yè)能力。但是，很多藝術(shù)院校的學(xué)生設(shè)計基礎(chǔ)非常薄弱，如果過多強調(diào)技術(shù)內(nèi)容而削弱設(shè)計訓(xùn)練，讓學(xué)生誤認為學(xué)會了幾個軟件，掌握一些基礎(chǔ)的前臺開發(fā)語言就是網(wǎng)站設(shè)計，這樣就本末倒置了。而有些院校對網(wǎng)站技術(shù)內(nèi)容的理解不全面，把教學(xué)精力放在了軟件和單純的實驗性的設(shè)計訓(xùn)練上，這樣的教學(xué)不夠完整，結(jié)果很可能就是紙上談兵。所以，對網(wǎng)站技術(shù)的理解要系統(tǒng)化、專業(yè)化，并且能夠主次清晰地指導(dǎo)學(xué)生技術(shù)和設(shè)計的關(guān)系才是正確的途徑。2.藝術(shù)院校技術(shù)教師配置不完善有些院校對于網(wǎng)站設(shè)計技術(shù)學(xué)習(xí)有足夠的認識，學(xué)生也愿意學(xué)習(xí)相關(guān)的技術(shù)知識，但是師資卻成為了這類學(xué)校很大的障礙。現(xiàn)在，個別藝術(shù)院校配備的網(wǎng)站程序人員都是計算機專業(yè)出身，并且有些教師沒有多少實踐經(jīng)驗，也沒有設(shè)計基礎(chǔ)，如果他們只是單純地講解程序，設(shè)計與技術(shù)教學(xué)工作很難完美地銜接。而大部分藝術(shù)院校的設(shè)計教師對技術(shù)理解不夠深刻，那么講解給學(xué)生的內(nèi)容更多的是實驗性的訓(xùn)練，并沒有太多的市場價值。3.教學(xué)內(nèi)容時間分配不合理程序的學(xué)習(xí)是一個邏輯性非常強的過程，對于新接觸這個領(lǐng)域的學(xué)生來講，需要學(xué)習(xí)的知識過于繁雜。大部分藝術(shù)院校網(wǎng)站課程的課時設(shè)置都在40課時、48課時、64課時左右，而網(wǎng)站界面設(shè)計方面內(nèi)容講解也需要大量的時間，兩者在時間分配上就得進行取舍。是平均分配還是哪方面內(nèi)容占用更多的時間，這些問題都難以處理，導(dǎo)致不合理的時間分配。4.Dreamweaver誤區(qū)藝術(shù)院校網(wǎng)站教學(xué)中，很多藝術(shù)專業(yè)教師本身對網(wǎng)站技術(shù)的理解并不專業(yè)，僅僅講解Dreamweaver軟件?？陀^來講，這個軟件對于設(shè)計師還是比較重要的，它能快速實現(xiàn)網(wǎng)站的前臺效果。但是，學(xué)生如果不了解HTML等程序，只知道操作Dreamweaver軟件的話，既不利于網(wǎng)站優(yōu)化，也不能與后臺程序員進行專業(yè)銜接。

四、從教學(xué)目的和市場需求方面調(diào)整課程內(nèi)容的一些建議

1.樹立網(wǎng)站設(shè)計課程界面設(shè)計與技術(shù)內(nèi)容的正確關(guān)系

從藝術(shù)與技術(shù)的關(guān)系角度分析，擁有技術(shù)支持的藝術(shù)才能更加具有說服力，純粹從設(shè)計內(nèi)容出發(fā)進行教學(xué)對學(xué)生的實踐能力提高并不大，而過于強調(diào)技術(shù)內(nèi)容的重要性對學(xué)生的設(shè)計能力也沒有什么幫助。因此，網(wǎng)站設(shè)計課程應(yīng)該明確設(shè)計與技術(shù)的關(guān)系。設(shè)計能力的提高是藝術(shù)院校教學(xué)的基本目的，而技術(shù)內(nèi)容則是提高設(shè)計能力的輔助內(nèi)容。從市場需求來講，很多公司在進行招聘網(wǎng)站設(shè)計師的時候，在需求中都有類似“熟悉HTML，CSS優(yōu)先聘用”等信息，但是公司招聘的還是以設(shè)計為主的設(shè)計師而不是程序開發(fā)人員。因此，當(dāng)藝術(shù)院校有條件進行技術(shù)授課的時候，應(yīng)該讓學(xué)生意識到技術(shù)的原理和對設(shè)計的關(guān)系，有能力的學(xué)生可以多學(xué)習(xí)一些技術(shù)知識，多參與到前臺程序開發(fā)中，甚至了解一些后臺程序的運行原理，以后和真正的程序人員進行合作也會游刃有余。網(wǎng)站設(shè)計教育中加入技術(shù)層面的教育能讓學(xué)生從基礎(chǔ)原理上理解一個網(wǎng)站的實現(xiàn)與特點，也為本科生今后專業(yè)水平的提高打下良好基礎(chǔ)。下面簡單分析一下主要的界面設(shè)計元素與開發(fā)技術(shù)的聯(lián)系。第一，版式設(shè)計。網(wǎng)站界面設(shè)計中版式設(shè)計和技術(shù)的關(guān)系最為直接。最早的網(wǎng)站還不能加載圖片，全是由文字構(gòu)成，因此這時的網(wǎng)站就像一個Word文件，版式設(shè)計的局限性非常大。前幾年，F(xiàn)lash網(wǎng)站盛行，當(dāng)時使用Flash進行整站設(shè)計可以像PS軟件操作一樣，設(shè)計師可以直接操作軟件工具進行各種自由的版式、動畫、交互設(shè)計?，F(xiàn)在，HTML5成為主流的“前臺”語言，版式設(shè)計布局更加嚴謹、規(guī)整。隨著技術(shù)的變化，版式設(shè)計的方式和特點都有著巨大的變化。當(dāng)前主流的網(wǎng)站布局都能適應(yīng)各種尺寸的顯示器和不同的移動設(shè)備，主要原理是利用程序判斷瀏覽者使用設(shè)備的分辨率來調(diào)取相應(yīng)的CSS文件，使用最有效的柵格系統(tǒng)排版方式來調(diào)整版式排列，通過規(guī)范的矩形區(qū)塊進行內(nèi)容的組合。這種網(wǎng)站版式風(fēng)格去掉了浮華的效果和隨意的結(jié)構(gòu)，也是現(xiàn)代市場上出現(xiàn)的網(wǎng)站大部分都很規(guī)矩的原因。技術(shù)的進步與變化，對設(shè)計的影響非常直接。第二，色彩。網(wǎng)站的色彩是基于顯示設(shè)備進行展示，因此，設(shè)計文件一定是RGB的色彩模式。顯示設(shè)備呈現(xiàn)的顏色比印刷色彩要明亮很多，因此，在網(wǎng)站色彩搭配時不適合使用大面積純度過高的色彩。所以，學(xué)生在進行網(wǎng)站色彩學(xué)習(xí)的時候，不能僅僅依據(jù)之前課程的設(shè)計原理進行設(shè)計，也要考慮技術(shù)特點與設(shè)備特點等綜合因素。第三，字體設(shè)計。字體的正確使用有利于程序開發(fā)，也有利于界面設(shè)計的效果展示。例如，正文字體一般不會使用特殊字體，而是普遍使用系統(tǒng)自帶字體。如果要使用特殊字體，那么就需要做成圖片或者在程序端進行相應(yīng)的設(shè)置。所以為了更高效的開發(fā)，設(shè)計人員需要了解怎么使用特殊字體，什么情況下盡量不使用特殊字體。第四，交互方式。早期的復(fù)雜交互都是通過Flash動畫等方式進行，如今使用HTML5的動畫功能結(jié)合CSS，JavaScript進行復(fù)雜的動畫、效果表現(xiàn)，交互制作的人員已經(jīng)從設(shè)計人員變?yōu)榍芭_開發(fā)人員。設(shè)計師雖然不需要直接制作交互動畫，但是也需要對交互動畫和網(wǎng)站動態(tài)展示技術(shù)進行了解，才能更好地配合程序人員完美、高效地呈現(xiàn)動態(tài)效果。例如，原來的分頁功能現(xiàn)在普遍都展示為“瀑布流”的展示方式，因此在設(shè)計上就需要進行微調(diào)。

2.藝術(shù)專業(yè)網(wǎng)站設(shè)計課程教學(xué)內(nèi)容的一些建議

第一，教師個人能力是影響教學(xué)質(zhì)量的一個重要因素。

從事網(wǎng)站設(shè)計教學(xué)的教師最好是熟悉網(wǎng)絡(luò)技術(shù)知識的設(shè)計專業(yè)教師，純粹的計算機專業(yè)教師在技術(shù)授課中很難有效講解技術(shù)對設(shè)計的影響。在聯(lián)合教學(xué)中，除非有相關(guān)合作經(jīng)驗的技術(shù)人員，否則單純講解技術(shù)并不能解決為設(shè)計服務(wù)的教學(xué)目的。相對來講，從藝術(shù)學(xué)院自身的教師隊伍中，挑選個別有天賦的教師強化相關(guān)的技術(shù)培訓(xùn)是比較容易實現(xiàn)的方式之一。不過，從學(xué)習(xí)時間和針對藝術(shù)生培養(yǎng)方向考慮，設(shè)計教師的技術(shù)培訓(xùn)一定要選好培訓(xùn)的技術(shù)范圍和深度，建議以瀏覽器等前臺基礎(chǔ)語言為主進行學(xué)習(xí)，并深入理解網(wǎng)站建設(shè)的各個環(huán)節(jié)及原理，最好使教師有完成完整項目的經(jīng)驗。

第二，一定要明確藝術(shù)專業(yè)網(wǎng)站設(shè)計課程的教學(xué)目的。

對于藝術(shù)院校來講，網(wǎng)站設(shè)計課程中技術(shù)的講解最終還是為設(shè)計服務(wù)，藝術(shù)專業(yè)培養(yǎng)的學(xué)生最終應(yīng)該是一個設(shè)計能力出色、懂技術(shù)、能跟團隊配合的人才，而不是培養(yǎng)一個前臺程序員或者一個只會紙上談兵的設(shè)計師。因此，藝術(shù)院校的學(xué)生要掌握技術(shù)原理與基礎(chǔ)方法，并能夠為設(shè)計服務(wù)。第三，在教學(xué)時間有限的情況下，合理分配設(shè)計教學(xué)時間與技術(shù)教學(xué)時間。建議可以先進行技術(shù)教學(xué)，然后在學(xué)生對網(wǎng)站建設(shè)過程有一定了解的基礎(chǔ)上，指導(dǎo)學(xué)生如何運用設(shè)計原理，在講解技術(shù)的過程中也可以時刻滲透設(shè)計內(nèi)容。具體在一門課程中按什么比例進行時間分配得依據(jù)學(xué)生的基礎(chǔ)和對于兩種知識的掌握速度。第四，技術(shù)授課內(nèi)容要有取舍。網(wǎng)站建設(shè)技術(shù)范圍非常廣，前后臺程序、網(wǎng)站優(yōu)化、后期維護等方面涉及范圍和語言非常繁雜。所以，教師授課內(nèi)容不建議面面俱到，或者過于深入講解，應(yīng)該把重點放到與界面設(shè)計聯(lián)系更加直接、相對簡單的前臺程序語言上。例如，講解HTML、CSS，讓學(xué)生理解設(shè)計對前臺程序的影響，也讓學(xué)生動手編寫前臺程序以加深認識設(shè)計過程中的注意事項。這樣針對數(shù)學(xué)和計算機基礎(chǔ)薄弱的藝術(shù)類學(xué)生，只要講解清晰，也能讓學(xué)生比較快速地掌握。如果授課時間充裕或者學(xué)生接受能力較強，可以根據(jù)教師能力和學(xué)生興趣進行適當(dāng)深入講解。學(xué)習(xí)Dreamweaver軟件時不要把全部重點放在軟件本身的講解上，可以把該軟件作為前臺程序的操作平臺。第五，學(xué)生應(yīng)該理解網(wǎng)站從設(shè)計到實現(xiàn)的整個流程。除了前臺程序，盡量要讓學(xué)生理解網(wǎng)站從策劃到最終上線的過程與方法和所涉及的基礎(chǔ)知識。如果有條件，最好讓學(xué)生親自進行一下網(wǎng)站建設(shè)過程中非設(shè)計的一些操作。在教學(xué)方法上，可以結(jié)合項目教學(xué)方法，作為教師一言堂的補充，并且讓學(xué)生動手操作一些基礎(chǔ)的網(wǎng)絡(luò)設(shè)置，理解平時常接觸的網(wǎng)站一般是如何實現(xiàn)的。讓學(xué)生不但知道怎么進行設(shè)計，還要知道設(shè)計前與設(shè)計后的步驟，這樣在今后的過程中才能更好地參與網(wǎng)站建設(shè)的過程。結(jié)語網(wǎng)站設(shè)計既離不開傳統(tǒng)平面設(shè)計的基礎(chǔ)，又與程序開發(fā)技術(shù)、顯示設(shè)備等有重要的關(guān)聯(lián)。想要學(xué)好網(wǎng)站設(shè)計必須要學(xué)習(xí)很多方向的內(nèi)容，從設(shè)備、網(wǎng)絡(luò)技術(shù)、設(shè)計原理、交互方式等方面深入理解、學(xué)習(xí)才能成為一個優(yōu)秀的網(wǎng)站設(shè)計師?，F(xiàn)階段很多學(xué)生都是在進入社會工作之后才逐漸真正地理解網(wǎng)站的相關(guān)知識，這時再想學(xué)習(xí)一些深入的技術(shù)，由于時間、精力等多方面原因?qū)е赂永щy。所以，作為藝術(shù)類本科教育應(yīng)該重視學(xué)生設(shè)計能力的培養(yǎng)，也要讓學(xué)生掌握技術(shù)原理，在學(xué)生步入工作之前培養(yǎng)學(xué)生的綜合能力?！爸渌匀弧辈拍茏寣W(xué)生更專業(yè)地放手設(shè)計。在理解技術(shù)原理的同時，對設(shè)計有更深刻的認識，才應(yīng)該是藝術(shù)專業(yè)網(wǎng)站設(shè)計課程的教學(xué)目的。通過對藝術(shù)與技術(shù)教學(xué)內(nèi)容的合理分配，讓學(xué)生成為一個精通設(shè)計、理解技術(shù)，能進行合作開發(fā)的專業(yè)人才。

參考文獻：

1.李濤,王伊蕾.《網(wǎng)頁設(shè)計與制作》課程教學(xué)改革初探.時代教育,2015.9

2.郭恒川，李方方.網(wǎng)站設(shè)計課程教學(xué)方法改革創(chuàng)新.黑龍江教育（高教研究與評估），2014.5

3.魏容.高等院校網(wǎng)絡(luò)媒體專業(yè)網(wǎng)頁設(shè)計課程模塊化教學(xué)探索.美術(shù)教育研究，2016.15

4.陳燚，王水花，張煜東.網(wǎng)站設(shè)計課程內(nèi)容優(yōu)化探討.電腦知識與技術(shù)，2016

5.羅春燕.一個翻轉(zhuǎn)課堂案例：來自加拿大某藝術(shù)設(shè)計學(xué)院.高教探索，2016.6

作者: 叢林 單位: 哈爾濱理工大學(xué)