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

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

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

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

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

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

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

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

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

1.可利用色彩理論知識(shí)配色

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

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

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

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

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

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

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

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

3.最后完成元素對(duì)象的站點(diǎn)互鏈接。

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

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

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