高職《網(wǎng)頁設(shè)計》課程教學(xué)改革

范素芳 （江西現(xiàn)代職業(yè)技術(shù)學(xué)院 330000）

高職《網(wǎng)頁設(shè)計》課程教學(xué)改革

范素芳 （江西現(xiàn)代職業(yè)技術(shù)學(xué)院 330000）

《網(wǎng)頁設(shè)計》是高職藝術(shù)設(shè)計大類學(xué)生必修的一門專業(yè)課程，高職教育的主要培養(yǎng)目標(biāo)是培養(yǎng)應(yīng)用型技術(shù)類人才，在信息化大時代中，知識更新快，設(shè)計主流隨時發(fā)生變化，為了更好適應(yīng)社會對人才的素質(zhì)需求，老師也應(yīng)該與時俱進(jìn)，隨時關(guān)注設(shè)計大類的動態(tài)。根據(jù)社會對人才素質(zhì)要求的變化，教學(xué)內(nèi)容與方法上要進(jìn)行教學(xué)改革。

《網(wǎng)頁設(shè)計》它與其它的設(shè)計專業(yè)課程有所不同，它是一門綜合性非常強(qiáng)的課程，由于網(wǎng)頁當(dāng)中包涵的內(nèi)容較多，所以它必需要求學(xué)生動手之前要具備三個軟件以上的實操能力。制作網(wǎng)頁設(shè)計主要由三個軟件構(gòu)成，業(yè)界人士稱它們是網(wǎng)頁三劍客：DREAMWEAVER它是專業(yè)用來進(jìn)行版式編排與網(wǎng)絡(luò)鏈接的軟件；FLASH用于制作網(wǎng)絡(luò)動畫與GIF動態(tài)圖；FIREWORKS是進(jìn)行圖形圖像處理軟件，可制作圖片與BANNER廣告，由于我們動漫與藝術(shù)設(shè)計類專業(yè)的人才培養(yǎng)方案中沒有開設(shè)FIREWORKS這門課程，我們用PHOTOSHOP這個專業(yè)圖形圖像處理軟件來替代它。

網(wǎng)站的主要功能是企業(yè)形象的宣傳、產(chǎn)品展示、電子商務(wù)、信息溝通等，它內(nèi)容涵蓋量大，主要內(nèi)容元素是：圖片（靜態(tài)與動態(tài)）、文字（普通文字與鏈接文字）、動畫（FLASH廣告、短片與純FLASH網(wǎng)站）、媒體（音頻與視頻）、互動（表單行為）等。本門課程的教學(xué)目標(biāo)是要讓學(xué)生通過64課時的學(xué)習(xí)，能把這些大量的信息通過整合，設(shè)計成較為成熟的商業(yè)網(wǎng)站。通過多年的教學(xué)經(jīng)驗積累，我把整個課程的知識點打散與重組，整合成五大教學(xué)模塊，以模塊教學(xué)為主，結(jié)合任務(wù)教學(xué)，讓學(xué)生能快速掌握知識技能，實踐能力達(dá)到課程教學(xué)目標(biāo)。

整合后的五大教學(xué)模塊分別是：頁面版式設(shè)計、色彩搭配、文字設(shè)定、BANNER設(shè)計、超級鏈接。在第一模塊頁面版式設(shè)計教學(xué)過程中，要讓學(xué)生認(rèn)識到網(wǎng)頁頁面美工設(shè)計的重要性，第一堂課向?qū)W生推薦國內(nèi)外優(yōu)秀的網(wǎng)頁設(shè)計作品，增長學(xué)生們的見聞，通過視屏播放的方式讓學(xué)生觀看網(wǎng)站設(shè)計、制作、上傳、網(wǎng)絡(luò)維護(hù)流程，通過第一堂課讓學(xué)生整體的了解課程的主要學(xué)習(xí)內(nèi)容，明確今后的工作任務(wù)。在這個模塊中，強(qiáng)調(diào)設(shè)計風(fēng)格的確立，風(fēng)格要符合行業(yè)特點。大部分網(wǎng)絡(luò)瀏覽者喜歡井然有序、外觀漂亮的網(wǎng)站。這些有著漂亮的外觀的網(wǎng)站，首先給訪問者一個不錯的第一印象與鼠標(biāo)停駐的時間。我們要在幾秒鐘的時間內(nèi)吸引網(wǎng)絡(luò)瀏覽者的注目，版式設(shè)計與色彩搭配顯的尤為重要。傳統(tǒng)的網(wǎng)頁版式設(shè)計把整個版面分為三大區(qū)域（LOGO導(dǎo)航區(qū)、BANNER區(qū)、內(nèi)容區(qū)），而往往有特色、創(chuàng)意高的網(wǎng)頁版式，常常是打破區(qū)域分類的，在這部分的課程安排中會布置一些創(chuàng)意版式工作任務(wù)，學(xué)生利用第二學(xué)期開設(shè)的構(gòu)成設(shè)計課程的知識，設(shè)計以點、線、面相結(jié)合的頁面版式設(shè)計，在教學(xué)過程中，我常常發(fā)現(xiàn)，大部分的學(xué)生所學(xué)習(xí)的專業(yè)課程中的知識內(nèi)容不會整合運用，知識內(nèi)容是分開的，通過這個任務(wù)布置，讓網(wǎng)頁設(shè)計與構(gòu)成設(shè)計這兩門專業(yè)課程有個很好的融合。

在色彩搭配模塊教學(xué)中，以實踐教學(xué)為主，發(fā)揮學(xué)生為課堂的主體性。在教學(xué)內(nèi)容上更強(qiáng)調(diào)主色調(diào)與輔助色的靈活運動。網(wǎng)頁配色一般情況下需要三個顏色：主色調(diào)、輔助色、突出色。主色調(diào)是整個頁面的給瀏覽者的第一印象，今后不管頁面整樣改版裝修，這三個顏色保持不變。很多的設(shè)計師用這種方式來保證網(wǎng)頁設(shè)計的統(tǒng)一連貫性。在這個模塊中，很多初次配色的學(xué)生會出現(xiàn)色彩搭配不合理，色彩凌亂，太均衡的對待色彩，這種設(shè)計反而沒有突出主體。為解決這一問題，教師以實訓(xùn)的方式，引導(dǎo)學(xué)生執(zhí)行以下三種配色方案：

1.可利用色彩理論知識配色

2.從頁面中主要圖片上吸取色調(diào)

3.模仿優(yōu)秀作品中的配色方案

通過這三種配色方案的實訓(xùn)，提高學(xué)生的配色理論知識，經(jīng)過大量的模仿配色后，最終形成自身獨特的有設(shè)計師鮮明個性的配色方案。這是希望學(xué)生通過自覺的后續(xù)學(xué)習(xí)達(dá)到的一個終極目標(biāo)。

單獨把文字設(shè)定整合成一個單獨的模塊，由此可見字體的選擇在網(wǎng)頁設(shè)計中的重要性。網(wǎng)頁頁面設(shè)計中字體是不能亂用的，很重要的一點就是要統(tǒng)一字體的應(yīng)用，不能出現(xiàn)各種各樣的特殊字體，由于網(wǎng)頁最終要上傳到終端服務(wù)器，瀏覽者在瀏覽頁面時如果他的電腦里是沒有安裝你這種特殊字體的話，則會用電腦里自帶的常用字體來替代特殊字體，每種字體所占的空間是不一樣的，會導(dǎo)致網(wǎng)頁瀏覽起來整個版式錯位。所以在理論教學(xué)中要調(diào)學(xué)生的字體應(yīng)用，如果非要用的特殊字體，請把它們用PHOTOSHOP軟件處理成圖片導(dǎo)入到DREAMWEAVER中使用。這樣就不會出現(xiàn)版式錯位的問題。為了統(tǒng)一網(wǎng)頁風(fēng)格與便于修改，網(wǎng)頁中的字體應(yīng)該用CSS樣式編輯管理。CSS樣式的學(xué)習(xí)中，主要靠收集大量的網(wǎng)絡(luò)樣式素材。向?qū)W生推薦優(yōu)秀的網(wǎng)絡(luò)素材庫。學(xué)生可選擇適合的CSS樣式套用在自己的網(wǎng)頁當(dāng)中。

在BANNER設(shè)計教學(xué)模塊當(dāng)中更注重創(chuàng)意思維的訓(xùn)練，打破常規(guī)的設(shè)計，讓你的BANNER廣告會說話。從理論知識的講解到優(yōu)秀作品賞析，使學(xué)生了解到一個好的BANNER廣告要具備的條件：明確的主題、直觀的文案、創(chuàng)意構(gòu)圖、高品質(zhì)的圖形、適當(dāng)?shù)纳{(diào)和漸變、適合的圖片格式與尺寸、多底色延伸。如果學(xué)生在這幾點方面都有很好的把握的話，會制作出吸引眼球的創(chuàng)意型BANNER廣告。為使學(xué)生設(shè)計作品達(dá)到以上的教學(xué)目標(biāo)，在實踐過程中增加了實例任務(wù)。教師在網(wǎng)絡(luò)或以前學(xué)生作品中收集一些制作精良不夠，版式創(chuàng)意及色彩不到位的作品來讓學(xué)生們修改。通過案例的修改，學(xué)生能夠認(rèn)清作品優(yōu)缺點，根據(jù)老師所上的理論知識查找問題。訓(xùn)練學(xué)生具有發(fā)現(xiàn)問題的眼睛，從而解決這個模塊的實踐訓(xùn)練。

在超級鏈接教學(xué)模塊當(dāng)中，教學(xué)內(nèi)容主要是DREAMWEAVER中站點的規(guī)劃與建立、表格與DIV排版、CSS樣式、文字圖片媒體等元素的超級鏈接。這個部分是互聯(lián)網(wǎng)實現(xiàn)環(huán)節(jié)。教學(xué)過程是以學(xué)生實踐操作為主，教師隨時監(jiān)查學(xué)生的制作進(jìn)度及問題輔導(dǎo)，在這個實操環(huán)節(jié)中學(xué)生要完成以下工作任務(wù)：

1.完成前期PHOTOSHOP軟件中所設(shè)計制作的網(wǎng)頁效果的切片工作，并導(dǎo)入到DREAMWEAVER中進(jìn)行排版。

2.對插入的所有元素進(jìn)行CSS樣式編輯。

3.最后完成元素對象的站點互鏈接。

4.最后實現(xiàn)網(wǎng)絡(luò)互鏈接。

在實現(xiàn)網(wǎng)絡(luò)互鏈接時要進(jìn)行遠(yuǎn)程信息編輯，學(xué)生可在網(wǎng)絡(luò)申請免費空間，得到域名、IP地址、用戶名與密碼后可直接用DREAMWEAVER自帶FTP進(jìn)行上傳，可邊制作邊上傳，隨時查看網(wǎng)絡(luò)鏈接狀態(tài)。

《網(wǎng)頁設(shè)計》通過模塊化教學(xué)改革，將所有的知識點進(jìn)行合理的整合，明確每個模塊的教學(xué)目標(biāo)，并總結(jié)教學(xué)經(jīng)驗和重點內(nèi)容，搭建了五個相對完整的學(xué)習(xí)單元。在每一個模塊都明確了工作任務(wù)，對學(xué)生模塊學(xué)習(xí)提出了科學(xué)的要求與建議。通過這種教學(xué)方式，使學(xué)生具備較強(qiáng)的專業(yè)素養(yǎng)。