第一篇：網頁設計下的圖像設計軟件應用的論文

［摘要］文章對圖像處理技術進行了簡單的描述，并對圖像的格式進行簡單的介紹。并在這個基礎上以Photo-shop軟件為例，介紹了其在圖形處理過程中的運用，以供參考。

［關鍵詞］網頁設計;圖像設計軟件;應用

新世紀，電子科學技術發展迅猛，相應的計算機領域的圖像處理技術也有了進一步的發展。社會文化的發展導致人們對于網頁質量的要求也水漲船高，而圖像處理技術的發展更促進了網頁設計的行業的發展。在現在網頁設計中，需要處理各種各樣的圖像，也需要對各種各樣的圖像進行處理，以此來滿足網頁設計的各種需求。可以說，對于網頁制作來說，現代化的圖像處理技術對于其提升效率有著重要作用。

一、關于圖像處理技術的簡述

互聯網的飛速發展，人們對于網頁設計的要求也越來越高。對圖像進行處理，不僅能提升網頁制作的工作效率，也可以提升整個網頁的美感，提升網站的訪問量，此外，高質量的圖像處理技術，對于提升整個網站的品質也有著重要作用。可以說，圖像處理技術的發展，在一定程度上對網頁設計和開發提供了很大的便利性。然而，社會在發展，市場競爭也日益加劇，相應的瀏覽者對網頁設計的要求也隨之提高。在網頁設計中，圖像具有其獨特的優勢和特點，不僅能完整、充分地展現客觀事物，還能全面體現設計者的設計觀念及意圖。對于網頁設計的工作者來說，在網頁制作的過程中運用圖像處理技術已經成其工作中的一部分。其可以利用一系列的圖像處理軟件完成對圖像的編輯和優化，達到自己的需求。具體的來說，圖像處理包含了包括對其進行層次、顏色以及樣式的編輯和修改等等。根據現在的實際情況來看，在網頁制作的過程中，其主要運用的處理軟件是Photoshop、coreldraw以及火狐。這幾個軟件運用的頻率比較高，支持各種圖像的處理。由于社會的發展和人們對于文化以及審美需求的提高，現在人們對于網頁留言的體驗要求也越來越高。從目前的情況來看，用戶更傾向于瀏覽一些圖文并茂的網頁，單純的文本介紹很難抓住用戶的要求。為了滿足用戶的需求，圖像處理技術便應運而生。圖像處理技術在網頁設計中的應用，創新了網頁設計的途徑，同時也推進了網頁設計及制作的發展進程。自上個世紀末開始，社會的網絡化就開始了突飛猛進的發展。而計算機圖像處理技術憑借其自身的技術性和專業性，更得到了很大程度的發展。對于圖像處理技術來說，其實質就是通過計算機的媒介，以相關的軟件為載體，并且運用相關的技術，在原有的圖像的基礎之上再次進行二次加工，已達到使用者需求的一種圖像處理方式。從我國的發展來看，圖像處理技術最早是應用在航天事業上的，通過相關軟件的處理，航天人員將航天器拍攝到的圖像進行特殊的處理，并在這個基礎上轉化為數字圖像，以滿足航天部門的使用要求。基于計算機技術的迅速發展，此種圖像處理技術的應用也逐漸深入到網頁設計中。

二、網頁設計中的圖像

當前，網頁設計的一個主流的方向就是將技術與藝術相結合。網頁設計過程中對圖像進行處理已成為現階段網頁制作者一個重要的環節。具體的來說，網頁設計中遇到的圖像主要包括以下幾種類型:

(一)GIF

這種格式的圖片最大的優點就是可以對其進行無損的壓縮處理，而且這種格式的圖像顏色上限特別大，最多可以達到兩百多種顏色。此外，這種格式的圖像還具備支持動態畫面，適用范圍廣的優點。其在卡通動漫的設計以及美術素描方面都可以實現應用，可以說，從目前的情況來看，這種格式的圖像是最適合的格式，只要對其稍加處理就可以直接進行應用。

(二)JPEG格式的圖片

這種格式的圖片中文全稱為聯合靜態圖形專家組，這種格式的圖片由于是有損壓縮，其壓縮比往往比較高，最大的好處就是可以節省大量的硬盤空間。對于一般的普通用戶來說，這樣的有損壓縮是不影響其使用的，但是對一些對畫面要求比較高的用戶來說則達不到其要求。而且這種格式的圖片不支持透明效果的功能，在動態的圖像中也不能使用，應用的范圍相對較小。所以，對于這種格式的圖像來說，其一般很少在數據中直接使用，一般都是要經過ps等軟件處理后才使用。

(三)PNG格式

翻譯成中文網絡圖形。可以說，這種格式的圖形是隨著網頁技術的發展而出現的一種新的圖像格式。從其格式來看，PNG格式的圖像具備上述兩種格式的優點，同時還具有一些自身的優點，在正常情況下，這種格式的圖片彩色可以達到一千多萬種。而且其還具有可壓縮的算法，可以直接在數據傳輸中進行應用。因此，隨著網頁開發技術的發展，這種格式的圖片將是設計師在制作網頁中最青睞的格式，企業將會成為網頁制作過程中主流的一種圖像格式。

三、圖像處理技術在網頁設計中的應用———以PS為例

對于網頁設計者來說，尤其是涉及到圖像處理的工作，PS是一個非常實用的工具，在現在的網頁制作中發揮著重要的作用。

(一)PS在網頁布局上的應用

對于網頁制作來說，頁面布局在其中起到的是整體調整以及規劃的作用。這項工作的好壞與網頁的整體效果有著密切的聯系。隨著用戶對于網頁體驗要求的提升，整個網頁的布局也逐漸的標準、規范起來。可以說，在網頁整體的設計中，圖像的排版和整體的布局直接影響著整個網頁的和諧度。具體到PS軟件來說，我們首先可以運用這個軟件來對網頁的布局進行調整，這樣做的目的是為了減少網頁制作完后再去對圖片進行修改，浪費精力。以實際情況為例:當設計者在接到一個網頁制作的訂單后，為了減少工作的難度，節省不必要的溝通成本，設計者可以首先把網頁設計的理念以及模板提供給客戶，并把制作的方向向客戶解釋清楚，然后再根據用戶反饋的意見進行修改。這個時候，網頁設計者就可以利用PS這個軟件首先為客戶制作出基本的布局和模板，然后可以利用其保存的PSD文件在設計的過程中隨時調整布局，最終根據客戶的要求完成效果圖。

(二)網頁動畫上PS的應用

隨著社會的發展，有些用戶會要求在網頁的制作過程中加上動畫的效果。例如在網頁部分加上企業自身的宣傳視頻，放在網頁上。但是現在的很多視頻大多缺乏完善性。這個時候PS就派上用場了，網頁制作者可以利用PS軟件來對視頻與網頁的兼容性進行處理。這在一些FLASH動畫中體現的尤為明顯。由于客戶提供的圖片的規格大多都是不一樣的，例如尺寸、分辨率或者色彩方面都不是很統一，要想保證整個Flash動畫的播放的流暢性和和諧型性，網頁設計者需要將這些圖片在格式、色彩等方面進行處理，這樣才能保證Flash動畫播放的兼容性。一般的，經過ps處理后的圖片，在制作動畫短片的過程中，其難度會相對較低。

(三)ps功能中特效的應用

我們都知道用于網頁制作的軟件是Dreamweaver，一般將其稱為DW。對于這個網頁制作的軟件來說，其處理圖像的功能還不是特別強大，只能對圖像做一些最基本的技術處理，很難達到設計者的使用要求。在面對一些特殊要求的時候，還得使用ps這個軟件。尤其是在特效的制作方面，ps的處理功能更為強大。其不管是文字特效還是圖像特效，都可以輕松地完成。舉個最簡單的例子，現在很多網頁的head部分往往需要插入一些特殊的字體，以此來吸引用戶的眼球，但是如果是運用DW這個軟件的話，其是無法實現這個效果的，這種情況下只能運用ps來對其進行處理，包括文本字體的顏色以及大小等，其在整體上也得符合網頁的布局。當然，這個只是PS最基本的一些功能，其在特效上還有很多功能對用戶進行滿足，例如常見的變化背景以及對網站的主題顏色進行定期更換等等。

四、關于PS應用的一些技巧

(一)圖像的截取以及大小的控制

在網頁設計的過程中，設計者往往不會將一張圖片完整的進行應用，很多時候只需要截取圖片的部分就可以滿足自身的設計需求。對于圖像的截取方法是多種多樣的，但是PS這個軟件使用起來更為便捷，截取的精準度也更高。ps不僅為使用者提供了多種形狀的截取，還可以根據使用者自身的需要隨意地對截取的范圍進行調整，使用起來非常的方便、快捷，其隨后保存的圖像格式也可以自行調整，操作起來非常簡便。

(二)圖像融合的處理

在網頁設計的過程中，很多時候涉及到圖片的融合或者需要將不同的照片進行合并，這種效果在PS這個軟件中也是很容易實現的。使用者只需要將需要合并的圖片拖拽到需要合并的圖像中，然后再對合成的圖片進行顏色和亮度進行調節，接著在拖進圖像的圖層中建立一個新的蒙版，然后在利用漸變這個工具將圖片結合處的黑白漸變的效果，圖片的合成就完成了，并且其處理出來的效果比一般的軟件都要好，而ps這個軟件也正是因為功能的強大，其在圖像處理的時候才得以大范圍的應用。

(三)網站logo的制作

一個好的網站做得如何，有一個引人注目的logo是必不可少的。一定意義上來講，一個好的logo是整個網站的標志，不僅能體現出整個網站的含義，更能讓閱覽者加深印象，讓其感受到網站的設計理念。在ps軟件中，其制作logo的具體步驟是:首先在畫布上畫出大體的輪廓，然后用“轉換點的工具”對需要進行弧度調整的地方進行調整，接著再按下ctrl+enter鍵，對選擇的區域進行填充，這樣，一個logo便制作完成了。當然，這里只是對ps這個軟件中最常用到的軟件進行了簡單的介紹，實際上這個軟件的功能是非常強大的，網頁設計者可以根據自身的需要來進行使用，現在市面上也有很多關于這個軟件的使用教材，設計者可以在使用的過程中邊實踐邊學習，以此來提升自身的處理圖像的水平。總的來說，對于網頁制作來說，圖像處理技術的提升對其影響還是非常大的。從整體上看，其不僅可以提升圖片的和諧度和美感，也可以在整體的構造上進行調整，以此來彰顯整個網站品質，提升網頁對客戶的吸引力，進而提升網站的點擊率。其次，圖像處理技術還可以起到規范網頁制作的標準的作用，使其在規范上達到要求，拒絕由于其他因素對網頁進行的干擾因素，保障搜索質量，當用戶通過搜索引擎電極網頁時，優質的圖像可以提高下載速度，提高網頁流暢性，不僅可以快速呈現給用戶，而且還可吸引用戶點擊，提高網頁的競爭排名。基于圖像處理技術的應用，提高網頁制作的效率，這將是在網頁設計開發的一個主流的方向。具體到photoshop來說，其是一個功能強大的圖像處理軟件，可以對各種格式的圖像文件進行非常精細與獨特的處理，不僅適用于廣告用圖、美術攝影作品的處理，也廣泛用于網頁圖像元素的處理，其在網頁制作中的應用必將會越來越廣泛。

第二篇：網頁設計論文

網頁設計基礎課程論文

摘要:隨著互聯網的不斷發展和中國網絡人口的日益增長，建立個人網站，不但可以更好的展示自己，而且可以提高自己在計算機應用方面的能力,網站越發普及，網站建設也有新的要求,網站已發展為一種工具，一個企業對外信息展示的工具.以前網站上常見的大幅圖片，長達幾十鐘的flash動畫，已悄然而逝，瀏覽者再也不用為了查找一些信息而必須等待動畫的時間，可以簡單方便的找到自己想要的東西，是瀏覽者主要的目的，也是網站設計時應該考慮的問題。以前只是一味的追求網站的外觀，其實網站是一個公司的對外信息窗口，因此在考慮美觀的同時也得考慮瀏覽者的感受，如有些色調是很亮麗，但是這些過于亮的色彩看的時間長了會讓你的眼睛不舒服，這樣瀏覽的人就不會長時間在網站上逗留，網站沒把公司的信息完全的傳達給客戶． 關鍵詞：網站網頁設計發展趨勢網站標準 正文：一:網頁設計發展趨勢: 1.更多的CSS3 + HTML5 這是期待已久的事情。在過去的幾年設計師已經開始關注和使用CSS3+HTML5，但在以后CSS3+HTML5將會得到更廣泛的應用。網頁設計師最終會拋棄Flash。Flash不再是昔日的王者，新技術（指CSS3+HTML5）將會取而代之 2簡單的配色方案

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達方式。不要老是黑白灰神馬的，太不給力了。多點考慮綠、黃或者紅作為你的網頁主色調。當然，顏色最好保持使用2到3種。調整顏色的透明度，或許會給你意想不到的效果 3.移動互聯網時代的到來

智能手機，ipad和上網本隨處可見，將來這個將會更加明顯。這意味著你的設計需要考慮更多的設備。4.Parallax Scrolling 先來解釋下Parallax Scrolling，Parallax scrolling 是讓多層背景以不同的速度移動，形成運動視差 3D 效果，雖然純屬視覺效果，但在內容滾動時形成的視覺體驗仍然非常出色。2011年的網頁設計趨勢熱點就是要創造這樣的深度視覺效果。5.設計需考慮更多的觸屏設備

觸屏技術應用越來越廣泛，觸屏設備隨處可見。這意味著，你的導航設計不再只是鼠標導航，你必須要要考慮你的設計適合觸屏設備。6.深度判析

深度判析是關于在網頁設計使用維數，這樣可以使你的網頁變得更加真實。如果運用得恰當，那將會是一個虛擬的3D效果，就像3D電影阿凡達那樣。盡管3D技術還沒有去到網站設計，你仍然嘗試使用維數進行設計。7.大背景圖

大背景圖的網頁設計應用在2011年將會更加明顯。這些背景圖像一般是高分辨率，覆蓋這個網站。高清照片是一個迅速抓住你的讀者的好方式，可以產生極具沖擊力的視覺效果-游客的視線會不自覺地落在寬大的背景上。8.不拘謹于頂級域名

嚴格意義上這一點與網頁設計無關，但這一點也是發展的趨勢，將出現更多創造性的域名。.com域名的吸引力越來越少，主要是你很難再找到一個比較短的.com域名。2011年人們開始將視線慢慢轉移到.me、.co和.cc等身上。想想域名的發展，搶先一步，不然你很可能再次錯失先機。9.QR: Quick Response 如果你注意現在越來越多的名片、雜志或者其他地方出現方形條形碼，證明你已經看到2011年的這個趨勢熱門

10.縮略圖設計（Thumbnail Design）

Google已經向瀏覽用戶推出它們的瀏覽預覽技術。過去我們只能通過點擊鏈接才能看到網頁的內容，現在你只需點擊放大鏡然后將鼠標懸停在鏈接上就可以預覽該鏈接的網頁內容。11.持續聯系/ Life Stream Lifestreaming, 一種在線記錄個人日常活動的網絡應用，包括直接通過視頻feed或通過聚焦一個人的網絡在線內容，比如博客日志，在社會性網絡上面的更新，在線相冊，聊天內容甚至只是一些喜歡的網站的鏈接等等.二:網站標準是在W3C（W3C.org）的組織下，商業公司（Netscape、Microsoft等）也認識到統一標準的好處。網站標準開始被建立（1998年2月10日發布XML1.0為標志），并在網站標準組織（webstandards.org）的督促下推廣執行。

為什么要建立網站標準: 我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的“瀏覽器大戰”，為了兼容Netscape和IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，例如支持手機上網的WAP技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。這是一種惡性循環，是一種巨大的浪費。如何解決這些問題呢？有識之士早已開始思考，需要建立一種普遍認同的標準來結束這種無序和混亂。商業公司（Netscape、Microsoft等）也終于認識到統一標準的好處，因此在W3C（W3C.org）的組織下，網站標準開始被建立（1998年2月10日發布XML1.0為標志），并在網站標準組織（webstandards.org）的督促下推廣執行。

采用網站標準的好處:

對網站瀏覽者的好處：

1、文件下載與頁面顯示速度更快

2、內容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；

3、內容能被更廣泛的設備所訪問（包括屏幕閱讀機、手持設備、搜索機器人、打印機、電冰箱等）；

4、用戶能夠通過樣式選擇定制自己的表現界面；

5、所有頁面都能提供適于打印的版本。對網站所有者的好處:

1、更少的代碼和組件，容易維護；

2、帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當ESPN.com使用CSS改版后，每天節約超過兩兆字節（terabytes）的帶寬；

3、更容易被搜尋引擎搜索到；

4、改版方便，不需要變動頁面內容；

5、提供打印版本而不需要復制內容；

6、提高網站易用性。在美國，有嚴格的法律條款（Section 508）來約束政府網站必須達到一定的易用性，其他國家也有類似的要求。

參考文獻： 一：溫謙.HTML+CSS網頁設計與布局從入門到精通[M].北京:人民郵電出版社,2010.3 二：http://www.tmdps.cn

三：http://btgyjlbjx.nease.net(北極星網站域名）

課程論文

系院:土木工程學院

專業:建筑工程 姓名:王奎

學號:105140340043 網頁設計基礎

第三篇：商業網頁設計論文

摘要:商業網頁設計中具體的字體、圖形、圖象、標志等等，常常表現為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習慣和心理變化。本文將分析商業網頁設計視覺因素的心理規律，揭示網頁設計如何通過視覺因素更有效、更合理的表現與傳達信息。

關鍵詞: 網頁設計 視覺心理因素 構成要素 視覺流程

商業網站是企業向用戶和網民提供產品和服務的一種方式,是企業開展電子商務的基礎設施和信息平臺，其網頁頁面由具體的文字（標題、廣告語、單位名稱、Email地址等）、企業標志、商標、產品圖形、和信息菜單等內容組成，這些內容又常常表現為點線面、色彩、動靜、主次等視覺因素，這些因素的不同使用都會影響讀者的視覺習慣和心理變化。

本文將試析商業網頁設計視覺因素的心理規律，揭示商業網頁設計如何通過視覺心理因素更有效、更合理的表現與傳達信息。展現企業形象、介紹產品和服務、體現企業發展戰略。

一、商業網頁設計中點、線、面視覺心理因素的運用

點、線、面是商業網頁設計基本的視覺元素，是表現視覺形象的基本設計語言。從視覺角度看網頁設計主要是如何經營好三者的關系，因為不管是任何視覺形象或者版式構成，歸結到底，都可以歸納為點、線和面。

1.網頁設計造型要素中的點

商業網頁設計中的點是構成網頁的最基本單位，是指頁面中具備點的視覺特點、體積較小的物象。相對于整體背景而言一個單獨的點是相比較而言的；是有大小、形狀和體積的。點的大小、形態、位置不同，所產生的視覺效果、心理作用也不同。一個網頁往往需要有數量不等，形狀各異的點來構成，可以是具體產品、商品標志等，也可以是感覺上的點。例如，天空中的飛鳥、沙灘上的腳印、花瓣上的蜜蜂等，在其周圍背景襯托下，都給人以“點”的視覺心理感受。

點在設計中即可以起一種穩定造型的作用，亦可起到活潑生動、吸引視覺中心的作用，使用得當，甚至可以畫龍點睛；點的形狀、方向、大小、位置、聚集與發散，還能夠給人帶來不同的心理感受。

(1)單點的應用：點在人們的視覺中具有很強的吸引作用，如：點（商品）設計在網頁的上方或左右位置，則給人不穩定感和相對的動感。

(2)多點的應用：兩點（二商品）之間會產生心理連線的感覺，多點時則會出現不同排列，順序的虛擬的面或形體。

2.網頁設計造型要素中的線

點的延伸形成線。線在頁面中的作用在于表示方向、位置、長短、寬度、形狀、質量和情緒。線是分割頁面的主要元素之一，是決定頁面現象的基本要素。商業網頁設計視覺因素中的線主要指文字的行線，商品圖形、圖象的輪廊線，各種裝飾線。線的形態主要有直線和曲線兩大類：

(1)直線給人一種緊張、銳利、簡潔、剛直感，從心理或生理感覺來看具有男性特點。直線又有：細直線，給人纖細、敏銳的心理感覺；粗直線，給人豪爽、拙樸、厚重的感覺；垂直線，給人一種挺拔、莊嚴感；水平直線則給人方向感和強烈的動感。

(2)曲線表現出一種動態，活潑，輕快的意味，顯示了女性美的特征，商業網頁設計中運用文字行、圖象輪廊線或裝飾線的造型，創造一種女性化的審美感。自由曲線是最好的情感抒發手段。打破了水平線組成的莊嚴和單調，給商業網頁增加了豐富、流暢、活潑的氣氛。水平線和自由曲線的組合運用，形成新穎的形式和不同情感的對比。

3.網頁設計造型要素中的面

線的推移形成面。面是無數點和線的組合。面具有一定的面積和質量，占據空間的位置更多，因而相比點和線來說視覺沖擊力更大更強烈。面在網頁設計中通常指各種圖形、色塊的形狀設計，不同形狀的面具有自己鮮明的個性和情感特征，能給人不同的心理感受，如方形的面具有沉著，穩重，厚實，堅強的男性特征；三角形、梯形面常給人一種穩定、端正之感；但如果將它們倒過來設計，則給人一種輕、不穩定的感覺。圓形充實、圓滿、活潑的感覺，比較適合表現兒童產品或者女性用品。菱形或不規則形體則給人一種活潑、輕快之感。

在商業網頁的視覺構成中，點、線、面既是最基本的造型元素，又是最重要的表現手段。在確定商業網頁主體形象的位置、動態時，點線面將是需要最先考慮的因素。必須熟練掌握設計語言。要善于根據商業特性采用不同的組合去體現不同的情感訴求，達到推銷、銷售商品和服務的作用。只有合理的安排好點線面的互相關系，才能設計出具有最佳視覺效果的頁面，充分的表達出商業網頁最終的訴求！

二、商業網頁設計中色彩視覺心理因素的運用

商業網頁設計中色彩是確立網站風格的靈魂。色彩能產生強烈的視覺效果，使頁面更加生動。色彩設計的好壞直接影響閱讀者的觀賞興趣與心理變化。因此，地位十分重要。商業網頁的色彩設計應從以下幾個方面把握和利用其心理特征：

首先，整個頁面要確定一個主色調，其有利于體現網站主題。每一種色彩都具有它自身的性格，如：彩度高，明度高的色彩常給人一種華麗感，相反彩度低，低明度的色彩則給人一種樸實感。暖色系、高明度的色彩能給人一種面積大的前進感。冷色系、低明度的色彩則能給人一種面積小的后退感。每個人群對色彩的喜好也有所不同，如男性較喜歡冷色，女性則偏好暖色或高明度、高彩度的色彩，兒童喜好純色，討厭濁色，老人則偏好濁色，中年人或文化層次較高的人偏好冷灰色等。因此在設計中要考慮主要讀者群的背景和構成以及如何與商品的屬性相呼應。

其次，在主色調下的色調搭配。若頁面空間整體、色彩和諧統一，則給人一種幽雅、寧靜感；若以對比手法處理，圖形文字色彩明快突出于背景色，則頁面空間氛圍會顯得活躍而有生氣。但是，要注意不能有強烈的色彩對比，因為過于豐富的背景色彩會影響前景商品圖片和文字的取色，使文字溶于背景中，不易辨識。所以背景一般應以單純為宜。

最后，作為設計師在考慮網頁設計時，還應考慮到時代流行性色和企業標準色的問題。所謂流行色，是指在一定范圍內和時間內，非常盛行并易為人們接受的某些式樣或顏色。而標準色的運用在網上擴大了品牌效應，也是對公司整體形象的統一應用，從而構成了企業識別系統（CIS）的重要部分。

三、商業網頁設計中動、靜的視覺心理因素的運用

商業網頁設計構成要素可分為兩種狀態：靜態與動態。靜態要素設計具體指靜止的商品圖形、文字、按紐等；動態要素，具體指動態按紐、按紐連接、網頁動畫和視頻等，它們是豐富、生動網頁、張顯個性、突出主題重要手段。

動靜以及不同的動靜組合都可以反映不同的心理與性格，如，動大體上給人活潑、生動的印象，但極慢的動常給人憂慮感；迅速或突然的動常給人焦慮、驚慌感。另外，靜也常給人寧靜、沉悶兩種感覺。

商業網頁設計中要注意處理好動靜的關系，要整體和諧統一，給人生動而不躁動或厭惡感。同時還要遵循動態性原則與交互性原則。

1.動態性原則，即要有四維空間或五維空間的運作觀念。一件網頁商品、圖片不僅是二維的平面或三維的視覺，也要有時間與空間的變換，情感與思維認識的演變等多維因素。

2.交互性原則，即界面設計強調交互過程。一方面是物的信息傳達，另一方面是人的接受與反饋，對任何物的信息都能動地認識與把握。

四、商業網頁設計中視覺流程心理因素的運用

商業網頁設計是通過視覺元素引起人注目而實現商品信息內容的傳達，為了使網頁獲得最大的視覺傳達功能，使網頁真正成為可讀強性而且新穎的媒體，必須適應人們視覺流程的心理和生理的特點。

視覺流程的形成是由人類的視覺特性所決定的。心理學家葛斯達認為：人們閱讀時，版面的上部比下部的注目價值高，左側比右側的注目價值高。因此，版面的左上側位置最為引人注目，因此，在網頁設計中一些突出的商品信息，如主標題、每天更新的內容等通常都放在這個位置。以便于一開始就吸引受眾的視線，誘導其由上到下，由左到右地移動。此位置也被稱作視覺的最佳視域。也就是最優選的地方。當然視覺流程是一種感覺而非確切的數學公式，只要符合人們認識過程的心理順序和思維發展的邏輯順序，就可以更為靈活地運用。設計者可以利用視線移動規律，誘導讀者的視線作左右流動、上下流動以及斜線的不穩定流動，通過編排設計，人為地產生最佳視域，突出主要商品，以達到一定的視覺效果，傳遞商品信息。

商業網頁作為一種新的企業開展電子商務的基礎設施和信息平臺，它的發展雖然沒有多長時間，卻兼容了傳統平面設計的特征，又具備其所沒有的優勢，成為今后商品信息交流的一個非常有影響的途徑。其設計是一種綜合性的設計，它所涉及的范圍非常的廣泛，包括消費者心理學、視覺設計美學、人機工程、哲學等諸多方面，而本文中只從視覺心理因素的角度進行了一些闡述與分析，僅作拋磚引玉之用。

參考文獻:

[1]李彬彬:設計效果心理評價[M].北京:中國輕工出版社,2005.1

[2]趙殿澤:構成藝術[M].沈陽:遼寧美術出版社，1994

[3]趙國志:色彩構成[M].沈陽:遼寧美術出版社，1994

[4]張國良:傳播學原理[M].上海:復旦大學出版社，2000.1

第四篇：個人網頁設計(論文)

炎黃職業技術學院信息工程系

畢業設計（論文）

個人網頁設計

年 級: _ 2009級___ _ 學 號: _ 0******17 _ 姓 名: __ _****_____ 專 業: 網絡數字媒體 _ 指導老師: __ ****__ __

二零一一年十二月 炎黃職業技術學院 信息工程系畢業設計（論文）

摘 要

本論文將對個人網頁設計與制作的方法、工具等展開研究和探討。在介紹網頁設計與制作語言的基礎上，著重使用CSS樣式表作為工具語言進行網頁設計與制作的實際操作，分別對基于對象的JavaScript語言、用于編輯HTML語言的軟件進行了詳細的介紹。

本論文主要章節如下，炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

1、是一種腳本編寫語言

JavaScript是一種腳本語言，它采用小程序段的方式實現編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發過程。

它的基本結構形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運行過程中被逐行地解釋。它與HTML標識結合在一起，從而方便用戶的使用操作。

2、基于對象的語言。

JavaScript是一種基于對象的語言，同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。

3、簡單性

JavaScript的簡單性主要體現在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數據類型。

4、安全性

JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。

5、動態性的

JavaScript是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁(Home Page)中執行了某種操作所產生的動作，就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。

6、跨平臺性

JavaScript是依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。

實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務器通道，通過自己的電腦即可完成所有的事情。

總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應使用者的需求事件(如：form的輸入)，而不用任何的網路來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應用程式所處理。

炎黃職業技術學院 信息工程系畢業設計（論文）

JavaScript 和 Java 很類似，但到底并不一樣！Java 是一種比 JavaScript 更復雜許多的程式語言，而 JavaScript 則是相當容易了解的語言。JavaScript 創作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。

2.3 CSS樣式表

級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HMTL中各標志的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。

CSS目前最新版本為CSS2,能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象盒模型的能力，并能夠進行初步交互設計，是目前基于文本展示的最優秀的表現設計語言。

在網頁上使用樣式表有三種方法可以在站點網頁上使用樣式表：

將網頁鏈接到外部樣式表。

在網頁上創建嵌入的樣式表。

應用內嵌樣式到各個網頁元素。

當要在站點上所有或部份的網頁上一致地應用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網頁，便能確保所有網頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表 — 中作一次更改 — 而該更改會反映到所有與該樣式表相鏈接的網頁上。通常外部樣式表以.css 做為文件擴展名，例如 Mystyles.css。

當人們只是要定義當前網頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表，“嵌”在網頁的 標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。

使用內嵌樣式以應用級聯樣式表屬性到網頁元素上。

如果網頁鏈接到外部樣式表，為網頁所創建的內嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。

炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

圖2-2 隨筆

相冊效果圖2-3如下：

圖2-3 相冊

音樂效果圖2-4如下：

圖2-4 音樂

關于我效果圖2-5如下：

炎黃職業技術學院 信息工程系畢業設計（論文）

圖2-5 關于我

3.2 網站主題

本網站是一個簡單的個人網站設計，以動漫為主題，主要包括了本人的自我介紹、比較喜愛的動漫作品以及平時的娛樂等。

3.3 網站風格

1.本網站主要體現了清新自然的風格，以簡潔為主。2.網站的主色調為綠和白，充分襯托清新自然的風格。

炎黃職業技術學院 信息工程系畢業設計（論文）

炎黃職業技術學院 信息工程系畢業設計（論文）

(1)執行“插入”—“新建元件”命令，創建一個名稱為“拉伸的葉片”的影片剪輯元件。

(2)選擇矩形工具，設置填充顏色，在舞臺上繪制一個無描邊舉行，在屬性面板中設置寬和高。

(3)選擇矩形，將其轉換成“名稱”為“葉片”的圖形元件。(4)選擇

onmouseout=“makevisible(this,1)”

onmouseout=“makevisible(this,1)” 炎黃職業技術學院 信息工程系畢業設計（論文）

2.輸入文字，制作超鏈接。

4.6 xiangce4.html頁面的制作

1.制作圖庫頁面。

(1)新建一個網頁文檔，建立圖庫頁面的基本布局。

(2)將光標定位在頁面左側的 炎黃職業技術學院 信息工程系畢業設計（論文）“1”，單擊[確定]按鈕回到行為面板，將此行為事件改為“onclick”。

(2)用同樣的方法，給另外3張圖像添加同樣的行為，將 炎黃職業技術學院 信息工程系畢業設計（論文）

致

謝

本論文歷時兩個多月，我系統綜合地將我所學的知識運用于畢業設計的全過程。在完成畢業設計中，首先我要感謝我的指導教師****老師。*老師耐心細致地指導我畢業設計，提出了很多精辟而富有建設性的建議。*老師認真負責的工作態度，嚴謹的治學態度都給我留下了深刻的印象，在學習上給予了我極大的關心和幫助，在此表示衷心感謝！

同時，感謝炎黃職業技術學院為我提供了一個良好的學習環境，感謝學院的領導和老師們！他們無微不至的關懷、精心的培養使我到了很多的知識，終生受益！

炎黃職業技術學院 信息工程系畢業設計（論文）

參考文獻

[1] 繆亮.Dreamweaver CS3 基礎與實訓教程.電子工業出版社，2008年.[2] 李冬蕓.Flash動畫實例教程.電子工業出版社，2010年.[3] 繆亮，郭剛.Photoshop平面設計實用教程.清華大學出版者，2008年.

第五篇：flash網頁設計畢業(論文)

遼寧警察學院畢業設計（論文）

Flash網頁設計

系： 高職計算機系 專業： 計算機應用技術 學生： 陶帥帥 指導教師：楊 虹

完成日期：2017年4月3日

遼寧警察學院畢業設計（論文）

Flash網頁設計

總計 畢業設計（論文）表格 0表 插圖 24幅

頁

摘 要

本論文主要論述了本人所做畢業設計課題《Flash網頁設計》的技術背景、設計理念、概要設計、詳細設計以及最后效果展示等方面內容，詳細的介紹了本人對于設計簡單Flash網頁的一整套設計過程和相關技術難點的解決方法。

Flash設計網頁成為越來越多動漫愛好者和非動漫愛好者獲得信息和交流的平臺，它滿足了廣大用戶隨時隨地進行交流和溝通的需要，為網上用戶提供交流場所，實現高效動態信息交換，而網頁恰恰是由一個個小小的網頁集結而成，沒有網頁就沒有強大的網頁。現在雖然有很多動漫網頁，但版面千篇一律，缺乏個性化、前瞻性，頁面設計混亂，不利于用戶查看，網頁的交互性比較差，因此我針對以上問題為動漫網頁設計一個個性化的動漫網頁。關鍵詞：動漫網頁，Flash

I

Abstract This paper mainly discusses the graduation design which I do the Anime Web Design Theme of technical background, design concept design, detailed design, summary and display effect etc, detailed introduces himself to design a simple Flash web design process and related technical difficulties in solving methods.Animation design website become more and more anime fans and the anime fans access to information and communication platform, it can meet the the needs of the masses of users communicate and communication anytime and anywhere, provide communication place for online users, efficient dynamic information exchange, and site is composed of little web pages gathering, no web, no powerful web site.Although there are a lot of DongManWang stand now, but the layout of the same, the lack of personalized, prospective, page design, unfavorable to the user to see, website interactivity is poorer, so I have to solve above problems as DongManWang station design a personalized anime web pages.Key words: Web Design；Flash；Flash web design

II

目錄

前 言..............................................................................................................................1 第1章 概述..................................................................................................................2

1.1 Flash軟件的介紹.........................................................................................2 1.1.1Flash的歷史.......................................................................................4 1.2 Flash軟件的特點.........................................................................................4 1.2.1普通網頁設計的特點.........................................................................4 1.2.2Flash網頁...........................................................................................5 第2章 網頁設計的開發工具與開發語言..................................................................7

2.1 網頁使用的開發工具.....................................................................................7 2.1.1Macromedia Flash 8.0 Pro..............................................................7 2.1.2Adobe Photoshop CS2........................................................................7 2.2 網頁開發語言.................................................................................................7 第3章 Flash網頁設計中的各種技術解析................................................................9

3.1 主頁界面設計解析.........................................................................................9 3.1.1Flash網頁加載時的進度條設計..........................................................9 3.1.2網頁LOGO與站點設計...................................................................10 3.1.3網頁導航條的設計.............................................................................10 3.1.4進入主頁界面前動態效果設計.........................................................12 3.1.5進入主頁時的音效設置.....................................................................13 3.2 “賞漫軟件”Flash子頁面設計......................................................................14 3.2.1“賞漫軟件”目錄的制作..................................................................14 3.2.2賞漫軟件的圖片文字介紹部分制作.................................................15 3.3 “精品動漫”Flash子頁面設計......................................................................15 3.4 “酷站導航”Flash子頁面設計......................................................................17 3.5 “酷炫漫畫”Flash子頁面設計......................................................................18 3.6 “關于作品”Flash子頁面設計......................................................................19 結論..............................................................................................................................20 致謝..............................................................................................................................21 參考文獻......................................................................................................................22 III

遼寧警察學院高職計算機畢業設計（論文）

前 言

世界因Internet的出現而在逐步改變，網絡經濟雛形因此而形成，由于Internet具有信息容量大、方便迅速、形態多樣、覆蓋全球等特點，直至今日已發展成為信息傳播的主要載體，所以幾乎全球的各個企業、機構紛紛建立自己的web站點。Internet信息資源龐大、圖文互動、高速高效的特點給傳統設計媒體帶來了巨大的沖擊，再加上網絡經濟對設計行業的影響，由此而產生了一個新的設計領域--網頁設計。

Flash產業作為我國發展中的產業，網頁設計技術的發展推動了該產業的傳播，使得各類Flash網頁紛紛崛起，為廣大Flash愛好者帶來了諸多便利。

本課題設計的是一個以Flash設計為主題的網頁設計，以信息發布、分享為主要的。通過發布一些關于Flash的信息、圖片和Flash等為有同樣喜好的人們提供一個分享的空間。同時訪客用戶可以在網頁中的劇情交流上發表自己的看法以及可供共享的信息，使人們在獲取信息的同時，還可以發表自己的感受。在如今網絡高速發展的時代，發布信息與分享興趣已成為大多網頁設計的主要目的。

Flash網頁設計

第1章 概述

Flash網頁設計是指用用Flash軟件制作的網頁，網頁內容多數甚至全部是Flash。全Flash網頁基本以圖形和Flash為主，所以比較適合做那些文字內容不太多，以平面、Flash效果為主的應用。如：企業品牌推廣、特定網上廣告、網絡游戲、個性網頁等。

在因特網飛速發展的今天，多姿多彩的網絡頁面總是讓我們目不暇接，創建富有個性的個人主頁更是每一個網絡愛好者的夢想。作為一個優秀的多媒體網頁設計平臺，Flash從眾多的網頁設計軟件中脫穎而出，成為大多數網絡愛好者設計網頁的首選工具。能夠為大多數人所認同的東西總有它的獨特之處，Flash正是以其獨特的魅力征服了網絡發燒友。

首先，Flash的一個很重要的特點是創建的文件體積很小，Flash是完全基于矢量的Flash處理技術，而矢量圖形就是用少量的向量數據來描述一個復雜的對象，存儲時只占很小的空間，而且圖像的質量也很高。想必許多網友們也曾對自己掛在網上的一些Flash作品的體積擔心，那么，用Flash來創建網絡Flash作品也正是我們的首選。

其次，Flash使用的是插件的工作方式，用戶只要安裝一次插件，以后就可以快速啟動并觀看Flash，而不必像Java那樣，每次都要花費大量的時間啟動虛擬機。

再次，Flash動漫采用的是“流式”的Flash播放技術，用戶不必等到Flash下載完全再去欣賞，而是一邊下載一邊欣賞。

最后，Flash簡單易學，盡管它不能像一門高級語言一樣進行編程，但功能還是很廣泛的。使用內置的ActionScript語句結合JavaScript，也可以制作出互動性很強的主頁來

1.1 Flash軟件的介紹

Flash是美國Macromedia公司所設計的一種二維矢量動畫軟件（現Adobe公司產品），用于設計和編輯Flash文檔，最新版本為：Animate CC 2015.5。Flash通常也指Macromedia Flash Player（現Adobe Flash Player），用于播放Flash文檔。

遼寧警察學院高職計算機畢業設計（論文）

檔案格式:

圖1-1影片檔

“swf ”這是一個完整的影片檔，無法被編輯。有時會被念做“swiff”。Swf在發布時可以選擇保護功能，如果沒有選擇，很容易被別人輸入到他的原始檔中使用。然而保護功能依然阻擋不了為數眾多的破解軟件，有不少閃客專門以此來學習別人的程序代碼和設計方式。

圖1-2原始檔

“fla ”是Flash的原始檔，只能用Macromedia Flash打開編輯或Adobe Flash CS3及更高版本打開編輯

Actionscript是一種程序語言的簡單文本文件.FLA檔案能夠直接包含Actionscript, 但是也可以把它存成AS檔做為外部連結檔案(如定義ActionScript類則必須在寫在as文件里,再通過import加入類)，以方便共同工作和更進階的程序修改。

Flash 是一種創作工具，設計人員和開發人員可使用它來創建演示文稿、應用程序和其它允許用戶交互的內容。Flash 可以包含簡單的Flash、視頻內容、復雜演示文稿和應用程序以及介于它們之間的任何內容。通常，使用 Flash 創作的各個內容單元稱為應用程序，即使它們可能只是很簡單的Flash。您也可以通過添加圖片、聲音、視頻和特殊效果，構建包含豐富媒體的 Flash 應用程序。

Flash 特別適用于創建通過 Internet 提供的內容，因為它的文件非常小。Flash 是通過廣泛使用矢量圖形做到這一點的。與位圖圖形相比，矢量圖形需要的內存和存儲空間小很多，因為它們是以數學公式而不是大型數據集來表示的。位圖圖形之所以更大，是因為圖像中的每個像素都需要一組單獨的數據來表示。

Flash網頁設計

1.1.1Flash的歷史

Flash是由macromedia公司推出的交互式矢量圖和 Web 動畫的標準，由Adobe公司收購。做Flash動畫的人被稱之為閃客。網頁設計者使用 Flash 創作出既漂亮又可改變尺寸的導航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一個商用的二維矢量動畫軟件，用于設計和編輯Flash文檔。1996年11月，美國Macromedia公司收購了Future Wave，并將其改名為Flash。后又于2005年12月3日被Adobe公司收購。Flash通常也指Macromedia Flash Player（現Adobe Flash Player）。2012年8月15日，Flash退出Android平臺，正式告別移動端。2015年12月1日，Adobe將動畫制作軟件Flash professional CC2015升級并改名為Animate CC 2015.5。

Flash的過去無疑是異常輝煌的，然而它的現在和將來卻飽受非議。在移動互聯網和Html5的強烈沖擊之下，Flash在網頁方面的應用逐漸衰退，如今已經很難再看到純正的Flash整站了。有人因此斷言Flash已經成為一種“過時”的、“應被拋棄”的技術，更有人提出“Flash將死”的預言。然而，換一種客觀的眼光來看現實情形，就會發現Flash并未完全衰退，在網頁游戲、互動設計、媒體應用、教育課件等領域，仍然能夠看到Flash異常活躍的身影。在動畫效果的流暢性、互動設計的便捷性、代碼開發的簡易性、程序應用的廣泛性等方面，目前還沒有任何一款軟件能夠與Flash相比擬。因此，也有許多開發者認為Flash還“大有可為”。無論Flash的未來何去何從，在當下，它仍然是一門值得所有人認真學習的技術。特別是對于有志成為網頁設計師的學習者而言，Flash更是一門必修課。

1.2 Flash軟件的特點

1.2.1普通網頁設計的特點

網頁設計要注意的兩個要點：整體風格和色彩搭配。

1、確定網頁的整體風格

網頁的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網頁。

風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、4

遼寧警察學院高職計算機畢業設計（論文）

交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。舉個例子：我們覺得網易是平易近人的，迪斯尼是生動活潑的，IBM是專業嚴肅的。這些都是網頁給人們留下的不同感受。

在這里，我提供給大家一些參考經驗：

(1)將你的標志logo，盡可能的放在每個頁面上最突出的位置。(2)突出你的標準色彩。

(3)總結一句能反映貴站精髓的宣傳標語！

(4)相同類型的圖像采用相同效果，比如說標題字都采用陰影效果，那么在網頁中出現的所有標題字的陰影效果的設置應該是完全一致的！

2、網頁色彩的搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或美麗的圖片，而是網頁的色彩。

關于色彩的原理有許多，在此我們不可能一一闡述，大家可以看看相關設計書籍，有利于系統地理解。在此我們僅僅想告訴大家一些網頁配色時的小技巧。

(1)用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。

(2)用兩種色彩。先選定一種色彩，然后選擇它的對比色。

(3)用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

3、在網頁配色中，還要切記一些誤區：

(1)不要將所有顏色都用到，盡量控制在三至五種色彩以內。

(2)背景和前文的對比盡量要大(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。

1.2.2Flash網頁

Flash網頁具有設計精美，擁有更多聲效、Flash、流媒體剪輯、美術效果及兼顧互動性等特征，非常適合公司作在線產品展示。Flash網頁基本以圖形和Flash為主，所以比較適合做那些文字內容不太多，以平面、Flash效果為主的應用。如：企業品牌推廣、特定網上廣告、網絡游戲、個性網頁等。

制作全Flash網頁和制作Html網頁類似，事先應先在紙上畫出結構關系圖，包括：網頁的主題、要用什么樣的元素、哪些元素需要重復使用、元素之間的聯系、元素如何運動、用什么風格的音樂、整個網頁可以分成幾個邏輯塊、各個邏輯塊間的聯系如何、以及你是否打算用Flash建構全站或是只用其做網頁的前期

Flash網頁設計

部分等等，都應在考慮范圍之內。

實現全Flash網頁效果多種多樣，但基本原理是相同的：將主場景作為一個“舞臺”，這個舞臺提供標準的長寬比例和整個的版面結構，“演員”就是網頁子欄目的具體內容，根據子欄目的內容結構可能會再派生出更多的子欄目。主場景作為“舞臺”基礎，基本保持自身的內容不變，其它“演員”身份的子類、次子類內容根據需要被導入到主場景內。

遼寧警察學院高職計算機畢業設計（論文）

第2章 網頁設計的開發工具與開發語言

2.1 網頁使用的開發工具

2.1.1Macromedia Flash 8.0 Pro Macromedia Flash 8.0 Pro相對于Macromedia Flash MX 2004增強了為移動設備開發的功能,方便創建Flash Web增強的網絡視頻。雖然有更高的版本，但是Macromedia Flash 8.0 Pro仍是現在最主流的Flash制作軟件，配合其內置的ActionScript 2.0能夠完美實現網站設計中所需要的各種動態效果和交互效果，而我此次所做的Flash網站就是在Macromedia Flash 8.0 Pro的環境下制作。

新版本的Flash 8中引入了幾種高級技術:實時渲染濾鏡、運行時位圖緩沖、FlashType字體渲染引擎、自定義淡入淡出功能、改進的視頻播放組件、增強的文本工具、增強的描邊屬性、高級漸變控制。其中一種非常棒的技術是，Macromedia減輕了Flash Player 8的渲染工作，在Flash文件中使用標簽，Flash Player 8現在可以在用戶與Flash文件交互時實時渲染濾鏡。這意味著Macromedia已經能夠合并內建的濾鏡效果，象陰影、模糊、內外發光、倒角、漸變倒角、顏色調整，以獲得更豐富的用戶體驗。這些濾鏡或可視效果能夠被應用到影片剪輯(MovieClips)和文本域，當在網頁中運行時，通過播放器渲染并顯現出來。2.1.2Adobe Photoshop CS2 作為Adobe公司出品的最出色的圖形圖像處理軟件，Photoshop以其強大的功能向我們證明著它的名至實歸。在falsh網頁設計時一些圖片素材如背景圖片、按鈕、LOGO等在載入Flash庫前有必要用Photoshop做適當的處理.2.2 網頁開發語言

Html（Hyper Text Markup Language）即超文本標記語言或超文本鏈接標示語言，它是一種計算機程序語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要內容。

Html文件是用ASCLL代碼編寫成的，可以保存為最簡單的TXT文本文件，Flash網頁設計

這樣用任何一個文字處理軟件都可以進行編寫，這也是他能夠迅速迅速普及，并十分受歡迎的一個原因。

遼寧警察學院高職計算機畢業設計（論文）

第3章 Flash網頁設計中的各種技術解析

3.1 主頁界面設計解析

3.1.1Flash網頁加載時的進度條設計

(1)新建Flash文檔index.fla，設置舞臺的大小為550*550像素，設置背景的顏色為#786e28。

(2)建立進度條設計主要是幫助觀察Flash網頁載入的進度，建立進度條設計樣式如圖3-1，時間軸上各層設計如圖3-2。

圖3-1進度條

圖3-2進度條在時間軸上各層

Actions：幀1代碼： total = _root.getBytesTotal();loaded = _root.getBytesLoaded();baifenshu = int((loaded/total)*100);baifenbi = baifenshu+“%”;setProperty(“jindutiao”, _xscale, baifenshu);Actions：幀2代碼：

Flash網頁設計

if(baifenshu == 100){

gotoAndPlay(4);} else { gotoAndPlay(1);} 3.1.2網頁LOGO與站點設計

網頁LOGO設計：

(1)新建圖形元件“元件42”。

(2)利用矩形工具建立一個白色矩形，在矩形正中建立一稍小些的背景色矩形形成白色矩形框。

(3)利用任意變形工具將白色矩形框變形成為白色平行四邊形框。用線條工具進行分割裁剪，旋轉變換得到要設計的網頁LOGO。（如圖3-3）

圖3-3 logo展示圖

3.1.3網頁導航條的設計

(1)新建圖形元件“元件22”（如圖3-4），作為導航條背景。

圖3-4導航條背景

遼寧警察學院高職計算機畢業設計（論文）

(2)建立6個圖形元件分別在各元件中設計各導航按鈕文字，字體樣式雅黑，字號12，顏色黑色，分別載入各影片剪輯做出動態效果，對應每個影片剪輯做一個與影片剪輯等大的按鈕，按鈕與影片剪輯放于不同層疊加在一起均勻排列與導航條上（如圖3-5）。

圖3-5導航按鈕

(3)給每個按鈕附加動作。（如圖3-6）

圖3-6按鈕b1動作目錄

代碼如下： 圖層4：幀1： stop();元件11： on(rollOver){ } on(press){

} 元件11： on(rollOut){

gotoAndPlay(1);

tellTarget(“/”){

}

loadMovieNum(“index101.swf”, 100);

gotoAndPlay(2);11

Flash網頁設計

} on(press){

} 圖層4：幀9： Stop（）； 元件11： on(rollOut){ } on(press){

} 3.1.4進入主頁界面前動態效果設計

(1)新建圖形元件“元件29”，創建長條圖行，作為三個小窗口推薦酷站、本站作品、站內更新的上框（如圖3-7）。建立三個圖形元件分別制作各個小窗口的名稱（如圖3-8）。

圖3-7小窗口的上框 圖3-8小窗口的名稱

tellTarget(“/”){

}

loadMovieNum(“index101.swf”, 100);

gotoAndPlay(1);

tellTarget(“/”){

}

loadMovieNum(“index101.swf”, 100);

(2)新建圖像元件，在其上創建與小窗口等大的白色和背景色的矩形色塊，在不同圖層中各小窗口的上框和窗體依次在時間軸上載入并做形狀補間Flash（如圖3-9）。

遼寧警察學院高職計算機畢業設計（論文）

圖3-9小窗口動態載入效果時間軸設置

(3)導航條、網頁頭尾的圖片條以相同方式在時間軸上依次載入并做形狀補間效果（如圖3-10），就可以完全載入主頁界面獲得完整的主頁框架界面。

圖3-10導航條、網頁頭尾的圖片動態載入效果時間軸設置

3.1.5進入主頁時的音效設置

(1)挑選合適的音效載入庫中。

(2)選擇適當的音效添加到時間軸上的適當位置（如圖3-11），使動態效果更具表現力。

圖3-11在時間軸上添加聲音效果

主頁框架界面到現在已經基本上設計完成了，主頁框架界面為一個獨立的Flash文檔，發布之后形成index.swf文件。此外，我們還要針對各個導航卡設計其對應的swf文件，各swf文件之間通過as代碼連接形成一個整體，則構成了本Flash網頁的主體結構，再通過as代碼連接一些必要的網頁就構成了一個完整

Flash網頁設計

Flash網頁。以下幾章我將對各個導航卡所對應的.swf文件及它們所鏈接的網頁頁面的制作做進一步的詳細說明。

3.2 “賞漫軟件”Flash子頁面設計

3.2.1“賞漫軟件”目錄的制作

“賞漫軟件”子頁面載入效果和“迷你游戲”子頁面相仿不再贅述。賞漫軟件目錄的制作大體上與游戲目錄相仿，所不同的是不需要轉換和滑動，也就比游戲目錄要好做多，同時目錄中軟件按鈕的制作也和游戲目錄中按鈕一樣，再此不在贅述目錄和按鈕的制作方法。我們來看一下做好的目錄的大概形狀樣式（如圖3-12），用以上做目錄的經驗可以輕松做好。

按鈕附加動作代碼： on(press){

} unloadMovieNum(3);loadMovieNum(“此處最好填所連接swf文件的相對位置”, 2);

圖3-12軟件目錄樣式

遼寧警察學院高職計算機畢業設計（論文）

3.2.2賞漫軟件的圖片文字介紹部分制作

該部分是以一個小的swf文件單獨存在的，在點擊軟件按鈕時會載入相應的swf文件在界面的適當位置。

接下來我們來做一下這個小swf文件，就那ACDSee圖片瀏覽軟件所對應的swf文件來說明吧。

（1）新建空白fla文件，命名.fla。將通過Photoshop設計好ACDSee軟件的圖片素材，載入到s2庫中。并生成影片剪輯。以影片剪輯動態效果實現是通過逐幀Flash方式完成的（如圖3-13至3-14）

圖3-13本影片剪輯動態效果的時間軸設置

圖3-14本影片剪輯動態效果

3.3 “精品動漫”Flash子頁面設計

“精品動漫”Flash子頁面是一個與前幾個子頁面略有不同的子頁面，頁面的設計風格與前幾個頁面有些許差異，不規則的背景使得頁面整體顯得翹起生動。（如圖3-15）子頁面載入動態效果及顯示出動漫按鈕前的動態效果在前面都有涉及不在贅述。

Flash網頁設計

圖3-15“精品動漫”Flash子頁面

（1）新建空白fla文件，命名為index003。將通過Photoshop設計好Flash按鈕圖片素材，大小50*50像素，載入到index003庫中。

（2）新建圖形元件，將圖片載入圖形元件中并在圖片上面覆蓋一層多半透明的與圖片等大的色塊。（如圖3-16）

圖3-16圖像上覆蓋了透明色塊的圖形元件

（3）將圖像元件做成按鈕，按鈕元件第一幀是將該圖形元件透明度略調高一些（如圖3-17），在第二三幀恢復正常（如圖3-18）。

遼寧警察學院高職計算機畢業設計（論文）

圖3-17按鈕第一幀

圖3-18按鈕第二三幀

（4）給每個按鈕附加動作代碼以連接到要播放的swf文件。代碼如下： on(press){

} tellTarget(“/”){ } loadMovieNum(“xinFlash9.swf”, 2);3.4 “酷站導航”Flash子頁面設計

目錄的制作、按鈕的制作、子頁面載入動態效果及顯示目錄時的動態效果等在前面都有涉及不在贅述。這里僅提供該子網頁設計好后的最后效果。（如圖3-19）

Flash網頁設計

圖3-19“酷站導航”子網頁設計好后的效果

其中各個網頁按鈕附加動作的代碼為： on(press){ } 其中對網頁的圖片展示和介紹部分同“賞漫軟件”子頁面中的小swf文件制作方法一致，可仿照其制作不再贅述。loadMovieNum(“需要讀取的swf文件的相對url地址”, 2);3.5 “酷炫漫畫”Flash子頁面設計

絕大部分和“賞漫軟件”子頁面中的設計保持一致，只是按鈕需要重新制作，右側的圖片展示部分也沒太多的改變，完全可以仿照其設計制作不再贅述。再次提供該子網頁設計好后的最后效果。（如圖3-20）

遼寧警察學院高職計算機畢業設計（論文）

圖3-20“酷炫漫畫”子網頁設計好后的效果

3.6 “關于作品”Flash子頁面設計

本網頁就只有一個文字面板，文字面板的設計和其他頁面中目錄的設計比較相似，都是先在圖形元件中設計好其輪廓和背景，再在時間軸上通過形狀、亮度、透明度改變進行形狀補間最終獲得文字面板（如圖3-21）。再次提供該子網頁設計好后的最后效果。（如圖3-22）

圖3-21文字面板設計在時間軸上的設置

圖3-22“關于作品”子網頁設計好后的效果

Flash網頁設計

結論

Flash網頁具有設計精美，擁有更多聲效、Flash、流媒體剪輯、美術效果及兼顧互動性等特征，非常適合公司作在線產品展示。Flash網頁基本以圖形和Flash為主，所以比較適合做那些文字內容不太多，以平面、Flash效果為主的應用。如：企業品牌推廣、特定網上廣告、網絡游戲、個性網頁等。

制作全Flash網頁和制作Html網頁類似，事先應先在紙上畫出結構關系圖，包括：網頁的主題、要用什么樣的元素、哪些元素需要重復使用、元素之間的聯系、元素如何運動、用什么風格的音樂、整個網頁可以分成幾個邏輯塊、各個邏輯塊間的聯系如何、以及你是否打算用Flash建構全站或是只用其做網頁的前期部分等等，都應在考慮范圍之內。

因為本人水平有限，雖然已從很多方面進行闡述和講解，但終究是不能十全十美的，理論與實際永遠是有距離的。希望能在今后的學習和工作中能不斷完善、進步！

遼寧警察學院高職計算機畢業設計（論文）

致謝

畢業設計完成之際，我由衷地感謝楊虹老師的大力幫助和支持，感謝我的同學和朋友，在我遇到各種各樣復雜問題的時候，給予我鼓勵和幫助，使我分析問題和解決問題能力有了很大提高

本論文是在楊虹老師的悉心指導下完成的。楊虹老師淵博的專業知識，誨人不倦的高尚師德，嚴以律己、寬以待人的崇高風范，樸實無華、平易近人的人格魅力對我影響深遠。不僅使我樹立了遠大的學術目標，還使我明白了許多待人接物與為人處世的道理。所有這一切都將成為我受益終生的寶貴財富!本論文從選題到完成，每一步都是在導師的指導下完成的，傾注了導師大量的心血。在此，我向導師表示崇高的敬意和由衷的感謝！我在研究思想方法上得到了啟發，并且在工作中采用他們的部分研究成果與資料。盡管與他們為我付出的一切相比，所有的語言都顯得蒼白無力，但我仍要真誠地說聲:謝謝!感謝三年來各位老師和同學對我學習、生活的關心和幫助。在論文即將完成之際，我的心情久久無法平靜，從開始進入課題到論文的順利完成，有多少可敬的師長、同學、朋友給予了我無言的幫助，在這里請接受我誠摯的謝意！

最后感謝我的母校—遼寧警察學院三年來對我的栽培。畢業設計完成之際，我由衷地感謝論文指導老師的大力幫助和支持，感謝熱心的同學與朋友，在我遇到種各樣復雜問題的時候，給予我鼓勵和幫助。

Flash網頁設計

參考文獻

[1]向玫玫,林強，馬杰，薛雅娟,王亞冰，范文南.Flash設計(21世紀全國普通高等院校美術藝術設計專業十二五精品課程規劃教材)，遼寧美術出版社，2014.04.[2]李錫澤，王喆.《Flash動畫網頁設計》，武漢大學出版社,2015年.[3]劉歡.《Flash ActionScript 3.0交互設計200例》，人民郵電出版社，2015.05.[4]劉斌.基于Flash的課件制作與應用[J]，科技廣場，2012(7).P102-P103.[5]莫仲心.淺談Flash動畫在網頁設計中的應用[J].信息通信.2012(1).P135-P136.22