時間：2023-08-01 17:39:55
開篇：寫作不僅是一種記錄，更是一種創造，它讓我們能夠捕捉那些稍縱即逝的靈感，將它們永久地定格在紙上。下面是小編精心整理的12篇網頁設計的流程，希望這些內容能成為您創作過程中的良師益友，陪伴您不斷探索和進步。
隨著我國經濟的不斷發展，我國的IT行業得到了有效的發展。網頁設計是IT行業領域中發展中重要的組成部分，其中DIV+CSS布局技術是網頁設計和開發過程中重要的技術組成部分。文章對網頁設計中DIV+CSS布局技術的應用和實踐進行了分析和闡述，并且對DIV+CSS布局技術的表現、內容、代碼、搜索等形式進行了一定程度的研究，以此促進IT行業領域中網頁設計、開發的長遠發展。
關鍵詞：
網頁設計；DIV+CSS布局技術；應用
在進入21世紀以后，我國逐漸向信息化發展，人們的日常生活水平也得到了有效的提高，互聯網也成為人們在日常生活、工作中必不可少的工具，成為人們在交流、信息查找的重要途徑之一。在互聯網的發展過程中，網頁設計、開發是人們使用互聯網工作和生活的重要工具，其中DIV+CSS的布局技術在網頁設計和開發的過程中占有重要的地位。但是在傳統的網頁布局技術運用的過程中，出現了很多隱藏的弊端，并在發展的過程中逐漸顯現出來。同時，在這樣的情況下，IT行業在網頁設計、開發過程中，對DIV+CSS布局技術給予了高度的重視，并且也得到IT行業的廣泛應用。DIV+CSS布局技術也是網頁設計、開發過程中一種較為流行的技術和術語，開發人員通過利用DIV+CSS布局技術對網頁設計過程中的對象進行準確的定位，從而增加了網頁在使用過程中的效果和傳輸、下載速度，也在最大程度上方便了開發人員對網頁維護和更新的操作流程。
1網頁設計中DIV+CSS布局技術的含義
在網頁開發的過程中，DIV+CSS技術布局占有重要的地位。其實DIV+CSS技術也可以分開來說，DIV，CSS在網頁布局的過程中，所代表的含義和意義也是不一樣的，下面對DIV+CSS布局技術的含義進行了分析：第一，DIV是DIV+CSS布局技術中的重要組成部分，也是網頁設計和開發過程中重要的應用語言和標記元素，為網頁設計、開發過程中的文檔，提供了網頁中的布局結構和網頁的背景，在網頁設計、開發的過程中也可以將DIV稱為定位技術。DIV在起始和結束的過程中都進行了一定標記，并且都是網頁設計、開發過程中的文檔構成服務的，DIV對網頁設計和開發過程中的一些元素進行了有效的控制。第二，CSS的全稱是CascadingStyleSheet，按照中文翻譯為層疊樣式表，是在網頁設計、開發過程中，網頁形式和網頁信息之間的一種標記語言。在網頁設計的過程中，DIV+CSS布局技術中的CSS技術可以準確控制網頁中的頁面的顏色、布局、背景等，網頁中的頁面效果更加的豐富，并且開發人員在進行網頁設計的過程中，操作流程也相對簡單，也使網頁中的語言更加簡潔化。第三，DIV+CSS布局技術在某種程度上將也是XHTML+CSS技術。人們在使用網頁文檔的過程中，對網頁中的結構也在進行了一定程度上的規范。DIV+CSS布局技術將網頁設計中的結構進行了一定的規范化，將頁面中元素進行了一定的規整，使頁面中的樣式和內容分離，成為一個單獨的個體。并且在將2種技術合為1種技術的過程中，可以使網頁在操作的過程中，更加靈活、方便。
2DIV+CSS布局技術在網頁設計中的作用
2.1和搜索引擎可以相互融合搜索引擎在網頁設計的過程中起到了重要的作用，是根據Spider程序查找互聯網中的內容。Spider程序一般是由少到多地進行網頁內容的查找，等到將所有的內容查找掃描后，引入到其他網頁中，然后訪問網頁頁面，重復掃描、更新，直到內容出現為止。在使用傳統的數據代碼的過程中，在內容瀏覽和操作時不僅復雜，多余的代碼也較多，但是在DIV+CSS布局技術中，可以將瀏覽和操作的流程相對地簡單化，并且在搜索內容的過程中，時間也相對較短，其執行的效率也相應提高。另外，在DIV+CSS布局技術的應用過程中，將代碼也進行了一定程度的簡化，和搜索引擎配合良好。這樣，不僅提高了網頁設計中的執行的效率，也有效提高了網頁設計、開發過程中的質量。
2.2簡化了網頁維護、更新等操作流程設計人員在對網頁進行設計、開發的過程中，利用Table對網頁進行版本的更新設計時，需要對網頁中所有的代碼進行一定程度上的整合，這樣造成網頁維護和更新的工作效率在一定程度上的降低。但是，隨著時代的不斷發展，我國IT行業將DIV+CSS布局技術有效地應用到網頁設計。更新、維護的過程中，在一定程度上降低了網頁中的內容，并利用DIV+CSS布局技術進行一定程度上的控制。當設計人員對網頁中的某一個部分進行一定程度上的更新時，可以有效地提出這部分內容和代碼，設計該區域代碼，設計人員利用DIV+CSS布局技術對網頁進行設計、維護、更新，對其他部位也不會造成任何的損傷。
2.3加強了傳輸的效率在傳統的網頁設計的過程中，往往只注重網頁頁面的效果和帶給人們的視覺沖擊，在這種情況下，設計人員在網頁中的傳輸效率較慢，也給網頁使用帶來一定程度上的影響。但是設計人員在使用DIV+CSS布局技術進行網頁設計、開發的過程中，可以對網頁中的代碼、文字、圖片進行靈活的設計，設計人員利用網頁中的過濾軟件，取代了圖片帶給網頁的視覺沖擊。同時，DIV+CSS布局技術也將網頁中的中體布局分為不同的層次，在網頁開始使用的過程中，無需將網頁的內容儲存到一個較大的表格中，這樣在一定程度上加快了網頁的傳輸效率，在人們的日常生活、工作使用的過程中最大程度地提高了便利性。
2.4有效地提高了網頁設計中的視覺效果軟件設計人員在進行網頁設計、開發的過程中，利用傳統的Table對代碼進行整合，在網頁的頁面中，圖片、文字等效果的分辨率并不高，頁面的效果并不是很好，同時在設計的過程中，需要大量的設計人員。不同的設計人員所設計的網頁形式也是不同的，這樣對人們使用的網頁造成了一定程度上的影響。但是，在DIV+CSS布局技術對網頁設計、開發的背景下，DIV+CSS布局技術能夠有效地統一設計人員的設計理念、風格、特點等，并且DIV+CSS布局技術可以有效控制網頁中的結構，提高了頁面中圖片、文字的分辨率，也給人們在使用網頁的過程中帶來一定程度上的視覺沖擊。
3DIV+CSS布局技術在網頁設計、開發中的應用
在網頁設計、開發的過程中，設計人員要想有效地利用DIV+CSS布局技術對網頁中的結構進行一定程度上的規劃，就要對網頁中的語言代碼的結構進行一定程度的分析。網頁中的語言代碼其實就是網頁結構中的構成元素，網頁結構其實就是網頁設計、開發過程中的構架。換句話說，就是在網頁設計的過程中，對網頁中的內容進行有效的規劃。下面就對DIV+CSS布局技術在網頁設計中的應用進行簡單的分析。
3.1DIV+CSS布局技術在網頁中內容規劃的應用設計人員在網頁設計、開發的過程中，應當對網頁中的內容的幾個基本組成要素進行具體的分析。網頁內容中的幾個基本的要素一般情況下可以分為：網頁的頭部、網頁的主體、網頁的頁腳和網頁中的版權區域。另外，DIV+CSS布局技術在網頁設計的過程中，可以使網頁形成基本的框架。并且在具體的編寫的過程中，DIV+CSS布局技術可以有效整合網頁中的代碼，最大程度地簡化操作流程，為設計人員提供了方便，提高了設計人員的工作效率，同時也使人們在使用網頁的過程中可以一目了然。
3.2DIV+CSS布局技術在網頁設計中信息的應用設計人員在利用DIV+CSS布局技術進行網頁設計、開發的過程中，可以靈活地將網頁中的信息進行一定程度上的整合，并有效地展現出來，給人們視覺的沖擊。在網頁設計的過程中，要對網頁中的信息元素進行定義，合理安排網頁頁面中的信息，這樣不僅簡化了設計、開發的流程，也有效地減少了設計人工作人員的工作負擔，從而提高了工作人員的工作效率。同時，也使網頁中的形式更加豐富，例如：新聞、通知、公告、天氣等信息形式，也有效地節省了網頁中的空間，給人們使用網頁提供了最大程度的方便，也給人們帶來了視覺上的沖擊。
3.3DIV+CSS布局技術在網頁設計中的鏈接的應用設計人員在網頁設計、開發的過程中，DIV+CSS布局技術具有重要的作用，同時，網頁動態鏈接是DIV+CSS布局技術中應用的重要的環節。a：link，a：visited，a：hover，a；active是網頁動態鏈接過程中重要的組成部分。在網頁設計、開發的過程中，要想將DIV+CSS布局技術應用在網頁動態鏈接中，就要對a：link，a：visited，a：hover，a；active等一一定位，這樣可以在最大程度上提高設計人員的工作效率，也給人們在日常生活、工作中使用網頁提供了最大程度的方便，同時也有效地促進了我國IT行業的發展。
4結語
綜上所述，DIV+CSS布局技術在網頁設計、開發的過程中起到了重要的作用。文章中對DIV+CSS布局技術在網頁設計、開發過程中的應用進行了簡單的介紹，隨著我國經濟的不斷發展，DIV+CSS布局技術成為一種較為流行的網頁設計、開發技術，簡化了操作流程，使設計人員的工作效率得到有效的提高，也給人們在日常生活、工作中使用網頁提供了最大程度的方便，同時也有效促進了我國IT行業的發展，為我國的經濟建設作出了自己的一份努力。
[參考文獻]
[1]車元媛.基于DIV+CSS的網頁布局技術應用[J].電腦知識與技術，2011（9）:2019-2020，2023.
[2]趙清華，林學華.基于DIV+CSS的網頁布局技術應用研究[J].現代計算機：專業版，2010（5）:140-142.
[3]溫盛萍.DIV+CSS布局技術在網頁設計中的應用[J].信息化建設，2015（10）:75.
而目前國內網頁設計的現狀是：為了追求頁面內容的豐富，無論網站屬于何種性質都盡可能將頁面內容做多、做長；首頁被分為若干個相應區域，每兩塊之間再加一條廣告，更有甚者會在頁面的最上端加一個所謂重中之重的綜合區域。一些企業類的網頁還會盡量將該公司所有的產品介紹都羅列到網頁上。這些網站將文字、圖片、動畫等各種信息不加考慮地塞到頁面上，不分主次，不進行規范化、條理化的歸類，更談不上藝術處理，其直接結果是導致信息傳播的效率低下，與設計者的初衷相去甚遠。
一、影響網頁版面和空間設計的生理和心理因素
1、視容量
視覺容量是指在一定時間內，視覺所能容納的信息量。人眼的視覺容量一般用比特作為計算單位，每一秒鐘正常的視覺容量是25比特，約四個信息單位(如文字)。視覺容量的接受程度受到視覺對象的清晰程度，照明對比程度以及人們的文化程度和實際經驗等因素的影響，各人略有不同。一旦視覺接受到的信息超出一定的視覺容量，人們就會產生相應的抵觸反應，引起不快。這就是為什么瀏覽一些超大容量的頁面時，人們容易產生視覺疲倦和心理抵觸的主要原因之一。
在網頁設計過程中應當重視視覺容量的限制。網頁上的內容容量需要多大?文字、圖片等信息應該如何歸類?頁面級別應如何區分等等，在進行網頁設計初始時需要進行認真規劃，才可能將網站信息有效快捷地傳遞給用戶。
2、視覺流程
人們在閱讀中，視覺有一種自然的流動習慣，視覺流程的形成是由人類的視覺特性所決定的。受生理結構限制，人眼只能產生一個焦點，不能同時把視線停留在兩處或更多的地方，所以人們只有依照一定的順序瀏覽觀察。
網頁瀏覽過程是一個動態的視覺流程。一般來說，我們的視覺習慣于從左向右，從上向下看，所以一個空白的網頁給我們帶來的自然視覺流程是從左上方到右下方的一個弧形曲線。在這個弧形曲線上，視覺優勢從上到下遞減。合理運用視覺流程原理，有助于我們合理地布置網頁中視覺元素的位置，劃分相關的頁面版式區域，提高信息傳播的效率。
二、通過合理的設計有效傳達信息
1、合理借鑒傳統信息載體的信息規劃方法
“版面編排”實際上就是中國古代畫論中的“經營位置”。而網頁的版面設計也遵循著同樣的規律。尤其是起著門戶作用的首頁，其版面的設計規劃更需要慎之又慎。作為版面內容的文字和圖片都需要第一時間展示給用戶，所以決不能簡單地羅列在頁面上。首頁的作用就像書籍的目錄：作為傳統的信息載體，書籍的目錄主要起著引導瀏覽的作用，而作為網頁的首頁也起著相同的作用。因此在設計過程中就要盡量避免將過多的信息內容堆放在首頁上，只需將主要導覽信息列入即可，這樣反而更有助于瀏覽者快速找到所需信息，提高信息傳達的效率。這也正是中國傳統繪畫中所講的“少即是多”。
在網頁設計中，網頁的空間結構反映了網站內各種信息之間的關系，是直接影響視覺信息傳達效果的重要因素。網頁之間的關系就像書籍中各章節之間的聯系一樣，形成一個無形的“空間”。這個“空間”包含物理和心理兩個方面：物理空間如首頁與各級頁面之間的聯系。各級頁面之間的設計風格的相互統一，內容的相互協調，都對這個“空間”的形成起著至關重要的作用。從心理方面來講：為網頁創造人性化的視覺和心理空間也是必需的，我們可以從整個WEB站點的角度出發，考察頁面之間的空間關系，充分利用網頁這種信息載體的特點，創造更高效的思維互動心理空間。
2、傳統形式美法則同樣適用于網頁版面設計
作為傳統平面媒體版面設計的一些基本原則，依然可以在網頁的版式和空間設計中發揮其重要的作用，比如：
(1)變化和統一。
在圖形設計中運用變化與統一的規律，是處理形象和組織的對立統一過程，那么在網頁設計中同樣要恰當地的利用這種規律。在我們把大量的信息塞到網頁上去的時候，應該考慮怎樣把它們用合理的、統一的方式來排列組織，使網頁整體感強并且富于變化，使頁面更豐富，更有生氣。
(2)條理與反復。
條理與反復的原則是圖形構成整體的秩序美的基礎，這種手法在很多優秀的網頁設計作品中運用的較多。這類網站信息含量大，需要運用一定的方式將信息條理化并加以歸納后重復利用，使頁面整潔，脈絡清晰，信息瀏覽方便快捷。當然，對于信息量較少的網站同樣需要條理與反復，以達到更富有變化和清晰的視覺效果。
(3)對比和調和。
對比是指在質或量方面相互差異甚大的兩個視覺要素同時配置在一起時，兩者之間相互作用給人以更加強烈的視覺沖擊力。那么在網頁設計中，如何利用它來達到好的效果呢?首先合理地利用對比的因素，例如文本和圖片尺寸、比例以及位置的排布等等，最終的目的就是如何取得較為強烈的視覺效果。此外還要恰如其分地找到調和的因素，即版面和空間的聯系點，使整體感覺突出，不至于僅僅因為對比而造成割裂的感覺。只有做到對比和調和的相輔相成，才能使網頁頁面鮮明、突出，更好地傳達出設計者的意圖。
(4)均齊與平衡。
這是設計中求得中心穩定的兩種組織形式。在網頁設計中，平衡是一個動態的平衡，因為頁面上兩邊的配置不會總是絕對統一的。更多的時候是版面中各個區域的相互平衡，這是一種動態的平衡。這種方法可以滿足人們視覺上的整體平衡感，也是人的心理因素的一種圖形化表現，當然不是片面地追求靜止的對稱，那種僵硬的、不生動的形式同樣會失去美感。
(5)節奏與韻律。
運動中的事物都具有節奏和韻律的形式規律。在具體的網頁設計的運用中，版面的編排就經常會遇到這個問題，優秀的版而設計富有音樂般的美感，同時絲毫不損其實用性，這需要不僅是從形狀上，而且要從整體的色澤、大小等綜合方面人手。
(6)適當留自。
關鍵詞：網頁設計；職業定位；人才培養
中圖分類號：G712 文獻標識碼：A 文章編號：1674-7712 （2013） 04-0130-03
一、網頁設計人才培養現狀
高職院校網頁設計課程體系與教學之間存在許多弊端，概括起來，主要有以下幾個方面：
（1）課程與教學內容理論性強，實踐教學方法、教學手段不適應行業需求，學生職業能力和創新能力的培養沒有真正落實。
（2）師資力量存在缺陷，普遍現象是：大部分老師是從校門進校門，沒有企業的從業經驗，也沒有實際項目開發經驗，基本上是“照本宣科”，所謂的項目驅動，項目的開發流程屬于模擬范疇，與實際客戶的需求，還相差甚遠。目前高職院校已意識到這個問題，通過各種方式尋求校企合作，實現校企互動的新模式，如何盡快解決師資在理論知識和實踐應用方面的不足是十分迫切的。
（3）課程設置不盡合理，課程內容上重“設計”輕“技術”。教學上按照以往的教學模式，僅僅在多媒體教室中講解操作步驟、做典型范例是遠遠不夠的。應著重培養學生的創新意識和獨立開發網站的能力。藝術性與技術性的高度統一是今后網頁設計發展的大趨勢，不斷探索新的教學模式和教學理念，根據行業需求來構建合理的課程體系。
二、網頁設計專業的職業崗位
根據對沈陽、大連地區IT行業的發展現狀與趨勢、人才需求狀況、企業調研等方面調查分析，可以將網頁設計崗位分為網頁設計、網頁制作、網站編輯、網站管理四大崗位群。
三、構建科學合理的網頁設計人才培養體系
（一）網頁設計人才培養目標的定位
本專業培養適應社會與區域經濟發展需要，德、智、體、美全面發展，熟悉網站的配色及制作流程，掌握網站設計與策劃、網站的安全與服務器配置以及網站的搜索引擎優化技術；掌握動態網站編程技術，具有獨立制作整站系統的能力，在企事業單位、網絡公司、廣告公司等IT行業從事網頁設計、網站美工、各類網站的開發與維護等工作的網頁設計師、高級技師和高級網站程序員。
（二）網頁設計專業的課程體系
根據網頁設計行業的職業崗位分析及人才需求，確定網頁設計的人才培養目標。按人才的職業能力的培養為主線構建了該專業的課程體系。確定了該專業的核心專業課程，課程體系結構如圖1所示。
按課程的培養目標，將網頁設計的專業課程分成以下四個模塊：網頁設計基礎模塊、客戶端開發模塊、數據庫操作模塊和Web應用程序開發模塊。
模塊一：網頁設計基礎模塊，對應的課程是《網頁設計與制作》，主講內容是“網頁三劍客”，DW也就是Dreamweaver（網頁制作），FW是Firework（矢量圖形制作和圖像處理），Flash（動畫制作）。這三種軟件能相互合作。比較實用的操作方式是：在Firework中做好主要頁面，然后導出，在Dreamweaver中加以修改，添加鏈接等，便做出一個非常好看的頁面。
模塊二：客戶端開發模塊，對應的課程是《JavaScript》或《VBScript》，《JavaScript》是一種由Netscape的LiveScript發展而來的原型化繼承的面向對象的動態類型的客戶端腳本語言，該語言區分大小寫，主要目的是解決服務器端語言（比如Perl）遺留的速度問題，為客戶端提供更流暢的瀏覽效果。
模塊三：數據庫操作模塊，對應的課程是《SQLServer》或《Access》或《mySQL》，作為網站的后臺數據庫管理系統，負責網站的實時更新，對數據進行存儲，在網站的建設中起著至關重要的作用。
模塊四：Web應用程序開發模塊，對應的課程是《》或《JSP》或《PHP》，主要講述動態Web頁面的實用技術。
模塊教學采用理實一體化教學模式，采用了“任務驅動”教學法，教學任務分為：課堂教學模擬、企業真實項目操作兩部分，這些任務的設計遵循了由簡單到復雜，由單人獨立操作到項目組成員共同完成，充分調動了學生的學習積極性和主動性，有效提高學生的知識應用能力和創新能力。
教學評價建議改變單一的總結性評價的方法，采用評價過程、階段評價和綜合評價相結合的評價方法。教學中要注重學生學習的過程，精心設計對學生學習過程的記錄及評價，如學習的形式、獲取信息的方式、討論的要點、設計的方案等進行記錄，并對作品進行交流、自評和互評等，從而讓學生學會學習。
（三）網頁設計專業課程的教學評價標準
制訂本專業各核心課程的教學評價標準，此標準以《動態網頁設計》課程為例。
1.考核方式
本學習領域的課程考核宜采用過程考核、公共考核和期末考試相結合，具體考核內容及權重見表3。期末考試分為理論考試和實踐考試。其中，理論考試主要考核8個學習情境中的主要知識點，試卷分值100分，其中填空題（占25%）、選擇題（25%）、判斷題（20%）、簡答題（30%），試卷從不同角度考查學生基礎知識的掌握能力；實踐考試內容為2至3道上機操作題，主要考核學生的上機設計和調試能力，及對知識的綜合運用能力。
（四）網頁設計專業的師資建設
建立一支高素質的師資隊伍是網頁設計專業建設的關鍵，這支隊伍不僅要具有網頁設計相關的理論知識和實踐經驗的特長，而且還熟悉整個網站的運作和前臺后臺維護管理等方面的理論知識。教師的培養可以通過以下的方法：
1.以行業為基地進行專業培訓，加快與行業的聯系。
2.組織教師到其它兄弟學校進行交流和調研，提高教師業務水平。
3.積極從國內外及相關行業引進、或者借用專家人才，提高教師隊伍水平。
4.專業教師自身應該時時刻刻跟蹤、掌握電網頁設計發展的最新動態，掌握網頁設計最前沿的知識，不斷地更新知識。總之，網頁設計專業人才培養應當以企業需要什么樣的人才為出發點，總結過去的經驗和教訓，從實際出發，嚴格按照客觀規律來建立網頁設計人才培養的模式和體系，這樣才能培養出符合社會需要的合格人才。
參考文獻：
[1]高云.高職高專《網頁設計》課程改革探索[J].吉林省教育學院學報，2009，11：2.
[2]趙京丹，閆寧.任務驅動教學法在Dreamweaver網頁制作教學設計中的應用[J].職業教育研究，2007，7.
>> 用Photoshop和Dreamweaver輕松布局網頁表格 Dreamweaver網頁設計中表格與層布局的比較 CSS+DIV布局與表格布局網頁的對比 CSS+DIV與表格實現網頁布局的比較 網頁設計中的表格繪制 網頁版面布局設計教學之我見 淺談網頁設計中頁面布局的教學 網頁設計教學中表格與層的應用研究 網頁表格布局方式和DIV+CSS布局方式的比較研究 網頁設計的布局和用色技巧 基于CSS頁面布局的網頁設計 網頁版面布局設計的探討 淺析網頁設計中的頁面布局 網頁設計中布局模式的比較 淺談網頁設計中的布局工具 淺談網頁設計用圖 基于項目化教學的“網頁設計與布局”課程教學研究 表格與DIV+CSS的布局設計分析 “網頁設計”課程中DIV+CSS布局技術的教學 DIV+CSS布局在網頁設計教學中的應用研究 常見問題解答 當前所在位置：打開）請你將這個頁面中的文字和圖片排列整齊（文字、圖片無法排列整齊，再打開bg2.htm）。現在請你將圖片和文字分別放到表格中，看看效果。
教師：通過這個實驗，你得出了什么結論？
學生：用表格可以很方便地將文字與圖片排列整齊。
教師：說得很好，表格的作用就是將網頁中的文字、圖片等素材對象進行定位。網頁都是用表格來進行布局的，請看兩個范例（展示網頁的表格）。
【設計意圖】事先預設此環節，安排學生李彥在適當的時候提出問題，引出課堂知識沖突，為下一環節做好鋪
墊；同時吸引學生的注意力，及時調整學生的學習狀態。通過設計一個對比實驗，用實驗驗證學生的猜想，讓學生總結實驗結論――表格在網頁布局的作用，培養學生的鉆研、思考、解決問題的能力。
插入表格
教師：插入表格之前，為了編輯的方便，我們通常要先設置網頁大小。在通常情況下，我們一般將網頁大小設置成默認狀態的“當前網頁大小”。
教師：接著請各位設計師在此頁面中按照你的布局草圖的行列數插入表格，最后將相應的文字信息填寫到表格中，效果請參照大屏幕。
【設計意圖】通過演示法講解、回顧打開網站站點的技巧與方法、網頁大小設置方法，快速進入任務二的學習中。
調整表格
教師：各位設計師，表格插入好的請舉手。（環顧學生）若有不會的，請一個設計師演示。請各位結合Word中表格的相關操作，還可以結合教材中的步驟，完成單元格的合并與拆分的操作，使網頁布局更加合理。
【設計意圖】關于表格的插入、拆分、合并單元格等操作已經在Word、PowerPoint設計多媒體作品時學過，學生可以憑已有的知識完成，也可以參照教材的步驟完成，培養學生的自學能力與意識。
作品的保存與評價 要求所有設計師保存提交作品，展示1～2個設計師作品，并做好評價。
【設計意圖】及時評價與反饋學生的作品，能夠鼓勵和督促學生認真完成作品的設計。
課堂拓展練習 如圖3所示課堂提高練習，在第二行調整導航欄這一行單元格列寬，使他們平均分布時不影響第三列圖片這一行，該如何實現？請參照教材的閱讀材料一提供的方法試一試。
【設計意圖】結合教材閱讀材料，通過設計課堂拓展練習，能使學習有余力的學生在課堂上有充分發揮，培養其自學能力。
4 課堂總結
師生一起回顧所學知識，課堂小結內容如圖4所示。
關鍵詞：網頁交互設計；視覺傳達
因時代的進步互聯網絡的快速發展是必然的，作為一種全新的視覺傳播媒介，具有迅速、價廉、及時、傳播面廣的特點。網頁作為互聯網的代表傳播方式之一，它的設計既要有傳統平面該有的設計特點，還要有現代技術的組成，將技術與藝術巧妙的相融為一體的交互性活動。本文嘗試著從視覺傳達設計中文字、色彩和排版對人生理和心理的作用應如何運用到網頁設計的交互式上，幫助設計師更好地利用視覺表現讓客戶達到良好體驗。
在筆者看來，一個好的設計師或互聯網技術人員未必能夠做好網頁設計，因為它不只是光需要設計師的審美或技術人員的開發。一個好的互聯網產品需要產品經理與設計師和技術人員的三方溝通，一個優秀的設計師其實可以勝任產品經理加設計師的工作。所以我們在做網頁設計時，應該以一個產品經理加設計師的思維共同設計。心里的思路應該很清晰，例如我們的客戶群體是哪些、他們有哪些習慣、我的顏色該如何搭配、字體用什么才能吸引讓客戶群體等等，這些都是在進行網頁設計前所要思考的，至于如何正確地匹配到這些選項，還需要我們仔細地探究。
一個好的網頁設計并不是簡單地把文字圖片放上去就夠了，我們需要揣測用戶的心理因素和生理本能，比如說網頁的大小比例、字體大小、圖片大小和整體的排版風格。下面就跟大家淺談下網頁設計中的信息視覺傳達：
1 文字
對于在網頁上的文字設計來說字體的基本要求是可閱讀性，其包括文字的大小、字與字的間距、段與段的間距和行列長短間距等方面的處理。
很少一些網頁對字體進行再次設計，原因是不同的計算機操作系統和字體文件安裝都是不同的，所以必須選取一些常規的字體，否則一部分用戶上的字體就會變成默認字體，這將與設計者本身的設計意圖大大相否。
其次，用戶使用的屏幕顯示也對字體有一定的影響，設計是大多數會采用宋體或黑體兩種字體，從用戶心理感受來說，宋體字較為活躍、生動，閱讀起來不容易疲勞。而黑體字方正端莊，線條粗獷醒目，但在縮小到一定程度時容易模糊，造成識別困難。
2 色彩
色彩設計對于一個優秀的設計來說非常重要，在網頁設計中也是設計的關鍵，在互聯網快速的閱讀中如何第一秒吸引到用戶成為視覺傳播的關鍵。人對色彩是相當敏感的，當他們首次接觸一個網頁時，最先吸引其注意力的就是網頁的顏色，其次是圖像，最后是文字。色彩給其他人的印象特別強烈，所以設計師最容易通過色彩去表達他的設計意念，例如天貓和京東的紅白色主頁的設計，強烈的顏色沖擊了人們的心理視覺給人強烈的購買欲望。
網頁上的顏色主要表現在主導色、輔助顏色和背景顏色這幾個方面。占顏色面積最大的是網頁主色調。主色調像是一幅畫中的主色，在創造特定的氣氛與意境上發揮主導作用。第二大的是輔助顏色，起的作用是強調或調和。網頁的背景色是增加畫面空間感的重要措施。例如，較暗的背景色與鮮明的主導色形成鮮明的前后空間關系。
設計師對不同功能的色彩進行理解和分析，搭配好主色、輔色和背景色的運用比例才能給用戶一個良好的視覺體驗。
3 排版
排版設計在網頁設計中也可以叫做頁面布局，把零散的網頁名稱、導航欄、搜索欄、圖形、文字和符號進行點線面排版。四周的“空間”并不是沒有的，可以留白或留灰，突出頁面主題物讓網頁在使用中更加簡潔和便利。
設計師根據“以虛托實、以無襯有”和信息傳達的要求進行合理排版，此時需要注重用戶心理的潛意識和生理的行為習慣進行排版設計。比如用戶在瀏覽頁面時，第一眼優先注意到的是四周留白的文字，@就是視覺的邊際效應在虛空間的一個體現。從而使設計師設計的平面網頁能夠充分與用戶有所“交互”，使用戶體驗獲得更佳的視覺印象。
4 視覺規律
視覺規律是根據人的視覺心理因素和生理習慣而決定的。人有兩只眼睛但是因為人的眼球原理只允許產生一個視覺焦點，不能同時停留在兩處以上（包含兩處）的地方。因此人們自由閱讀時，都會有一個生理習慣，從上往下和從左往右閱讀。
心理學研究顯示出，在一個平面內人在閱覽上半部分時會讓人感到輕松愉悅，下半部分時則會感到郁悶壓抑。同樣左半部分讓人感到輕松愉悅，右半部分則會感到郁悶壓抑。所以左上部分稱為“最佳閱覽區”。視覺流程導向又分為導向類視覺流程、重心視覺流程、反復視覺流程、散點視覺流程，我們在網頁設計中就可以依據這些用戶的生理和心理的“規律”來進行交互設計，從而使用戶達到良好的使用體驗。
優秀的網頁設計師提供愉悅的交互式體驗，不僅對文字、色彩和排版進行探究設計。網頁上操作面板上的按鈕和開關和導航的分欄等，設計師利用交互性及時讓用戶知道如何操作這是很重要的。那么設計師必須合理地運用示能、意符、約束、映射和反饋這幾個心理學概念進行科學的設計。
參考文獻：
關鍵詞 網頁設計 發展趨勢 教學設計
中圖分類號：G642 文獻標識碼：A
Improve Web Design Curriculum Teaching of Art
Professional with the Development Trend
XIE Tao
(Graduate Department, Hubei Academy of Fine Arts, Wuhan, Hubei 430060)
AbstractAs a digital media arts and visual communication in one aesthetic, as an integrated interdisciplinary curriculum, "Web Design" is developed as the core curriculum by many professional art and design colleges and universities. With the rapid technological development, professional web design courses for the Art features need continuously to improve teaching methods, enrich the teaching content in order to enable students to master the most practical web design techniques, to train highly qualified personnel for the different needs.
Key wordsweb design; development trend; teaching design
隨著計算機技術的發展和Internet互聯網普及化程度越來越高，網頁設計與制作已經成為當代視覺設計師必備的專業技能之一。就網頁設計課程教學而言，不僅要求學生掌握相關的計算機技術，更要具有專業的美工基礎和藝術素養。培養能適應時展與市場需求的網頁設計師，藝術專業網頁設計課程就必須緊隨技術更新步伐進行教學改革，以便適應時展需求。
1 設計軟件與開發技術的發展與更新
網頁設計軟件眾多，業界廣泛使用Adobe公司的Dreamweaver，高校網頁設計課程也基本以此作為軟件教學內容。經過數年發展，最新版的Dreamweaver CS 5推出了許多新功能，因此課程的軟件操作教學內容也需圍繞新版本展開講授。
早期的網頁設計師在設計流程中主要追求良好的美學效果，不太關注語義化和可用性方面的問題。隨著技術的發展進步，遵循網頁標準（Web標準）進行網頁設計和網站開發，已經成為當代網頁設計師必備的技能之一。用Div+CSS布局來替代傳統的table布局，使內容與表現相分離，頁面信息結構更清晰，有利于內容的重用。網頁標準還使網站開發與維護更簡易，與未來瀏覽器也完美兼容，使訪問者獲得更好的瀏覽體驗。
Flash曾經作為網頁設計中的視覺元素之一，現在已經發展成能夠開發整套網站的強大工具，提供了大量的遠遠超過 Html 所能夠實現的視覺表現效果，Flash 使創建復雜的、互動性強并且擁有動畫元素的網站成為可能。Flash流媒體技術的廣泛使用也是網頁設計的一個新趨勢，頁面元素不再是靜態的文字和圖片，也不再局限于二維的Flas效果，結合音頻和視頻技術的Flv流媒體技術由于不需要安裝插件，有著優秀的兼容性及交互性，在網頁設計中的應用達到一個新的高度。
3D技術是當前視覺藝術的一個熱點，基于Internet具有交互性的虛擬現實建模語言Web 3D技術，使二維的網頁向三維發展提供了很好的支持，代表了三維網頁的發展方向。同時，更多的瀏覽器開始完美支持和表現新一代Web 語言、互聯網標準Html5，視頻播放、動畫、3D交互圖像、Web視頻聊天及會議、音頻的采樣和混合都將是Html5的重要優點和應用趨勢，并將引領下一代 Web 實現類似桌面的應用體驗。
隨著技術的進步，網頁設計越來越重于表現多媒體的特性，這就需要網頁設計師不僅要掌握基本的專業技能，還需拓展其他相關領域的專業知識，才能提高職場競爭實力。
2 審美的提高促進網頁設計新思維
一個極具藝術感染力的網頁設計作品會得到眾多來訪者的傾心，提高網站的親和力與回訪率。特別是在信息高速發展的今天，人們審美意識的提高，客觀上將網頁設計推向了更高層次的表現境界，網頁設計風格個性化、技術多元化將成為必然的發展趨勢。
網頁的設計與制作，除了要表現動態效果及強大的交互功能，還應著力提高設計美感和藝術氛圍，界面設計同樣要符合視覺藝術的形式美法則。
（1）布局合理、排版簡潔。結合優秀的版式設計，對頁面元素及內容進行歸檔分類與優化，做到信息的主次分明。
（2）風格統一、整體性好。網站的整體性是通過好的界面設計風格體現出來的，色彩搭配要協調，圖像圖形的制作要精致，突顯網站主題與格調。
（3）創新性的視覺特色。善于做創新性的視覺設計，讓頁面設計在同類網站中脫穎而出，帶給用戶愉悅的視覺感受和瀏覽體驗。
（4）易用性。網頁最終會于用戶終端顯示，簡潔易用也是非常重要的設計原則，讓美的頁面建立在易用的基礎上，在整個設計過程中都要始終貫穿這種思想。
網頁設計師根據網站定位的需求，重視用戶體驗，并將獨特的設計思維融合到網頁設計中去才能做出最優異的網頁設計。藝術專業的學生應充分發揮自己的設計優勢，將技術與藝術緊密結合，使設計制作出來的網頁達到實用性和審美性的高度統一。
3 根據市場的需求充實網頁設計課程教學內容
藝術設計專業培養的網頁設計師主要涉及網頁前端架構，如網站的整體風格規劃及版式設計、界面設計等，這些都屬于網站開發流程中視覺設計的范疇。作為整個開發團隊的一員，網頁設計師不僅要勝任前端設計，還要與站點開發人員合作密切，熟悉網站后臺的管理；不僅要精通靜態Html（Xhtml）語言與CSS，還要了解各種動態網站架構語言如ASP、PHP、JSP、CGI等；除了能勝任網站的規劃與設計，還要掌握網站建設相關方面的知識如服務器與虛擬主機的管理與維護、域名的注冊與解析、網站備案、SEO搜索引擎優化等。除此以外，網頁設計師還能借助各類CMS(網站內容管理系統)構建各種功能性的網站、論壇及博客系統。
競爭所需使越來越多的公司和企業開始開拓網絡市場，樹立其在互聯網上的良好形象。市場的多元化發展趨勢也對網頁設計師的素質提出了更高的要求，不僅要精通專業技能，還要眼光敏銳及時把握網頁設計相關領域的最新動向。這就要求網頁設計課程教學在講授理論知識與操作技能的同時，還需重視實踐教學的重要性，從多方面拓寬學生的知識層面。
4 根據教學目標及內容調整教學方法
在傳統網頁設計教學中，一般沿用以教材為中心，教師課堂理論陳述及操作演示的教學模式，缺乏實踐性，無法達到課程教學目標。因此，要充分利用多媒體教學環境，發揮教師在教學中的主導作用和學生在學習過程中的主體作用，采用適當的教學方法激發學生學習興趣。
4.1 改進實踐教學，鍛煉學生獨立創作的能力
在實踐教學中，根據教學目的和教學內容選用典型案例，通過對網頁設計案例的分析講授其中所應用到的理論知識，在學生理解基本理論知識的基礎上再演示案例，使學生進一步熟悉相關理論知識的應用及實際操作，有助于培養學生分析問題、解決問題的能力。同時，教師可以從威客網上搜集一些商業設計項目作為實訓內容，讓教學目標更加貼近市場的真實需求，提高學生學習的主動性和積極性。另外，還可以定期舉辦網頁設計大賽，組織學生和專業教師進行評選，并將優秀參賽作品放在網站上作為教學成果展示，這些活動不僅能調動學生的學習興趣，也極大地豐富了學生的學習生活。
4.2 借助網絡技術實現教學互動，完善教學手段
在實際教學中，不是所有學生都能及時掌握教師課堂上所講的內容，還需在課后對相關知識點進行復習鞏固，網頁設計課程本身的特點也決定了可以充分發揮網絡資源的巨大優勢。教師可以開設個人教學網站，將課件及相應的學習資料放到網站上供學生訪問下載，同步與更新各種學習相關信息，學生也能通過在線留言板和學習論壇與同學或老師相互討論，解決問題，教師則可以根據反饋信息及時調整教學內容。
4.3 理論與操作相結合，綜合全面評價學生
考核是檢測教與學的重要手段，也是教學中一個重要環節。一個好的考核方式不僅能全面真實地反映學生的學習水平，還能反映出教學中存在的問題。除了必要的理論知識考核，可以布置一個項目設計任務作為課程實踐部分的考核內容，比如讓學生設計制作自己的個人網站。先對個人網站的設計做總體規劃，列出設計方案，由教師審閱并給予修改建議后再完善方案并實施，在設計過程中教師要關注進度并及時指出設計中的不足之處讓學生解決。這種考核方式既強調了實踐性教學，又培養了學生自己獨立完成網站設計和制作的能力。
互聯網作為一種新興的數字媒體發展迅速，網頁設計也成為視覺設計師最為關注的新領域之一。藝術專業的網頁設計課程教學不僅要體現時代性，還要富于創造性，具備前瞻性。教師必須緊密關注網頁發展動向，隨市場和時代的發展趨勢改進教學內容和教學方法，才能培養出適應市場需求的高素質設計人才。
參考文獻
[1]張偉娜.《網頁設計與制作》課程教學的探討與實踐[J].中國教育信息化?高教職教,2008(2).
[2]張麗香.高校《網頁設計》課程教學探討[J].大眾科技,2008(5):104-150.
關鍵詞：“職業崗位定位”，“工作過程”，職業教育，網頁設計
1引言
近年來，我國高等職業教育取得了令人注目的成績。但是，在高等職業教育領域仍然有一些問題沒有得到很好的解決，其中之一就是高等職業教育人才培養效果與市場需求之間存在偏差。也就是我們高職學校培養的人才定位與企業需求人才崗位定位之間存在差異。高等職業技術學校的計算機專業主要是培養計算機技術應用型人才，重點是培養動手能力和解決問題的能力，學生參加工作后，能很快根據自己的定位進入角色。本文正是基于這一理念，提出了以“工作過程”為導向，面向“職業崗位定位”的教學模式，將企業人才崗位定位引入到課程職業定位中，將企業項目開發過程貫穿于整個教學過程中，并將企業人員角色進入教學環節中，同時采用“項目導入、任務驅動”的教學法。并將其實施于網頁設計與制作課程的教學過程中，得到了很好的效果。
2.基于“工作過程”面向“職業崗位定位”的教學模式
基于“工作過程”面向“職業崗位定位”的教學模式是一種培養技術應用能力和綜合應用所學理論知識解決實際問題的新模式。能夠使得學生在一個仿真的職業環境中，為學生提供不同的工作崗位，使得不同性格，不同學習進度，不同興趣愛好的學生都能找到自己的位置。讓學生在畢業之前就能明確自己的職業崗位定位，并且學生可以充分了解企業中的業務流程，真正認識自己，為自己在今后的工作中進行進一步定位，在社會上找到真正適合自己的工作，在工作中能很快適應工作環境和工作方式。
2.1網頁設計課程的崗位職業定位
通過“中山人才網”、“前程無憂”、“中華英才”、“智聯招聘”等專業招聘網站對北京、上海、廣州、深圳、中山、珠海等大中型城市的人才招聘信息進行分析，并對1萬多份相關職業崗位的招聘信息進行統計，確定本課程職業崗位。與高職“網頁設計”課程相關的職業崗位主要有：網頁設計與制作、網頁美工、網頁制作、網站管理、界面設計、網頁編輯、網站運營、搜索引擎優化，如下圖1所示。
圖1 相關職業崗位分析圖
將技能要求相似的崗位進行合并，主要崗位有：網頁設計與制作、網頁美工、網站管理、網頁編輯、網站運營。因此，通過對職業崗位的分析，對于《網頁設計》這門課程來說，主要面向的崗位是：網頁設計與制作員、網站管理員、網站編輯員。
3基于“工作過程”面向“職業崗位定位” 教學環節
基于“工作過程”面向“職業崗位定位”的教學環節是將企業的經營理念、企業項目開發過程和企業內部的人員崗位定位引入到傳統實驗教學環節中。這對傳統的實驗教學環節起到了很好的補充作用。“項目導入、任務驅動”的教學法是培養學生的基礎知識運用，而基于“工作過程”面向“職業崗位定位”的教學模式是培養學生的綜合知識的運用，并且模擬企業提供了許多不同的工作崗位，為不同個性的學生提供了更多的自我發展和培養機會，在這個真實的環境中，學生能了解企業中都需要哪些工作崗位，自己適合那種工作，為自己的將來定下目標，而且通過對“崗位定位”教學模式的實施，學生在畢業時基本上已經對網站開發流程有了基本的認識，這樣能更好的適應企業的取藥，學生能更好的融入工作角色中。
4網頁設計課程教學環節實施
4.1 職業崗位定位
網頁設計課程是以“項目導入、任務驅動”的教學方法來培養學生的基礎知識運用。教師所設計的項目，應將培養學生的職業能力作為出發點，聯系市場發展，從企業需要出發，以實際項目開發流程來確立課程的知識體系，使知識體系結構中的各個知識模塊包含學生應掌握的能力素質。選取的項目要有一定的應用價值，可以直接從企業中獲取真實項目，也可由教師根據教學需要，精心設計有市場適應性的項目。因此對于職業崗位定位模擬公司的內部結果，下面圖2是模擬公司的人事結構圖：
圖2公司的人事結構圖
對于網頁制作部這塊，主要有部門經理、項目經理、網頁制作人員。。網頁制作部的經理負責管理網頁制作部門的各項工作，宏觀控制各網頁項目的完成情況。項目經理負責根據項目的客戶需求，書寫概要設計和詳細設計；負責開發、測試、及驗收的全過程；負責項目成員的管理以及項目組之間的協調和技術交流。網頁制作人員負責按照項目經理的工作分配，根據詳細設計編寫代碼和開發數據庫，并對程序進行初步測試。。
教學正式開始之前,先對學生分組,一般4 - 6人一組,盡量使每一組學生的能力都比較均衡,并選定一個項目經理（在本教學中也叫項目組長）負責每個小組的工作。
4.2 基于工作過程教學環節的實施
4.2.1項目的確立
項目教學的關鍵在于項目的選取。一個項目的選取好壞直接影響到項目教學法實施后是否能取得較好的結果。好的項目不但鍛煉了學生的學習和動手能力,還可以激發學生的學習興趣,讓學生在完成任務之后能獲得成就感。因此,要選擇切實可行并且是學生感興趣的項目。
本教學環節一般是以小組為單位,走進社會進行網站需求調查,在小組通過調查、討論之后,確定具體項目。這時教師根據學生的實際水平和網站的難易、典型性給出指導性意見,選擇合適的網站主題并指導學生寫出詳細的內容策劃書。在隨后的課堂活動中,各個小組總結并由組長介紹本小組的網站項目,在全班開展交流討論,由其他同學提出意見。最后確定網站的具體項目內容。讓學生以小組為單位開發設計網站的主題、類型、風格,具體的計劃、設計等工作都由學生自主完成。。
4.2.2項目的開發
要完成一個項目，即完成一個網站的建設，必須制定項目計劃，有特定的工作流程，只要按照這個步驟，才能設計出滿意的網站。項目計劃如圖3：
圖3 項目計劃
圖3不僅是一個網站的開發基本流程，還是一個課程體系結構圖。
對于網站的開發基本流程是：確定網站的主題、收集資料、規劃網站、選擇工具、制作網頁、上傳測試、推廣宣傳。
對于課程體系結構：以項目開發流程為出發點，將該課程分成網站策劃、網站規劃、網頁風格設計、網頁制作、網站測試和網站上傳與更新維護等六個知識模塊，每一個小的模塊項目又具體細化為一個個小的任務。每個任務根據教學的實際情況可以再細化。
4.2.3 項目考核評價
項目的考核、評價在教學過程中也是非常重要的一個部分，對提高學生的開發能力有很大的幫助。本方法采取的評價方式有：
①小組團隊自評
學生完成一個任務后，每個小組都要展示他們的成果，并由項目經理對他們任務的完成情況進行總結和評價。
②學生互評
其他同學也可以對該小組的開發提出問題或發表看法意見，營造各抒己見、相互學習的氛圍。
③教師總評
最后，教師對各小組的成果做綜合評價。教師的評價既要注意對技能和成果進行評價，也要對學生的態度和方法進行評價。既要肯定學生的成績和進步，也要根據各小組的特點提出存在的問題，幫助他們進一步提高。此外，教師還要推薦優秀的學生參加能力鑒定考試，取得相應的證書。
本文應用于網頁設計課程項目的考核評價模式結構圖，如圖4所示。
圖4 項目與任務的實施與評價的模式結構圖
5 總結
本文提出了基于“工作過程”面向“職業崗位定位”的教學模式，并將它應用于網頁設計課程中，它使學生置于一種模擬環境中，呈現給學生具有挑戰性、真實性、復雜性的問題。本文的特色在于在人才培養過程中將企業人才崗位定位引入到課程職業定位中，將企業項目開發過程貫穿于整個教學過程中，在教學環節中，模擬公司內部的結構和運作模式，是學生熟悉公司項目開發的流程和人員定位，增強了項目開發的實踐經驗，同時與就業零距離。
參考文獻：
[1] 梁瑞玲.任務驅動法在《網頁制作》課程中的應用實踐[J].教育信息技術.2007年09期.
[2] 史瑞芳.”網頁設計與制作課程中項目教學法的引用[J].山西經濟管理干部學院學報.2008年04期.
[3] 余平.項目驅動在網頁設計實踐教學中的應用[J].實驗室科學.2007年05期.
關鍵詞：網頁設計；視覺美感；審美價值 一、網頁設計美的標準
對于美，每個人都有不同的標準，但是我們衡量一個事物的美丑不能只看外表。比如，一個真正美的人不單單是指外貌美，更重要的是指心靈美。網頁設計亦是同樣的道理，那么怎樣評價一個網頁的美丑呢？
從審美性上講，一個優美的網頁首先要有好看的界面設計，網頁屬于瞬間藝術，當瀏覽網頁的時候瀏覽者首先看到的是網頁的界面設計，因此網頁的 “外貌”首先要吸引人的注意，使人們看著舒服，看著美。同時現階段人們隨著人們對網頁設計重視程度的加大，設計師逐漸將字體設計、版式設計以及配色藝術等多種視覺語言應用于網頁設計，使網頁的界面設計更加美觀。另外從功能性上講，一個美的網頁設計首先在功能上利于人們的閱讀，具有科學的、合理的、符合人體工程學的視覺流程，能夠使用戶能夠輕而易舉的獲取信息。新的科學技術、新的計算機編程語言相繼被應用于網頁設計中，使網頁設計的交互性不斷加強，人們在獲取信息的同時也能夠感受到人機互動帶來的觸覺、視覺雙重感受，增加了網頁設計的趣味性。
通過以上可以看出，美的網頁設計不僅在形式外觀上要能夠取悅人心，在功能上還能準確有效的傳播信息。因此只有兼備外在形式美與內在功能性的網頁才能稱之為美的網頁設計。
二、網頁設計面臨的問題
通過實踐與教學在具體網頁設計過程中經常遇到的問題大體可以分成兩大類：
（一）視覺引導性弱。造成這樣問題的主要原因是頁面內容的失控，沒有分清主次，想要傳遞的內容太多太龐雜，沒有處理好信息之間的關系從而造成了大量文字、圖片等構成元素的堆積，而忽略了整體條理性。同時沒有設計章法與秩序對它們進行約束，導致頁面的布局的混亂，從而影響瀏覽者的閱讀。
（二）設計細節。第一種是只顧及內心感受，只憑自己的感覺設計，缺少理性思考，沒有細節處理。無論是圖片質量、字號字體還是顏色搭配，處處都能體現出網頁設計的細節問題。第二種，過于在乎細節，將細節當成主要設計元素盡享處理，喧賓奪主，忽視了基本功能，這些過多的細節裝飾打破了頁面整體布局的統一性。
在網頁設計中，大部分設計人員只重視表達網頁的表面視覺效果，而忽略設計支撐網頁的骨骼框架，才使得現如今很多網頁在設計上出現以上問題。
三、柵格設計
15世紀法國的數學家尼古拉斯加宗成功將幾何網格與字體設計相結合，這就是柵格設計的雛形。之后人們將這中設計方法運用到平面設計中，直到現在柵格設計在平面設計中仍是一種非常普遍的設計方法，而網頁的柵格是從平面柵格系統中發展而來。
在日常生活中我們看的書籍、雜志、報紙，很容易發現它們的內容被限制在一定的方格內，整個版面具有很強的秩序感，之所以出現這樣的視覺效果完全是因為版面設計時運用了柵格設計。柵格設計又稱柵格設計系統，它是利用規則單位矩形來規范、約束版面上的內容從而起到規范網頁內容的作用，它可以充分的體現出網頁設計的結構美。
柵格設計之所以能夠被廣泛的應用是因為它能夠使設計作品呈現出清晰的脈絡，簡約的結構，同時也能起到突出中心與重點，起到引導視覺的作用。由此可以看出柵格設計能夠在網頁中起到支持起整個網頁頁面，可以說是網頁頁面的骨骼，因此我們將柵格設計也作為網頁布局的理論支持。
那么怎樣利用柵格設計對網頁進行布局呢？柵格設計具有一定的設計方法，大體可以概括為兩種：一種是單元格的加減法，另一種是柵格填補法。
（一）單元格加減法。
顧名思義，就是將網頁事先做一個大體布局，而后根據具體內容的需要，對單元格進行相應的合并或拆分，從而使網頁達到視覺上的和諧。單元格加減法使柵格設計優勢得到充分體現，它具有極強的布局靈活性，但是不同的設計元素具有不同的組織方法也不相同。
1、單純文字加減法，文字的加減的對象是文字與頁面空間，它是在柵格的作用下，運用文字對頁面進行劃分，從而使人們可以輕松的感受到文字的秩序美。柵格的數量不宜過多，過多會使頁面元素分散，失去整體感。
對文字的編排，應該考慮視覺流程的設定。文字的字號行距設置要適中，，同時文字的排列長度不易太寬，以方便閱讀為準。
2、單純圖片加減法，他是根據柵格進行操作，可以是單張的加減，可以是多張的加減。但要切記圖片不要太多太雜，風格色調要統一，還要把握全局，突出核心信息。
3、文字與圖片加減法，當文字與圖片共同存在于頁面中時，要根據需要有所側重，視覺流動性要強，思路要清晰。文字與圖片的搭配要統一協調。另外在圖片的選材上，圖片質量好的圖片在網頁設計能夠提升網頁的審美性。
（二）柵格填補法
柵格填補法就是將我們設定好的柵格固定不變，將所需要的內容機械的填充到對單元格空白區域。這種方法的優點就是能夠直截了當的傳遞信息，主題更直接更明了；缺點是無論是文字還是圖片都不宜過于復雜，以簡約為主。
柵格設計在網頁中應用的很靈活，在具體網頁設計時還要根據具體情況制定柵格設計的方案，只有這樣才能使柵格設計的靈活性得到完美的發揮。
柵格設計是網頁設計的靈魂，是網頁設計結構美的核心所在，柵格的好壞直接決定了網頁的優劣，那么如何才能設計出一些審美性高與設計感強的柵格呢？
在藝術史上，埃舍爾的畫可以用數字計算，巴赫的曲子可以用數學公式推導，還有柯布西耶的設計理念，也融合了幾何學的創新理念，可以說數字創造了藝術的奇跡。諾瓦利斯曾說過 “數字是最高的藝術形式” 當設計運用到數字或是數學的時候，設計的嚴謹性與邏輯性就隨之出現。柵格設計中比較典型的分割方法是黃金分割與根號矩形，兩者在柵格布局中被普遍認為是比較美的比例。
1、自然界中的事物符合1：1.618的為都屬于黃金分割比。黃金分割比是被公認為是最和諧，最完美的比例。黃金分割比合理的運用到柵格設計中能夠構建出比較美的網頁結構框架。
2、根號矩形是比較特殊的矩形，拿矩形來講它可以被分成無限個等比的小矩形，可以產生大量的分割組合，因此根號矩形被應用的比較多。在網頁設計時可以格局矩形的分割比進行相應的柵格設計。
以上圖例是對黃金分割與根號矩形兩種柵格樣式的具體表現形式，實際上柵格設計的變化相當豐富，在具體網頁設計中我們可以根據以上的兩種樣式為變化基礎，對柵格設計進行相應變化設計。在網頁設計中合理的運用柵格設計能夠襯托出網頁設計的結構美。
“設計體現在細節上”在網頁設計中，細節的設計相當重要， 通常1像素的線，1磅的行距，1點的字號這些都是設計時需要注意的細節，都能襯托出網頁設計的美。當細節被注意后，網頁設計失誤就會越小，頁面就會更精致。
關鍵詞：網頁設計；互聯網絡；信息傳播；平面設計教學
每一個時代都有代表性的發明作為這個時代的象征，像第一次工業革命，蒸汽機的發明，使得那時成為蒸汽時代；愛迪生發明了電燈從那時起進入了電的時代，要說21世紀，我想應該是網絡的時代，自從互聯網的出現使“地球村”的概念更加貼切，可以說網絡拉近了地球上每一個角落的人。互聯網代表著一種嶄新的信息交流方式，它使信息的傳播突破了傳統的政治、經濟、地域及文化的阻隔，使信息傳達的范圍、速度與效率都產生了質的飛躍。互聯網是由成千上萬的網站組成，而每個網站都是由諸多網頁構成，故網頁是構成互聯網的基本元素。而網頁設計是伴隨著計算機互聯網絡的產生而形成的平面設計新課題，是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎，依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動，必然要成為設計藝術的重要組成部分，并隨著網絡技術的發展而發展。表面上看，它不過是關于網頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術與技術的高度統一。設計師如何將網絡與設計、技術與藝術完美地結合，是非常值得我們深思和研討的。
一、一騎紅塵妃子笑，誰人知是荔枝來之信息傳播
信息元素可以說是網絡最基本的元素，互聯網自始至終都起著一個信息傳播的做用，也是由此而產生的。自從人類誕生以來，人類社會至少已經經歷了四次意義重大的信息傳播革命，每一次信息傳播革命都把人類文明推向一個新的發展階段。第一次信息傳播革命是語言傳播的誕生。第二次信息傳播革命是文字傳播的誕生。第三次信息傳播革命是印刷傳播的誕生。第四次信息傳播革命是模擬式電子傳播的誕生。
最新的一次信息傳播革命，即正在我們身邊發生的第五次信息傳播革命，是數字式電子——網絡傳播的誕生。網絡媒體的出現，使得傳播者與受眾之間的傳統的相互關系正面臨巨大的變化。人類進入了真正的信息時代。
網頁設計以信息傳達為目的，而傳達的最終表現界面則永遠也脫離不了媒體。媒體與網頁設計之間的關系是互動的，媒體既體現了設計，又給設計帶來了局限性；設計既受制于媒體，又是新媒體產生的動力之一。
我們大家所共知的傳媒方式有報紙、廣播、雜志、電視等等，這些在現代媒體中仍然占主要位置。如果與互聯系網絡比較的話，它們這些傳媒方式就顯的相當單一。因此它們的先天缺陷也越來越明顯，所以像這種單一的傳達方式也使設計師受到了一定程度上的限制。人們接受信息的途徑是多方面的。像視覺、聽覺、觸覺、嗅覺、味覺等一系列感官的綜合使我們更加全面的去了解其他的事物。為了能使信息傳達的更全面一些，一直在追求完美的設計師也在尋找著一個嶄新的媒體來表達完善的設計。因此當今互聯網絡順利的成為新生的、綜合感官的、充滿活力的新媒體，也為設計師創造了前所未有的信息傳達手段與途徑。而且隨著技術的不斷發展，它極有可能成為最完善的媒體。這應該引起每一個平面設計師的關注。網絡的發展速度和力量是驚人的。
二、橫看成嶺側成峰之視覺效果
可以說網頁是通過視覺元素來進行信息傳達的，這里說的視覺元素包括文本、背景、按鈕、圖標、圖像、表格、顏色、導航工具、背景音樂、動態影像等。無論是文字、圖形、動畫，還是視頻，為了使網頁獲得最大的視覺傳達功能，網頁設計者所要考慮的是如何適應人們視覺流向的心理和生理的特點把它們放進頁面這個“大展示窗口”里。由此確定各種視覺構成元素之間的關系和秩序。因此，設計時應該研究各種視覺造型元素之間的距離、位置、面積和視覺流程的問題。
從理論說起，視覺流程的形成是由人類的視覺特性所決定的。因為人眼獨特的結構，造成只能產生一個焦點，而不能同時把視線停留在兩處或兩處以上的地方。這樣就使得人們在閱讀一種信息時，視覺總有一種自然的流動習慣，先看什么，后看什么，再看什么。視覺流程往往會體現出比較明顯的方向感，它無形中形成一種脈絡，似乎有一條線、一股氣貫穿其中，使整個版面的運動趨勢有一個主旋律。心理學的研究表明，在一個平面上，上半部讓人輕松和自在，下半部則讓人穩定和壓抑。同樣，平面的左半部讓人輕松和自在，右半部讓人穩定和壓抑。所以平面的視覺影響力上方強于下方，左側強于右側。這樣平面的上部和中上部被稱為“最佳視域”，也就是最優選的地方。
所以在網頁設計中，重要的信息和標題欄通常在這個位置出現。只要遵循視覺流程和符合人們認識過程的心理順序和思維發展的邏輯順序就可以更為靈活的運用。在網頁設計中，靈活而合理地運用視覺流程和最佳視域，組織好自然流暢的視覺導向，直接影響到傳播者傳達信息的準確與有效性。
三、進化、發展之必要
網頁設計這門學科是一門后期新興的設計類與網絡方面交叉的學科，在最近的幾年也隨著網絡的發展越來越受人們的重視，它是以網絡為載體，把各種各樣不同的信息以最快捷與最方便的模式傳達給每一位與之相關的人員，但是單單這種標準是不夠的，人們也對在觀看各類信息的同時逐步產生了視視美觀的需求。然而每個人對美的追求是不盡相同的，網頁設計也是同樣的。因為要求了網頁不光是把各類信息與事物放上去能看就行，這些對現在的人們已經是遠遠不夠的了，這時設計師就要考慮如何使受眾能更好更有效率的接收到網頁上的信息。這方面就需要從審美入手了，如何制作出清晰、整體性效果好的頁面。使人們瀏覽起來更方面，心情更舒暢，制作出清晰、整體性好的頁面。使人瀏覽起來心情愉快，接收信息也會更加容易。網頁設計的審美需求是對平面設計美學的一種繼承和延伸。
我們經常所說的如變化和統一、條理與反復、對比和調和、均齊與平衡等，對網頁中文字、圖形、色彩的設計都是十分有效的視覺規律。首先，網頁的內容與形式的表現必須統一和具有秩序，形式表現必須服從內容要求，網頁上的各種構成要素之間的視覺流程，能自然而有序地達到信息訴求的重點位置。在我們把大量的信息塞到網頁上去的時候，考慮怎樣把它們以合理統一的方式來排布，使整體感加強同時又有變化。怎樣使它們脈絡清楚又富有清晰的視覺效果等等。這樣使頁面更豐富，更有生氣，看起來就不感到枯燥。其次，突出主題要素，必須在眾多構成要素中突出一個清楚的主體，它應盡可能地成為閱讀時視線流動的起點。如果沒有這個主體要素，瀏覽者的視線將會無所適從，或者導致視線流動偏離設計的初衷。
四、千里之行始于足下之構成效果
文字作為信息傳達的主要手段目前也是網頁設計的主體，文字是網頁中必不可少的元素，也是網頁中的主要信息描述要素，所以網頁中文字將占據相當大的面積，文字表現的好與壞將影響到整個網頁的質量。網頁文字的主要功能是傳達各種信息，而要達到這種傳達的有效性，必須考慮文字編輯的整體效果，能給人以清晰的視覺印象，避免頁面繁雜零亂，減去不必要的裝飾變化，使人易認、易懂、易讀。不能為造型而編輯，忘記了文字本身是傳達內容和表達信息的主題。
網頁文字編排與設計，重要的一點在于要服從信息內容的性質及特點的要求，其風格要與內容特性相吻合，而不是相脫離，更不能相互沖突。如政府網頁其文字具有莊重和規范的特質，字體造型規整而有序，簡潔而大方；休閑旅游類內容網頁，文字編輯應具有歡快輕盈的風格，字體生動活潑，跳躍明快，有鮮明的節奏感，給人以生機盎然的感受；有關歷史文化教育方面的網頁，字體編輯可具有一種蒼勁古樸的意蘊、端莊典雅的風范或優美清新的格調；公司網頁可根據行業性質、企業理念或產品特點，追求某種富于活力的字體編排與設計；個人主頁則可結合個人的性格特點及追求，別出心裁，給人一種強烈獨特印象。
在網頁文字的編排與設計中，由于計算機給我們提供了大量可供選擇的字體，導致字體的變化趨于多樣化這既為網頁編輯提供了方便，同時也對編排與設計的選擇能力提出了考驗。雖然可供選擇的字體很多，但在同一網頁上，使用幾種字體尚需精心編輯和考慮。一般來講，同一頁面上使用的字體種類最多只能有三四種。由于文本字體的顯示是需要本地硬盤字體文件的支持的，所以在互聯網上使用過多的字體是沒有意義的。文字在視覺傳達中作為頁面的形象要素之一，除了表意以外，還具有傳達感情的功能，因而必須具有視覺上的美感，能給人以美好印象，獲得良好的心理反應。
圖片是文字以外最早引入到網絡中的多媒體對象。網絡可以圖文并茂地向用戶提供信息，成倍地加大了它所提供的信息量。而且圖片的引入也大大美化了網絡頁面。可以說，要使網頁在純文本基礎上變得更有趣味，最為簡捷省力的辦法就是使用圖片。對于一條信息來說，圖片對受眾吸引也遠遠超過單純的文字。
圖片的位置、面積、數量、形式、方向等直接關系到網頁的視覺傳達。在圖片的選擇和優化的同時，應考慮圖片在整體編輯計劃中的作用，達到和諧整齊。要達到這樣的效果，在頁面圖片的合理選用時，一要注意統一，二要注意悅目，三要注意突出重點，特別是在處理和相關文字編排在一起的圖片時。
網頁在一定意義上說也是一種藝術品，因為它既要求文字的優美流暢，又要求頁面的新穎、整潔，使用色彩可以產生強烈的視覺效果，使頁面更加生動。而且，瀏覽者在洲覽網頁時，留下的第一印象就是頁面的色彩設計，它的好壞直接影響閱讀者的觀賞興趣。因此，色彩設計在網頁設計中居于十分重要的地位。網頁的色彩設計應把握以下幾個方面。
首先是整個頁面的色彩選擇，確定一個主色調，可以有利于體現網站主題。我們現在看到的網頁，一般以淺顏色為背景的居多，如淺灰色、淺黃色、淺藍色、淺綠色。以淺顏色為底，柔和、素淡，配上深顏色的字，如黑色，讀來自然、流暢，也有利于突出頁面的重點，有利于整個頁面的配色，更容易為大多數人認可和掌握。其他一些次要內容，如背景圖片、線條適宜采用不搶眼的顏色，以免喧賓奪主。只有少量精心選擇的元素，為了突出強調的需要，才采用明亮的色彩，這些彩色亮點就會產生強烈的視覺沖擊，但如果用得太多了，就會形成一種均勻的噪聲，而達不到強調的效果。
其次，在背景的色調搭配上一定要注意不能有強烈的對比，特別是同時使用色彩對立的顏色。大面積顏色適宜采用低比度，因為過于豐富的背景色彩會影響前景圖片和文字的取色，嚴重時會使文字溶于背景中，不易辨識。所以，背景一般應以單純為宜。如果需要一定的變化以增加背景的厚度，也應是在盡量統一的前提下的一種變化。例如在制用標題時，為追求醒目的視覺效果，可用比較深的顏色，配上對比鮮明的字體。實際上背景的作用主要在于統一整個網頁的風格和情調，對視覺的主體起到一定的襯托和協調作用，一方面吸引網民的注意力，另一方面有助于體現網站的主題。
五、技術、設計之兩手都
網絡技術與設計創意的緊密結合，使網頁的設計由平面設計擴展到立體設計，由純粹的視覺藝術擴展到空間聽覺藝術，網頁效果不再近似于書籍或報刊雜志等印刷媒體，而更接近干電影或電視的觀賞效果。技術發展促進了技術與設計的緊密結合，把瀏覽者帶入一個真正現實中的虛擬世界。技術與設計的緊密結合在網頁藝術設計中體現得尤為突出。wWw.gWyoO
個用來展現自己的網站作為平臺，其中插畫也在各類網頁設計中被頻繁使用。不同類型的網站受眾面不同，門戶網站中的用戶量大，面對大量的用戶需要滿足不同的審美需求，網頁設計中的插畫也需要滿足大眾的審美。
插畫在網頁設計中的作用
1.插畫在網頁設計中的效果
插畫在網頁環境中的運用必須要與傳統媒介的運用有所區分，為了突出主題和滿足人們的需求，這就要求插畫設計在強調藝術性的同時，更應該注重通過獨特的風格和強烈的視覺沖擊力，讓受眾在審美的過程中接受和處理所傳達的信息。這就是網頁設計中插畫與獨立插畫的大區別，優秀的網頁設計插畫是能更好的表現訴求的插畫，而不一定是從藝術性角度最好的插畫。
2.插畫帶來的用戶體驗價值
網站都在講究用戶體驗，最重要的是體現在頁面的設計和表達上，給用戶的第印象也往往是從視覺開始。插畫作為一種藝術的形式可以給網站建設以視覺上的填補，利用其特性改變網站的形象，給網站增添感染力。例如谷歌，從1998年開始嘗試插畫運用到主頁logo上，自此以后利用插畫來裝飾谷歌Logo變成一項傳統，重大紀念日、小游戲以及音樂元素都被融進谷歌的涂鴉中（如圖1），這種插畫元素的融入不僅僅受到用戶的喜愛，還使自己的員工感受到公司對各種創新、創造的支持和鼓勵，他們因此在這樣的氛圍中便能更加積極而無所顧忌地貢獻他們的創造和想法。這一切的最終受益者還是谷歌，它因而得以這么多年來都保有源源不竭的創新能力，成為全球最領先的互聯網公司。
插畫在網頁設計中的運用
1.插畫使用在網頁設計中的表達方式
插畫在整個網頁設計中的運用應該和導航系統聯合起來共同引導瀏覽老的視覺流程，因此插畫的藝術性在于確保整個網頁的個性化和整體性。設計師需要讓瀏覽者在最短的時間內接受到信息與美感的雙重體驗，滿足人們的實用和需求。通過塑造可視的形象來表現社會生活和設計師情感的藝術形式。生動的視覺藝術能夠喚起瀏覽者的審美情緒，從而符合他們獲取信息的心理需求和審美體驗上的滿足。
2.不同類型的網頁設計中插畫的使用
插畫在企業網站中的運用對于企業類型的網站來說，主要訴求便是以用戶為中心讓網站既美觀又實用，提高企業形象，是種以網站的用戶體驗為導向的設計。網站通過設計師的藝術化渲染，讓瀏覽者對企業產生好感度，從而激發瀏覽者的點擊沖動。企業類型的網站把插畫與網頁設計融為一體，轉化為生動、精彩的網頁視覺形象，喚起人們對網絡視覺藝術的追求與熱愛。這種對于網站的喜歡最終會轉化成為點擊率再轉化為購買率，為企業獲得收益。通常這類網頁設計中插畫是使用是比較小面積的，起到畫龍點睛的作用，例如美團外賣的網頁設計（如圖2）插畫更加讓本來呆板的網頁按鈕和分類設置，都變得卡通可愛。現代插畫元素在網站中的除了能將信息簡潔清晰的傳遞給用戶之外，能夠透過插畫看到更深層次的網站內涵，通過欣賞插畫從而帶用戶走進網站主題，引起對網站的關注。
插畫在個人網站或小眾風格網站中的應用對于個人網站或者小眾風格的網站來說，插畫風格成了網頁設計中不可替代的藝術形式，在設計的表現上顯示出獨特的藝術魅力，利用插畫表達自身獨特的想法用來體現與眾不同，從而在各種網站中脫穎而出。這種類型的網頁需要大量的插畫來形成風格，插畫在網頁設計中成為主體，插畫中獨特的親切、活波、個性、旋目的感覺展現出網頁設計的多樣性，插畫中個性化的表現技巧貫穿網頁設計中，使得頁面免于平庸，給瀏覽者帶來別出心裁、強烈奇特的多元化視覺印象。
插畫在移動端網頁設計中的應用。由于移動端設備具有屏幕較小，使用場景多樣這種特性，插畫在移動端的運用和上面兩個類別有著很大的不同。不像web端樣喜歡圖文混排，移動端的圖和文字內容的界限比較分明，插畫的形式主要有app啟動界面和banner兩種，其中啟動界面占很大的比重。啟動頁面多以純插畫的形式表現，在單個的頁面當中信息不會過多，表現個突出的主題即可，視覺形式上也會聚焦在個主題上。這類插畫通常用來表現營銷文字的內容，有的插畫內容是卡通化的應用使用場景，還有的沒有具體的活動內容，只是用插畫來體現應用的產品形象和氛圍，用插畫形式展示自己的態度。當然還有類重要的類型節日插畫，每逢節日或者熱點各個應用軟件搜索引擎都會有節日相關插畫出現，這種插畫可以大大提升企業的文化氛圍和形象。
關鍵詞： 《網頁設計與制作》 教學研究 教學探索
一、教學現狀
1.課程特點。
學生在先修課程的基礎上，具備一定的網頁效果圖制作的能力，然后通過《網頁設計與制作》這門課的學習，按照效果圖可制作出網頁。《網頁設計與制作》的綜合性很強，不僅要求學生有一定的插畫、動畫制作，以及配色、審美的功底，還要求學生具有較強的實踐動手能力和代碼編寫能力。
2.學生特點。
《網頁設計與制作》是針對高職高專軟件技術專業、網站建設與維護專業的學生所開設的，這兩個專業學生共同的特點：一是普遍沒有美術功底；二是學生英文基礎薄弱、自律性較差、綜合素質有很大的差異性、計算機的熟練水平參差不齊。當面對設計的網頁效果圖要求美觀時，學生因為美術功底的缺失，往往達不到要求；當面對對英文基礎有一定要求的網頁中代碼編寫內容的學習時，部分學生會有力不從心的感覺，從而導致學習興趣的喪失。
3.教師特點。
“名師出高徒”，要教出實踐能力強的學生，教師自身的實踐能力就要強。但現狀不容樂觀，任教《網頁設計與制作》的專職教師在相關企業實踐過，且具有一定實踐經驗的所占的比例并不大，而這門課程本身對實踐操作能力的要求就很高，于是產生了矛盾。雖然有行業兼職教師來校教授該門課程，但因為這門課不是一蹴而就，而是要通過循序漸進的學習才能學好的，行業兼職教師所任課的時間稍顯不足。
4.教學方法。
高職教育注重學生實踐動手能力的培養，且《網頁設計與制作》這門課程對學生的動手能力要求很高。傳統教學采取“理論+實踐”的形式，理論指的是在多媒體教室中，教師以講授和演示的方式，把實踐所涉及的理論知識傳授給學生，學生以聽和記筆記為主；實踐指的是學生在過后安排的上機課中予以實踐，但理論和實踐往往沒有實現無縫對接。
二、教學探索
1.在實踐中提高高職高專專職教師的動手能力。
針對提高專職教師的實踐動手能力，提出“實踐”這個解決方法。第一，與各大公司企業加強校企合作，在專職教師休假時間，特別是在寒暑假這種假期比較長的時間里派教師下企業鍛煉，體驗企業具體所需技能及學習新的技術；第二，定期組織行業專家來校對專職教師進行交流和指導，實現教師下企業鍛煉和在校接受培訓雙保險。
2.改進教學模式，引入CDIO教學模式。
高職教育注重對學生實踐能力的培養，改善教學模式對學生實踐能力的培養顯得尤為重要。CDIO是由MIT等世界著名高校研發的一整套先進的工程教育模式，C（conceive）指的是“構思”，D（design）指的是“設計”，I（implement）指的是“實施”，O（operate）指的是“項目分析和展示階段”，該模式可應用到《網頁設計與制作》這門課的教學中。
（1）“教”在CDIO教學模式中的體現。教師可借鑒該教學模式，不再按課本上的具體章節講解，而是將一整個網頁制作項目具體，從如何“構思”到如何“設計”，再到如何“實施”，完成后“展示”給學生欣賞。也可理解為教師引入項目引導式的教學方法，對該項目進行分階段拆分，通過完成具體的項目、逐步帶領學生掌握網頁設計與制作的各種方法。
（2）“學”在CDIO教學模式中的體現。該模式要求《網頁設計與制作》這門課程有三方面的目標，即知識目標、能力目標和素質目標。為了實現這門課程的課程目標，要求學生在學習網頁設計基本知識的基礎上自愿分組，每小組確定一個網頁的主題，完成至少一個完整的項目。該項目要求包括表格布局、框架布局、div+CSS布局三種布局方式，以及CSS美化和JavaScript特效一整套，按照CDIO的流程，從構思（具體需求）、設計、實施改進及展示本團隊設計開發的項目對學生進行訓練。學生在學習任務的驅動下，能自發地利用課后時間搜集資料學習和實踐，彌補課程教學時間的有限性和教學范圍的局限性的不足。同時按照這個流程走下來，學生的團隊合作精神也得到鍛煉。在項目的實施過程中，學生難免會碰到各種難題，這就鍛煉了學生解決問題的能力。
3.加大實訓項目在期末考核中的比重。
傳統考核模式采取平時成績30%+期末理論考試70%的比重，現在則提高實訓項目在期末考核中的比重，本著理論夠用、注重實踐的原則，考核形式采取平時成績20%+期末理論考試40%+學生實訓項目占40%這一考核方式，凸顯理論的不可或缺性和實踐的重要性。
綜上所述，在《網頁設計與制作》課程教學中，要注意豐厚學生理論儲備，提高所需技能和素質，為學生的可持續發展打下堅實的基礎。
參考文獻：
[1]蔣秀姣.CDIO環境下網頁設計課程教改探討[J].廣西教育C（職業與高等教育版），2012（10）.
[2]王剛.CDIO工程教育模式的解讀與思考[J].中國高教研究，2009（5）.
Flash網頁設計“總分總”的教學模式
在軟件基礎和線性動畫（Flash廣告設計）的基礎上，進入到課程的主體模塊，即Flash網頁設計。與HTML靜態網頁的分頁面結構不同，Flash網頁設計在集成設計開發環境內（Flash軟件和Action腳本）實現網頁內容與非線性結構的編排，模塊化特性明顯。為此，筆者嘗試采用“基本結構設計—模塊分解設計、網站整合”三步走的教學法，可概括為“總—分—總”教學流程，合理調配教學難點和重點，循序漸進，在實踐中取得了一定的效果。（一）基本結構設計首先，從網頁基本結構入手，利用按鈕對時間線上各幀的控制構造網站模型，其中包含了最基本的場景轉換。在學習的后期，可以針對每幀對應的畫布進行深入設計，包括內容擴展和淡入、淡出動畫效果的實現等。基本結構設計涉及每幀對應的畫布設計、按鈕設計、元件和實例的進一步應用以及補間動畫等內容，還涉及一些基礎的Action腳本內容，如“stop”“gotoAndStop”“gotoAndPlay”命令以及幀標記的參數調用等，適合入門學習。在腳本程序編寫的最初階段，重點要使學生理解腳本語言代替人進行指令操作的特性，如“去哪”“做什么”等，利用這種指向性的形象思維逐漸強化學生的編程思維。一般來說，靜態網頁設計課程教學不會將Java腳本作為重點，在這種情況下，這一階段的Action腳本學習就更加重要。（二）具體模塊學習由于Flash網頁多在屏幕的顯示面內不翻屏，高度有限，這就需要使用軟件功能和腳本程序創造更多的結構層次去容納網頁內容。除了場景的轉換外，在每個場景之中，還要借助于不同類型的頁面組件來實現額外的結構層次。針對種類較多的頁面組件，可以實施“分解教學”，即拋開網站設計的整體性，單純提煉每個組件的設計與編程要點，使每節課都可以完成一種組件設計，實現相關功能。筆者選擇的頁面組件包括按鈕組（菜單）、彈出框、下拉菜單、聲音控制模塊和預加載器等。在設計層面，要考慮到各組件與網頁整體風格的一致性；在內容層面，要合理地選擇組件類型，豐富內容層次，便于用戶訪問，形成良好的互動性。而在Action腳本編寫方面，要以典型程序、核心程序為主，逐步增加更多的樣式變化。實際上，雖然組件類型不同，其背后的程序控制大多有著一定的內在聯系，如很多組件都會用到onEnterFrame頻率控制函數。隨著教學的不斷深入，要盡量將腳本教學系統化，將松散的知識點整合起來，盡量覆蓋到常用的函數、方法和命令。（三）網站內容搭建經過不同組件的分解學習，接著補充幾種場景轉換的方法，結合不同設計項目中對組件的選擇，Flash網站就可以搭建起來。至此，Flash網頁設計的技術性教學目標就基本完成了。在技術性教學目標之外，在課程的收官階段，要融入行業設計理念，以提高結課作業的質量，保證教學效果。在HTML靜態網頁設計教學階段，筆者針對結課作業挑選了“實用設計”這一特定行業分類進行教學強化，避免學生在結課階段設計得沒有針對性，學無所用。
靜態網頁的有效補充
如果分析“靜態網頁”的內涵和外延，可以看到，在基于HTML網頁設計之外，只要立足于本地，與服務器沒有數據交互的網頁設計都可以統稱為“靜態網頁”。從這個角度來看，藝術設計專業中的Flash網頁設計課程也基本上以靜態網頁為主。在Web2.0時代，交互性的社交網絡已經發展得比較成熟，使每個獨立域名的網站不再是用戶交互的首選。在這種形勢下，靜態網頁設計要“揚長避短”，不拘泥于本身用戶交互行為的弱點，以設計為主，反而有自己的一席之地。在教學中，要鼓勵學生在參與網絡互動之余，盡量發揮自身設計優勢，具備獨立完成內容展示型網站的能力。經過相關調整，Flash網頁設計課程具備了循序漸進、由淺入深的教學層次，直至課程結尾處，著眼于設計之“道”的有目的訓練，使整個網頁設計課程體系具備了從基礎知識到綜合設計提升的完備性，并與其他課程有機結合，最大限度實現了課程的自身價值，為該課程的序列化、標準化建設積累了一定經驗。
作者：劉立偉 杜美易
