時間：2023-08-03 17:28:37
開篇：寫作不僅是一種記錄，更是一種創造，它讓我們能夠捕捉那些稍縱即逝的靈感，將它們永久地定格在紙上。下面是小編精心整理的12篇網頁設計的技巧，希望這些內容能成為您創作過程中的良師益友，陪伴您不斷探索和進步。
關鍵詞：Dreamweaver；網頁；菜單；行為
中圖分類號：TP393.092
Dreamweaver是一款專門用于網頁設計與制作的軟件，無論是作為Dreamweaver的初學者，還是專業的網頁設計師，在進行網頁設計時，經常需要創建菜單。網頁菜單可以通過編寫Javascript程序實現，但需要掌握復雜的編程語言，這對初學者掌握菜單設計會造成一定的困難。要想設計出效果滿意且操作不復雜的網頁菜單，利用Dreamweaver中的行為等屬性，可以制作出從“導航條菜單”到“下拉菜單”等各種與眾不同的特殊菜單。
1 導航條菜單
導航（Navigation）原意為“航行、航海”的意思，導航條（Navigation Bar）指的是可以為網絡起到導航作用的條形菜單欄。導航條菜單可以是圖像，也可以是文本。在Dreamweaver中與輪換圖像一起使用的菜單稱為“導航條”，通常的輪換圖像菜單都是光標移動到菜單上方時菜單的圖像發生變換，而光標離開菜單上方時，再返回到原來的圖像。
導航條可以分為水平導航條和垂直導航條兩種，以創建垂直導航條菜單為例，先在Common面板中單擊Image菜單旁的小三角，從彈出菜單中選擇Navigation Bar按鈕，輸入菜單名稱，指定打開文檔時顯示的原圖像；單擊Up image文本框右側的按鈕，在Select image source對話框中選擇輪換圖像文件地址。接著單擊Add item按鈕可以添加多個導航條菜單項，單擊按鈕。最后觀察插入在文檔中的導航條菜單，可以看到自動生成了表格，并在各個單元格上分別插入了Up image和Over image。最后按F12鍵運行瀏覽器后，將光標移動到菜單上方，菜單變換為輪換圖像了。
2 跳轉菜單
網頁文件中菜單只是在需要時使用，因此最好在盡量縮小菜單顯示空間的同時，為內容分割出更多的空間，當網頁內某一個主題連接了多個文檔，但只選擇其中一項來連接相關文檔的時候，通常會使用到跳轉菜單。
2.1 插入跳轉菜單
以制作電子期刊的跳轉菜單為例，在跳轉菜單中選擇想要查的過去期刊的月份，就可以鏈接到該月的相關內容上。首先顯示Forms面板，單擊Insert面板的子面板按鈕，在彈出的菜單中選擇Forms命令，出現Form面板后，單擊Jump Menu按鈕。接著為文檔中插入跳轉菜單，在出現的對話框內將跳轉按鈕的標題使用為第1個項目，在Text文本框中輸入提示文字“請選擇期刊月份--”；單擊Add item按鈕，創建第2個項目，在Text文本框中輸入文字“2014年10月刊”，go to URL文本框中輸入正確的鏈接地址。最后在Initially selected列表框中選擇跳轉菜單的標題作為跳轉菜單的基本項目，按下鍵，在打開瀏覽器上進行確認。
初次接觸跳轉菜單時，會顯示基本項目，而單擊跳轉菜單后，就可以在彈出來的列表中再選擇所需的期刊月份，選擇其中的一個項目，就會連接到所選期刊月份的網頁中。
2.2 修改跳轉菜單的背景色
在網頁上使用了背景顏色或背景圖像時，利用樣式表，就可以給跳轉菜單加入背景色，可以提高整體統一性。首先在CSS面板中單擊CSS Styles標簽打開CSS Styles面板，單擊“創新新樣式”按鈕，在Type選項組中選擇Class（can apply to any tag）單選按鈕創建類樣式，然后在Name文本框中輸入jumpbg，再在Define in選項且中選擇This document only單選按鈕；在Category列表框中單擊Background選項面板中的“背景色”按鈕，在彈出的顏色選擇器上選擇所需的顏色；單擊選中文檔窗口中的跳轉菜單后，在屬性面板的Class下拉列表中選擇jumpbg，就可以以跳轉菜單上應用背景色。
3 創建彈出后消失的菜單
利用圖層創建子菜單后，再指定圖層的Visibility，應用Show-Hide Layers行為，可以制作光標移動到主菜單上方時顯示子菜單，而光標離開主菜單上方時，又自動隱藏子菜單的特殊菜單效果。
首先在Behaviors面板中單擊Add behavior按鈕 ，在彈出的行為菜單上選擇Show-Hide Layers行為，在Named layer列表框中選擇layer “sub1”，單擊按鈕；選擇layer“sub2”，單擊按鈕；onMouse-Down事件更改為onMouseOver事件。接著在行為菜單中選擇Show-Hide Layers命令，在Named layers列表框中一個一個選擇子菜單圖層，將所有圖層指定為隱藏狀態，onMouseDown事件更改為onMouseOut。最后在Layers面板中單擊sub1選擇圖層后，在Behaviors面板中單擊Add behavior按鈕 ，選擇Show-Hide Layers命令，在Named layers列表框中選擇layer “sub1”，單擊按鈕，把onClick事件更改為onMouseMove事件，按F12鍵在瀏覽器上進行確認。
4 創建下拉菜單
下拉菜單，是指當光標移動到主菜單上方時，在下面出現垂直方向的子菜單；當光標離開主菜單上方后，子菜單也會隨之消失。
4.1 創建垂直方向的下拉菜單
在Behaviors面板中單擊Add behavior按鈕 ，在彈出的行為菜單中選擇Show Pop-Up Menu行為，在Text文本框中輸入第1個子菜單的名稱，在Link文本框中正確輸入與第1個子菜單相鏈接的網頁地址。接著依次創建第2、第3個子菜單，單擊Add item按鈕，在Text文本框中輸入第2、第3子菜單的名稱，Link一項保存不變。
為了指定菜單形式，首先單擊Appearance標簽，在Up state區域單擊Cell按鈕，在彈出的顏色拾色器上設置默認狀態時單元格的背景色；在Over state區域設置光標移動到菜單上方時單元格的顏色。接著單擊Advanced標簽，單擊Border color按鈕，在彈出的顏色拾色器上選擇顏色，可以更換下拉菜單的邊框顏色。最后單擊Position標簽指定下拉菜單的位置，在MenuPosition區域單擊第2個按鈕，單擊按鈕。經過上面的操作，在行為面板中自動添加了事件和動作，按F12鍵在瀏覽器上進行確認。
4.2 創建水平方向的下拉菜單
在行為面板中雙擊Show Pop-Up Menu行為，進入Appearance選項卡，把菜單的形式更改為水平方式Horizontal menu，并單擊按鈕。
按下F12鍵，在瀏覽器上進行確認。可以看到當光標移動到菜單上方時，會顯示水平方向上。
5 結束語
總之，設計一個好網站，除了要掌握一定的網站基礎知識外，還要掌握多種網頁編輯的技巧。網頁制作的主要目的就是要吸引人們來瀏覽，網頁上新穎奇特的菜單可以激發瀏覽者的觀看欲，提高瀏覽率。有關Dreamweaver中用于設計菜單的技巧還有很多，本文僅介紹其中操作簡單、效果顯著的幾種，供大家在制作網頁菜單時參考。
參考文獻：
[1]高京熙.Dreamweaver從入門到與精通（第1版）[M].北京：中國青年電子出版社，2006.
[2]王強.Dreamweaver CS4入門與進階（第1版）[M].北京：清華大學出版社，2010.
摘要:隨著互聯網的蓬勃發展,出現了許多優秀的企業主頁
>> 淺析網頁設計原則與制作技巧 網頁設計原則及技巧 網頁設計的小技巧 Dreamweaver必備網頁設計技巧 淺談網頁藝術設計中的網頁版式設計與編排 對網頁設計藝術的探討與研究 藝術高職院校網頁設計教學的研究與實踐 網頁設計中藝術創新的研究與實現探討 探討網頁設計的藝術與處理原則 淺談網頁藝術設計 網頁藝術設計探索 網頁藝術設計初探 《網頁設計與制作》 網頁設計的布局和用色技巧 網站設計及網頁制作技巧 網頁的版式設計技巧探討 網頁新聞編譯的原則與技巧 網頁配色的方法與技巧 淺談網頁制作的經驗與技巧 板式設計課程中的網頁版式設計結構與藝術性探索 常見問題解答 當前所在位置：或.html即可。這時,保存的位置中會出現相應的網頁文件了,直接打開,就可看到網頁的效果。但是單由記事本編輯出的網頁在效果上會過于簡單,不美觀,或功能不是很完善,這就需要我們在簡單掌握html語言后,利用其它的,更為直觀的網頁制作工具來進行網頁的制作了。
1.2 掌握網頁三劍客和簡單的數據庫使用
何為網頁三劍客?是目前比較流行的制作網頁的三個工具軟件,Dreamweaver、Fireworks和Flash。其中Dreamweaver可用來制作靜態網頁、動態網頁、創建和管理網站、制作樣式表等等,功能強大,應用范圍很廣。Fireworks是圖像處理軟件,不僅具備復雜的圖像處理功能,并且能輕松地把圖形輸出到第三方的應用程序中,它最大的特點是,應用網頁制作方面的切片功能,使網頁圖片處理起來更方便,快捷了。Flas制作軟件,目前,大大小小的網頁中,都有flas存在著,給網頁增添了精彩的效果,使網頁更加精致,還可利用flash制作出有趣的游戲,留言板,聊天室等等,是功能強大的應用軟件。
網頁中經常會用到聊天室、留言板、用戶注冊、網上問答等等內容,這樣網頁就被分成了動態網頁和靜態網頁二種,不使用服務器相關內容,不使用數據庫鏈接的網頁被稱為靜態網頁,直接使用Dreamweaver來進行編輯就可以了,它的文件名中的擴展名為.htm或.html。而動態網頁正是相對于靜態網頁來說的,它的擴展名一般為.asp或.php等等。這種網頁要使用相應的服務器技術,并用到數據庫和數據庫鏈接知識。常用的數據庫有Access數據庫、SQL Server數據庫等[2]。
3 網頁內容的選取
網頁的內容是靈魂,制作的網頁是否受歡迎,是否能吸引訪問者的眼球,是否能達到預期的效果。這些都是網頁制作時我們必須要預先考慮的問題。
那么如何完成內容的定位泥?
① 在定位網站內容時,要做到小而精,切忌包羅萬象。把你認為最精彩的東西都放在上面,那么往往會事與愿違,給人以內容泛泛,大而空的感覺.最好做比較專一的內容。試想,如果我們將自己最擅長的某種知識或技術等內容做到網頁中,建立一個專題的站點,那么一旦有訪問者第一次在這里一下子就找到了他想找的內容的話。那么如果再有這方面的需求,首先就會想到你的站點。
② 如果是個人網頁,那就一定要突出自身的個性,當今社會是提倡張揚個性的時代,除了別人都有的內容之外,自己還要融入一些自身的特點,是內容要有亮點,配色也可不拘一格,大膽用色。從各個角度烘托出制作者的獨特性格。
③ 如果是企業的站點,要注意的是:企業的運營宗旨是否能完好體現,能否在網頁中最大限度體現企業網站功能和用戶最需要的內容,用戶的操作是否簡便等;要做到網頁內容主次分明,結構要清晰簡潔。
④ 對于能留住訪問者的另一個重要問題,就是網頁的速度。對于一個瀏覽頁面時間超長的網頁,我想不會讓人有再次訪問的想法。對于線路和網路本身的速度我們不能控制,但我們可以在網頁設計中避免一些影響速度的因素。好的網頁應是越簡單易讀越好。我們可以從以下幾個方面來考慮。首先,影響瀏覽速度的最重要因素之一是圖片容量大小,漂亮的圖片、絢麗的動畫效果,會使你的主頁增光添彩,但圖片的容量大小卻是直接導致瀏覽速度慢嚴重后果。盡管你的內容精彩絕倫,網頁漂亮,但打開你的網頁需要等上半天,在這時間就是金錢的時代,誰會再次的光顧呢?可利用圖片制作工具將圖片進行加工,在不太影響效果的前提下,可利用修改存儲格式,降低像素,分辨率,減少動畫應用等途經來達到目的。
4 網頁制作步驟
制作網頁和裝修差不多,先從整體的角度構思出網頁的內容、色彩等,然后利用相應的軟件進行實際操作。
① 網站定位
先確定所要建立的網站的類型,確定網站風格,網站色調,網站層次,將網站結構先確立出來。
② 收集素材
現在的互聯上的資源非常豐富,各種各樣的圖片資源、動畫資源等多媒體資源比比皆是,就所確定的網站風格等因素,收集相關素材。
③ 使用Fireworks等圖型制作軟件將網頁先畫出來
這一步驟很關鍵,無論使用哪種網頁制作軟件,在進行編輯時經常用到表格,用表格來定位圖片,用表格來定位文本,用表格來組合被切割的小圖片等。因為網頁時經常會出現后位置更改的現象,使用表格來規劃網頁,會得到事半功倍的效果。另外,小圖片的下載速度要比一整張大圖片的下載速度快的多,所以在網頁中多是將大的圖片切割成小部分后,利用無邊框,無間距的表格將小圖片組合成一張大圖。那么,第一步,在使用表格制作前,應用圖片處理軟件進行網頁設計,將整個網頁的效果圖片畫出來。第二步,利用Fireworks的切片工具,將所畫出的效果圖切成適合的小圖片,以備使用。
④ 利用Flas制作軟件制作LOGO和Banner動畫
LOGO是網站的標識,是一個站點的象征,是網站形象的重要體現。一個精美的LOGO可以很好地樹立網站的形像。LOGO一般放在網頁的左上角,大小有三種常用規格:88×31、120×60和120×90。Banner被稱為網幅廣告、旗幟廣告或橫幅廣告,是網絡廣告的主要形式,一般使用GIF格式的圖像文件,也可以使用靜態圖形,也可用多幀圖像拼接為動畫圖像等[2]。
⑤ 添加相應的服務技術
網頁如果被制作成動態網頁形式,首先要添加相應的服務技術,在我們常用的windows系統中,先要添加IIS網絡服務組件,這是windows系統的組件,需要到控制面板中的添加或刪除程序對話框中,選擇添加刪除windows組件一項中進行internet信息服務(IIS)的添加,這時需要我們在光驅中放入系統,或者可以到網絡上進行下載。
⑥ 創建數據庫
網頁中留言板、信息反饋、用戶注冊等等內容都要通過數據庫對其內容進行存儲,以備網頁調用[3]。一般的asp動態網頁使用Access做為數據庫,Access使用起來很方便,可以根據向導來創建數據庫內容。
⑦ 使用Dreamweaver制作網頁
所有的準備工作已經差不多了,我們現在要做的是,用Dreamweaver網頁制作軟件將已有的圖片、文本、數據庫等等內容組合到一起,形成我們的網站。首先,創建一個新的站點,在站點內新建網頁,一般使用index.htm或index.asp做主頁名稱。其次,在網頁中插入表格,將已經完成的圖片、動畫等多媒體內容插入到網頁中。然后,加入相應的圖片效果、鼠標經過、超級鏈接等內容。最后添加相應的樣式表內容,還可以利用行為面板,給網頁加入一些特效,如彈出窗口、時間軸特效等。還可以從網站上下載插件,安裝在Dreamweaver中,以增添效果。如果動態網頁內容需要添加數據庫鏈接內容,那我們就要在Dreamweaver中的數據庫面板中進行操作,添加數據源、綁定數據、記錄集和服務器等內容。使網頁更具有實效性。
5 結束語
網頁設計是一個注重實踐操作和設計的課程,需要我們在制作中不斷的學習,不斷的探索;在互聯網應用如此廣泛的今天,網頁制作的是否精美、實用,是否有訪問量等等是評價網頁優劣的最好方法。讓我們在實踐中進步,在實踐中走出一條屬于自己的路。
參考文獻:
[1] 丁桂芝.ASP動態網頁設計教程[M].北京:中國鐵道出版社,2005:16-18.
【關鍵詞】網頁設計 表格 層 就業信息管理平臺
【中圖分類號】G 【文獻標識碼】A
【文章編號】0450-9889（2017）03C-0191-02
隨著信息技術的日新月異，網頁設計的重要性也逐漸凸顯，如何快速、方便地設計出相關的網頁、網站就顯得非常重要。在網頁設計與制作的教學過程中，如何讓學生快速地掌握網頁設計的一些排版技巧是非常有必要的。因此，筆者結合網頁設計與制作教學中的一些體會，并通過就業信息管理平臺的設計案例，探索網頁設計中表格與Ap Div（層）的排版設計技巧。
一、Dreamweaver cs簡介
Dreamweaver cs是由Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁設計軟件。目前，最新的版本為Dreamweaver CC，網頁設計軟件的功能強大。對網頁的瀏覽已經是我們生活中的不可分割的一部分，網頁作為網絡信息傳播的主要載體，其設計也為大家所關注。網頁設計軟件的種類有很多，但最出名、最專業的網頁設計工具，非Dreamweaver莫屬。它是著名的“所見即所得”的可視化網站開發工具，目前的網頁設計幾乎都采用Dreamweaver來設計。Dreamweaver不僅提供了強大的網頁編輯功能，而且還提供了網頁的上傳工具。利用FTP進行大文件的傳輸，節省了文件的傳輸時間，它是一個集網頁創作和文件傳輸管理等多功能的設計工具。
二、表格與層在網頁設計中的使用
在就業信息管理平臺的設計中，采用程序設計，可以很好地提高網頁的下載與瀏覽速度，但對于初學者來說，程序設計是一件頭痛的事。因此，如何利用表格與層來進行設計，就非常重要。網頁設計中的排版有很多種方法，其中表格結合層的使用排版是最基本也是最有效的方法。表格與層，對職業院校的學生來說，非常容易學，而且使用也非常方便，做出來的網頁也非常的漂亮，因此，在網頁設計中表格與層是非常重要的。
（一）網頁設計中表格的使用。在網頁設計中，利用表格的排版，它的整體效果好是毋庸置疑的，表格在網頁中的位置可以通過表格屬性來進行設置。在Dreamweaver中，頁面內容的設計、排版主要是通過表格來完成。通過表格的相互嵌套、合并與拆分，可以將自己構思好的頁面完整地表現出來。表格在網頁中的重要作用，主要是它在不同的顯示上，可以根據網頁的大小、顯示器的大小進行相應的變化。并始終都處于瀏覽的相對位置，完整地把內容顯示出來，具有很好的兼容性。因此，使用表格排版比較規范，整體性強，可以讓網頁的設計顯得非常的整齊，達到想要的效果。但由于表格的整體性，在一些細微的地方以及操作上還不夠細化，在內容的設計表現上還不夠豐富。
（二）網頁設計中層的使用。層的使用在網頁設計中也是非常的普遍，由于它的定位比較精確，又是一種可視化操作元素，它的使用讓網頁增加了豐富的表現。層與表格的使用基本差不多，但在位置的定位上要比表格方便很多，這也是層的主要優點。在網頁設計中，文本、圖像、表格等元素只能固定其位置，不能相互疊加。如果要想使多個元素進行疊加或者定位要精確，在這種情況下，就需要使用層來進行設置。層具有很多表格所不具備的特點，如層的重疊、移動、隱藏等一些功能，層還可以添加一些動作行為，讓層的內容表現更加豐富，也正是基于這一點，層成了網頁設計中一個重要的元素。層的這些特點有助于設計思維不受局限，從而在設計上有很大的空間。由于它是一種流元素，層在具有上述優點的同時，也存在著一些不可避免的缺陷，例如層在網頁中的定位不會隨著瀏覽器大小的變化而變化，層的位置是固定不動的，在這樣的情況下就失去了層在W頁設計布局中的意義。
（三）就業信息管理平臺中表格與層的結合使用。表格與層的結合使用才能更好地體現出它們的優勢，層也才能更好地體現出它在網頁設計中的強大功能。在網頁設計中，如何做到表格跟層的統一、層與表格融為一個整體，這就要用到層在表格中的插入操作，以及層的嵌套使用，下面以就業信息管理平臺中制作下拉菜單為例來設計。首先，在網頁中插入一個三行一列的表格，在表格的第一行插入一張圖片，作為網頁設計的Logo，而在第二行中插入一個嵌套的一行五列的表格作為網頁的導航條，表格的第三行作為主要內容的設計與排版。其次，在表格的第一格中插入一個Ap Div層，作為父層，操作步驟為：菜單欄中的插入―布局對象―Ap Div，插入后，這個層的位置左、上必須為空，沒有任何內容。即它的屬性設置為圖1所示。
父層設置好后，就要進行下拉菜單的設計，即子層的設計，子層的設計主要通過層的嵌套來完成，完成后的效果如2圖所示。
到這里基本完成了管理平臺中表格結合層的使用，層就像表格一樣，具有隨著瀏覽器的變化而變化。下拉菜單的設計，需要結合層的行為來操作，這里就不再介紹行為的操作。這個簡單的案例說明層要與表格結合使用，才能發揮出層最大的優勢，當然這是對初學者來說的。層與表格的結合使用有很多的例子，有著非常豐富的內容，在此不再贅述。
三、表格與層的正確應用
表格與層在網頁設計中雖然有強大的功能，但在使用的過程中也不能太隨意，如果隨意地使用就會增加瀏覽器的負擔，瀏覽下載的速度就會變慢，影響網頁的瀏覽。
（一）表格布局出現的問題。在網頁設計中，利用表格排版的時候，不能使用一個大大的表格鋪滿整個頁面，這樣不利于瀏覽器的打開。瀏覽器打開一個表格，是要等一個表格全部下載完成，這樣就需要很長的時間來打開這個網頁。在表格的嵌套中，也不能無限制地嵌套下去，一般表格的嵌套，應該控制在最多三層表格，如果嵌套的表格太多，打開時也會消耗大量的資源，不利于網頁的打開。有數據統計，一般瀏覽者打開網頁的等待時間為7秒以內。如何解決這個問題，主要采用拆分表格的方法，將一個大的表格拆分成幾個小的表格，并要盡可能地避免表格的層層嵌套。
（二）層布局出現的偏差。在網頁的設計中，層的單獨使用沒有多大的意義，因為層是流元素，不會隨著網頁瀏覽器的變化而變化，它的位置是固定的，不會產生移動。雖然有時候，我們在利用表格與層排版的時候，看起來很整齊，但一預覽就完全錯位了，根本不是想要的效果。如何才能使層與頁面中的表格一樣，能夠隨瀏覽器的變化而產生相對位置上的變化，這就需要先使用表格對整個網頁的整體進行規劃，然后添加一個層到表格中的一個單元格中，作為一個父層。操作的方法為：菜單欄中的插入―布局對象―Ap Div，插入后，這個層的位置左、上必須為空，沒有任何內容。即設置好的屬性就如圖1所示。然后，其他的子層就通過這個父層進行嵌套，在這里必須強調的是，父層必須通過菜單欄的插入，不能通過用鼠標畫出來的方式操作。采用這種方法設置層后，無論瀏覽器的窗口大小如何變化，它都會跟著變化，體現了與表格成為一個整體，在瀏覽時就不會產生位置上的移動，因此，層只有結合表格的使用才能更好地豐富網頁內容。
總之，在網頁設計中，表格c層是非常重要的元素，但在布局設計中，只有把表格與層結合使用，才能讓網頁的布局精美與豐富。網頁中的內容雖然很重要，但網頁中的設計與布局才是最重要的。因此，通過合理的布局設置，特別是主頁設計要整齊美觀，才可能更好地吸引讀者。因此，在平時的網頁設計中，要多看一些優秀網站的排版設計，只有這樣，才能更好地提高自己的網頁設計能力。
【參考文獻】
[1]俞燕丹.項目教學法在《網頁設計與制作》課程中的實踐研究[J].新課程研究（中旬刊），2015（10）
[2]韓媛媛.淺談Dreamweaver在網頁設計中的應用[J].信息與電腦，2016（7）
[3]周金容.網頁制作過程與技巧[J].軟件導刊，2016（15）
[4]王浩.基于項目化的《網頁設計》課程教學改革初探[J].信息與電腦（理論版），2014（11）
[5]錢麗丹.小組協同式學習在網頁設計與制作課程中的應用[J].計算機時代，2015（4）
[6]陳靜.基于項目驅動法的網頁設計基礎課程課堂教學改革探索[J].人才資源開發，2015（20）
【基金項目】2016年度廣西高校中青年教師基礎能力提升項目“基于WEB的高職院校就業信息管理系統的研發與應用”（KY2016YB685）
關鍵詞：網頁設計；制作；學生能力；培養
隨著互聯網的發展和普及，網頁設計和制作技術成為網絡時代非常實用的技術，這一課程也成為學校開設的熱門課程。無論是計算機專業的學生還是非計算機專業的學生，網頁制作都成了一門重要的基礎性技術課程。但是很多學校在教學中采用傳統的教學模式，導致學生的學習積極性不高，實際動手能力也比較差，為了讓學生快速的掌握網頁設計和制作的技術，需要采用一些新型的教學方法實施教學，加強學生綜合能力地培養。
一、加強學生創新能力的培養
創新是一個民族的靈魂和動力，同時也是當今社會競爭的核心。學生創新能力的提升和創新意識的增強對于他們以后的發展具有非常重要的作用。網頁設計與制作教學作為新時期教學的主要課程，在教學中培養學生的創新能力有利于促進整體教學的發展。因此，在教學中，可以通過多方面內容加強學生創新能力的培養，首先，可以通過興趣教學法喚醒學生的求知欲望，興趣是能夠推動學生求知的內在力量，學生只有對某一學科充滿興趣，才能夠持續的鉆研該學科知識，從而增強學生的學習效率。在教學中，為了增強學生對網頁設計和制作的興趣，教師可以在上課時準備一些網頁作品，讓學生對作品進行點評，然后提出改造的意見。讓學生在頭腦中對網頁設計有一個模糊的認識，產生做網站的想法，這樣一來，通過教師的指導就能夠讓學生梳理一個成型的站點框架，緊接著引導學生如何做網頁，如何使用工具，學生對這些內容產生興趣，就會帶著教師提出的問題進行主動探索和學習，以此增強學生的學習效果。
除此之外，還可以通過精品賞析的方式增強學生的學習靈感。網頁設計和制作課程是一門藝術和藝術相結合的課程，學生不僅要掌握基本的網頁制作技巧，還要具備欣賞美和創造美的能力。創造的來源是靈感，而靈感的來源則是通過觀察，因此，可以在教學中設計精品賞析的環節，利用上課之前的時間展示作品，向學生展示一些布局合理，設計新穎的精美網頁，讓學生對這些網頁進行觀察和欣賞，這樣不僅可以拓寬學生的視野，同時還能激發學生的創造靈感，為學生以后設計出精美的作品奠定基礎。
二、培養學生的網頁制作綜合能力
在學生掌握網頁設計和制作的基本知識之后，網頁制作綜合能力的培養就顯得非常重要了。即使學生掌握了網頁制作技術，也不一定能夠設計出好的網站，只有提升學生的綜合能力，加強對他們所掌握知識的綜合應用，才能夠設計出一個精美的網站。為此，需要注重學生在實踐方面的能力培養，可以從教學實驗方面入手，將所有的理論教學和實驗教學都安排在計算機機房完成，可以讓學生在學習理論知識之后直接進入實踐探索階段。此外，為了給學生提供更好的實踐機會，可在學校建立計算機基礎教學網，網頁設計和制作教學的老師可以建立自己的教W網站，同時給學生分配相應的網站空間，要求學生建立自己的個人網站主頁，然后將自己的實踐作業上傳到網站空間中，設計的風格和主題不受限制，網站主頁的內容也不做要求，學生可以根據自己的興趣進行網頁的制作，將所學習的網頁制作技術靈活的運用到個人網頁的設計中，做好人個網站。為了讓學生在網站設計中學會創新，教師可以搜集一些具有創意的網站和網頁設計的素材，和學生一起分享，然后與學生所做的網站進行對比，從而提升學生的創新能力。在網站設計中，針對不同的設計環節，學生可以自己發現設計中存在的問題，然后進行分析和解決，對于學生綜合能力的培養具有很大的幫助。
三、加強培養學生的團隊協作能力
現在社會的分工越來越細，很多工作都需要人們協助完成，這樣以來，團隊精神就顯得格外重要。協同合作是團隊精神的核心內容，尊重個人的興趣和成就是團隊協作的基礎。就學生而言，獨立意識較強，現代的學生比較自我，溝通能力也有待提升，這些缺陷顯然不適合學生未來的工作。網頁設計和制作教學是一門實踐性要求較高的課程，同時也對學生的團隊協作能力要求很高。在教學中的綜合實訓中可以選擇采取項目教學法實施教學，將學生分成不同的小組，在自愿的基礎上進行強弱搭配，并且每一個小組推薦一位組長，在老師布置任務之后，組長可以做好小組內的分工，讓學生能各司其職，然后合力完成作品的設計和制作。在作品制作中，如果組內的成員存在意見不同意的現狀，組長可以和其他的成員進行溝通協調，最后達成一致，當組員能夠為同一個目標一起努力時，無論最后的結果如何，學生最后都會有成就感。在這一過程中，有利于提升學生的團隊協作精神，增強學生的溝通能力。
四、結語
網頁設計和制作教學是一門實踐性很強的課程，對于學生的綜合實踐能力以及創新能力的要求較高，因此，在教學中，教師要給根據學生的興趣愛好設計教學內容，并且為學生提供一些優秀的教學作品，讓他們進行賞析，在優秀作品的激勵和教師的引導下，學生的學習興趣會有很大的提升，從而真正的投入到網頁設計和制作的探索當中，熟練的掌握網頁制作方面的技巧，增強學生開發和維護網站的能力，使他們的知識結構不斷得到完善，對于教學效果的提升會起到很大的作用。
參考文獻：
[1]馬玲燕. 《網頁設計與制作》課程的教學實踐研究[D].內蒙古師范大學，2013.
[2]畢惠麗. 淺談網頁設計與制作教學中學生能力的培養[J]. 新課程（上），2012，02：185.
[3]胡曉紅，王麗芬，張景峰. 基于職業能力培養的《網頁設計與制作》教學改革的研究[J]. 電腦知識與技術，2012，20：4953-4956.
【關鍵詞】網頁設計；制作；學生能力；培養
隨著互聯網的發展和普及，網頁設計和制作技術成為網絡時代非常實用的技術，這一課程也成為學校開設的熱門課程。無論是計算機專業的學生還是非計算機專業的學生，網頁制作都成了一門重要的基礎性技術課程。但是很多學校在教學中采用傳統的教學模式，導致學生的學習積極性不高，實際動手能力也比較差，為了讓學生快速的掌握網頁設計和制作的技術，需要采用一些新型的教學方法實施教學，加強學生綜合能力地培養。
1加強學生創新能力的培養
創新是一個民族的靈魂和動力，同時也是當今社會競爭的核心。學生創新能力的提升和創新意識的增強對于他們以后的發展具有非常重要的作用。網頁設計與制作教學作為新時期教學的主要課程，在教學中培養學生的創新能力有利于促進整體教學的發展。因此，在教學中，可以通過多方面內容加強學生創新能力的培養，首先，可以通過興趣教學法喚醒學生的求知欲望，興趣是能夠推動學生求知的內在力量，學生只有對某一學科充滿興趣，才能夠持續的鉆研該學科知識，從而增強學生的學習效率。在教學中，為了增強學生對網頁設計和制作的興趣，教師可以在上課時準備一些網頁作品，讓學生對作品進行點評，然后提出改造的意見。讓學生在頭腦中對網頁設計有一個模糊的認識，產生做網站的想法，這樣一來，通過教師的指導就能夠讓學生梳理一個成型的站點框架，緊接著引導學生如何做網頁，如何使用工具，學生對這些內容產生興趣，就會帶著教師提出的問題進行主動探索和學習，以此增強學生的學習效果。除此之外，還可以通過精品賞析的方式增強學生的學習靈感。網頁設計和制作課程是一門藝術和藝術相結合的課程，學生不僅要掌握基本的網頁制作技巧，還要具備欣賞美和創造美的能力。創造的來源是靈感，而靈感的來源則是通過觀察，因此，可以在教學中設計精品賞析的環節，利用上課之前的時間展示作品，向學生展示一些布局合理，設計新穎的精美網頁，讓學生對這些網頁進行觀察和欣賞，這樣不僅可以拓寬學生的視野，同時還能激發學生的創造靈感，為學生以后設計出精美的作品奠定基礎。
2培養學生的網頁制作綜合能力
在學生掌握網頁設計和制作的基本知識之后，網頁制作綜合能力的培養就顯得非常重要了。即使學生掌握了網頁制作技術，也不一定能夠設計出好的網站，只有提升學生的綜合能力，加強對他們所掌握知識的綜合應用，才能夠設計出一個精美的網站。為此，需要注重學生在實踐方面的能力培養，可以從教學實驗方面入手，將所有的理論教學和實驗教學都安排在計算機機房完成，可以讓學生在學習理論知識之后直接進入實踐探索階段。此外，為了給學生提供更好的實踐機會，可在學校建立計算機基礎教學網，網頁設計和制作教學的老師可以建立自己的教學網站，同時給學生分配相應的網站空間，要求學生建立自己的個人網站主頁，然后將自己的實踐作業上傳到網站空間中，設計的風格和主題不受限制，網站主頁的內容也不做要求，學生可以根據自己的興趣進行網頁的制作，將所學習的網頁制作技術靈活的運用到個人網頁的設計中，做好個人網站。為了讓學生在網站設計中學會創新，教師可以搜集一些具有創意的網站和網頁設計的素材，和學生一起分享，然后與學生所做的網站進行對比，從而提升學生的創新能力。在網站設計中，針對不同的設計環節，學生可以自己發現設計中存在的問題，然后進行分析和解決，對于學生綜合能力的培養具有很大的幫助。
3加強培養學生的團隊協作能力
現在社會的分工越來越細，很多工作都需要人們協助完成，這樣以來，團隊精神就顯得格外重要。協同合作是團隊精神的核心內容，尊重個人的興趣和成就是團隊協作的基礎。就學生而言，獨立意識較強，現代的學生比較自我，溝通能力也有待提升，這些缺陷顯然不適合學生未來的工作。網頁設計和制作教學是一門實踐性要求較高的課程，同時也對學生的團隊協作能力要求很高。在教學中的綜合實訓中可以選擇采取項目教學法實施教學，將學生分成不同的小組，在自愿的基礎上進行強弱搭配，并且每一個小組推薦一位組長，在老師布置任務之后，組長可以做好小組內的分工，讓學生能各司其職，然后合力完成作品的設計和制作。在作品制作中，如果組內的成員存在意見不同意的現狀，組長可以和其他的成員進行溝通協調，最后達成一致，當組員能夠為同一個目標一起努力時，無論最后的結果如何，學生最后都會有成就感。在這一過程中，有利于提升學生的團隊協作精神，增強學生的溝通能力。
4結語
網頁設計和制作教學是一門實踐性很強的課程，對于學生的綜合實踐能力以及創新能力的要求較高，因此，在教學中，教師要給根據學生的興趣愛好設計教學內容，并且為學生提供一些優秀的教學作品，讓他們進行賞析，在優秀作品的激勵和教師的引導下，學生的學習興趣會有很大的提升，從而真正的投入到網頁設計和制作的探索當中，熟練的掌握網頁制作方面的技巧，增強學生開發和維護網站的能力，使他們的知識結構不斷得到完善，對于教學效果的提升會起到很大的作用。
參考文獻:
［1］馬玲燕．《網頁設計與制作》課程的教學實踐研究［D］．呼和浩特:內蒙古師范大學，2013．
［2］畢惠麗．淺談網頁設計與制作教學中學生能力的培養［J］．新課程(上)，2012，02:185．
［3］胡曉紅，王麗芬，張景峰．基于職業能力培養的《網頁設計與制作》教學改革的研究［J］．電腦知識與技術，2012，20:4953～4956．
關鍵詞：網頁藝術設計；網頁設計；視覺設計；藝術化；整體性；全媒體
網頁藝術設計，顧名思義，指的是設計師以網頁設計技術為基礎，對網頁內容進行藝術化、創造性規劃與設計的過程。在網頁藝術設計的發展與應用過程中，設計師所處的時代背景與技術發展情況尤為重要。在當下這樣一個計算機技術為主導的信息時代，網頁藝術設計的發展迎來了前所未有的機遇，其未來的前景也十分值得期待。
1 網頁藝術設計的現狀分析
所謂網頁藝術設計的現狀，指的是網頁在開展藝術化設計的過程中所表現出的一些特征、征象，以及由此對設計本身產生的沖擊。很明顯，作為視覺設計的重要表現形式，網頁藝術設計的應用已經呈現出方興未艾的態勢。
1.1 主題、內容與形式達成和諧的統一
顯然，作為視覺設計的重要表現形式，網頁藝術設計具備其自身的顯著特性。從視覺角度看，網頁藝術設計是一種基于計算機技術而產生的將視聽元素與版式設計結合起來的設計樣式，具備鮮明的表現特征，有別于傳統的網頁設計。當前網頁藝術設計的一個基本現況就是“主題、內容與形式”的“三統一”。首先，網頁藝術設計的主題就是網頁的核心訴求所在，即設計所要表現出的標準與規范。比如，設計師在設計關于醫藥類的網頁時，無論藝術化的形式如何變化，“醫藥”這個主題決定不能變。圍繞“醫藥”主題開展的藝術化加工與設計，才是該種設計的本質。
此外，網頁藝術設計必須追求內容與形式的完美統一，而且不可偏廢。內容與形式的統一是當前網頁藝術設計的基本現狀，也是所有設計師必須遵循的基本原則。在考慮版式設計與視聽元素的結合時，既要追求網頁的“美感”和藝術效果，更加簡明扼要的突出網頁的核心內容，讓訪問者可以快速了解、認知網頁的鮮明主題。總之，主題、內容與形式的完善結合是當前網頁藝術設計的基本現況，也是優秀設計的核心理念。
1.2 網頁整體性與藝術性的搭配是主流
何為網頁的整體性，即在網頁藝術設計的過程中既要遵循網頁設計的基本訴求，將主題凸顯出來，將內容與形式進行完善的搭配；同時，網頁的整體畫面感、形式美要藝術性要合理搭配，形成整體效應。這樣，網頁的基本內容能夠一目了然，同時藝術性和美感也得以提升。因此，從整體角度衡量和操作設計，才是新時期網頁藝術設計的主流。
例如，在版式設計上，要將頁面中各視覺要素作通盤考慮，以周密的組織和精確的定位來獲得頁面的秩序感，即使運用“散”的結構，也是經過深思熟慮之后的決定。所以，從細節看到整體、從版式看到畫面，這才是當下網頁藝術設計的基本態勢，也是優秀設計師必須遵循的準則。主要凸顯出網頁的整體性，其藝術性才能表現出來，網頁的整體水準和質量才能得以提升。總之，規范的運用網頁藝術設計的操作技巧，統籌整體性與藝術性，這顯然是當前網頁藝術設計的主流走向。
1.3 行業的發展催生了設計師的隊伍壯大
很明顯，相比于傳統的網頁設計，網頁藝術設計更加注重網頁的藝術性特征與美感的表現，更能吸引訪問者與受眾的注意，因此格外受到重視。可以看到，單就網頁設計這一個行業來看，運用藝術設計的思維和元素已經是大勢所趨。在行業急劇的變化和發展過程中，網頁藝術設計師的隊伍正在逐漸壯大，這正是依附于網頁藝術設計的蓬勃興起。
不難想象，未來的一段時期內，更多技能過硬、思維活躍和技巧多元的網頁藝術設計師將“登堂入室”，進一步推動網頁藝術設計行業的快速發展，這一點毋庸置疑。
2 網頁藝術設計的發展趨勢探究
前面就網頁藝術設計的發展現況進行了簡要的分析，同時也穿插著對網頁藝術設計的原則、特點進行了剖析。展望未來，網頁藝術設計的發展還是很具生命力和影響力的。
2.1 多種要素的交互與綜合運用
很明顯，未來隨著計算機技術、多媒體技術的綜合、快速發展，網頁藝術設計必然受其波及，產生劇烈的變化。其中，設計過程中多元要素的交互與綜合性運用能夠增加網頁的藝術性，提升網頁的觀感美感度，拓展網頁的輻射力與影響力。未來，網頁藝術化設計中諸如視頻、音頻、新型靜態媒體、流媒體、自媒體等多種要素的綜合交互是基本的趨勢，也必然帶動網頁藝術設計的再一次變革。
2.2 移動互聯網和全媒體的趨向
當前的網頁藝術設計只限于計算機的操作，其發展和輻射的范圍都是很有限的。未來，隨著移動信息技術的快速發展，全媒體時代即將到來，而網頁藝術設計也必然受其影響。所謂的全媒體，也可以理解為綜合性的媒體形式，集中表現為移動信息技術條件下網頁的藝術設計。比如，隨著智能手機、平板電腦等移動智能終端的快速擴張，未來的網頁藝術設計可能在這些設備上就可以完成，并且支持快速的分享與。所以，綜合性媒體形式的多元化應用是未來網頁藝術設計的一個重要方向。
綜上所述，網頁藝術設計是一種技術與藝術完美結合的設計樣式，在當前的網頁設計領域已經得到了廣泛的應用，業已取得了不錯的效果。隨著科學技術的發展，未來的網頁藝術設計一定可以再次煥發新貌，產生巨大的影響力。
參考文獻：
[1] 楊艷霞.網頁藝術設計要素探討[J].山西煤炭管理干部學院學報，2010（02）.
[2] 嚴晨，楊智坤.抽象藝術設計思想在網頁設計中的應用[J].科技與出版，2011（05）.
[3] 鄧懷勇，馬琴.淺析網頁制作中的藝術設計[J].電腦知識與技術，2009（29）.
[4] 林南秀.論網頁與界面設計中藝術的運用[J].重慶電子工程職業學院學報，2009（02）.
關鍵詞： 網頁設計 色彩 配色
計算機技術的發展使信息事業產生了飛躍，互聯網在信息傳播中扮演了無比重要的角色。從最初簡單的純文本界面到如今五光十色的多媒體界面，網頁設計經過短短十多年的發展，已在世界各地產生了廣泛的影響。作為一門與視覺傳達設計密切相關，并具有功能性的設計藝術，網頁設計始終必須遵循形式與功能的統一性和協調性，藝術與技術的高度統一。
網頁設計者在掌握了網站、網頁的構建技術之后，所面臨的關鍵性的問題之一就是網頁的色彩搭配。在五彩繽紛的世界中，色彩是吸引視覺的重要因素。就感覺而言，色彩與形狀相比能夠產生更直接、更強烈的影響。
一、色彩在網頁設計中的地位
現代社會，人們每時每刻都要與色彩打交道，追求時尚、體驗消費已經成為一種文化，體現出人們對高品質生活的追求愈加強烈。當我們步入商場、超市的時候，各類琳瑯滿目的商品，以優美的造型、鮮艷的色彩展現在我們面前，我們在仔細享受那些獨特造型和美妙色彩的商品時，更容易被那些具有強烈色彩的物品所吸引，這便是色彩的作用，因為顏色在現代設計中具有強烈的視覺感召力和表現力。
對于網頁設計來講，其信息內容的有效傳達是通過各種構成要素的設計來實現的。網頁的構成要素包括文字、圖形、圖像、標志、色彩等。其中，色彩的設計尤為重要。從一定意義上說，網頁也是一種藝術品，因為它既要求文字的優美流暢，又要求頁面的新穎、整潔，使色彩可以產生強烈的視覺效果，使頁面更加生動。而且瀏覽者在瀏覽網頁時，留下的第一印象就是頁面的色彩設計，它的效果直接影響到閱讀者的瀏覽興趣。因此，色彩設計在網頁中居于十分重要的位置。
二、網頁色彩搭配的原理
1.色彩的鮮明性。網頁的色彩要鮮明突出，容易引人注目。
2.色彩的獨特性。要有與眾不同的色彩，使得學習者對網頁具有深刻的印象。
3.色彩的合適性。色彩和你表達的內容相適合。如用粉色體現女性主題網頁的柔性。
4.色彩的聯想性。不同色彩會產生不同的聯想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和網頁的內涵相關聯。
當一個網頁作品色調決定了之后，就應該考慮它的主次關系和色彩搭配，而不能平均的使用色彩。色彩面積大小是直接影響色調的重要因素，色彩搭配首先要考慮大面積色彩的安排。決定了畫面中的主色，往往就決定了它的調子和方向，接下來就是要考慮用什么顏色來調配它們之間的比重，并確定調和到什么程度，才能符合自己策劃的畫面的氛圍。得體的色彩表現和藝術處理，能在瀏覽者的視覺中產生奪目的效果。同時，色彩的運用要考慮內容的需要，用不同色彩對比的效果來表達不同內容和思想。
運用相同色系色彩。這種搭配易于使網頁色彩趨于一致，使網頁色彩達到網頁和諧統一的效果，因而是一種風險極小的搭配方法，缺點是容易造成頁面的單調，因此往往利用局部加入對比色來增加變化，如局部使用對比色彩的圖片等。
運用對比或互補色。這種方式可以使色彩關系豐富多樣，諧調、悅目，容易達到活潑、運動的網頁效果，特別適合體現輕松素材的網站，在設計時需要注意主體色彩的運用，以一種或兩種色彩占主導地位，再用相異的色彩作為陪襯、點綴和調節。
使用黑、白、灰的特殊作用。黑、白、灰的對比作用既強烈有效，又微妙而耐人尋味，不能因為它“無彩”而有所忽略，它們在畫面中充當過渡色，能夠以色彩的中性使畫面調和，以自身的單調使畫面豐富，使色彩搭配技術更上一層樓。
三、網頁設計色彩運用的注意事項
1.網頁設計要與網站的色彩相統一
網頁設計要與網站的色彩相統一，是指在整個網站中，色彩的含義始終保持一致，不過多改變，在整個網頁布局中，各區域的背景色，各種按鈕的顏色應基本不變，在同一區域中，顏色的運用更應該保持一致。
2.色彩的運用要與內容主題相統一
網站色彩的運用要與內容主題相統一，是指在設計網頁時，一定要根據內容確定一個色彩基調，如內容活潑的常用鮮艷、亮麗的色調。政治類的常用暖色調，它對于烘托主題思想，表現環境氣氛，構成一定的情境有重要作用。
3.色彩的運用要注重突出內容主體
要通過色彩的對比，使網頁內容主次分明、層次清晰，比如所以淺色背景用深色字，深色背景用淺色字，用鮮艷色彩作為活動中的前景，以冷色，暗色、淺色作為背景等。
四、網頁設計中用色的小技巧
1.對多數網頁特別是有大面積文字的網頁來說，應采用白色或淺色的背景，如淺灰色、淡黃色、淺藍色或淺綠色，文字采用黑色或深顏色；
2.避免在淺色背景使用明亮顏色的文字，因為這樣文字會很難辨認；
3.深顏色背景上使用淺色的文字是一種很好的組合，但是如果不是特別需要，應留作那些需要引起瀏覽者特別注意的小塊區域和場合，比如標題圖形等；
4.使用黑色背景許多時候顯得太沉重，可以考慮使用深灰色、深藍、栗色等；
5.白色、淺灰色、淺藍色、淺綠色、淺褐色很適合作為深色背景上的文字顏色；
6.大的、粗體的文字比常規尺寸的文字更適合使用；較強的顏色，可考慮鮮紅色，橙色，明亮的藍色，但注意不要濫用。
五、結語
網頁色彩設計已經不只是一般的美工，而是綜合了許多其他學科的實踐應用領域，它涉及美學、光學、心理學、教育學和民俗學等多門學科。因此，網頁的色彩設計需要有更高的要求。準確的、有創意的色彩設計，對網站的宣傳推廣有事半功倍的作用。
參考文獻：
［1］索昕煜.網絡界面色彩設計研究［D］.昆明理工大學學報，2005.
人們不斷追求完美，網頁設計亦是如此。它要考慮如何使受眾能更多更高效的接受信息從而使他們對網站留下很好的印象。古往今來，關于形式美的規律被很多藝術家和學者所提出，因此，在網頁設計過程中，設計者必須去研究，并主動地掌握并運用這些規律去發現美。當然，各個時代審美觀念和美學特征不同。在信息高速發展的今天，新的審美需求隨之產生。將網頁設計推向了更高層次的境界，這也是網頁設計發展的必然趨勢。這就要求設計師們遵循條理與反復、變化與統一、均齊與平衡、對比和調和、節奏與韻律等原則，以及對網頁中文字、圖形、色彩的設計的規律，創造優秀的網頁作品。
（一）網頁的內容與形式必須統一和諧
任何設計都有一定的內容和形式，形式與內容的統一是設計網頁的基本原則之一。一方面，內容占據主導地位，是設計存在的基礎，被稱為“設計的靈魂”；另一方面，形式不僅直接影響設計作品的表現，而且也有自身的審美價值，具有相對獨立性。它要兼顧整體效果與細節的視覺效果。如圖1《龍門飛甲》的電影主題網站的設計，網頁視覺效果相當成功。設計師通過考慮電影宣傳效果及網站整體功能要求的同時，在設計形式上賦予變化創新，不僅實現了形式美的表現，也深化了作品的內涵。
（二）主題元素突出
不同類型的網站都有自身所特有的主題，并按照閱讀習慣和視覺心理將主題形象地傳達給觀者，使觀者更好的理解和接受它，并滿足觀者的視覺審美需求。適合主題的需要是網頁設計的前提。將自己的設計思想與網頁的主題精髓相融合，才能展現網頁設計所特有的審美形式。作為主題要素，要想成為觀者的視覺焦點就必須注意編排的位置，從而使觀者產生深刻的視覺印象。
二、創新性的視覺藝術表現在網頁設計中的運用體現
（一）加強網頁整體布局，合理分配版面提高網頁整體美感
在網頁設計中，很重要的一點是，整體一致性不僅存在于某個網頁設計中的每個元素之間，也存在于整個網頁上——一個網頁必須被視為一個完整的單元，這就要求網頁設計在整體的風格，色彩上保持統一。網頁的整體性不僅包括功能上的整體性也包含了形式上的整體性，作為信息傳達的重要載體，需要在特定的時間和空間環境里被人們所理解和接受，從而滿足人們的使用需求。這就要求網頁設計師在進行設計時，首先考慮網頁的整體布局與版面的合理分配。
（二）傳統與創新相結合，合理運用視覺色彩提升視覺沖擊力
色彩作為網頁設計的一個表現元素，不僅具有吸引瀏覽者視覺和維持網站形象的效果，而且具有有效傳遞頁面主題信息的功能。在網頁設計中，我們可能第一眼感知到的設計元素就是色彩了，如果設計色彩過多，用色過于混亂，造成了瀏覽者的視覺疲勞，久而久之容易導致網站瀏覽量的下降，難以達到視覺傳達的目的。如圖2，十二星座系列的官方網店的制作，運用主色調為藍色的夢幻主題，彰顯十二星座的特點，給人以遐想的夢幻空間，突出整個網店的風格和主題。
（三）靈活運用現代科技手段，發揮各大軟件的優勢
做出一個優秀的網頁設計作品，要靈活掌握相關電腦軟件，如：“Photoshop”“DreamWeaver”“Flash”“FireWorks”“AI”等，我們要熟練掌握這些設計工具軟件，做到活學活用，并且就其特有屬性將各種軟件巧妙地結合起來。例如利用多維空間、動畫3D技術等，靜中求動，在二維空間中追尋三維甚至多維的智能化的設計。又如，我們將平面設計軟件Photoshop與動畫軟件Flash軟件進行穿插配合使用，把動畫設計能在時間和空間上將物體進行運動的表現優勢運用在網頁設計制作中，從而使畫面更加生動活潑，賦予強大的表現力和視覺沖擊力。如圖3、4運用平面軟件與動畫軟件相結合穿插的使用，實現了網頁的智能化設計，使畫面更加生動。
（四）突出注重設計技巧，體現網頁風格個性
關鍵詞：網頁設計；公選課；范例教學；
中圖分類號：G642文獻標識碼：A文章編號：1009-3044(2012)03-0638-02
Study and Discussion of the Teaching of the Public Elective Course "Web Design and Production"
LIU Zhi-rong
(School of Computer Science, Guangdong Polytechnic Normal University, Guangzhou 510665, China)
Abstract: Having analyzed the importance of today’s college setting web design and production, we studied and discussed the teaching facility of this course, focusing on the teaching objectives ,teaching content and teaching mode.
Key words: web design; public elective course; example teaching
公選課即公共選修課是高校基于社會對高綜合素質、復合型人才的迫切需要，為實施通識教育，提升大學生的全面素質，面向全校學生開設的跨學科、跨專業的選修課程。公選課的開設有利于學生自主學習、增強學習興趣、提升學生的身心素質、人文素質、科學素質。
當今Internet使全球信息共享成為現實，電子政務、電子商務、網絡文化等等為我們構筑了異彩紛呈的網絡世界，它使人們的生活方式和工作方式發生了巨大變化，網頁現成為人們獲取與信息最為重要的途徑，學習網頁設計與制作既是享用現代信息技術成果的過程，又是應用創新的實踐，網頁設計與制作已成為大學生必備的重要知識與技能。它可開闊學生視野、拓寬學生知識面、訓練學生網絡應用技術能力、美學能力、文字能力、邏輯思維能力，全面提升大學生的素質，將它設為高校的公選課是非常恰當而必要的。
1教學目標分析
《網頁設計與制作》公選課是面向全校非計算機專業學生設置的，由此應定位該課程的教學目標是通過本課程的學習,要求學生能夠理解靜態網站構建、靜態網頁制作的基本原理、基本概念，掌握網站開發流程，掌握網頁設計與制作的方法與技巧，能夠利用當前流行的專業網頁設計工具Fireworks、Flash、Dreamweaver完成靜態網站的構建和網頁設計制作，學完本課程能根據任務需求建立和設計靜態網站，為學生將來開發個人網站或制作一些企事業機構小型宣傳活動網站打下技術基礎，從而提升高校培養技能性人才的知識、能力、素質結構。
2教學設計
公選課面向全校不同專業的學生，教學時如何提高學生對本課程的學習興趣對提高教學質量、實現本課程的教學目標無疑是至關重要的，這就要求教師在施教時要在教學內容設計、教學模式的實施上要做深入探討和研究，將網頁設計與制作的精髓高效地傳授給學生。2.1先修課程
由于在我校一門公選課的課時是32學時，其中授課30學時、考試2學時，這樣為保證在短短的30學時里，學生能較完善地獲得靜態網站構建和網頁設計的基本技能和技巧，前提必須要求學生能較熟練使用windows系統、word軟件等，為此要求選修該課程的學生必須先修過大學《計算機基礎》課程。
2.2教學內容設計
針對網頁設計與制作課程的教學目標，結合公選課學生特點和當今網頁設計實用技術，我在授課時，將教學內容分為兩大模塊，網頁素材設計制作模塊和網頁頁面設計模塊。其中，網頁素材設計制作模塊分為兩個子模塊，一是使用Fireworks設計制作網頁圖形圖像子模塊，二是使用Flash設計制作網頁動畫；網頁頁面設計模塊依據網頁需按一定邏輯關系組織形成網站才能，故該模塊也分為兩個子模塊：一是網站規劃和結構設計模塊，二是網頁設計編輯模塊。詳細見圖1所示。
圖1公選課《網頁設計與制作》課程教學內容模塊圖
網頁設計與制作是實踐性很強的課程，培養學生的實踐能力和創新能力是這門課教學的首要目的，因此，教學內容設置上，實踐教學內容的設置也是教學中非常重要的環節。要緊密配合課堂教學知識點，通過實驗引導和幫助學生加深對課堂所授的知識點的理解和融會貫通，從而激發學生的學習熱情，調動其積極性，提高其分析問題、解決問題能力，同時培養其創新能力。為此設計了以下實訓內容：
實訓1利用Fireworks設計矢量圖像、編輯圖像；實訓2利用Fireworks設計圖像導航欄、logo標志；實訓3利用Flash制作動畫、網站banner；
實訓4規劃站點、利用Dreamweaver建立站點結構；實訓5使用表格排版網頁；實訓6各種超鏈接的建立；實訓7設計制作個人網站。
前6個實訓是為配合課堂所授各知識點而設計的，這6個實訓主要是要循序漸進引導學生掌握課堂知識點，每個實訓由三大部分構成：一是鞏固課堂知識，這部分主要是對教師課堂所授實例讓學生自己再嘗試一遍，加深其對課堂所授知識點的鞏固；二是延伸課堂知識，這部分是教師精選一下能綜合課堂知識點的作品，給出樣式，讓學生去分析如何利用課堂知識點去實現這些作品的設計。三是自我創新和發揮，這部分主要給出用文字描述的一些功能，由學生靈活地綜合所學知識點，發揮其積極性和主動性，自主去創意一些圖像、動畫、網頁，培養學生將分散知識聯系在一起，靈活應用，從而提高他們多角度、多方位思考、分析、解決問題的能力。第7個實訓，設計制作個人網站是讓學生自己搜集資料、綜合這門課所有知識點來進行個人網站開發，從而達到這門課的教學目標，讓學生開發靜態網站的專業技能有個質的飛躍。
32個課時，既要講解知識點，又要做實訓，是遠遠不夠的，所以實訓大部分內容要安排在學生們在課下完成。每次課留有1課時時間，輔導學生做實訓及答疑解惑。
2.3教學模式設計
依據《網頁設計與制作》課程的特點和教學目標，該課程主要以“范例教學”實施較為合適。范例教學是借助精選教材中的示范性材料使學生從個別到一般，掌握帶規律性知識，并發展其能力的一種教學模式。范例教學是引導學生進行創新性學習最好的模式。有些教師在進行網頁設計教學時，往往是不厭其煩地對學生歷數Dreamweaver、Fireworks、Flash軟件下各菜單的功能，學生聽著乏味，而且聽完后所獲得的知識是零散的，仍不會綜合使用這些菜單命令進行創造性的設計。而若采用范例教學法會很好地激發學生學習的興趣和熱情，以興趣貫穿于整個教學過程中，激發學生的學習欲望，引發學生積極思維，培養其創新精神，促進學生探究新知識的積極性，對培養學生自覺、自主以及創造性學習是非常有效的。在《網頁設計與制作》課程教學中，首先教師講清本次課的教學重點和難點，讓學生在頭腦里有個目標，知道這次課主要要掌握哪些知識點，接著給學生展示教師精心設計制作包含本次課主要知識點的綜合實例，這樣先讓學生對課堂知識點有一個感性認識，激發起學生的興趣，再通過對實例實現的關鍵點進行講解，融入相關理論知識和各工具軟件的命令使用，由淺入深地、循序漸進地讓學生在實例的學習中掌握網頁設計與制作的理論知識點和各菜單命令的使用，這樣既可營造寬松的學習環境，又可激發學生的學習興趣；接著教師設計一些綜合應用本次課堂知識點的范
例，只將最后的設計結果展示給學生，讓學生親自去分析、判斷和動手去嘗試實現它，引導學生發現規律的突破點和探索綜合使用課堂知識設計出該范例，達到知識的鞏固和靈活應用；最后，讓學生應用課堂知識，充分發揮自己的主動性、積極性和創造力，自我設計相關圖像、動畫或網頁。其中第三步是重視學生在學習過程中主體意識的發揮、重視學生在學習活動中主觀能動性和創造精神的發揮。這樣三步下來學生對網頁三劍客工具和網頁設計與制作知識的掌握是在一種輕松愉快的環境下學會，并能靈活應用它們進行有創意性的Web圖像設計、Flas設計和網頁設計。
教師施教時，要時刻把握范例教學的關鍵是教師設計的課堂范例要具有典型性、針對性，能涵蓋一次課的重要知識點，能引導學生發現規律的突破點，有力地促進學生從知識到能力的轉化，使學習變得更有效。
3小結
只有不斷優化教學內容、改進教學手段和教學方法，才能提高公選課教學質量，使學生在短短32學時內掌握網頁設計與制作的基本實用技術，提高其實踐能力和創新能力，開闊其知識視野、擴大知識面，使高校的公選課能真正成為培養適應社會復合型人才的實用課程之一。
參考文獻：
[1]吳才章.高校公選課建設與管理中存在的問題及對策[J].河南工業大學學報:社會科學版,2009,5(3):155-157.
[2]王秀莉,陳瓊,寧正元.網頁設計與制作[M].北京:清華大學出版社,2009.
第一階段：網頁創意風格定位階段
一：網頁設計為何需要創意風格定位
設計網頁前要注意，設計一個網站前首先需要了解是為什么東西設計網頁。每個網站都會有自己的風格。風格主要按該網頁展示內容設定，因此需要了解網站展示的內容來確定風格。
二：網頁設計如何來確定創意風格
網頁最常見的大致有辦公行政、服務、各式企業、純商業網站或產品推廣網站四大類。辦公行政展現的是嚴謹、大方、內容為本；服務型的是以浪漫、溫馨為主；各類企業一般都是采取清新、簡潔、大方（跟辦公行政類有點像，但形式上沒有那么嚴謹，跟公司發展路線有關）；純商業網站或產品推廣網站則是抒情活潑的風格，畫面上或許會大量采用圖畫。
第二階段：網頁主色調選擇階段
一：主色調含義跟作用
（一）：主色調作用
一個網頁必有其主色調，確認風格后，就可挑主色調，一般一個網站只有一個主色調，這樣好控制顏色搭配，若主色調多，頁面容易混亂。
為什么設計師一開始設計就要確定主色調呢？如何理解主色調的作用？從視覺設計角度打個比方，一個企業往往會設計一個logo代表它，logo設計越出色、越適合企業形象，就證明它的代表性很強。例，看到銅錢，也許會想到工商銀行logo也是銅錢的樣子。它會不知不覺的打廣告。經調查研究，主色調可分為兩種形式，一是明確純色的主色，二是有明確顏色變化方向的色調。
（二）：有明確純色的主色含義
網頁中有明確純色的主色一般代表性強，視覺性強。例如淘寶，它的主色便是橙色了。橙色就成為淘寶的代表色了，看到淘寶我們便能想到橙色，反之也是如此。這便是視覺設計的效果了。
（三）：有明確顏色變化方向色調的主色含義
這種主色調不一定有第一種那么明確，反而更容易產生朦朧美，它也許是一張有明確顏色主色調的背景圖片，也許是漸變色，或是明度變換后運用在網頁各處，在整體上形成一種主色調。兩者都能統一網頁的風格，烘托主題。
二：主色選擇步驟
（一）：主色選擇步驟概論
選擇主色有多種方法，可以從不同的角度選擇主色。或是從色彩基本構成要素（色相、明度、純度）著手。或是從色調著手。
經調查研究，最上手的方法是先從色調入手，選中色調后，再考慮色階、明度。此法挑主色的范圍可以簡單的一層層縮小，不會因為顏色范圍太大不知所措。純度又指飽和度，簡單理解為飽和度低，顏色暗沉；飽和度高，顏色鮮艷。一般純商業網站或產品推廣網站會使用較鮮艷的顏色吸引顧客。
（一）：色調選擇
色調有冷暖之分，冷色調多為安靜、清新、簡潔；暖色調多為活潑、視覺沖擊性強。例，環保型大多為綠色系，企業型大多為藍、綠色，許多會選擇跟logo搭配顏色。在確認啟用主色調之后，開始挑色階、明度。
（二）：色階選擇
色階表示圖像亮度強弱的指數標準，即顏色深淺。色彩千變萬化，即使選擇同一色調，其顏色的深淺所體現的視覺效果可能有截然相反的結果。同一色調，顏色深，一般會有沉穩、嚴肅的效果；顏色淺，一般會有一種鮮活的效果。
（三）：明度選擇
色彩的明度指的是色彩的明暗程度。因明度分為不同色系之間跟同一色系之間，為了不搞混，就從同一色系中的色彩明度選擇。例，暖色調中紅色系，粉紅色稍亮，紫紅色稍暗；冷色調中天藍稍亮，深藍稍暗。看起來純度明度相似，但明度跟純度卻不一定成正比。
第三階段：網頁配色選擇階段
一：配色的含義與作用
確認主色后，開始挑配色。一個網頁不可能只有一種顏色，網頁中有文字、logo、小圖標、導航欄、背景等方面需要配色。在避免配色搶奪視覺效果下，適當運用配色，保持視覺的平衡、色調統一，主色占大部分，配色占小部分。為了讓網頁更美觀，我們可以把視覺設計中學到的配色技巧運用到網頁設計中。
二：配色選擇方法
（一）：配色選擇方法
配色可以通過色相配色、明度配色、純度配色、強調冷暖色傾向配色、冷暖協調的配色。不同配色方法所呈現的視覺效果也不同。
（二）：色相配色
色相配色中單暖色調的配色，利用紅、橙、黃在畫面中占優勢地位，會給人溫暖感，有積極效果；在色相配色中單冷色調的配色，利用青、藍、紫的冷色在畫面中占優勢地位，會給人寒冷感，有鎮靜、安神的效果。
（三）：明度配色
色彩的明度能夠體現色彩的輕重感，明度配色能很好地表現網頁空間感。例，黑、白、灰的配色。明度配色也可以運用到導航欄上。選擇一種與主色適配的顏色作為導航欄背景色。因導航欄分多個模塊，每個模塊都可點擊進入下個頁面。在點擊的過程中，為了突出點擊的模塊，增添動感跟空間感，一般會在鼠標放在模塊上面的同時更換同一色系的明度。因需要保持網頁整體色調的統一，顏色不能隨意跟換，被更換的顏色大多與導航欄的顏色保持統一，在明度上進行變換。
（四）：純度配色
純度配色的作用是能簡單明了的看出網頁主題、重點。因為純度的對比會形成視覺焦點。如網頁產品展示圖片，產品是高純度比較鮮艷的顏色，背景一般使用低純度顏色。那么在人體視覺上很容易能忽略背景，更能突出產品。
（五）：強調冷暖色傾向的配色
如果一個網頁中把冷暖色調放在一起，冷暖對比則會比類似色的對比視覺效果更強烈，也會讓畫面更加豐富。當然，要注意冷暖色在網頁中的主次地位。小面積使用鮮艷的冷暖色對比色相，即便整體顏色偏素雅，也可以給人生機勃勃的感覺。例如小圖標的顏色運用，可參照此法。導航欄中，為了使畫面更加活潑，也可運用此法，鼠標放到模塊上，模塊的背景顏色與原來的顏色可進行冷暖對比。
（六）：冷暖協調的配色
冷暖協調的配色會給人較強的韻律感，穩定的感覺，此法雖然沒有以上三種方法的視覺沖擊力強，但它的平衡感最穩定，因此也是讓人看著最舒服的配色。黑色跟高純度色彩放一起，在視覺上讓高純度的色彩顯得更亮麗。因此在網頁設計上文字大多用黑色襯托其他顏色的亮麗。白色跟高純度色彩同一畫面時，可以在視覺上提高純色的明度，且會有透氣、舒暢的感覺，不會很沉悶。導航欄上，若背景色較深，黑色的文字無法很好的顯示，就可以運用白色文字，簡單又透氣。
在研究這個課題的過程中，主要通過了網頁的創意風格定位階段、網頁的主色選擇階段、網頁的配色選擇階段這三個步驟，把視覺傳達中的色彩技巧運用在網頁設計中，解釋了如何進行網頁創意風格定位，解釋了為何要選擇網頁的主色以及如何選擇主色，解釋了如何在網頁中進行配色。
參考文獻：
[1]曹軍，王詩彥，劉志農，陳德潤，色彩形態構成[M]，中國民族攝影藝術出版社。
[2]曹軍，王詩彥，劉志農，陳德潤，色彩形態構成[M]，中國民族攝影藝術出版社。
[3]張曉景，設計師專業色譜與配色設計[M]，電子工業出版社，第1版（2011年10月1日）
關鍵詞：網頁設計；教學改革；案例教學；項目驅動
基金項目：梧州學院2010年院級教改項目“項目驅動式案例教學法在電子商務專業“動態網頁設計”教學中的應用”
隨著互聯網的推廣和普及，上網的人數越來越多，網頁是互聯網上信息傳播的主要方式，因此《網頁設計與制作》課程成為很多專業的基礎課程。網頁設計是一門很有創造性的課程，艱澀的學習過程和設計出的精美且具有創意的網頁，讓同學對這門課既畏懼又喜愛。我希望通過對以往一些教學過程的改革，使該門課程的學習過程也變得有意義，能吸引學生的興趣，充分調動學生的積極性和創造性。
一、以往教學中存在的問題
在以往的教學中存在幾點不足之處：1.教學內容的安排。課程主要內容是講授網頁三劍客，講解網頁設計工具的使用，大部分時間是教學生如何做一個網頁，很少有時間教學生如何把一個網頁做好；2.教材。教材是學生學習知識的主要來源，但是現在的很多教材都是泛泛而談，說得不明白也不錯誤，學生不僅不能從中學到知識，反而越來越糊涂：3.考核方式。之前主要是筆試，對于網頁設計這類操作性很強的課程，筆試并不能反映出學生的真實水平。
二、對教學內容改革的想法
網頁設計是一門實踐性和操作性很強的課程，在課程設計，教學內容，教學方法上，應該以調動學生的興趣、實踐操作能力和創造能力為主，以理論為輔；應該以傳達給學生設計思路，創意為主，以技術講解為輔；在這樣的原則下，對教學內容改革作如下設計：
(一)第一階段，案例教學法，以常用網站實例為例進行知識點的講解。網頁設計課程的入門階段主要是一些知識點和技能技巧的學習，如果只是把這些知識點簡單的介紹給學生，不會吸起學生的興趣。所以應該改變一下教學方法。首先給同學看一下該知識點在一個具體網站應用的效果，再來告訴他們該如何實現這樣的效果。比如，講解這一對標簽，先讓同學看新浪網站上的滾動新聞，或者一些個人網站的文字圖片等的滾動效果，這樣先激發學生對這個知識的興趣，再告訴他們怎么實現這樣的效果，學生看到這樣的漂亮效果，興趣和積極性都調動起來了，就愿意主動地學習了。
(二)第二階段，臨摹優秀網站設計。在書法的學習中，有一個臨摹的過程，在網頁設計中，也可以使用此方法來練習和提高。在掌握了網站的常用技術之后，就需要開始設計網站，如果現在就直接給學生一個主題，讓他們根據該主題來設計網頁，學生會感到不知如何著手，第一階段的知識只能讓他們拼湊出一個網頁，而對整個網頁該怎樣設計，如何才能讓網頁精美且與主題切合，學生是無法做到的。所以需要他們多學別人的網頁，臨摹別人的網頁，在臨摹的過程中，學會如何設計網頁，學習網頁的風格，網頁的配色，網頁的布局，以及如何審美網頁。經過大量這樣的臨摹練習之后，才能學到不同的網頁設計風格，并把別人有價值的東西轉化為自己的知識，為以后的創作提供基礎。通過該階段的鍛煉，使學生能夠根據一個主題，利用自己的知識和創意，完整的設計出一個網頁。
(三)第三階段，項目驅動教學法。經過前兩個階段的學習和鍛煉，學生對網頁設計的基礎知識和技能，對網頁設計風格和布局有了比較全面的了解。這個時候就需要給他們一些具體的實踐機會，讓他們在實踐中，使自己的技能、水平得到錘煉和提升。要實現真正的項目驅動教學法，需要找到一些實際的網站項目讓學生去實踐。可以將學校和系部的一些網站在老師的指導下讓學生來完成；也可以在外面找一些公司的網站讓學生來做。通過這樣的方式，可以讓學生在多方面獲得益處：1.可以讓學生的知識學有所用，設計出的網站被社會認可會，止學生體會的學習快樂，從而給他們提供新的學習動力；2.可以讓學生學到給多的知識，課堂上的內容是有限的，實際的網站制作過程，會讓學生在實踐中學習更多的有用知識；3.可以鍛煉學生的團體意識，使他們認識到：網站的設計和開發不是一個人就能夠完成的，他需要一個團隊的共同努力，需要團隊之間的相互配合和脅作。所以，通過項目驅動教學，能使學生得以實踐，在多方面得到提高和鍛煉。
三、對教材選取和考核方式的想法
(一)教材的選取。網頁設計課程設計的內容主要包括四方面：HTML、Dreamweaver、Fireworks、Flash。現在的教材中，講解得不夠詳細，只是泛泛而談。這就給學生的學習帶來很多困擾。可以從兩個方面彌補這個問題：一是給學生推薦好的參考書，并告知學生其中的重點和非重點，讓學生學習有的放矢；二是編寫適合自己教學需要的教材。
(二)考核方式的改革。該課程的考核內容應以實踐操作為主。因此將考核方式定為考查，給出一定范圍的主題，留給學生足夠的時間完成作品的設計和制作，最后上交制作好的作品即可。留給學生足夠的時間和發揮空間，可以使學生充分發揮他們的想象力和所學知識。這樣的一種考核方式經過幾屆學生的實踐，受到同學的好評，并且出現了相當一部分好的作品。
經過幾年的教學實踐和教學改革探索，以上的一些教學思路已經過教學實踐驗證，這樣的教學方式受到學生的歡迎。該教學改革能為學生打下牢固的基礎，也能夠更好的調動學生的積極性和創造性，培養他們的團隊意識。教學改革是一個不斷進行的過程，以后也要根據教學實踐，在教學改革上做出更多有益的嘗試。
參考文獻
[1]李淑珍，李曉賓《網頁設計與制作》課程在不同階段的不同教學方法探討[J].軟件導刊2008(4)：138-139
在我國，視覺傳達教育起步較晚，但是發展迅速，其人才培養和教育模式倍受社會關注。目前很多高校在藝術類網頁設計課程的教學上存在兩種主要現象：一是重設計、輕制作；二是重軟件、輕藝術。第一種培養出的學生一般只注重靜態頁面的視覺效果，對網站的動態更新關注較少，不利于網頁后期維護；第二種培養出的學生側重于Dreamweaver、Flash等軟件的操作，對網頁的版式、VI形象等關注較少，制作出的網頁往往缺乏個性、藝術表現力不強。因此，對視覺傳達專業的網頁設計課程的教學改革勢在必行。
二、課程教學目標的重新確定
我們都知道，一門學科的課程目標通常決定了該學科的最終導向，它不僅能為教師傳授正確的學科理念提供依據，同時也給學生指明正確的課程學習方向。因此，視覺傳達專業網頁設計課程改革的首要環節就是對該課程教學目標的重新確立。眾所周知，高等教育培養出來的人才最終要服務于社會，社會的需求決定了該學科的教學內容和教學目標。隨著科技的進步，時代的發展，不同時期對網頁設計人員的需求也是不同的。通過市場調研，我發現目前社會上網站分工越來越細，招聘的相關崗位大體分為三類：第一類為前臺美工，以視覺傳達專業為主，以網站的形象塑造和界面美化為崗位內容；第二類為網站后臺服務，多以h7V5數據庫等做交互型網站的，以計算機專業為主；第三類就是兩者都要具備的全才網頁設計師，是具有技術背景和多年實戰經驗的創意人才。由此我們可以確定視覺傳達專業培養出來的網頁設計人才的崗位定位應是網頁美工師，他應該具有兩種專業素質：一是掌握網頁設計的基本要素和美學知識相結合的方法與技巧；二是懂得簡單機算計軟件（PS、Dreamweaver、Flash）的操作，便于在制作網頁界面時考慮到后臺維護的便利。而“藝術設計教育的人才培養目標是：培養綜合素質高、創造能力強的高級應用型設計人才”。所以該課程教學目標應該是培養具有以上兩種專業綜合素質的、創造能力強的高級網絡應用型設計人才。新的培養目標確定后，該課程的教學內容應該在此基礎上重新調整。
三、課程內容的調整
視覺傳達專業網頁設計課程教學內容應該為教學目標服務，知識結構要合理，應注意知識點之間的交叉及有機結合，同時也要有效地培養學生的創新性思維及獨立分析、解決問題的能力。基于此，新的教學內容調整為兩大板塊：理論課程內容和實踐課程內容。
1.理論課程內容
理論課程內容在課程編排中為最先講授內容，以教師PPT演示傳授為主，學生討論互動為輔，課時安排為總學時的四分之一。在教學過程中又分為兩個環節來實現：（1）第一次課的設計把第一次課設置為課程概述，主要對網頁設計課程的教學特點、教學內容、教學目的、教學重點和難點加以通篇介紹，對學生說明課程安排和考核要求，并通過簡單上機實例操作來提高學生學習興趣，進而引入網頁基本理論教學環節。（2）網頁基本理論學習網頁基本理論學習包含三個知識板塊：網頁設計的基本要素、網頁界面的版式設計、網頁VI形象的美學塑造。我們知道每個設計門類都有自己獨特的構成元素，這些不同的構成元素形成了該門類不同于別的門類的獨特的藝術魅力。了解和掌握這些構成元素的特點和作用，有助于我們更好地進行設計工作。網頁構成元素按功能和形式劃分為兩大類型，按功能劃分為頁眉和頁腳、背景與底紋、按鈕與控件、導航器和目錄、功能板塊和廣告位；按形式分為文字、圖片、色彩、多媒體和超級鏈接。網頁設計中的構成語言不同于傳統平面設計，它們之間存在很大差異，例如網頁設計中的顏色是光色，是標準的RGB色彩，而傳統平面設計中的顏色在輸出過程中是以印刷色CMYK形式出現的；傳統的平面設計不用考慮網絡傳輸的因素，而網頁設計中的構成元素應考慮在不影響顯示效果的前題下，盡量壓縮文件大小，便于網頁文件的上傳與下載；又如動畫、音頻等多媒體語言在傳統平面設計中不用考慮，而在網頁設計中它們是給網頁增加活力的重要手段因此，教師在此板塊教學中要選擇大量實例進行比較，不但要指出網頁設計各構成元素的特點和作用，而且還應指出與平面設計中相對應元素的異同之處，便于學生區別學習。網頁界面的版式設計不同于傳統平面設計的版式設計。平面印刷品有著各自固定的紙張大小或裁切規格，而網頁界面則不然，它的顯示尺寸受到電腦顯示器的限制，不同尺寸的顯示器顯示的網頁界面是有區別的。除此以外，它的最終顯示控制權其實掌握在瀏覽者手中。如果過分注重網頁界面版式設計的視覺完整性，就不能顧及網頁設計元素的靈活性。所以，教師在此板塊教學中應該強調網頁界面版式的變化性，同時也要強調首頁與內頁版式的連貫性，要求學生在設計中注意網頁界面版式完整性與靈活性的關系。網頁設計是VI設計的一個重要組成部分，是企業視覺形象執行標準的延續和拓展。和所有的線下公司一樣，一個好的網站也需要依助于VI設計。準確的、有創意的VI設計，有利于樹立網站形象，使其在眾多同類網站中脫穎而出，增加瀏覽者的瀏覽欲望和瀏覽記憶，對該企業的推廣和宣傳也能起到促進作用。網頁設計課程上引入VI設計概念，教師應該保持教學的延續性，要求學生在進行網頁設計的同時，將VI理念應用到網頁界面中。網頁設計應主題突出、富有創意，色彩搭配應協調統一，具有強烈的視覺沖擊力，從網頁LOGO到色彩運用均要突出企業視覺形象。
2.實踐課程內容
視覺傳達教育的目的就是培養出創造能力強的高級應用型設計人才。應用性人才的培養模式里實踐性課程比例要大，網頁設計課程也是這樣，理論是基礎，實踐是靈魂。所以實踐課程內容在課程編排中為比重最大的內容，課時安排為總學時的四分之三。實踐課程包含軟件操作板塊、簡單代碼學習板塊和實際案例制作板塊三個知識點。此部分內容在教學過程中又分為兩個環節來實現：
（1）軟件操作和簡單代碼學習板塊的教學
此部分教學為計算機軟件學習階段，Fireworks、Dreamweaver、Flash是傳統的網頁設計軟件學習內容，根據當今互聯網開放性的特點和視覺傳達學生對現有軟件知識掌握的情況（PS是基本功，是學生都已掌握的軟件），把傳統軟件教學內容更改為“網頁新三劍客”（PS+Dreamweaver+Flash）的學習。簡單地說，就是用PS制作靜態網頁界面和切圖，并處理圖片，用Dreamweaver布局和超級鏈接，用Flash做特效。而這三個軟件知識板塊里面教學重點依次為Dreamweaver、Flash、PS。在軟件教學環節，教師可借助類似“紅蜘蛛”一樣的網絡教學平臺和學生互動教學。學生可根據老師在線傳送的素材臨摹教師的操作，教師也可以在線觀察學生執行情況個別輔導。同時根據藝術學生英語和數學水平普遍較低的特點，在教學中應該增加一些簡單代碼知識，介紹一些常用的代碼語言及Html標簽和CSS規則的使用方法，便于優化網頁樣式，使整個網站風格統一，也便于對已有的網頁模板進行更改，進而大大提高學生的崗位實踐技能。
（2）實際案例制作教學
此板塊教學采用以項目為載體、以任務為驅動的教學方法。教師可以引入實際項目或者虛擬項目，提出項目名稱和項目要求，輔導學生進行實際案例設計。實際案例制作教學應充分強調實用性和自主性，教學環節可分三步進行。首先是教師示范環節：教師要根據實例要求演示創作過程，從網站創意草圖到制作靜態界面；從創建站點到Dreamweaver網頁布局，創建超級鏈接；從美化網頁樣式，到制作網頁特效，利用簡單的代碼語言和Flas實現動態、實時、交互的頁面效果教師應將每個創作環節一一展示，并將知識點設計應用到整個案例實際操作中去，做到知識點與案例有效融合，案例之間能承上啟下，有機銜接。其次為學生設計環節：學生可以根據老師的思路對經典案例進行學習和分析，依據實際任務的要求，進行網頁設計實際操作。其間遇到問題學生可以相互討論，或求助教師解決難題。在整個講課過程中，教師指導為輔，學生對案例進行學習和分析為主，充分發揮學生的主觀能動性。要求學生充分發揮創意性思維，從被動學習轉換為為了實現項目目標而進行多渠道主動學習，提高學生學習效率，縮短和實際崗位間的操作差距，進而為走向社會奠定基礎。最后為展示評價環節：學生對自己的作品公開演示匯報，并鼓勵別的學生對其作品評價，找出優劣點，好的保留，差的改正。教師根據作品質量和學生評價對作品打分，以此作為該生整門課程成績的一個依據。
四、結語
