網(wǎng)頁設(shè)計教學方法探索

李陸燕 王瑀

摘 要：隨著網(wǎng)絡(luò)的廣泛應(yīng)用，社會對網(wǎng)頁設(shè)計人員的需求也越來越大。作為中職院校教師，要勇于探索，多多思考教學方法，從實際應(yīng)用出發(fā)，培養(yǎng)更適合工作崗位要求的學生。

關(guān)鍵詞：網(wǎng)頁設(shè)計 教學方法 課程

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)站的應(yīng)用越來越廣泛，對網(wǎng)站的設(shè)計制作及維護人員的需求也就不斷增加。作為中職院校教師，筆者在充分進行市場調(diào)研的基礎(chǔ)上，以就業(yè)為導向，開設(shè)了網(wǎng)絡(luò)設(shè)計與開發(fā)專業(yè)，網(wǎng)頁設(shè)計是該專業(yè)的主要課程，特別是靜態(tài)網(wǎng)頁的設(shè)計制作。經(jīng)過多年的教學經(jīng)驗積累，進行的以職業(yè)針對性為核心理念的課程改革和建設(shè)，從課程結(jié)構(gòu)、課程內(nèi)容、教學方法、教學資源、考核模式及學生創(chuàng)新能力培養(yǎng)等方面做了大膽嘗試，教學效果明顯改善。這對改變現(xiàn)有教學模式、增強學生學習興趣、提高學生操作技能、增強學生職業(yè)能力等有積極意義。

一、教學分析

在現(xiàn)有的中職院校中，開設(shè)網(wǎng)頁設(shè)計的課程很普遍，主要是靜態(tài)網(wǎng)頁的制作。目前網(wǎng)頁設(shè)計課程涉及的軟件主要有三個：Photoshop、Flash和Dreamweaver?；局谱鬟^程是：使用Photoshop設(shè)計網(wǎng)站效果圖，詳細設(shè)計網(wǎng)頁的圖形圖像、背景、圖片及簡單的動畫；Flash軟件主要設(shè)計Banne、二級菜單等，提高網(wǎng)站觀賞性；最后在Dreamweaver將設(shè)計的網(wǎng)頁效果用代碼全部實現(xiàn)。與傳統(tǒng)的理論教學相比，網(wǎng)頁設(shè)計課程有著鮮明的特點。

1.培養(yǎng)學生的綜合能力

一個網(wǎng)站從用戶需求分析到設(shè)計、制作、上傳網(wǎng)絡(luò)的整個過程中，對學生的溝通能力、理解能力、學習能力等都是一個考驗。

2.具有很強的可操作性

每個網(wǎng)頁都需要學生盡心去完成，而不是空談，所以對學生的技能要有很高的要求。

3.創(chuàng)新空間很大

現(xiàn)在的網(wǎng)頁各種各樣，每個學生都有自己的想法，無論是在色調(diào)還是布局上，都有很大的發(fā)揮空間。代碼設(shè)計也有很多方法實現(xiàn)，靈活的學習內(nèi)容能激發(fā)學生興趣，培養(yǎng)創(chuàng)新能力。

4.與藝術(shù)美感聯(lián)系緊密

網(wǎng)頁最先傳達給人們的信息是一個整體的感覺，這在教學過程中很容易忽略，僅僅開設(shè)美術(shù)課程是不夠的，還要多看多分析經(jīng)典網(wǎng)頁，著重培養(yǎng)美感。

二、教學內(nèi)容

在網(wǎng)頁設(shè)計教學過程中，以前更注重Dreamweaver的應(yīng)用，而忽略了真正的設(shè)計階段。其實對于中職的學生來說，設(shè)計效果圖是做好一個網(wǎng)頁的基礎(chǔ)。

1.Photoshop在網(wǎng)頁設(shè)計中的應(yīng)用

（1）網(wǎng)站的LOGO。LOGO是一個網(wǎng)站的形象，一個好的LOGO給用戶的印象很深，能提高網(wǎng)站的知名度?？梢酝ㄟ^PS軟件的鋼筆工具及路徑、選取等操作，設(shè)計出簡潔、有意義的LOGO。

（2）色調(diào)。色調(diào)的選擇很重要，它是網(wǎng)頁給人的第一感覺，選擇好色調(diào)能使用很快喜歡上這個網(wǎng)頁。首先要掌握關(guān)于美術(shù)的一些知識，例如對比色、暖色、冷色等。每個色調(diào)都有它的意義，科技類網(wǎng)站一般使用藍色或者灰色，食品類網(wǎng)站一般使用暖色或綠色，環(huán)保類網(wǎng)站一般使用綠色，產(chǎn)品類網(wǎng)站一般使用和產(chǎn)品類似的顏色，如安卓綠等。網(wǎng)站的前景色和背景色的搭配要合理。

（3）網(wǎng)頁中的細節(jié)。在網(wǎng)頁設(shè)計中，除了大量的使用圖片外，還有一些小的圖標及按鈕等細節(jié)需要設(shè)計。這些是點睛之筆，不能忽視，在設(shè)計風格和顏色上與整個網(wǎng)頁主題一致。

（4）布局設(shè)計。網(wǎng)頁布局方法有很多，上下結(jié)構(gòu)、上中下結(jié)構(gòu)、上左右結(jié)構(gòu)、上左中右結(jié)構(gòu)等，要根據(jù)內(nèi)容選擇合適的結(jié)構(gòu)。

2.Flash在網(wǎng)頁設(shè)計中的應(yīng)用

（1）Banner的設(shè)計。在整個網(wǎng)頁中，動畫給人印象深刻，給網(wǎng)頁添色。在設(shè)計Banner時，要注意圖片的選擇與整個網(wǎng)頁一致，文字要突出，表現(xiàn)出該企業(yè)的精神。

（2）細節(jié)設(shè)計。在按鈕、圖片、超級鏈接等方面也可以使用動畫，這樣網(wǎng)頁看上去會更有動感。

3.代碼

在代碼實現(xiàn)階段，我們主要使用了CSS+DIV技術(shù)。在學習過程中，要強調(diào)代碼的書寫規(guī)則、書寫格式規(guī)范、書寫技巧，良好的書寫習慣是成為一個成功網(wǎng)頁設(shè)計人員的基礎(chǔ)。

4.課時分配

以上三個軟件建議學習兩個學期，第一學期三個軟件并重，第二學期著重講解代碼實現(xiàn)部分。

三、教學方法

中職學校主要培養(yǎng)的是學生的動手能力和解決實際問題的能力。讓學生在學習中養(yǎng)成良好的習慣，能更快地適應(yīng)企業(yè)的崗位需求。在教學過程中要采用多種教學方法，如任務(wù)驅(qū)動法、項目教學法、案例教學等，變被動學習為主動學習，使學生不僅僅是“學會”，更主要的是“會學”，這就要求我們要改變傳統(tǒng)的教學方法。

1.課程內(nèi)容

在教學過程中，對每個軟件的學習要模塊化，再把每個軟件細分模塊化。例如在學習photoshop時，首先臨摹經(jīng)典網(wǎng)站，掌握每類網(wǎng)站的設(shè)計特點，如科技類、產(chǎn)品類、學校類等，把相關(guān)知識進行總結(jié)講解，使學生有一個整體的感知。再通過實例進行設(shè)計練習，使學生牢牢掌握每個軟件的核心。

2.實例教學

不管是采用案例、項目還是任務(wù)，在教學內(nèi)容的選取上要更貼切實際，以實際應(yīng)用為主線，切身體會整個案例完成的過程，使每次學習都變成一次實戰(zhàn)。學生分析實例的過程和自己的經(jīng)歷及環(huán)境相結(jié)合，可以激發(fā)學生的求知欲，讓他們主動去周圍的生活中找素材，分析內(nèi)容，最后完成任務(wù)。

3.課堂形式

課堂講解主要分成兩部分：知識講解和案例實訓。以前的教學是90分鐘一堂課，課時短、內(nèi)容少，往往學生剛開始進入狀態(tài)就下課了，第二次課時又用大量的時間復(fù)習第一次課內(nèi)容，很影響授課進度和效果。那么我們就采用大課堂的形式，如一個案例講解180分鐘，有的甚至要一到兩天的時間，特別是在綜合練習階段，可以在學期中或者學期末安排一到兩周的時間，拿出一個較大的案例實踐，并充分利用課余時間，讓學生的學習一氣呵成，提高學習效率。

4.教學手段

在教學過程中，還可以采用更靈活的教學手段，如師生互動、生生互動，活躍課堂氣氛，提高學生分析與解決問題的能力，達到輕松學習、自主學習的目的。還可以采用多種教學形式，如競賽方法、分小組教學、學生講解等，讓學生充分感受到這個行業(yè)的真實職責。并利用大量多媒體課件、課程錄像、習題庫、試題庫等手段，滿足不同基礎(chǔ)的學生進行自主學習。

四、教學考核

課程設(shè)計的考核必須充分重視學生的創(chuàng)新能力和實踐能力的培養(yǎng)，全面提高學生的工作能力和綜合素質(zhì)?？己朔椒ㄈ缦隆?/p>

1.教師考核

教師在每個階段都要對學生完成的任務(wù)進行考核。如完成一個網(wǎng)站要5天的時間，教師要把這5天分成幾個階段：搜集素材、用Photoshop完成效果圖1天，代碼實現(xiàn)2天，自查互評1天，完善1天。教師對每個階段都進行評分，這樣可以督促學生按時完成任務(wù)。

2.學生自評

在每個同學都完成任務(wù)后，同學之間進行互評，這樣可以取長補短，還可以讓每個同學復(fù)習以前學過的知識，會找錯、會改錯，讓學生進行討論交流。還可以把優(yōu)秀的網(wǎng)站選出來進行評比，讓學生自己介紹，把自己設(shè)計的網(wǎng)站推銷出去。

3.考核成績等級

課程設(shè)計實際成績一般分五個等級：優(yōu)秀、良好、中等、及格、不及格。

網(wǎng)頁設(shè)計是一門實踐性很強的課程，課程定位要明確，并與相關(guān)崗位技能全面接軌。作為從事網(wǎng)頁教學的教育工作者，一定要勇于學習、勤于探索，只有這樣，我們培養(yǎng)出來的學生才能適應(yīng)社會需求，更好地走向工作崗位。

（作者單位：秦皇島技師學院）