第一篇：商業(yè)網(wǎng)頁設計論文

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

關鍵詞: 網(wǎng)頁設計 視覺心理因素 構(gòu)成要素 視覺流程

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

本文將試析商業(yè)網(wǎng)頁設計視覺因素的心理規(guī)律，揭示商業(yè)網(wǎng)頁設計如何通過視覺心理因素更有效、更合理的表現(xiàn)與傳達信息。展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略。

一、商業(yè)網(wǎng)頁設計中點、線、面視覺心理因素的運用

點、線、面是商業(yè)網(wǎng)頁設計基本的視覺元素，是表現(xiàn)視覺形象的基本設計語言。從視覺角度看網(wǎng)頁設計主要是如何經(jīng)營好三者的關系，因為不管是任何視覺形象或者版式構(gòu)成，歸結(jié)到底，都可以歸納為點、線和面。

1.網(wǎng)頁設計造型要素中的點

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

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

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

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

2.網(wǎng)頁設計造型要素中的線

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

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

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

3.網(wǎng)頁設計造型要素中的面

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

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

二、商業(yè)網(wǎng)頁設計中色彩視覺心理因素的運用

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

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

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

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

三、商業(yè)網(wǎng)頁設計中動、靜的視覺心理因素的運用

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

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

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

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

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

四、商業(yè)網(wǎng)頁設計中視覺流程心理因素的運用

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

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

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

參考文獻:

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

[2]趙殿澤:構(gòu)成藝術(shù)[M].沈陽:遼寧美術(shù)出版社，1994

[3]趙國志:色彩構(gòu)成[M].沈陽:遼寧美術(shù)出版社，1994

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

第二篇：網(wǎng)頁設計論文

網(wǎng)頁設計基礎課程論文

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

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

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

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

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

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

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

10.縮略圖設計（Thumbnail Design）

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

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

采用網(wǎng)站標準的好處:

對網(wǎng)站瀏覽者的好處：

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

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

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

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

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

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

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

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

4、改版方便，不需要變動頁面內(nèi)容；

5、提供打印版本而不需要復制內(nèi)容；

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

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

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

課程論文

系院:土木工程學院

專業(yè):建筑工程 姓名:王奎

學號:105140340043 網(wǎng)頁設計基礎

第三篇：個人網(wǎng)頁設計(論文)

炎黃職業(yè)技術(shù)學院信息工程系

畢業(yè)設計（論文）

個人網(wǎng)頁設計

年 級: _ 2009級___ _ 學 號: _ 0******17 _ 姓 名: __ _****_____ 專 業(yè): 網(wǎng)絡數(shù)字媒體 _ 指導老師: __ ****__ __

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

摘 要

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

本論文主要章節(jié)如下，炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

1、是一種腳本編寫語言

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

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

2、基于對象的語言。

JavaScript是一種基于對象的語言，同時以可以看作一種面向?qū)ο蟮?。這意味著它能運用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。

3、簡單性

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

4、安全性

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

5、動態(tài)性的

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

6、跨平臺性

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

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

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

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

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

2.3 CSS樣式表

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

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

在網(wǎng)頁上使用樣式表有三種方法可以在站點網(wǎng)頁上使用樣式表：

將網(wǎng)頁鏈接到外部樣式表。

在網(wǎng)頁上創(chuàng)建嵌入的樣式表。

應用內(nèi)嵌樣式到各個網(wǎng)頁元素。

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

當人們只是要定義當前網(wǎng)頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯(lián)樣式表，“嵌”在網(wǎng)頁的 標記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。

使用內(nèi)嵌樣式以應用級聯(lián)樣式表屬性到網(wǎng)頁元素上。

如果網(wǎng)頁鏈接到外部樣式表，為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

圖2-2 隨筆

相冊效果圖2-3如下：

圖2-3 相冊

音樂效果圖2-4如下：

圖2-4 音樂

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

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

圖2-5 關于我

3.2 網(wǎng)站主題

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

3.3 網(wǎng)站風格

1.本網(wǎng)站主要體現(xiàn)了清新自然的風格，以簡潔為主。2.網(wǎng)站的主色調(diào)為綠和白，充分襯托清新自然的風格。

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

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

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

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

onmouseout=“makevisible(this,1)”

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

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

4.6 xiangce4.html頁面的制作

1.制作圖庫頁面。

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

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

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

致

謝

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

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

炎黃職業(yè)技術(shù)學院 信息工程系畢業(yè)設計（論文）

參考文獻

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

第四篇：flash網(wǎng)頁設計畢業(yè)(論文)

遼寧警察學院畢業(yè)設計（論文）

Flash網(wǎng)頁設計

系： 高職計算機系 專業(yè)： 計算機應用技術(shù) 學生： 陶帥帥 指導教師：楊 虹

完成日期：2017年4月3日

遼寧警察學院畢業(yè)設計（論文）

Flash網(wǎng)頁設計

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

頁

摘 要

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

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

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普通網(wǎng)頁設計的特點.........................................................................4 1.2.2Flash網(wǎng)頁...........................................................................................5 第2章 網(wǎng)頁設計的開發(fā)工具與開發(fā)語言..................................................................7

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

3.1 主頁界面設計解析.........................................................................................9 3.1.1Flash網(wǎng)頁加載時的進度條設計..........................................................9 3.1.2網(wǎng)頁LOGO與站點設計...................................................................10 3.1.3網(wǎng)頁導航條的設計.............................................................................10 3.1.4進入主頁界面前動態(tài)效果設計.........................................................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 結(jié)論..............................................................................................................................20 致謝..............................................................................................................................21 參考文獻......................................................................................................................22 III

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

前 言

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

Flash產(chǎn)業(yè)作為我國發(fā)展中的產(chǎn)業(yè)，網(wǎng)頁設計技術(shù)的發(fā)展推動了該產(chǎn)業(yè)的傳播，使得各類Flash網(wǎng)頁紛紛崛起，為廣大Flash愛好者帶來了諸多便利。

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

Flash網(wǎng)頁設計

第1章 概述

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

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

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

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

再次，F(xiàn)lash動漫采用的是“流式”的Flash播放技術(shù)，用戶不必等到Flash下載完全再去欣賞，而是一邊下載一邊欣賞。

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

1.1 Flash軟件的介紹

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

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

檔案格式:

圖1-1影片檔

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

圖1-2原始檔

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

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

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

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

Flash網(wǎng)頁設計

1.1.1Flash的歷史

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

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

1.2 Flash軟件的特點

1.2.1普通網(wǎng)頁設計的特點

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

1、確定網(wǎng)頁的整體風格

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

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

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

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

在這里，我提供給大家一些參考經(jīng)驗：

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

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

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

2、網(wǎng)頁色彩的搭配

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

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

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

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

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

3、在網(wǎng)頁配色中，還要切記一些誤區(qū)：

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

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

1.2.2Flash網(wǎng)頁

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

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

Flash網(wǎng)頁設計

部分等等，都應在考慮范圍之內(nèi)。

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

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

第2章 網(wǎng)頁設計的開發(fā)工具與開發(fā)語言

2.1 網(wǎng)頁使用的開發(fā)工具

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

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

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

Html文件是用ASCLL代碼編寫成的，可以保存為最簡單的TXT文本文件，F(xiàn)lash網(wǎng)頁設計

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

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

第3章 Flash網(wǎng)頁設計中的各種技術(shù)解析

3.1 主頁界面設計解析

3.1.1Flash網(wǎng)頁加載時的進度條設計

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

(2)建立進度條設計主要是幫助觀察Flash網(wǎng)頁載入的進度，建立進度條設計樣式如圖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網(wǎng)頁設計

if(baifenshu == 100){

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

網(wǎng)頁LOGO設計：

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

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

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

圖3-3 logo展示圖

3.1.3網(wǎng)頁導航條的設計

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

圖3-4導航條背景

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

(2)建立6個圖形元件分別在各元件中設計各導航按鈕文字，字體樣式雅黑，字號12，顏色黑色，分別載入各影片剪輯做出動態(tài)效果，對應每個影片剪輯做一個與影片剪輯等大的按鈕，按鈕與影片剪輯放于不同層疊加在一起均勻排列與導航條上（如圖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網(wǎng)頁設計

} on(press){

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

} 3.1.4進入主頁界面前動態(tài)效果設計

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

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

tellTarget(“/”){

}

loadMovieNum(“index101.swf”, 100);

gotoAndPlay(1);

tellTarget(“/”){

}

loadMovieNum(“index101.swf”, 100);

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

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

圖3-9小窗口動態(tài)載入效果時間軸設置

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

圖3-10導航條、網(wǎng)頁頭尾的圖片動態(tài)載入效果時間軸設置

3.1.5進入主頁時的音效設置

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

(2)選擇適當?shù)囊粜砑拥綍r間軸上的適當位置（如圖3-11），使動態(tài)效果更具表現(xiàn)力。

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

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

Flash網(wǎng)頁設計

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

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

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

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

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

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

圖3-12軟件目錄樣式

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

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

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

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

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

圖3-13本影片剪輯動態(tài)效果的時間軸設置

圖3-14本影片剪輯動態(tài)效果

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

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

Flash網(wǎng)頁設計

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

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

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

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

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

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

圖3-17按鈕第一幀

圖3-18按鈕第二三幀

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

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

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

Flash網(wǎng)頁設計

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

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

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

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

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

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

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

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

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

Flash網(wǎng)頁設計

結(jié)論

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

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

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

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

致謝

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

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

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

Flash網(wǎng)頁設計

參考文獻

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

第五篇：電大Dreamweaver的網(wǎng)頁設計論文

鄂爾多斯電視廣播大學畢業(yè)設計

鄂爾多斯電視廣播大學

畢業(yè)設計（論文）

題目：個人網(wǎng)站設計——個人網(wǎng)站建設

學 院：_鄂爾多斯電大 _ 專 業(yè)：計算機應用技術(shù) 班 級： 計算機班 姓 名：____s.____

2014年12月完成

I

鄂爾多斯電視廣播大學畢業(yè)設計

摘 要

在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。

現(xiàn)今的社會，人們已經(jīng)離不開了網(wǎng)絡，網(wǎng)絡已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復雜化轉(zhuǎn)為簡單化，擺脫了時間和空間的限制。網(wǎng)站為很多人提供了一個網(wǎng)絡生活空間，通過其網(wǎng)頁展示了企業(yè)介紹、城市文化、校園文化介紹、招商信息、加盟程序、留言等一系列內(nèi)容的介紹。為了更好的宣傳和服務于經(jīng)濟發(fā)展，我通過制作一個網(wǎng)站來介紹宣傳一下我的家鄉(xiāng)。本文比較系統(tǒng)的闡述了有關網(wǎng)站建設方面的相關理論知識及該網(wǎng)站開發(fā)設計，充分體現(xiàn)了計算機技術(shù)服務于經(jīng)濟建設的重要思想。

關鍵詞: 網(wǎng)站建設，Internet，城市

II

鄂爾多斯電視廣播大學畢業(yè)設計

目錄

第一章 前言...........................................................1 1．1課題來源.......................................................1 1．2 網(wǎng)站開發(fā)項目需求分析.........................................1 第二章 網(wǎng)頁制作概述....................................................2 2.1 網(wǎng)頁的類型......................................................2 2.1.1 靜態(tài)頁面..................................................2 2.1.2 動態(tài)頁面..................................................2 2.2 網(wǎng)頁開發(fā)技術(shù)....................................................3 2.3 網(wǎng)頁布局........................................................4 2.3.1 網(wǎng)頁布局的基本概念........................................4 2.3.2網(wǎng)頁布局方法...............................................6 2.3.2 網(wǎng)頁布局技術(shù)..............................................8 2.4網(wǎng)頁配色........................................................9 2.5 網(wǎng)頁設計流程...................................................10 第三章 涉及軟件......................................................11 3.1 DreamWeaVer cs5介紹...........................................11 3.2 DreamWeaVer cs5操作界面.......................................11 第四章 建立網(wǎng)頁鏈接..................................................12 4.1 文字鏈接.......................................................12 4.2 圖像鏈接.......................................................13 4.3在HTML語言中建立網(wǎng)頁鏈接......................................14 第五章 結(jié)論........................................................16 致 謝................................................................17 參考文獻..............................................................18

III

鄂爾多斯電視廣播大學畢業(yè)設計

第一章 前言

1．1課題來源

隨著二十一世紀新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。

互聯(lián)網(wǎng)拉近了各個領域之間的距離，如今利用互聯(lián)網(wǎng)來宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來帶動自身的發(fā)展。

1.2網(wǎng)站開發(fā)項目需求分析

一個網(wǎng)站項目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分來自于客戶的實際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。

鄂爾多斯電視廣播畢業(yè)設計

第 I 條 第二章 網(wǎng)頁制作概述

2.1 網(wǎng)頁的類型

網(wǎng)頁有多種分類,我們籠統(tǒng)意義上的分類是動態(tài)和靜態(tài)的頁面,原則上講靜態(tài)頁面多通過網(wǎng)站設計軟件來進行重新設計和更改,相對的比較滯后，當然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁面~我們稱這種靜態(tài)頁面為偽靜態(tài)。動態(tài)頁面通過網(wǎng)頁腳本與語言自動處理自動更新的頁面。2.1.1 靜態(tài)頁面

靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面,如果想更新網(wǎng)頁內(nèi)容,要通過FTP軟件把文件DOWN下來用網(wǎng)頁制作軟件修改（通過fso等技術(shù)例外）。但是靜態(tài)頁面最大的好處是下載速度快，因為不需要程序運算和數(shù)據(jù)庫連接。常見的靜態(tài)頁面以.html、.htm為擴展名的。并非網(wǎng)站上沒有動畫的就是靜態(tài)頁面[3]。2.1.2 動態(tài)頁面

動態(tài)頁面是通過執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。動態(tài)頁面通?？梢酝ㄟ^網(wǎng)站后臺管理系統(tǒng)對網(wǎng)站的內(nèi)容進行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動，博客，網(wǎng)上調(diào)查等，這都是動態(tài)網(wǎng)站的一些功能，也是我們常見的。動態(tài)網(wǎng)頁是需要語言環(huán)境支持的，動態(tài)頁面常見的擴展名有：.asp、.php、.jsp、.cgi 等。動態(tài)頁面的“動態(tài)”是網(wǎng)站與客戶端用戶互動的意思，而非網(wǎng)頁上有動畫的就是動態(tài)頁面[4]。

動態(tài)網(wǎng)頁是最常用的網(wǎng)站建設的一種表達形式，其優(yōu)點在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請求返回相應的數(shù)據(jù)?？梢哉f是一對多的關

鄂爾多斯電視廣播畢業(yè)設計

系。從而達到資源的最大利用和節(jié)省服務器上的物理資源。如果今后需要改變站點風格，只需要重新制作前臺所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫結(jié)構(gòu)不變，可以很快的進行改版的。

2.2 網(wǎng)頁開發(fā)技術(shù)

動態(tài)網(wǎng)頁開發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。

HTML（HyperTextMark-upLanguage）即超文本標記語言，是004km.cnmon Gateway Interface(公用網(wǎng)關接口)。在早期，你可以使用不同的程序編寫合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強大，但由于編程困難，效率低下，修改復雜等缺陷，所以有逐漸被新技術(shù)取代的趨勢。

ASP全名Active Server Pages，是一個WEB服務器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運行動態(tài)的、交互的、高性能的WEB服務應用程序。ASP采用腳本語言VB Script（Java script）作為自己的開發(fā)語言。ASP更精確的說是一個中間件，這個中間件將Web上的請求轉(zhuǎn)入到一個解釋器中，在這個解釋器中將所有的ASP的Script進行分析，再進行執(zhí)行，而這時可以在這個中間件中去創(chuàng)建一個*.html文件（靜態(tài)網(wǎng)頁）。PHP是一種跨平臺的服務器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動態(tài)生成頁面.它支持目前絕大多數(shù)數(shù)據(jù)庫。還有一點，PHP是完全免費的[6]。

JSP 是Sun公司推出的新一代站點開發(fā)語言，他完全解決了目前ASP,PHP的一個通?。_本級執(zhí)行（據(jù)說PHP4 也已經(jīng)在Zend 的支持下，實現(xiàn)編譯運

鄂爾多斯電視廣播畢業(yè)設計

行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應用程序 和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能強大的站點程序。

2.3 網(wǎng)頁布局

網(wǎng)站主頁就好象是宣傳欄或者店面——對訪問者產(chǎn)生第一印象，都希望盡量給人留下好的印象。

一般來說，好的網(wǎng)站應該給人有這樣的感覺：

干凈整潔；

條理清楚；

網(wǎng)頁

專業(yè)水準；

引人入勝。

網(wǎng)頁應該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從——離開是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂，你要做的唯一決定就是離開那里，越快越好。(a)2.3.1 網(wǎng)頁布局的基本概念

最開始，網(wǎng)頁呈現(xiàn)在你面前的時侯，它就好像一張白紙，它需要你任意揮灑你的設計才思，可以創(chuàng)造出自己的設計方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標準或者說大多數(shù)訪問者的瀏覽習慣，那么你可以在此基礎上加上自己的東西，這樣你創(chuàng)造出來的網(wǎng)頁才能更好的被別人接受。

（1）頁面尺寸

鄂爾多斯電視廣播畢業(yè)設計

由于頁面尺寸和顯示器大小及分辨率有關系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因為瀏覽器也將占去不少空間，留下給你的頁面范圍變得越來越小。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個象素；分辨率在640x480的情況下，頁面的顯示尺寸為:620X311個象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。

瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當你顯示全部的工具欄時，和關閉全部工具欄時，頁面的尺寸是不一樣的。

在網(wǎng)頁設計過程中，向下拖動頁面是惟一給網(wǎng)頁增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點的內(nèi)容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內(nèi)容，那么你最好能在上面做上頁面內(nèi)部連接，方便訪問者瀏覽。

（2）整體造型

造型就是創(chuàng)造出來的物體形象，這里是指頁面的整體形象。這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，你可以充分運用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。

對于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型；圓形帶表著柔和，團結(jié)，溫暖，安全等，許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點為顯示它的權(quán)威性常以三角形為頁面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁制作多數(shù)是接合多個圖形加以設計，在這其中某種圖形的構(gòu)圖比例可能占的多一些。

（3）頁頭

頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什么內(nèi)容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協(xié)調(diào)性。頁頭常放

鄂爾多斯電視廣播畢業(yè)設計

置站點名字的圖片和公司標志以及旗幟廣告。

（4）文本

文本在頁面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面制作技術(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。

（5）頁腳

頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁腳的。

（6）圖片

圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現(xiàn)在這里。

（7）多媒體

除了文本和圖片，還有聲音，動畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也將變得更重要。(b)2.3.2網(wǎng)頁布局方法

網(wǎng)頁布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。下面分別加以介紹。

（1）紙上布局法

許多網(wǎng)頁制作者不喜歡先畫出頁面布局的草圖，而是直接在網(wǎng)頁設計器里邊設計布局邊加內(nèi)容。這種不打草稿的方法不能讓你設計出優(yōu)秀的網(wǎng)頁來。所以在開始制作網(wǎng)頁時，要先在紙上畫出你頁面的布局草圖來。

首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問者，你頁面的尺寸以800X600的分辨率為準。

其次，造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形，這個矩形就是你布局的范圍了。選擇一個形狀作為整個頁面的主題造型，我們選擇圓形，因為它代表者柔和，和時尚流行比較相稱，然后在矩形框架里隨意畫出來，你可以試者在增加一些圓形或者其它形狀。這樣畫下來，你會發(fā)現(xiàn)很亂。其實，如果你一

鄂爾多斯電視廣播畢業(yè)設計

開始就想設計出一個完美的布局來是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點，你不要擔心你設計的布局是否能夠?qū)崿F(xiàn)。事實上，只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實現(xiàn)。如圖2-1和圖2-2

圖2-1 手繪布局圖 圖2-2 布局圖

考慮到左邊向左凹的弧線，為了取得平衡我們在頁面右邊增加了一個矩形，(也可以是一條線段)如圖2-3。

圖2-3 布局圖的改善

然后，增加頁頭。一般頁頭都是位于頁面頂部，所以我們?yōu)閳D3增加了一個頁頭，為了和左邊的弧線和右邊的矩形取得平衡，我們增加了一個矩形頁頭并讓頁頭相交與左邊的弧線，如圖2-4。

圖2-4 頁頭的圖示

然后，增加文本。頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯，所以文本放置在空白部分不會因為左邊的弧線而顯得不協(xié)調(diào)，如圖2-5。

鄂爾多斯電視廣播畢業(yè)設計

圖2-5 文本的圖示

最后，增加圖片。圖片是美化頁面和說明內(nèi)容必須的媒體。在這里把圖片加入到適當?shù)牡胤?，如圖2-6。

圖2-6 圖片的圖示

經(jīng)過以上的幾個步驟，一個時尚頁面的大概布局就出現(xiàn)了。當然，它不是最后的結(jié)果，而是你以后制作時的重要參考依據(jù)。

（2）軟件布局法

除了紙上布局，還可以利用軟件來完成這些工作。如利用Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網(wǎng)頁布局上更顯得心應手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設計出用紙張無法實現(xiàn)的布局意念。(c)2.3.2 網(wǎng)頁布局技術(shù)

（1）層疊樣式表的應用

在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS有點復雜，但它的確是一個好的布局方法[7]。曾經(jīng)無法實現(xiàn)的想法利用CSS都能實現(xiàn)。目前在許多站點上，層疊樣式表的運用是一個站點優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。

（2）表格布局

表格布局被廣泛使用，已經(jīng)成為一個潛在的標準。隨便瀏覽一個站點，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。

鄂爾多斯電視廣播畢業(yè)設計

表格布局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響[8]。對于表格布局，打開一個站點的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它(要所見即所得的軟件)，會可以看到這個頁面是如何利用表格的。

（3）框架布局

由于它的兼容性，框架布局并沒有被所有人接受。但從布局上考慮，框架結(jié)構(gòu)不失為一個好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。

2.4網(wǎng)頁配色

網(wǎng)站充斥著枯燥的設計，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標準化的界面可以使瀏覽更方便，但同時帶給用戶一種很世俗的體驗，并不能與訪客產(chǎn)生一種積極的聯(lián)系。

面對這種單調(diào)的設計，有一種解決方法，就是使用顏色?？赡軟]有其他設計元素能像顏色一樣能影響人們對世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會讓我們感覺到舒適、敬畏，或者激動[9]。在界面設計中，顏色組合對設計非常有用?？梢詤^(qū)分設計讓用戶更加難忘、引導用戶使用戶專注于交互、吸引用戶使頁面布局更舒適，更有魅力。

一旦有機會可以讓網(wǎng)站更獨特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會花更多時間瀏覽并且想是從哪里訪問過來的，他們有可能記住這個網(wǎng)站并且下次再訪問?？赡軟]有比顏色更好的元素可以達到這樣的效果了。人們會馬上對顏色產(chǎn)生感覺：激動、高興或者枯燥乏味。

當你試圖在一個充滿飽和色調(diào)的頁面上瀏覽信息時，你的眼睛會不斷地返回那些亮的顏色。最強的視覺元素是最重要的。我們趨向于忘記那些深藍、黃色和灰色，因為每天都看到。在那些用戶需要長時間在線使用的 Web 應用程序中，注意這一點尤為重要。不是很強烈的配色可以使用戶專注于工作和接收重要信息。當然完美的 Web 體驗不能僅僅依靠顏色，結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作，來創(chuàng)建可用、易用的網(wǎng)站和應用程序。但是顏色是平衡中的重要部分，不能忽略。

鄂爾多斯電視廣播畢業(yè)設計

2.5 網(wǎng)頁設計流程

網(wǎng)頁設計是一個互動的過程，不僅是設計師構(gòu)思設計就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設計人員共同參與協(xié)商才可以，具體流程如下：

首先，獲取客戶需求和資料。在設計網(wǎng)站頁面之前，設計師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的?？蛻籼岢鼍W(wǎng)站需求是非常重要的一個環(huán)節(jié)。沒有詳細的需求，設計人員無法憑空進行設計制作。在這個步驟中，雙方的溝通與交流是非常重要的。

其次，確定網(wǎng)站內(nèi)容。設計人員選擇適合自己的圖像編輯軟件、動畫制作軟件和網(wǎng)頁制作軟件進行網(wǎng)頁的初步設計，這中間可能還需要和客戶進行多次溝通才能達到客戶滿意的效果。在具體設計時，設計人員應該為網(wǎng)站定位一個主題，從而保證所有網(wǎng)頁都圍繞這個主題進行設計制作，保證風格的和諧統(tǒng)一。

然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務器空間上，然后上傳發(fā)布文件。

最后，后期維護。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護，這樣就需要設計人員從客戶方獲取新資料進行定期或不定期的更新。如果是動態(tài)網(wǎng)站，設計人員需要負責培訓客戶方如何使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息，設計人員只要及時更正動態(tài)網(wǎng)站的錯誤即可。

鄂爾多斯電視廣播畢業(yè)設計

第三章 涉及軟件

3.1 DreamWeaVer cs3介紹

Dreamweaver CS3是Adobe(奧多比)公司收購Macromedia公司后推出的Creative Suite 3 設計套裝中用于網(wǎng)頁設計與制作的組件。作為全球最流行，最優(yōu)秀的所見即所得的網(wǎng)頁編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺，跨瀏覽器的充滿動感的網(wǎng)頁，是目前制作Web頁站點,Web頁和Web應用程序開發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱為網(wǎng)頁制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁的最佳拍檔

3.2 DreamWeaVer cs3操作界面

DreamWeaVer cs3界面設計友好，空間廣闊，操作精微細致,是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設計文檔的專業(yè)性和兼容性。，如圖3.1所示。

鄂爾多斯電視廣播畢業(yè)設計

圖3.1 DreamWeaVer cs3操作界面

第四章 建立網(wǎng)頁鏈接

網(wǎng)站實際上是由很多網(wǎng)頁組成的，那么網(wǎng)頁之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁的“鏈接”?！版溄印保址Q“超鏈接"（Hyperlink）,它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。

4.1 文字鏈接

“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有“文件小、制作簡單和便于維護”的特點。接下來結(jié)合我的個人網(wǎng)站為實例，來講解如何為文字建立“鏈接”。操作步驟：

步驟1、準備好已經(jīng)制作完成的首頁的各個欄目頁面

步驟

2、在Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。步驟

3、觀察“屬性面板”，其中包括一個“鏈接”文本框。步驟

4、接下來需要把鏈接的位址加入到文本框中。

鄂爾多斯電視廣播畢業(yè)設計

步驟

5、在“鏈接”文本框下面還有一個“目標”下拉列表，從中可以選擇鏈接網(wǎng)頁顯示的窗口方式，共有4種。如圖：

步驟

6、還可以設置一些“鏈接”的屬性，單擊“屬性面板”中的“頁面屬性”，選擇其中的“鏈接”分類，可以進行的設置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。

步驟

7、至此，第1個欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，當鼠標放在“放松心情”這4個文字上時將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會顯示鏈接到的網(wǎng)頁的位址，單擊文字，頁面會立即跳轉(zhuǎn)到第1個欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

8、同理，按照以上步驟，再為“閑情逸致”和“個人主頁”等其它欄制作指向?qū)獧谀康逆溄印?/p>

至此，整個“文字鏈接”的實例就全就全部完成了。

4.2 圖像鏈接

“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應該在網(wǎng)頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內(nèi)容，接下來以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：

步驟

1、首先仍然要準備好已經(jīng)制作完成的首頁和各個欄目的頁面 步驟

2、在Dreamweaver中打開網(wǎng)站的首頁，之后選取要制作“鏈接”的圖像。

步驟

3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟

4、如果有需要，可以在“目標”下拉列表中選擇“鏈接”網(wǎng)頁顯示的鄂爾多斯電視廣播畢業(yè)設計

窗口方式，分別為-blank、-parent、-self或 top。

步驟

5、至此，第1個欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁，再按下F12預覽，測試一下，將鼠標放在“動畫制作”4個文字上時將變成手形，同時瀏覽器窗口下面的狀態(tài)區(qū)中會顯示出鏈接到的網(wǎng)頁的地址，并且會顯示出“替代”文本“動畫制作”，單擊文字，頁面會立即跳轉(zhuǎn)到第3個欄目中，這表示鏈接已經(jīng)制作成功了。

步驟

6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)獧谀康逆溄?。步驟

7、在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁。

至此，整個“圖像鏈像”的實例就全部完成了。

4.3在HTML語言中建立網(wǎng)頁鏈接

一、文字鏈接

在HTML語言中用超鏈接標記指向一個目標。其基本格式為：舉個簡單的“文本鏈接”的實例，該實例相對應的HTML代碼如下所示。

a href-“index2.html”target=”-blank”>平面設計（新開窗口，-blank)

相冊（原窗口，默認為空）

留言