網(wǎng)站設(shè)計的實訓教學研究

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

實訓教學的對象主要針對完成網(wǎng)站設(shè)計基礎(chǔ)課程，即掌握了pho-toshop基礎(chǔ)，對網(wǎng)頁布局基礎(chǔ)、div+css布局較熟練的學生，其重點是創(chuàng)作思路和設(shè)計表達上的培養(yǎng)，課程分為四個階段進行(教學周18周，周課時10節(jié)):

第一階段:模塊化設(shè)計(4周)此階段采用案例教學法與討論法相結(jié)合，從網(wǎng)頁組成細節(jié)元素著手，使大家掌握網(wǎng)頁元素如按鈕，導航條，欄目模塊的特點和特效表達。以按鈕教學為例，準備一組優(yōu)劣對比的按鈕，首先讓學生談?wù)?個素材帶來的情感感受，引導學生分析作品的優(yōu)劣勢，提高審美感;其次讓學生分析元素構(gòu)成，高光陰影的配合等，提高技能。最后教師演示按鈕的實現(xiàn)步驟，并要求學生根據(jù)步驟完成練習。為了便于學生課后復習，輔以課堂錄像方式，將案例實現(xiàn)的整個過程展現(xiàn)給學生，對學生提交作品采用互評和點評的方式，集體演示作品存在的共性問題，幫助學生不斷提高。該階段主要讓學生了解細節(jié)對于整體的重要性，養(yǎng)成精雕細琢的設(shè)計習慣，培養(yǎng)自我耐性，提高審美能力，能正確的分析自己作品優(yōu)劣不斷修改加以提高。

第二階段:banner設(shè)計(6周)一個網(wǎng)站的好壞，很大程度上由banner決定。從人的視覺流程來說，打開一個網(wǎng)站，用戶第一眼看到的是最為顯眼的網(wǎng)站banner區(qū)域，此區(qū)域是否有沖擊力，直接影響用戶對網(wǎng)站的好壞的判斷。網(wǎng)頁設(shè)計的審美需求是對平面視覺傳達設(shè)計美學的一種繼承和延伸。兩者的表現(xiàn)形式和目的都有一定的相似性，把傳統(tǒng)平面設(shè)計中美的形式同現(xiàn)代網(wǎng)頁設(shè)計的具體問題相結(jié)合，運用平面設(shè)計中美的基本形式到網(wǎng)頁中去，增加網(wǎng)頁設(shè)計的美感和大眾的視覺審美需求，因此分配6周的時間用于banner設(shè)計教學。本階段教學目的是為了強化學生對banner的理解以及進一步培養(yǎng)審美感，提高banner中文字，背景，產(chǎn)品，素材等各元素的表達能力。前文提到，典型網(wǎng)站設(shè)計的含義就是遵從各行業(yè)網(wǎng)站所需表達的內(nèi)容，因此在實訓教學過程中，將常見的典型網(wǎng)站分為金融篇、網(wǎng)絡(luò)篇、消費品篇、公益篇、服裝篇、淘寶店鋪篇、電子產(chǎn)品篇、化妝品篇、游戲篇等，針對每個篇章都以真實商業(yè)項目為案例，精心設(shè)計2－3個banner。Banner設(shè)計階段主要針對色調(diào)的掌控、明暗對比、背景的處理、素材的選擇、文字的選用、變形、排版等方面。此階段也可能遇到這樣的問題:通過老師的引導分析能夠完成一個案例，但表達出來的banner往往很平淡。針對這個特點，在分析，演示、練習、評價和作業(yè)互評的基礎(chǔ)上，更加注重對處理技巧的講解與輔導，同時輔以大量練習，使學生在牢固技術(shù)基礎(chǔ)的前提下，達到量變到質(zhì)變，從模仿到創(chuàng)作的蛻變。通過這一階段的訓練，學生對一個題材的表達會得到提高，知道從哪些方面著手分析，加入哪些元素，適合什么主色調(diào)，素材如何選擇，字體如何搭配。通過多看，多想，多練的磨練，即多看:多欣賞一些好的作品;多想:思考人家的表達方式，配色模式、文字處理方式;多練:就是進行大量的練習，從而達到美工到設(shè)計師的轉(zhuǎn)變。

第三階段:整體頁面設(shè)計(6周)為了增強頁面的可閱讀性，合理性，恰當?shù)剡\用與搭配頁面各要素間的色彩，在完成了前2個階段的強化訓練后，進入整體頁面設(shè)計培訓階段。該階段加強了整體排版的設(shè)計，在課程設(shè)計上，首先根據(jù)不同的行業(yè)需求進行頁面規(guī)劃，傳授整體型，流式排版，左中右排版，特殊型排版，綜合型排版等不同排版形式表達的重點，讓學生站在用戶的角度考慮，了解作為用戶最喜歡、最關(guān)注的欄目，給用戶有價值的信息，完成重點、次重點的劃分，并從網(wǎng)站的統(tǒng)一性，一致性著手，完成二、三級頁面的設(shè)計。最后用div+Css排版，并控制頁面大小30k左右，保證瀏覽速度，從而完成一個完整的網(wǎng)站。通過這階段完成6－8個整站設(shè)計，構(gòu)思、素材選擇、整體設(shè)計、子頁設(shè)計、綜合排版、整站布局各個流程全程參與，達到獨自設(shè)計完成的實訓目的。

第四階段:自主命題設(shè)計(2周)進入項目準備、答辯階段，在這2周，學生充分發(fā)揮自己的想法，設(shè)計一個主題網(wǎng)站，不少于5個頁面，并實現(xiàn)html。最后進行全班演示答辯。通過這一階段的強化練習，提高學生設(shè)計能力，鍛煉學生的表達闡述、隨機應(yīng)變能力。網(wǎng)頁設(shè)計是一門新興的設(shè)計和網(wǎng)絡(luò)的交叉學科也是一個感性的學科，更注重動手能力，創(chuàng)新能力的培養(yǎng)。一個成功的網(wǎng)頁設(shè)計，不單單是美工設(shè)計那么簡單，它包括了心理學，生理學，平面構(gòu)成，色彩構(gòu)成等多方向的知識，觀念上要確立獨立的思維方式，要有效地將設(shè)計元素引入網(wǎng)頁設(shè)計之中，只有了解并可以很好的運用這些知識，我們設(shè)計出的網(wǎng)站才能增加人們?yōu)g覽網(wǎng)頁的興趣，才能更好的為受眾服務(wù)。所以除了技能，學生的創(chuàng)新能力和情感表達能力是非常重要的，只有這樣我們才能幫助學生成為一個真正的設(shè)計師，才能培養(yǎng)出真正的能適應(yīng)崗位的綜合型人才。

作者：張曉穎單位：重慶正大軟件職業(yè)技術(shù)學院