摘 要：隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，網(wǎng)頁設(shè)計(jì)所承載的理念也日益被刷新，怎么樣讓“學(xué)有所成”的學(xué)生學(xué)以致用，盡快適應(yīng)行業(yè)的發(fā)展，是我們教學(xué)改革中要解決的主要問題。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；色彩；布局

中圖分類號：TP393.092-4

互聯(lián)網(wǎng)已經(jīng)成為大多數(shù)現(xiàn)代人生活中的一部分，用戶可以隨時(shí)隨地上網(wǎng)瀏覽頁面，了解時(shí)事，收發(fā)郵件等。而隨著網(wǎng)民素質(zhì)、審美意識的提高，他們對網(wǎng)頁也提出了更高的要求。不僅僅要實(shí)現(xiàn)網(wǎng)頁的基本功能，在美觀程度、視覺沖擊、版面設(shè)計(jì)等方面的要求也越來越高。技術(shù)跟藝術(shù)的高度統(tǒng)一是網(wǎng)頁設(shè)計(jì)的一個(gè)必然趨勢。

網(wǎng)頁設(shè)計(jì)在計(jì)算機(jī)類專業(yè)是屬于主干課程，課程設(shè)計(jì)偏向于Dreamweaver軟件的學(xué)習(xí)、HTML及JaveScript語音的編寫。特別是在使用Dreamweave CS5后，對代碼的編寫能力有了更高的要求。但是對于網(wǎng)頁的總體策劃、配色、布局等，如何使用Photoshop、Illustrator等圖像處理工具來處理、美化網(wǎng)頁，都沒有介紹。和當(dāng)前的用人趨勢明顯不符。本人認(rèn)為可以從以下幾方面完善網(wǎng)頁設(shè)計(jì)的教學(xué)：

1 “任務(wù)驅(qū)動(dòng)法”在教學(xué)中的運(yùn)用

網(wǎng)頁設(shè)計(jì)是需要很強(qiáng)能力的課程。只有通過不斷的實(shí)踐，才能掌握這項(xiàng)技能。傳統(tǒng)的教學(xué)方法先講授后實(shí)踐，以知識點(diǎn)為教學(xué)的總線，內(nèi)容較為分散，學(xué)生無法將所學(xué)的知識融會貫通。而且內(nèi)容較為枯燥，不能激發(fā)學(xué)生的學(xué)習(xí)興趣。采用“任務(wù)驅(qū)動(dòng)法”，以任務(wù)為主線、教師為主導(dǎo)、學(xué)生為主體，能力為本位，以團(tuán)隊(duì)協(xié)作的方式來進(jìn)行實(shí)踐，任務(wù)完成后，及時(shí)評價(jià)學(xué)習(xí)成果。教師可以選擇涵蓋知識點(diǎn)比較豐富的國內(nèi)外優(yōu)秀網(wǎng)站進(jìn)行任務(wù)驅(qū)動(dòng)。教師扮演客戶，拋項(xiàng)目提要求，學(xué)生以小組為單位，根據(jù)客戶的要求設(shè)計(jì)網(wǎng)頁，并適時(shí)進(jìn)行溝通，修改網(wǎng)頁，最后進(jìn)行答辯講解。這種練習(xí)可以提高學(xué)生的團(tuán)隊(duì)協(xié)作能力及與人溝通能力，把學(xué)習(xí)與做項(xiàng)目相結(jié)合，提高適應(yīng)企業(yè)的能力。

2 通過案例教學(xué)讓了解網(wǎng)站制作的過程

企業(yè)網(wǎng)站制作的流程，大致分為五個(gè)階段：客戶需求分析、網(wǎng)站總體構(gòu)思、網(wǎng)站總體設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)制作和后臺程序開發(fā)、網(wǎng)站運(yùn)行與維護(hù)。每個(gè)階段都負(fù)責(zé)不同的內(nèi)容。以往的教學(xué)方式，是讓學(xué)生了解這些流程，這樣學(xué)生掌握得并不深刻。在課程中引入案例，比如說可以引入“Nike公司網(wǎng)站”的案例，從前期的需求分析，到總體構(gòu)思、網(wǎng)頁設(shè)計(jì)的某個(gè)細(xì)節(jié)，再到后期的程序開發(fā)維護(hù)都進(jìn)行詳細(xì)的分析，讓學(xué)生對這項(xiàng)工作有更直觀的了解。在分析過程中，特別要加強(qiáng)網(wǎng)站策劃的分析，從畫草圖，到布局圖，再到網(wǎng)頁的裝修，都要分析到位。

圖1

3 加強(qiáng)網(wǎng)頁配色的學(xué)習(xí)

色彩是最敏感的一項(xiàng)視覺元素，當(dāng)我們打開網(wǎng)頁的時(shí)候，最先看到的是它的色彩，其次才是它的內(nèi)容。色彩的搭配是否合理，很大程度上會影響瀏覽者的意愿。在教學(xué)過程中，需要對網(wǎng)頁設(shè)計(jì)中色彩及其搭配所呈現(xiàn)的基本特性、心理感受有全面的認(rèn)識，并能從整體進(jìn)行把控。幫助學(xué)生掌握色彩搭配的知識及色彩表現(xiàn)創(chuàng)意的能力。

4 網(wǎng)頁的版式布局

網(wǎng)頁版式布局是將LOGO、文字、圖片等網(wǎng)頁元素按一定方式進(jìn)行排版的過程，他不僅可以傳達(dá)頁面的信息內(nèi)容，還能體現(xiàn)整體的美感。不同主題的網(wǎng)站對版式設(shè)計(jì)的要求不盡相同，這就要求設(shè)計(jì)為內(nèi)容服務(wù)。版式布局的基本類型主要有骨骼型、滿版型、中軸型、分割型、曲線型、傾斜型、對稱型、焦點(diǎn)型、三角型、自由型十種。還可以設(shè)計(jì)成兩欄式、三欄式、多欄式等。網(wǎng)頁的布局方式主要有表格布局、框架布局、DIV+CSS布局、FLASH布局。前兩種方式因?yàn)榘媸奖容^古板，且不易修改，已經(jīng)用得越來越少。DIV+CSS布局可以實(shí)現(xiàn)內(nèi)容與表現(xiàn)相分離，提升設(shè)計(jì)的效率。而怎么樣把藝術(shù)草圖用DIV+CSS表現(xiàn)出來，是網(wǎng)頁設(shè)計(jì)中的難中之難。在課程的設(shè)計(jì)上，可以把更多的時(shí)間應(yīng)用到臨摹優(yōu)秀的網(wǎng)站上，以此來提高學(xué)生對版式設(shè)計(jì)的熟練程度。

5 增加聯(lián)想方面的練習(xí)，提高學(xué)生的創(chuàng)新能力

聯(lián)想是創(chuàng)意的基礎(chǔ)，在課堂中可以開設(shè)聯(lián)想的練習(xí)，比如想出100個(gè)圓形的物體；根據(jù)物品的特點(diǎn)，做出出乎意料之外，合乎情理中的創(chuàng)意。有時(shí)候好的創(chuàng)意無法用Dreamweave做出效果，我們在上課中可以增加怎么用Photoshop、Flash等軟件來進(jìn)行輔助設(shè)計(jì)。Photoshop可以實(shí)現(xiàn)的功能有很多，包括配色、排版、框架設(shè)計(jì)、LOGO設(shè)計(jì)等。處理好圖片以后，可以使用切片功能對網(wǎng)頁圖片按照設(shè)計(jì)意圖進(jìn)行區(qū)域劃分等。Flash是一種動(dòng)畫設(shè)計(jì)工具，網(wǎng)頁的動(dòng)態(tài)效果可以通過該軟件進(jìn)行編輯。

6 構(gòu)建資源豐富、交互功能強(qiáng)大的網(wǎng)絡(luò)學(xué)習(xí)平臺

開設(shè)構(gòu)建資源豐富、交互功能強(qiáng)大的網(wǎng)絡(luò)學(xué)習(xí)平臺。平臺可以提供豐富的項(xiàng)目學(xué)習(xí)專項(xiàng)資源、公共精品資源。平還可以實(shí)現(xiàn)交互功能，可以實(shí)現(xiàn)上傳作業(yè)、資源共享、師生互動(dòng)，真正體現(xiàn)網(wǎng)絡(luò)學(xué)習(xí)的優(yōu)勢。

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，網(wǎng)頁設(shè)計(jì)所承載的理念也日益被刷新，怎么樣讓“學(xué)有所成”的學(xué)生學(xué)以致用，盡快適應(yīng)行業(yè)的發(fā)展，是我們教學(xué)改革中要解決的主要問題。

參考文獻(xiàn)：

[1]李海燕.基于項(xiàng)目化的《網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)》課程教學(xué)改革初探[J].電腦知識與技術(shù)，2010（30）.

[2]崔建成.網(wǎng)頁美工[M].北京：電子工業(yè)出版社，2010.

[3]朱文耀.項(xiàng)目驅(qū)動(dòng)法在ASP.NET教學(xué)中的創(chuàng)新應(yīng)用[J].信息與電腦，2012（11）：163-164.

作者簡介：胡昕熠（1982-），女，浙江金華人，助理實(shí)驗(yàn)員，研究方向：網(wǎng)頁設(shè)計(jì)、平面設(shè)計(jì)。

作者單位：金華職業(yè)技術(shù)學(xué)院信息工程學(xué)院，浙江金華 321017