網頁設計論文范例

一、教學內容的分析與改進

1、大多數教師的教學內容主要為以下幾種類型：

（1）上課主要講解Dreamweaver軟件的使用，主要介紹如何使用這個工具進行網站的開發。

（2）介紹fireworks如何繪圖，并將繪圖的內容切片，將網頁展現出來。

（3）將Dreamweaver、Flash和Fireworks分別教給學生。由于課時的原因，學生每種都會點，但沒有一樣能精通。

2、存在的不足：

經過與現從事網站建設相關工作的學生調研，我發現上面的任何一種教學內容，都無法在實踐中得到充分的應用，原因如下：首先，從事網站設計的企業，一般都有專門的美工，負責網頁界面的設計，他們的美術功底及設計能力遠非計算機專業的學生能達到。其次，現在的網站基本采用DIV+CSS進行設計，原先采用表格設計網頁的技術已處于淘汰階段。而在目前的教學中，DIV+CSS在中職學校中根本沒有開展教學。于是就出現了這樣的現象：計算機專業的學生在網頁設計的崗位上美工做不好，頁面也不會設計，教學內容和實際需求的能力脫節。

1課程體系，精選教材

在一個合理的課程體系的基礎之上，針對目前中職學生基礎差，學習積極性不高的特點，選擇一本好的教材，在一定程度上也影響了學生的學習興趣和教學效果。在選擇教材時，一定要堅持少理論，多應用實例的原則，如果條件允許，可以根據本校學生的實際情況編寫校本教材。比如，可以編寫一門《網頁美工設計》的教材，內容分為Photoshop和Flash兩大部分，在Photoshop部分主要學習如何應用該軟件處理網頁圖像以及設計網頁布局和對網頁進行切片的技術，而在Flash部分主要是學習如何制作網頁的動態元素?？紤]到中職學生英語基礎差，對程序代碼的理解能力有限，在動態網頁制作教材的選擇中，要優先選擇利用Dreamweaver軟件的服務器行為實現動態技術的教材，盡可能減少對程序代碼的過多講述，以提高學生學習的興趣和自信心。

2突出實踐能力，部分內容實行協同教學

2.1設計學習任務，激發學生的學習興趣

興趣是最好的老師。在進行入門教學的時候，如何激發學生的學習興趣，使得學生在主觀上由“要我學”轉變為“我要學”，是個關鍵問題。以講授網頁美工設計的內容為例，在開始幾節課，要結合國內外的幾個知名網站的整體結構進行分析，介紹知名網站在版面設計方面如何布局，在色彩搭配方面如何合理地統一網站的風格、網站Logo和Banner的設計理念，以及如何對網頁圖片進行處理才能更加吸引網民的眼球等，讓學生意識到網頁世界的豐富多彩，從而激發他們的學習興趣。與此同時，在每個學習階段結束的時候，都要求學生獨立完成一個任務，從最基本的圖片處理、Logo設計到整個網站結構的布局和色彩搭配，這樣學生就會在自己心里形成一個風格，這也是學生學習好網頁設計課程的基礎和前提。

2.2舉一反三，培養學生學習能動性

網頁設計是一門專業技能，非常注重學生實際動手能力的培養。在實際教學中，教師要充分準備大量的具體案例，采用提問法、任務驅動教學法、講練結合法等方法對學生進行教學。在開始教授一個新的內容時，要提出一個問題，讓學生帶著疑問去學習，這樣才能有的放矢。教師可以先在教師機上演示操作一個具體案例，在演示的過程中，采用邊講邊練的方式，讓學生在“做中學”，然后布置一個與此案例類似的任務，讓學生獨立完成，在任務結束的時候，根據學生的完成質量情況，讓做得比較好的學生在教師機演示自己的成果，談談自己在做的過程中的心得體會。這樣，在課堂上，大部分的時間就交給了學生，讓學生始終處于動手的狀態。作為教師，在學生實施任務的過程中，不要過多干涉學生，而是多給學生以引導，讓學生自己思考、設計、完善，讓學生在實踐中自我摸索，不斷提高。通過這種方式，不僅起到了舉一反三的教學效果，而且充分發揮了學生的學習能動性，使得學生學得扎實，記得牢固，也進一步提高學生的分析問題和解決問題的能力。

1網站色彩的合適性

作為視覺元素的重要組成部分，色彩的適合性在很大程度上決定著網站網頁的質量和水平，尤其是正負網站是否可以通過色彩向傳達信息。色彩定位過程中，應當與受自然屬性、眾定位以及情感屬性等因素相適應，研究目標受眾的習慣、價值觀以及其內心的期望。政府網站即為民眾服務網站，設計過程中應當注意配色合適，應當充分考慮民眾背景以及他們的審美要求；其次，色彩應用控制在五種以內，在視覺上給廣大觀眾營造一種簡約、沉穩、以及舒適和和諧感覺；最后，搭配過程中，應當與網站基調相吻合，確保整體風格上的一致性和相互補充。

2合理應用多媒體技術營造視覺效果

在網站網頁設計過程中，較之于傳統的商業網站來說，政府網站一定不能盲目、隨意地應用各種計算機多媒體技術設備。在此過程中，需要注意的是不能應用飄浮廣告條、大量圖片和動畫，以免影響網站網頁反應時間，延長訪問等待時間。就視覺傳達而言，主要是圖片、動畫兩個方面。其中，圖片應用在政府網站建設與設計過程中，其輔助作用非常明顯。

在圖片選擇與設計時，應當緊密圍繞主題，選擇擁有獨特性、排他性圖片，根據需求對尺寸進行設計，并對圖片在網站頁面中的位置進行明確，最大限度的使其凸顯出鮮明的特色；同時，每一個單獨圖片，應當嚴格控制在40KB大小范圍內，整個網站的頁面不大于200KB。就動畫來說，實際設計過程中常用的是flash，其主要的應用效果是炫酷；對于政府網站而言，不能一味地追求炫酷，為能夠準確地突出主題，在flash應用過程在，需動、靜結合，表現出一定的節奏感強，以免造成視覺疲勞感。同時，版面應嚴格控制，防止喧賓奪主，影響網雜網站信息的呈現和訪問速度。

3借鑒國外優秀設計方案

在設計政府網站、政府業務系統的頁面或開通動畫時，設計初期應根據網站所屬單位的工作性質、特點進行設計，而不是怎么好看怎么設計，所以在視覺和觸覺上給人的感覺就是符合這個單位的風格。同時，還應當有所創新，學習國外的優秀政府網站、系統設計理念，在視覺、觸覺上展現更好的效果，給人帶來深刻的印象。傳統理念下，很多政府網站非常的乏味、無聊。如今，為更好的貼近民眾、深入民心，政府網站上投入更多心思以吸引更多用戶瀏覽。

一、網頁色彩設計要符合受眾心理習慣

人對色彩的心理想像往往支配自己的購買行為?？Х?、巧克力的包裝紙必須使用咖啡色或紅色。來自美國的調查報告證實，以紫色，藍色、咖啡色包裝紙包裝咖啡、巧克力、牛奶，大部分消費者深感不快，致使銷售量銳減。在日本，為使蜜桔、蘋果、西瓜等水果顯示本身的固有色、而迎合消費者心理，不少水果店不得不借助染色劑。消費者重視固有色，設計色彩時不能忽視這一因素。近年來，為了保護人身健康，雖已停止使用在安全上有問題的色素，但是，以木紋三合板作為桌面的鐵桌子比比皆是，可見，人們對固有色的推崇是根深蒂固的。尊重消費者的心理習慣，要科學、合理地安排網頁色彩設計。

二、網頁色彩設計要遵循受眾視知覺特征

色彩的位置與方向在頁面構圖中是很重要。藍色在視域的頂部、底部、左側或右側，其作用各不相同。底部的藍色是重的，高部的藍色是輕的。頂部的深紅色表現為沉重緊急的重量，在底部卻表現為穩定的事實。黃色在頂部時產生一種毫無重量的效果，在底部時其效果就像受控制的浮力。色彩分布的平衡是頁面構圖的最重要的目的之一。正如天秤的秤桿為支撐平衡而需要支點一樣，在一個頁面里平衡的垂直軸線也是必需的。色域的重量在軸線的兩邊起作用。在尋求決定一幅畫中的“左側”和“右側”的價值時，我們首先會想到人類的身體。左側通常比較被動，右側意味著活力。右側傾向于向前和向上，而左側則后退和下墜。許多繪畫作品都是從畫左下側的重點開始的，然后向右上方運動。在進行網頁色彩設計時設計師要充分考慮色彩給受眾的視知覺感受，除了色彩的相對位置外，色彩量的比例、它們的純度和明度也是重要的。

三、網頁色彩設計的原則和方法

⑴網頁色彩設計的原則：

在進行網頁設計色彩選擇時，要遵循網站自身的特點并掌握一定的配色規律，進而設計出優秀精美的頁面。

一、課程的教學現狀

在我國，視覺傳達教育起步較晚，但是發展迅速，其人才培養和教育模式倍受社會關注。目前很多高校在藝術類網頁設計課程的教學上存在兩種主要現象：一是重設計、輕制作；二是重軟件、輕藝術。第一種培養出的學生一般只注重靜態頁面的視覺效果，對網站的動態更新關注較少，不利于網頁后期維護；第二種培養出的學生側重于Dreamweaver、Flash等軟件的操作，對網頁的版式、VI形象等關注較少，制作出的網頁往往缺乏個性、藝術表現力不強。因此，對視覺傳達專業的網頁設計課程的教學改革勢在必行。

二、課程教學目標的重新確定

我們都知道，一門學科的課程目標通常決定了該學科的最終導向，它不僅能為教師傳授正確的學科理念提供依據，同時也給學生指明正確的課程學習方向。因此，視覺傳達專業網頁設計課程改革的首要環節就是對該課程教學目標的重新確立。眾所周知，高等教育培養出來的人才最終要服務于社會，社會的需求決定了該學科的教學內容和教學目標。隨著科技的進步，時代的發展，不同時期對網頁設計人員的需求也是不同的。通過市場調研，我發現目前社會上網站分工越來越細，招聘的相關崗位大體分為三類：第一類為前臺美工，以視覺傳達專業為主，以網站的形象塑造和界面美化為崗位內容；第二類為網站后臺服務，多以h7V5數據庫等做交互型網站的，以計算機專業為主；第三類就是兩者都要具備的全才網頁設計師，是具有技術背景和多年實戰經驗的創意人才。由此我們可以確定視覺傳達專業培養出來的網頁設計人才的崗位定位應是網頁美工師，他應該具有兩種專業素質：一是掌握網頁設計的基本要素和美學知識相結合的方法與技巧；二是懂得簡單機算計軟件（PS、Dreamweaver、Flash）的操作，便于在制作網頁界面時考慮到后臺維護的便利。而“藝術設計教育的人才培養目標是：培養綜合素質高、創造能力強的高級應用型設計人才”。所以該課程教學目標應該是培養具有以上兩種專業綜合素質的、創造能力強的高級網絡應用型設計人才。新的培養目標確定后，該課程的教學內容應該在此基礎上重新調整。

三、課程內容的調整

視覺傳達專業網頁設計課程教學內容應該為教學目標服務，知識結構要合理，應注意知識點之間的交叉及有機結合，同時也要有效地培養學生的創新性思維及獨立分析、解決問題的能力?；诖耍碌慕虒W內容調整為兩大板塊：理論課程內容和實踐課程內容。

1.理論課程內容

1案例驅動的應用現狀

目前，案例驅動教學在高等教育各學科中廣泛使用．但由于很多教師對案例驅動教學法的內涵、特點及組織過程的認識不透徹，導致案例教學法的使用存在許多誤區．

(1)案例設計不當．

案例驅動教學本質上應是通過“案例”來誘發、加強和維持學生的成就動機，成就動機是學生學習和完成任務的真正動力．因此，案例驅動教學法的案例設計是教學成敗的關鍵因素．案例過于簡單、欠缺針對性、設計不清晰等都會影響案例教學的教學目標．一個具體的案例設計，必須考慮周全，保證案例的可行性和有效性．進行案例設計時，要以學生為中心，教師為主導，興趣為主線，使學生在完成任務的過程中掌握知識、技能、方法并學以致用．

(2)組織實施過程并非案例教學．

案例教學是師生的雙向活動，通過具體案例引導學生參與分析、討論，讓學生在具體的案例情景中積極思考，主動探索．在實際教學過程中，有些教師只是把案例呈現給學生，像講故事一樣敘述一遍，沒有引導，沒有總結，缺乏交流與互動;有些教師在課堂上引用了案例，但教學方式還是沿用傳統的灌輸式的教學，仍然以教師為主體．以上種種教學方式看上去是引用了案例，但并非采用了案例教學法，更談不上通過案例驅動去激發學生的學習興趣，培養學生分析問題解決問題的能力，提高學生自主學習及與他人協作的能力．上述種種對案例驅動教學法的不恰當使用，將直接影響學生學習的深入和教學目標的達成．本文結合“案例驅動在網頁設計類課程中的應用”的教改課題，對案例驅動在實際教學工作中的應用進行了探討和反思．

2案例驅動的教學實踐

1常見處理技術

網頁中的圖像，按照存儲格式不同可以分為矢量圖和位圖，按照使用用途的不同，大致可以分為地址欄圖像，網站Logo，網頁內容圖像等。地址欄圖像類似一個圖標，顯示在地址欄網址前邊，一般經過精心設計，能夠傳遞公司專業與精細的形象。內容圖像是指嵌在網頁中或者作為網頁背景的圖像。伴隨網絡技術和軟件技術的進步，用于圖像處理設計的軟件有了很大的發展。網頁三劍客中的Dreamweaver在進行網頁設計的同時，可以對一些圖片進行簡單的變化處理，fireworks能滿足對網頁圖片處理的大部分功能要求。對于一些有特殊要求的圖像，可以使用Adobe公司的Photoshop軟件進行處理；在進行Logo等設計時，一般使用CorelDraw或Illustrator等軟件來完成。在進行圖像的設計、選擇和處理中，掌握專業軟件的基本使用技巧是必需的，圖像在網頁設計中的功能主要可以分為視覺吸引、信息引導兩方面。要達到這樣的目的，需要對圖像進行合理的處理。使用動畫圖片，以及適當的色彩對比，形成版式的變化，吸引瀏覽者的注意，引導其對網站內容的閱讀。根據公司對網站的功能定位，其所承載的任務與指向有所不同，對瀏覽者所作設定亦有差異。比如騰訊公司的騰訊網（qq.com）和騰訊（tecent.com），一個作為門戶內容網站，一個作為公司形象網站是兩個獨立的網站，設計風格，內容和要求差異很大。

2新技術

網絡作為第四媒體，其顯示終端可能是計算機，平板，電視或智能手機，為了頁面兼容等原因，前端設計出現了很多新技術，如div+css技術，Javascript技術等，為了方便管理，一般采用對象的結構、表現和行為分開。結構是對象的內容，表現是其外觀，而行為是與瀏覽者的交互，或者說是瀏覽者進行鼠標點擊或輸入內容等操作時，頁面的反應。在進行網頁設計過程中，圖像對象也是如此，利用代碼可以對圖像進行一些效果的處理，起到資源占用少，頁面維護容易等目的，還可以達到一些用基本圖像處理技術不易實現的效果。用div+css結合Javascript技術可以實現在網頁前端一些設計效果和邏輯處理功能，比如圖像輪播和驗證碼校驗功能。在一個存在后臺管理的網站中，網頁的很多內容來自于后臺數據庫，一些圖片也不例外，內容需要和后臺交互，根據數據庫的內容和頁面的特定邏輯，決定圖像的外觀。這是基本圖像處理技術無法實現的，需要設計者了解動態頁面設計技術，常見的技術有asp.net，php和jsp技術等。

3結論

傳統網頁設計技術一般分為前臺和后臺技術，前臺主要負責頁面的版式和效果設計，在設計過程中，需要對圖像處理有較好的理解，隨著技術的進步和觀念的變化，一般認為，網站的功能是第一位的，在此基礎上，需要有良好的顯示效果。技術是手段，是媒介，不能一味追求技術的先進與絢麗，設計要同公司網站的定位緊密相關，綜合運用多種技術實現。網站的視覺吸引、信息引導兩方面的功能并沒有變，但是如何達到這一目的，是設計者關注并努力的方向。在功能完成的基礎上，使瀏覽者獲得良好的體驗，簡潔明快的設計往往會給用戶留下較深的印象。頁面圖像設計者要對相關技術有較好的理解，頁面前臺效果不是孤立的，任務進行過程中，美工需要和后臺設計人員進行溝通，反復修改，共同完成設計。

作者：智立甫 王春寫 單位：石家莊職業技術學院電氣與電子工程系 石家莊市市容環衛服務中心

1傳統教學存在的問題

1．1知識點孤立，教學效果較差

傳統的網頁設計課程是按照教材的內容，講解HTML語言和DreamWeaver工具的使用。學生往往不能將所學知識聯系起來。學期結束后，學生對整個網站的構建缺乏清晰的概念，提交的作品質量較差。在對學生進行期中課程質量問卷調查中，80％的學生都認為課程所學內容可以理解，但是當教師要求學生動手完成網站時，90％的學生都不能很好完成。這正是因為在傳統教學中一般采用講授法和實驗法，一周2學時的理論講解，2學時的實驗課。教師按照教材章節進行教學并布置實驗內容，這樣就造成了學生只對單一章節知識的理解，難以將所學內容聯系在一起。

1．2教材過時，影響教學效果

網頁設計課程是一門應用極強的課程，技術和工具的更新換代較快。而與之矛盾的卻是教材的出版周期較長，往往跟不上技術發展的腳步。例如，當前，DreamweaverCS6已經成為主流網頁設計的軟件，但是一些教材還停留在講解Dreamweav－erCS3上，導致學生的興趣不高，不利于學生創造能力的培養，違背了教學目標的要求。同時，按照教材的內容講解也限制了教師的教學，目前高校中使用的網頁設計教材分為兩種，一種是基于理論性質的，單純講解HTML，一種是介紹Dreamweaver網頁開發的。前一種不適合非計算機專業學生學習，內容比較枯燥，學生在沒有計算機程序語言的基礎上很難理解。一般高校對非計算機專業學生都選擇使用第二種介紹Dreamweaver的教材，而該教材則會造成學生的開發水平較低，過度依賴工具，無法解決實際問題。

1．3教學方法單一，學生學習興趣不高

對于公共課來說，學習興趣是學生是否能學好課程的重要因素。對于計算機應用能力較差的非計算機專業學生來說，在學習網頁設計這門課程時，如何提高學生的興趣至關重要。傳統的網頁設計課程的教學采用2學時理論和2學時實驗課的形式進行，學生缺少動手的機會，往往使學生對課程缺乏興趣，這阻礙了學生的能動性與創造性的發揮。對學生進行調查問卷中，70％的學生都提出課程設置實驗時間較少，應將課程都安排在實驗室等問題，還有一些學生認為網頁設計課程應以提高學生興趣為出發點。這些都說明了學生對于增加自己實踐機會的渴望。