第一篇：商業(yè)網(wǎng)頁(yè)設(shè)計(jì)論文
摘要:商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中具體的字體、圖形、圖象、標(biāo)志等等，常常表現(xiàn)為點(diǎn)線面、色彩、動(dòng)靜、主次等視覺(jué)因素，這些因素的不同使用都會(huì)影響讀者的視覺(jué)習(xí)慣和心理變化。本文將分析商業(yè)網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)因素的心理規(guī)律，揭示網(wǎng)頁(yè)設(shè)計(jì)如何通過(guò)視覺(jué)因素更有效、更合理的表現(xiàn)與傳達(dá)信息。
關(guān)鍵詞: 網(wǎng)頁(yè)設(shè)計(jì) 視覺(jué)心理因素 構(gòu)成要素 視覺(jué)流程
商業(yè)網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供產(chǎn)品和服務(wù)的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，其網(wǎng)頁(yè)頁(yè)面由具體的文字（標(biāo)題、廣告語(yǔ)、單位名稱、Email地址等）、企業(yè)標(biāo)志、商標(biāo)、產(chǎn)品圖形、和信息菜單等內(nèi)容組成，這些內(nèi)容又常常表現(xiàn)為點(diǎn)線面、色彩、動(dòng)靜、主次等視覺(jué)因素，這些因素的不同使用都會(huì)影響讀者的視覺(jué)習(xí)慣和心理變化。
本文將試析商業(yè)網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)因素的心理規(guī)律，揭示商業(yè)網(wǎng)頁(yè)設(shè)計(jì)如何通過(guò)視覺(jué)心理因素更有效、更合理的表現(xiàn)與傳達(dá)信息。展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略。
一、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中點(diǎn)、線、面視覺(jué)心理因素的運(yùn)用
點(diǎn)、線、面是商業(yè)網(wǎng)頁(yè)設(shè)計(jì)基本的視覺(jué)元素，是表現(xiàn)視覺(jué)形象的基本設(shè)計(jì)語(yǔ)言。從視覺(jué)角度看網(wǎng)頁(yè)設(shè)計(jì)主要是如何經(jīng)營(yíng)好三者的關(guān)系，因?yàn)椴还苁侨魏我曈X(jué)形象或者版式構(gòu)成，歸結(jié)到底，都可以歸納為點(diǎn)、線和面。
1.網(wǎng)頁(yè)設(shè)計(jì)造型要素中的點(diǎn)
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中的點(diǎn)是構(gòu)成網(wǎng)頁(yè)的最基本單位，是指頁(yè)面中具備點(diǎn)的視覺(jué)特點(diǎn)、體積較小的物象。相對(duì)于整體背景而言一個(gè)單獨(dú)的點(diǎn)是相比較而言的；是有大小、形狀和體積的。點(diǎn)的大小、形態(tài)、位置不同，所產(chǎn)生的視覺(jué)效果、心理作用也不同。一個(gè)網(wǎng)頁(yè)往往需要有數(shù)量不等，形狀各異的點(diǎn)來(lái)構(gòu)成，可以是具體產(chǎn)品、商品標(biāo)志等，也可以是感覺(jué)上的點(diǎn)。例如，天空中的飛鳥、沙灘上的腳印、花瓣上的蜜蜂等，在其周圍背景襯托下，都給人以“點(diǎn)”的視覺(jué)心理感受。
點(diǎn)在設(shè)計(jì)中即可以起一種穩(wěn)定造型的作用，亦可起到活潑生動(dòng)、吸引視覺(jué)中心的作用，使用得當(dāng)，甚至可以畫龍點(diǎn)睛；點(diǎn)的形狀、方向、大小、位置、聚集與發(fā)散，還能夠給人帶來(lái)不同的心理感受。
(1)單點(diǎn)的應(yīng)用：點(diǎn)在人們的視覺(jué)中具有很強(qiáng)的吸引作用，如：點(diǎn)（商品）設(shè)計(jì)在網(wǎng)頁(yè)的上方或左右位置，則給人不穩(wěn)定感和相對(duì)的動(dòng)感。
(2)多點(diǎn)的應(yīng)用：兩點(diǎn)（二商品）之間會(huì)產(chǎn)生心理連線的感覺(jué)，多點(diǎn)時(shí)則會(huì)出現(xiàn)不同排列，順序的虛擬的面或形體。
2.網(wǎng)頁(yè)設(shè)計(jì)造型要素中的線
點(diǎn)的延伸形成線。線在頁(yè)面中的作用在于表示方向、位置、長(zhǎng)短、寬度、形狀、質(zhì)量和情緒。線是分割頁(yè)面的主要元素之一，是決定頁(yè)面現(xiàn)象的基本要素。商業(yè)網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)因素中的線主要指文字的行線，商品圖形、圖象的輪廊線，各種裝飾線。線的形態(tài)主要有直線和曲線兩大類：
(1)直線給人一種緊張、銳利、簡(jiǎn)潔、剛直感，從心理或生理感覺(jué)來(lái)看具有男性特點(diǎn)。直線又有：細(xì)直線，給人纖細(xì)、敏銳的心理感覺(jué)；粗直線，給人豪爽、拙樸、厚重的感覺(jué)；垂直線，給人一種挺拔、莊嚴(yán)感；水平直線則給人方向感和強(qiáng)烈的動(dòng)感。
(2)曲線表現(xiàn)出一種動(dòng)態(tài)，活潑，輕快的意味，顯示了女性美的特征，商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用文字行、圖象輪廊線或裝飾線的造型，創(chuàng)造一種女性化的審美感。自由曲線是最好的情感抒發(fā)手段。打破了水平線組成的莊嚴(yán)和單調(diào)，給商業(yè)網(wǎng)頁(yè)增加了豐富、流暢、活潑的氣氛。水平線和自由曲線的組合運(yùn)用，形成新穎的形式和不同情感的對(duì)比。
3.網(wǎng)頁(yè)設(shè)計(jì)造型要素中的面
線的推移形成面。面是無(wú)數(shù)點(diǎn)和線的組合。面具有一定的面積和質(zhì)量，占據(jù)空間的位置更多，因而相比點(diǎn)和線來(lái)說(shuō)視覺(jué)沖擊力更大更強(qiáng)烈。面在網(wǎng)頁(yè)設(shè)計(jì)中通常指各種圖形、色塊的形狀設(shè)計(jì)，不同形狀的面具有自己鮮明的個(gè)性和情感特征，能給人不同的心理感受，如方形的面具有沉著，穩(wěn)重，厚實(shí)，堅(jiān)強(qiáng)的男性特征；三角形、梯形面常給人一種穩(wěn)定、端正之感；但如果將它們倒過(guò)來(lái)設(shè)計(jì)，則給人一種輕、不穩(wěn)定的感覺(jué)。圓形充實(shí)、圓滿、活潑的感覺(jué)，比較適合表現(xiàn)兒童產(chǎn)品或者女性用品。菱形或不規(guī)則形體則給人一種活潑、輕快之感。
在商業(yè)網(wǎng)頁(yè)的視覺(jué)構(gòu)成中，點(diǎn)、線、面既是最基本的造型元素，又是最重要的表現(xiàn)手段。在確定商業(yè)網(wǎng)頁(yè)主體形象的位置、動(dòng)態(tài)時(shí)，點(diǎn)線面將是需要最先考慮的因素。必須熟練掌握設(shè)計(jì)語(yǔ)言。要善于根據(jù)商業(yè)特性采用不同的組合去體現(xiàn)不同的情感訴求，達(dá)到推銷、銷售商品和服務(wù)的作用。只有合理的安排好點(diǎn)線面的互相關(guān)系，才能設(shè)計(jì)出具有最佳視覺(jué)效果的頁(yè)面，充分的表達(dá)出商業(yè)網(wǎng)頁(yè)最終的訴求！
二、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中色彩視覺(jué)心理因素的運(yùn)用
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中色彩是確立網(wǎng)站風(fēng)格的靈魂。色彩能產(chǎn)生強(qiáng)烈的視覺(jué)效果，使頁(yè)面更加生動(dòng)。色彩設(shè)計(jì)的好壞直接影響閱讀者的觀賞興趣與心理變化。因此，地位十分重要。商業(yè)網(wǎng)頁(yè)的色彩設(shè)計(jì)應(yīng)從以下幾個(gè)方面把握和利用其心理特征：
首先，整個(gè)頁(yè)面要確定一個(gè)主色調(diào)，其有利于體現(xiàn)網(wǎng)站主題。每一種色彩都具有它自身的性格，如：彩度高，明度高的色彩常給人一種華麗感，相反彩度低，低明度的色彩則給人一種樸實(shí)感。暖色系、高明度的色彩能給人一種面積大的前進(jìn)感。冷色系、低明度的色彩則能給人一種面積小的后退感。每個(gè)人群對(duì)色彩的喜好也有所不同，如男性較喜歡冷色，女性則偏好暖色或高明度、高彩度的色彩，兒童喜好純色，討厭濁色，老人則偏好濁色，中年人或文化層次較高的人偏好冷灰色等。因此在設(shè)計(jì)中要考慮主要讀者群的背景和構(gòu)成以及如何與商品的屬性相呼應(yīng)。
其次，在主色調(diào)下的色調(diào)搭配。若頁(yè)面空間整體、色彩和諧統(tǒng)一，則給人一種幽雅、寧?kù)o感；若以對(duì)比手法處理，圖形文字色彩明快突出于背景色，則頁(yè)面空間氛圍會(huì)顯得活躍而有生氣。但是，要注意不能有強(qiáng)烈的色彩對(duì)比，因?yàn)檫^(guò)于豐富的背景色彩會(huì)影響前景商品圖片和文字的取色，使文字溶于背景中，不易辨識(shí)。所以背景一般應(yīng)以單純?yōu)橐恕?/p>
最后，作為設(shè)計(jì)師在考慮網(wǎng)頁(yè)設(shè)計(jì)時(shí)，還應(yīng)考慮到時(shí)代流行性色和企業(yè)標(biāo)準(zhǔn)色的問(wèn)題。所謂流行色，是指在一定范圍內(nèi)和時(shí)間內(nèi)，非常盛行并易為人們接受的某些式樣或顏色。而標(biāo)準(zhǔn)色的運(yùn)用在網(wǎng)上擴(kuò)大了品牌效應(yīng)，也是對(duì)公司整體形象的統(tǒng)一應(yīng)用，從而構(gòu)成了企業(yè)識(shí)別系統(tǒng)（CIS）的重要部分。
三、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中動(dòng)、靜的視覺(jué)心理因素的運(yùn)用
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)構(gòu)成要素可分為兩種狀態(tài)：靜態(tài)與動(dòng)態(tài)。靜態(tài)要素設(shè)計(jì)具體指靜止的商品圖形、文字、按紐等；動(dòng)態(tài)要素，具體指動(dòng)態(tài)按紐、按紐連接、網(wǎng)頁(yè)動(dòng)畫和視頻等，它們是豐富、生動(dòng)網(wǎng)頁(yè)、張顯個(gè)性、突出主題重要手段。
動(dòng)靜以及不同的動(dòng)靜組合都可以反映不同的心理與性格，如，動(dòng)大體上給人活潑、生動(dòng)的印象，但極慢的動(dòng)常給人憂慮感；迅速或突然的動(dòng)常給人焦慮、驚慌感。另外，靜也常給人寧?kù)o、沉悶兩種感覺(jué)。
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中要注意處理好動(dòng)靜的關(guān)系，要整體和諧統(tǒng)一，給人生動(dòng)而不躁動(dòng)或厭惡感。同時(shí)還要遵循動(dòng)態(tài)性原則與交互性原則。
1.動(dòng)態(tài)性原則，即要有四維空間或五維空間的運(yùn)作觀念。一件網(wǎng)頁(yè)商品、圖片不僅是二維的平面或三維的視覺(jué)，也要有時(shí)間與空間的變換，情感與思維認(rèn)識(shí)的演變等多維因素。
2.交互性原則，即界面設(shè)計(jì)強(qiáng)調(diào)交互過(guò)程。一方面是物的信息傳達(dá)，另一方面是人的接受與反饋，對(duì)任何物的信息都能動(dòng)地認(rèn)識(shí)與把握。
四、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中視覺(jué)流程心理因素的運(yùn)用
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)是通過(guò)視覺(jué)元素引起人注目而實(shí)現(xiàn)商品信息內(nèi)容的傳達(dá)，為了使網(wǎng)頁(yè)獲得最大的視覺(jué)傳達(dá)功能，使網(wǎng)頁(yè)真正成為可讀強(qiáng)性而且新穎的媒體，必須適應(yīng)人們視覺(jué)流程的心理和生理的特點(diǎn)。
視覺(jué)流程的形成是由人類的視覺(jué)特性所決定的。心理學(xué)家葛斯達(dá)認(rèn)為：人們閱讀時(shí)，版面的上部比下部的注目?jī)r(jià)值高，左側(cè)比右側(cè)的注目?jī)r(jià)值高。因此，版面的左上側(cè)位置最為引人注目，因此，在網(wǎng)頁(yè)設(shè)計(jì)中一些突出的商品信息，如主標(biāo)題、每天更新的內(nèi)容等通常都放在這個(gè)位置。以便于一開始就吸引受眾的視線，誘導(dǎo)其由上到下，由左到右地移動(dòng)。此位置也被稱作視覺(jué)的最佳視域。也就是最優(yōu)選的地方。當(dāng)然視覺(jué)流程是一種感覺(jué)而非確切的數(shù)學(xué)公式，只要符合人們認(rèn)識(shí)過(guò)程的心理順序和思維發(fā)展的邏輯順序，就可以更為靈活地運(yùn)用。設(shè)計(jì)者可以利用視線移動(dòng)規(guī)律，誘導(dǎo)讀者的視線作左右流動(dòng)、上下流動(dòng)以及斜線的不穩(wěn)定流動(dòng)，通過(guò)編排設(shè)計(jì)，人為地產(chǎn)生最佳視域，突出主要商品，以達(dá)到一定的視覺(jué)效果，傳遞商品信息。
商業(yè)網(wǎng)頁(yè)作為一種新的企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，它的發(fā)展雖然沒(méi)有多長(zhǎng)時(shí)間，卻兼容了傳統(tǒng)平面設(shè)計(jì)的特征，又具備其所沒(méi)有的優(yōu)勢(shì)，成為今后商品信息交流的一個(gè)非常有影響的途徑。其設(shè)計(jì)是一種綜合性的設(shè)計(jì)，它所涉及的范圍非常的廣泛，包括消費(fèi)者心理學(xué)、視覺(jué)設(shè)計(jì)美學(xué)、人機(jī)工程、哲學(xué)等諸多方面，而本文中只從視覺(jué)心理因素的角度進(jìn)行了一些闡述與分析，僅作拋磚引玉之用。
參考文獻(xiàn):
[1]李彬彬:設(shè)計(jì)效果心理評(píng)價(jià)[M].北京:中國(guó)輕工出版社,2005.1
[2]趙殿澤:構(gòu)成藝術(shù)[M].沈陽(yáng):遼寧美術(shù)出版社，1994
[3]趙國(guó)志:色彩構(gòu)成[M].沈陽(yáng):遼寧美術(shù)出版社，1994
[4]張國(guó)良:傳播學(xué)原理[M].上海:復(fù)旦大學(xué)出版社，2000.1
第二篇：網(wǎng)頁(yè)設(shè)計(jì)論文
網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課程論文
摘要:隨著互聯(lián)網(wǎng)的不斷發(fā)展和中國(guó)網(wǎng)絡(luò)人口的日益增長(zhǎng)，建立個(gè)人網(wǎng)站，不但可以更好的展示自己，而且可以提高自己在計(jì)算機(jī)應(yīng)用方面的能力,網(wǎng)站越發(fā)普及，網(wǎng)站建設(shè)也有新的要求,網(wǎng)站已發(fā)展為一種工具，一個(gè)企業(yè)對(duì)外信息展示的工具.以前網(wǎng)站上常見(jiàn)的大幅圖片，長(zhǎng)達(dá)幾十鐘的flash動(dòng)畫，已悄然而逝，瀏覽者再也不用為了查找一些信息而必須等待動(dòng)畫的時(shí)間，可以簡(jiǎn)單方便的找到自己想要的東西，是瀏覽者主要的目的，也是網(wǎng)站設(shè)計(jì)時(shí)應(yīng)該考慮的問(wèn)題。以前只是一味的追求網(wǎng)站的外觀，其實(shí)網(wǎng)站是一個(gè)公司的對(duì)外信息窗口，因此在考慮美觀的同時(shí)也得考慮瀏覽者的感受，如有些色調(diào)是很亮麗，但是這些過(guò)于亮的色彩看的時(shí)間長(zhǎng)了會(huì)讓你的眼睛不舒服，這樣瀏覽的人就不會(huì)長(zhǎng)時(shí)間在網(wǎng)站上逗留，網(wǎng)站沒(méi)把公司的信息完全的傳達(dá)給客戶． 關(guān)鍵詞：網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)發(fā)展趨勢(shì)網(wǎng)站標(biāo)準(zhǔn) 正文：一:網(wǎng)頁(yè)設(shè)計(jì)發(fā)展趨勢(shì): 1.更多的CSS3 + HTML5 這是期待已久的事情。在過(guò)去的幾年設(shè)計(jì)師已經(jīng)開始關(guān)注和使用CSS3+HTML5，但在以后CSS3+HTML5將會(huì)得到更廣泛的應(yīng)用。網(wǎng)頁(yè)設(shè)計(jì)師最終會(huì)拋棄Flash。Flash不再是昔日的王者，新技術(shù)（指CSS3+HTML5）將會(huì)取而代之 2簡(jiǎn)單的配色方案
沒(méi)有比純色的背景更直觀更簡(jiǎn)潔。純色可以有很多種表達(dá)方式。不要老是黑白灰神馬的，太不給力了。多點(diǎn)考慮綠、黃或者紅作為你的網(wǎng)頁(yè)主色調(diào)。當(dāng)然，顏色最好保持使用2到3種。調(diào)整顏色的透明度，或許會(huì)給你意想不到的效果 3.移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)
智能手機(jī)，ipad和上網(wǎng)本隨處可見(jiàn)，將來(lái)這個(gè)將會(huì)更加明顯。這意味著你的設(shè)計(jì)需要考慮更多的設(shè)備。4.Parallax Scrolling 先來(lái)解釋下Parallax Scrolling，Parallax scrolling 是讓多層背景以不同的速度移動(dòng)，形成運(yùn)動(dòng)視差 3D 效果，雖然純屬視覺(jué)效果，但在內(nèi)容滾動(dòng)時(shí)形成的視覺(jué)體驗(yàn)仍然非常出色。2011年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)熱點(diǎn)就是要?jiǎng)?chuàng)造這樣的深度視覺(jué)效果。5.設(shè)計(jì)需考慮更多的觸屏設(shè)備
觸屏技術(shù)應(yīng)用越來(lái)越廣泛，觸屏設(shè)備隨處可見(jiàn)。這意味著，你的導(dǎo)航設(shè)計(jì)不再只是鼠標(biāo)導(dǎo)航，你必須要要考慮你的設(shè)計(jì)適合觸屏設(shè)備。6.深度判析
深度判析是關(guān)于在網(wǎng)頁(yè)設(shè)計(jì)使用維數(shù)，這樣可以使你的網(wǎng)頁(yè)變得更加真實(shí)。如果運(yùn)用得恰當(dāng)，那將會(huì)是一個(gè)虛擬的3D效果，就像3D電影阿凡達(dá)那樣。盡管3D技術(shù)還沒(méi)有去到網(wǎng)站設(shè)計(jì)，你仍然嘗試使用維數(shù)進(jìn)行設(shè)計(jì)。7.大背景圖
大背景圖的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用在2011年將會(huì)更加明顯。這些背景圖像一般是高分辨率，覆蓋這個(gè)網(wǎng)站。高清照片是一個(gè)迅速抓住你的讀者的好方式，可以產(chǎn)生極具沖擊力的視覺(jué)效果-游客的視線會(huì)不自覺(jué)地落在寬大的背景上。8.不拘謹(jǐn)于頂級(jí)域名
嚴(yán)格意義上這一點(diǎn)與網(wǎng)頁(yè)設(shè)計(jì)無(wú)關(guān)，但這一點(diǎn)也是發(fā)展的趨勢(shì)，將出現(xiàn)更多創(chuàng)造性的域名。.com域名的吸引力越來(lái)越少，主要是你很難再找到一個(gè)比較短的.com域名。2011年人們開始將視線慢慢轉(zhuǎn)移到.me、.co和.cc等身上。想想域名的發(fā)展，搶先一步，不然你很可能再次錯(cuò)失先機(jī)。9.QR: Quick Response 如果你注意現(xiàn)在越來(lái)越多的名片、雜志或者其他地方出現(xiàn)方形條形碼，證明你已經(jīng)看到2011年的這個(gè)趨勢(shì)熱門
10.縮略圖設(shè)計(jì)（Thumbnail Design）
Google已經(jīng)向?yàn)g覽用戶推出它們的瀏覽預(yù)覽技術(shù)。過(guò)去我們只能通過(guò)點(diǎn)擊鏈接才能看到網(wǎng)頁(yè)的內(nèi)容，現(xiàn)在你只需點(diǎn)擊放大鏡然后將鼠標(biāo)懸停在鏈接上就可以預(yù)覽該鏈接的網(wǎng)頁(yè)內(nèi)容。11.持續(xù)聯(lián)系/ Life Stream Lifestreaming, 一種在線記錄個(gè)人日常活動(dòng)的網(wǎng)絡(luò)應(yīng)用，包括直接通過(guò)視頻feed或通過(guò)聚焦一個(gè)人的網(wǎng)絡(luò)在線內(nèi)容，比如博客日志，在社會(huì)性網(wǎng)絡(luò)上面的更新，在線相冊(cè)，聊天內(nèi)容甚至只是一些喜歡的網(wǎng)站的鏈接等等.二:網(wǎng)站標(biāo)準(zhǔn)是在W3C（W3C.org）的組織下，商業(yè)公司（Netscape、Microsoft等）也認(rèn)識(shí)到統(tǒng)一標(biāo)準(zhǔn)的好處。網(wǎng)站標(biāo)準(zhǔn)開始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（webstandards.org）的督促下推廣執(zhí)行。
為什么要建立網(wǎng)站標(biāo)準(zhǔn): 我們大部分人都有深刻體驗(yàn)，每當(dāng)主流瀏覽器版本的升級(jí)，我們剛建立的網(wǎng)站就可能變得過(guò)時(shí)，我們就需要升級(jí)或者重新建造一遍網(wǎng)站。例如1996-1999年典型的“瀏覽器大戰(zhàn)”，為了兼容Netscape和IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個(gè)新版本來(lái)支持這種新技術(shù)或新設(shè)備，例如支持手機(jī)上網(wǎng)的WAP技術(shù)。類似的問(wèn)題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費(fèi)了我們大量的帶寬；針對(duì)某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無(wú)法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費(fèi)。如何解決這些問(wèn)題呢？有識(shí)之士早已開始思考，需要建立一種普遍認(rèn)同的標(biāo)準(zhǔn)來(lái)結(jié)束這種無(wú)序和混亂。商業(yè)公司（Netscape、Microsoft等）也終于認(rèn)識(shí)到統(tǒng)一標(biāo)準(zhǔn)的好處，因此在W3C（W3C.org）的組織下，網(wǎng)站標(biāo)準(zhǔn)開始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（webstandards.org）的督促下推廣執(zhí)行。
采用網(wǎng)站標(biāo)準(zhǔn)的好處:
對(duì)網(wǎng)站瀏覽者的好處：
1、文件下載與頁(yè)面顯示速度更快
2、內(nèi)容能被更多的用戶所訪問(wèn)（包括失明、視弱、色盲等殘障人士）；
3、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等）；
4、用戶能夠通過(guò)樣式選擇定制自己的表現(xiàn)界面；
5、所有頁(yè)面都能提供適于打印的版本。對(duì)網(wǎng)站所有者的好處:
1、更少的代碼和組件，容易維護(hù)；
2、帶寬要求降低（代碼更簡(jiǎn)潔），成本降低。舉個(gè)例子：當(dāng)ESPN.com使用CSS改版后，每天節(jié)約超過(guò)兩兆字節(jié)（terabytes）的帶寬；
3、更容易被搜尋引擎搜索到；
4、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容；
5、提供打印版本而不需要復(fù)制內(nèi)容；
6、提高網(wǎng)站易用性。在美國(guó)，有嚴(yán)格的法律條款（Section 508）來(lái)約束政府網(wǎng)站必須達(dá)到一定的易用性，其他國(guó)家也有類似的要求。
參考文獻(xiàn)： 一：溫謙.HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局從入門到精通[M].北京:人民郵電出版社,2010.3 二：http://www.tmdps.cn
三：http://btgyjlbjx.nease.net(北極星網(wǎng)站域名）
課程論文
系院:土木工程學(xué)院
專業(yè):建筑工程 姓名:王奎
學(xué)號(hào):105140340043 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)
第三篇：個(gè)人網(wǎng)頁(yè)設(shè)計(jì)(論文)
炎黃職業(yè)技術(shù)學(xué)院信息工程系
畢業(yè)設(shè)計(jì)（論文）
個(gè)人網(wǎng)頁(yè)設(shè)計(jì)
年 級(jí): _ 2009級(jí)___ _ 學(xué) 號(hào): _ 0******17 _ 姓 名: __ _****_____ 專 業(yè): 網(wǎng)絡(luò)數(shù)字媒體 _ 指導(dǎo)老師: __ ****__ __
二零一一年十二月 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
摘 要
本論文將對(duì)個(gè)人網(wǎng)頁(yè)設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁(yè)設(shè)計(jì)與制作語(yǔ)言的基礎(chǔ)上，著重使用CSS樣式表作為工具語(yǔ)言進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作的實(shí)際操作，分別對(duì)基于對(duì)象的JavaScript語(yǔ)言、用于編輯HTML語(yǔ)言的軟件進(jìn)行了詳細(xì)的介紹。
本論文主要章節(jié)如下，炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
1、是一種腳本編寫語(yǔ)言
JavaScript是一種腳本語(yǔ)言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語(yǔ)言一樣,JavaScript同樣已是一種解釋性語(yǔ)言,它提供了一個(gè)易的開發(fā)過(guò)程。
它的基本結(jié)構(gòu)形式與C、C++、VB、Delphi十分類似。但它不像這些語(yǔ)言一樣，需要先編譯，而是在程序運(yùn)行過(guò)程中被逐行地解釋。它與HTML標(biāo)識(shí)結(jié)合在一起，從而方便用戶的使用操作。
2、基于對(duì)象的語(yǔ)言。
JavaScript是一種基于對(duì)象的語(yǔ)言，同時(shí)以可以看作一種面向?qū)ο蟮摹＿@意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。因此，許多功能可以來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。
3、簡(jiǎn)單性
JavaScript的簡(jiǎn)單性主要體現(xiàn)在：首先它是一種基于Java基本語(yǔ)句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì), 從而對(duì)于學(xué)習(xí)Java是一種非常好的過(guò)渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。
4、安全性
JavaScript是一種安全性語(yǔ)言，它不允許訪問(wèn)本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。
5、動(dòng)態(tài)性的
JavaScript是動(dòng)態(tài)的，它可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web服務(wù)程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(yè)(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。
6、跨平臺(tái)性
JavaScript是依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢(mèng)想。
實(shí)際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無(wú)須有高性能的電腦，軟件僅需一個(gè)字處理軟件及一瀏覽器，無(wú)須WEB服務(wù)器通道，通過(guò)自己的電腦即可完成所有的事情。
總之，JavaScript 是一種新的描述語(yǔ)言，它可以被箝入到 HTML 的文件之中。JavaScript語(yǔ)言可以做到回應(yīng)使用者的需求事件(如：form的輸入)，而不用任何的網(wǎng)路來(lái)回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，它不用經(jīng)過(guò)傳給伺服端(server)處理，再傳回來(lái)的過(guò)程，而直接可以被客戶端(client)的應(yīng)用程式所處理。
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
JavaScript 和 Java 很類似，但到底并不一樣！Java 是一種比 JavaScript 更復(fù)雜許多的程式語(yǔ)言，而 JavaScript 則是相當(dāng)容易了解的語(yǔ)言。JavaScript 創(chuàng)作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。
2.3 CSS樣式表
級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HMTL中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。
CSS目前最新版本為CSS2,能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象盒模型的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示的最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。
在網(wǎng)頁(yè)上使用樣式表有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表：
將網(wǎng)頁(yè)鏈接到外部樣式表。
在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。
應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。
當(dāng)要在站點(diǎn)上所有或部份的網(wǎng)頁(yè)上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。如果人們決定更改樣式，只需在外部樣式表 — 中作一次更改 — 而該更改會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁(yè)上。通常外部樣式表以.css 做為文件擴(kuò)展名，例如 Mystyles.css。
當(dāng)人們只是要定義當(dāng)前網(wǎng)頁(yè)的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表，“嵌”在網(wǎng)頁(yè)的
標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁(yè)上使用。使用內(nèi)嵌樣式以應(yīng)用級(jí)聯(lián)樣式表屬性到網(wǎng)頁(yè)元素上。
如果網(wǎng)頁(yè)鏈接到外部樣式表，為網(wǎng)頁(yè)所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴(kuò)充或覆蓋外部樣式表中的指定屬性。
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
圖2-2 隨筆
相冊(cè)效果圖2-3如下：
圖2-3 相冊(cè)
音樂(lè)效果圖2-4如下：
圖2-4 音樂(lè)
關(guān)于我效果圖2-5如下：
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
圖2-5 關(guān)于我
3.2 網(wǎng)站主題
本網(wǎng)站是一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)站設(shè)計(jì)，以動(dòng)漫為主題，主要包括了本人的自我介紹、比較喜愛(ài)的動(dòng)漫作品以及平時(shí)的娛樂(lè)等。
3.3 網(wǎng)站風(fēng)格
1.本網(wǎng)站主要體現(xiàn)了清新自然的風(fēng)格，以簡(jiǎn)潔為主。2.網(wǎng)站的主色調(diào)為綠和白，充分襯托清新自然的風(fēng)格。
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
(1)執(zhí)行“插入”—“新建元件”命令，創(chuàng)建一個(gè)名稱為“拉伸的葉片”的影片剪輯元件。
(2)選擇矩形工具，設(shè)置填充顏色，在舞臺(tái)上繪制一個(gè)無(wú)描邊舉行，在屬性面板中設(shè)置寬和高。
(3)選擇矩形，將其轉(zhuǎn)換成“名稱”為“葉片”的圖形元件。(4)選擇
onmouseout=“makevisible(this,1)”
onmouseout=“makevisible(this,1)” 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
2.輸入文字，制作超鏈接。
4.6 xiangce4.html頁(yè)面的制作
1.制作圖庫(kù)頁(yè)面。
(1)新建一個(gè)網(wǎng)頁(yè)文檔，建立圖庫(kù)頁(yè)面的基本布局。
(2)將光標(biāo)定位在頁(yè)面左側(cè)的 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）“1”，單擊[確定]按鈕回到行為面板，將此行為事件改為“onclick”。
(2)用同樣的方法，給另外3張圖像添加同樣的行為，將 炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
致
謝
本論文歷時(shí)兩個(gè)多月，我系統(tǒng)綜合地將我所學(xué)的知識(shí)運(yùn)用于畢業(yè)設(shè)計(jì)的全過(guò)程。在完成畢業(yè)設(shè)計(jì)中，首先我要感謝我的指導(dǎo)教師****老師。*老師耐心細(xì)致地指導(dǎo)我畢業(yè)設(shè)計(jì)，提出了很多精辟而富有建設(shè)性的建議。*老師認(rèn)真負(fù)責(zé)的工作態(tài)度，嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度都給我留下了深刻的印象，在學(xué)習(xí)上給予了我極大的關(guān)心和幫助，在此表示衷心感謝！
同時(shí)，感謝炎黃職業(yè)技術(shù)學(xué)院為我提供了一個(gè)良好的學(xué)習(xí)環(huán)境，感謝學(xué)院的領(lǐng)導(dǎo)和老師們！他們無(wú)微不至的關(guān)懷、精心的培養(yǎng)使我到了很多的知識(shí)，終生受益！
炎黃職業(yè)技術(shù)學(xué)院 信息工程系畢業(yè)設(shè)計(jì)（論文）
參考文獻(xiàn)
[1] 繆亮.Dreamweaver CS3 基礎(chǔ)與實(shí)訓(xùn)教程.電子工業(yè)出版社，2008年.[2] 李冬蕓.Flash動(dòng)畫實(shí)例教程.電子工業(yè)出版社，2010年.[3] 繆亮，郭剛.Photoshop平面設(shè)計(jì)實(shí)用教程.清華大學(xué)出版者，2008年.
第四篇：flash網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)(論文)
遼寧警察學(xué)院畢業(yè)設(shè)計(jì)（論文）
Flash網(wǎng)頁(yè)設(shè)計(jì)
系： 高職計(jì)算機(jī)系 專業(yè)： 計(jì)算機(jī)應(yīng)用技術(shù) 學(xué)生： 陶帥帥 指導(dǎo)教師：楊 虹
完成日期：2017年4月3日
遼寧警察學(xué)院畢業(yè)設(shè)計(jì)（論文）
Flash網(wǎng)頁(yè)設(shè)計(jì)
總計(jì) 畢業(yè)設(shè)計(jì)（論文）表格 0表 插圖 24幅
頁(yè)
摘 要
本論文主要論述了本人所做畢業(yè)設(shè)計(jì)課題《Flash網(wǎng)頁(yè)設(shè)計(jì)》的技術(shù)背景、設(shè)計(jì)理念、概要設(shè)計(jì)、詳細(xì)設(shè)計(jì)以及最后效果展示等方面內(nèi)容，詳細(xì)的介紹了本人對(duì)于設(shè)計(jì)簡(jiǎn)單Flash網(wǎng)頁(yè)的一整套設(shè)計(jì)過(guò)程和相關(guān)技術(shù)難點(diǎn)的解決方法。
Flash設(shè)計(jì)網(wǎng)頁(yè)成為越來(lái)越多動(dòng)漫愛(ài)好者和非動(dòng)漫愛(ài)好者獲得信息和交流的平臺(tái)，它滿足了廣大用戶隨時(shí)隨地進(jìn)行交流和溝通的需要，為網(wǎng)上用戶提供交流場(chǎng)所，實(shí)現(xiàn)高效動(dòng)態(tài)信息交換，而網(wǎng)頁(yè)恰恰是由一個(gè)個(gè)小小的網(wǎng)頁(yè)集結(jié)而成，沒(méi)有網(wǎng)頁(yè)就沒(méi)有強(qiáng)大的網(wǎng)頁(yè)。現(xiàn)在雖然有很多動(dòng)漫網(wǎng)頁(yè)，但版面千篇一律，缺乏個(gè)性化、前瞻性，頁(yè)面設(shè)計(jì)混亂，不利于用戶查看，網(wǎng)頁(yè)的交互性比較差，因此我針對(duì)以上問(wèn)題為動(dòng)漫網(wǎng)頁(yè)設(shè)計(jì)一個(gè)個(gè)性化的動(dòng)漫網(wǎng)頁(yè)。關(guān)鍵詞：動(dòng)漫網(wǎng)頁(yè)，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軟件的特點(diǎn).........................................................................................4 1.2.1普通網(wǎng)頁(yè)設(shè)計(jì)的特點(diǎn).........................................................................4 1.2.2Flash網(wǎng)頁(yè)...........................................................................................5 第2章 網(wǎng)頁(yè)設(shè)計(jì)的開發(fā)工具與開發(fā)語(yǔ)言..................................................................7
2.1 網(wǎng)頁(yè)使用的開發(fā)工具.....................................................................................7 2.1.1Macromedia Flash 8.0 Pro..............................................................7 2.1.2Adobe Photoshop CS2........................................................................7 2.2 網(wǎng)頁(yè)開發(fā)語(yǔ)言.................................................................................................7 第3章 Flash網(wǎng)頁(yè)設(shè)計(jì)中的各種技術(shù)解析................................................................9
3.1 主頁(yè)界面設(shè)計(jì)解析.........................................................................................9 3.1.1Flash網(wǎng)頁(yè)加載時(shí)的進(jìn)度條設(shè)計(jì)..........................................................9 3.1.2網(wǎng)頁(yè)LOGO與站點(diǎn)設(shè)計(jì)...................................................................10 3.1.3網(wǎng)頁(yè)導(dǎo)航條的設(shè)計(jì).............................................................................10 3.1.4進(jìn)入主頁(yè)界面前動(dòng)態(tài)效果設(shè)計(jì).........................................................12 3.1.5進(jìn)入主頁(yè)時(shí)的音效設(shè)置.....................................................................13 3.2 “賞漫軟件”Flash子頁(yè)面設(shè)計(jì)......................................................................14 3.2.1“賞漫軟件”目錄的制作..................................................................14 3.2.2賞漫軟件的圖片文字介紹部分制作.................................................15 3.3 “精品動(dòng)漫”Flash子頁(yè)面設(shè)計(jì)......................................................................15 3.4 “酷站導(dǎo)航”Flash子頁(yè)面設(shè)計(jì)......................................................................17 3.5 “酷炫漫畫”Flash子頁(yè)面設(shè)計(jì)......................................................................18 3.6 “關(guān)于作品”Flash子頁(yè)面設(shè)計(jì)......................................................................19 結(jié)論..............................................................................................................................20 致謝..............................................................................................................................21 參考文獻(xiàn)......................................................................................................................22 III
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
前 言
世界因Internet的出現(xiàn)而在逐步改變，網(wǎng)絡(luò)經(jīng)濟(jì)雛形因此而形成，由于Internet具有信息容量大、方便迅速、形態(tài)多樣、覆蓋全球等特點(diǎn)，直至今日已發(fā)展成為信息傳播的主要載體，所以幾乎全球的各個(gè)企業(yè)、機(jī)構(gòu)紛紛建立自己的web站點(diǎn)。Internet信息資源龐大、圖文互動(dòng)、高速高效的特點(diǎn)給傳統(tǒng)設(shè)計(jì)媒體帶來(lái)了巨大的沖擊，再加上網(wǎng)絡(luò)經(jīng)濟(jì)對(duì)設(shè)計(jì)行業(yè)的影響，由此而產(chǎn)生了一個(gè)新的設(shè)計(jì)領(lǐng)域--網(wǎng)頁(yè)設(shè)計(jì)。
Flash產(chǎn)業(yè)作為我國(guó)發(fā)展中的產(chǎn)業(yè)，網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的發(fā)展推動(dòng)了該產(chǎn)業(yè)的傳播，使得各類Flash網(wǎng)頁(yè)紛紛崛起，為廣大Flash愛(ài)好者帶來(lái)了諸多便利。
本課題設(shè)計(jì)的是一個(gè)以Flash設(shè)計(jì)為主題的網(wǎng)頁(yè)設(shè)計(jì)，以信息發(fā)布、分享為主要的。通過(guò)發(fā)布一些關(guān)于Flash的信息、圖片和Flash等為有同樣喜好的人們提供一個(gè)分享的空間。同時(shí)訪客用戶可以在網(wǎng)頁(yè)中的劇情交流上發(fā)表自己的看法以及可供共享的信息，使人們?cè)讷@取信息的同時(shí)，還可以發(fā)表自己的感受。在如今網(wǎng)絡(luò)高速發(fā)展的時(shí)代，發(fā)布信息與分享興趣已成為大多網(wǎng)頁(yè)設(shè)計(jì)的主要目的。
Flash網(wǎng)頁(yè)設(shè)計(jì)
第1章 概述
Flash網(wǎng)頁(yè)設(shè)計(jì)是指用用Flash軟件制作的網(wǎng)頁(yè)，網(wǎng)頁(yè)內(nèi)容多數(shù)甚至全部是Flash。全Flash網(wǎng)頁(yè)基本以圖形和Flash為主，所以比較適合做那些文字內(nèi)容不太多，以平面、Flash效果為主的應(yīng)用。如：企業(yè)品牌推廣、特定網(wǎng)上廣告、網(wǎng)絡(luò)游戲、個(gè)性網(wǎng)頁(yè)等。
在因特網(wǎng)飛速發(fā)展的今天，多姿多彩的網(wǎng)絡(luò)頁(yè)面總是讓我們目不暇接，創(chuàng)建富有個(gè)性的個(gè)人主頁(yè)更是每一個(gè)網(wǎng)絡(luò)愛(ài)好者的夢(mèng)想。作為一個(gè)優(yōu)秀的多媒體網(wǎng)頁(yè)設(shè)計(jì)平臺(tái)，F(xiàn)lash從眾多的網(wǎng)頁(yè)設(shè)計(jì)軟件中脫穎而出，成為大多數(shù)網(wǎng)絡(luò)愛(ài)好者設(shè)計(jì)網(wǎng)頁(yè)的首選工具。能夠?yàn)榇蠖鄶?shù)人所認(rèn)同的東西總有它的獨(dú)特之處，F(xiàn)lash正是以其獨(dú)特的魅力征服了網(wǎng)絡(luò)發(fā)燒友。
首先，F(xiàn)lash的一個(gè)很重要的特點(diǎn)是創(chuàng)建的文件體積很小，F(xiàn)lash是完全基于矢量的Flash處理技術(shù)，而矢量圖形就是用少量的向量數(shù)據(jù)來(lái)描述一個(gè)復(fù)雜的對(duì)象，存儲(chǔ)時(shí)只占很小的空間，而且圖像的質(zhì)量也很高。想必許多網(wǎng)友們也曾對(duì)自己掛在網(wǎng)上的一些Flash作品的體積擔(dān)心，那么，用Flash來(lái)創(chuàng)建網(wǎng)絡(luò)Flash作品也正是我們的首選。
其次，F(xiàn)lash使用的是插件的工作方式，用戶只要安裝一次插件，以后就可以快速啟動(dòng)并觀看Flash，而不必像Java那樣，每次都要花費(fèi)大量的時(shí)間啟動(dòng)虛擬機(jī)。
再次，F(xiàn)lash動(dòng)漫采用的是“流式”的Flash播放技術(shù)，用戶不必等到Flash下載完全再去欣賞，而是一邊下載一邊欣賞。
最后，F(xiàn)lash簡(jiǎn)單易學(xué)，盡管它不能像一門高級(jí)語(yǔ)言一樣進(jìn)行編程，但功能還是很廣泛的。使用內(nèi)置的ActionScript語(yǔ)句結(jié)合JavaScript，也可以制作出互動(dòng)性很強(qiáng)的主頁(yè)來(lái)
1.1 Flash軟件的介紹
Flash是美國(guó)Macromedia公司所設(shè)計(jì)的一種二維矢量動(dòng)畫軟件（現(xiàn)Adobe公司產(chǎn)品），用于設(shè)計(jì)和編輯Flash文檔，最新版本為：Animate CC 2015.5。Flash通常也指Macromedia Flash Player（現(xiàn)Adobe Flash Player），用于播放Flash文檔。
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
檔案格式:
圖1-1影片檔
“swf ”這是一個(gè)完整的影片檔，無(wú)法被編輯。有時(shí)會(huì)被念做“swiff”。Swf在發(fā)布時(shí)可以選擇保護(hù)功能，如果沒(méi)有選擇，很容易被別人輸入到他的原始檔中使用。然而保護(hù)功能依然阻擋不了為數(shù)眾多的破解軟件，有不少閃客專門以此來(lái)學(xué)習(xí)別人的程序代碼和設(shè)計(jì)方式。
圖1-2原始檔
“fla ”是Flash的原始檔，只能用Macromedia Flash打開編輯或Adobe Flash CS3及更高版本打開編輯
Actionscript是一種程序語(yǔ)言的簡(jiǎn)單文本文件.FLA檔案能夠直接包含Actionscript, 但是也可以把它存成AS檔做為外部連結(jié)檔案(如定義ActionScript類則必須在寫在as文件里,再通過(guò)import加入類)，以方便共同工作和更進(jìn)階的程序修改。
Flash 是一種創(chuàng)作工具，設(shè)計(jì)人員和開發(fā)人員可使用它來(lái)創(chuàng)建演示文稿、應(yīng)用程序和其它允許用戶交互的內(nèi)容。Flash 可以包含簡(jiǎn)單的Flash、視頻內(nèi)容、復(fù)雜演示文稿和應(yīng)用程序以及介于它們之間的任何內(nèi)容。通常，使用 Flash 創(chuàng)作的各個(gè)內(nèi)容單元稱為應(yīng)用程序，即使它們可能只是很簡(jiǎn)單的Flash。您也可以通過(guò)添加圖片、聲音、視頻和特殊效果，構(gòu)建包含豐富媒體的 Flash 應(yīng)用程序。
Flash 特別適用于創(chuàng)建通過(guò) Internet 提供的內(nèi)容，因?yàn)樗奈募浅Ｐ lash 是通過(guò)廣泛使用矢量圖形做到這一點(diǎn)的。與位圖圖形相比，矢量圖形需要的內(nèi)存和存儲(chǔ)空間小很多，因?yàn)樗鼈兪且詳?shù)學(xué)公式而不是大型數(shù)據(jù)集來(lái)表示的。位圖圖形之所以更大，是因?yàn)閳D像中的每個(gè)像素都需要一組單獨(dú)的數(shù)據(jù)來(lái)表示。
Flash網(wǎng)頁(yè)設(shè)計(jì)
1.1.1Flash的歷史
Flash是由macromedia公司推出的交互式矢量圖和 Web 動(dòng)畫的標(biāo)準(zhǔn)，由Adobe公司收購(gòu)。做Flash動(dòng)畫的人被稱之為閃客。網(wǎng)頁(yè)設(shè)計(jì)者使用 Flash 創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一個(gè)商用的二維矢量動(dòng)畫軟件，用于設(shè)計(jì)和編輯Flash文檔。1996年11月，美國(guó)Macromedia公司收購(gòu)了Future Wave，并將其改名為Flash。后又于2005年12月3日被Adobe公司收購(gòu)。Flash通常也指Macromedia Flash Player（現(xiàn)Adobe Flash Player）。2012年8月15日，F(xiàn)lash退出Android平臺(tái)，正式告別移動(dòng)端。2015年12月1日，Adobe將動(dòng)畫制作軟件Flash professional CC2015升級(jí)并改名為Animate CC 2015.5。
Flash的過(guò)去無(wú)疑是異常輝煌的，然而它的現(xiàn)在和將來(lái)卻飽受非議。在移動(dòng)互聯(lián)網(wǎng)和Html5的強(qiáng)烈沖擊之下，F(xiàn)lash在網(wǎng)頁(yè)方面的應(yīng)用逐漸衰退，如今已經(jīng)很難再看到純正的Flash整站了。有人因此斷言Flash已經(jīng)成為一種“過(guò)時(shí)”的、“應(yīng)被拋棄”的技術(shù)，更有人提出“Flash將死”的預(yù)言。然而，換一種客觀的眼光來(lái)看現(xiàn)實(shí)情形，就會(huì)發(fā)現(xiàn)Flash并未完全衰退，在網(wǎng)頁(yè)游戲、互動(dòng)設(shè)計(jì)、媒體應(yīng)用、教育課件等領(lǐng)域，仍然能夠看到Flash異常活躍的身影。在動(dòng)畫效果的流暢性、互動(dòng)設(shè)計(jì)的便捷性、代碼開發(fā)的簡(jiǎn)易性、程序應(yīng)用的廣泛性等方面，目前還沒(méi)有任何一款軟件能夠與Flash相比擬。因此，也有許多開發(fā)者認(rèn)為Flash還“大有可為”。無(wú)論Flash的未來(lái)何去何從，在當(dāng)下，它仍然是一門值得所有人認(rèn)真學(xué)習(xí)的技術(shù)。特別是對(duì)于有志成為網(wǎng)頁(yè)設(shè)計(jì)師的學(xué)習(xí)者而言，F(xiàn)lash更是一門必修課。
1.2 Flash軟件的特點(diǎn)
1.2.1普通網(wǎng)頁(yè)設(shè)計(jì)的特點(diǎn)
網(wǎng)頁(yè)設(shè)計(jì)要注意的兩個(gè)要點(diǎn)：整體風(fēng)格和色彩搭配。
1、確定網(wǎng)頁(yè)的整體風(fēng)格
網(wǎng)頁(yè)的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最難以學(xué)習(xí)的。難就難在沒(méi)有一個(gè)固定的模式可以參照和模仿。給你一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)頁(yè)。
風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI（標(biāo)志、色彩、字體、標(biāo)語(yǔ)）、版面布局、瀏覽方式、4
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
交互性、文字、語(yǔ)氣、內(nèi)容價(jià)值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。舉個(gè)例子：我們覺(jué)得網(wǎng)易是平易近人的，迪斯尼是生動(dòng)活潑的，IBM是專業(yè)嚴(yán)肅的。這些都是網(wǎng)頁(yè)給人們留下的不同感受。
在這里，我提供給大家一些參考經(jīng)驗(yàn)：
(1)將你的標(biāo)志logo，盡可能的放在每個(gè)頁(yè)面上最突出的位置。(2)突出你的標(biāo)準(zhǔn)色彩。
(3)總結(jié)一句能反映貴站精髓的宣傳標(biāo)語(yǔ)！
(4)相同類型的圖像采用相同效果，比如說(shuō)標(biāo)題字都采用陰影效果，那么在網(wǎng)頁(yè)中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！
2、網(wǎng)頁(yè)色彩的搭配
無(wú)論是平面設(shè)計(jì)，還是網(wǎng)頁(yè)設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)我們距離顯示屏較遠(yuǎn)的時(shí)候，我們看到的不是優(yōu)美的版式或美麗的圖片，而是網(wǎng)頁(yè)的色彩。
關(guān)于色彩的原理有許多，在此我們不可能一一闡述，大家可以看看相關(guān)設(shè)計(jì)書籍，有利于系統(tǒng)地理解。在此我們僅僅想告訴大家一些網(wǎng)頁(yè)配色時(shí)的小技巧。
(1)用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。
(2)用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。
(3)用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。
3、在網(wǎng)頁(yè)配色中，還要切記一些誤區(qū)：
(1)不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。
(2)背景和前文的對(duì)比盡量要大(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。
1.2.2Flash網(wǎng)頁(yè)
Flash網(wǎng)頁(yè)具有設(shè)計(jì)精美，擁有更多聲效、Flash、流媒體剪輯、美術(shù)效果及兼顧互動(dòng)性等特征，非常適合公司作在線產(chǎn)品展示。Flash網(wǎng)頁(yè)基本以圖形和Flash為主，所以比較適合做那些文字內(nèi)容不太多，以平面、Flash效果為主的應(yīng)用。如：企業(yè)品牌推廣、特定網(wǎng)上廣告、網(wǎng)絡(luò)游戲、個(gè)性網(wǎng)頁(yè)等。
制作全Flash網(wǎng)頁(yè)和制作Html網(wǎng)頁(yè)類似，事先應(yīng)先在紙上畫出結(jié)構(gòu)關(guān)系圖，包括：網(wǎng)頁(yè)的主題、要用什么樣的元素、哪些元素需要重復(fù)使用、元素之間的聯(lián)系、元素如何運(yùn)動(dòng)、用什么風(fēng)格的音樂(lè)、整個(gè)網(wǎng)頁(yè)可以分成幾個(gè)邏輯塊、各個(gè)邏輯塊間的聯(lián)系如何、以及你是否打算用Flash建構(gòu)全站或是只用其做網(wǎng)頁(yè)的前期
Flash網(wǎng)頁(yè)設(shè)計(jì)
部分等等，都應(yīng)在考慮范圍之內(nèi)。
實(shí)現(xiàn)全Flash網(wǎng)頁(yè)效果多種多樣，但基本原理是相同的：將主場(chǎng)景作為一個(gè)“舞臺(tái)”，這個(gè)舞臺(tái)提供標(biāo)準(zhǔn)的長(zhǎng)寬比例和整個(gè)的版面結(jié)構(gòu)，“演員”就是網(wǎng)頁(yè)子欄目的具體內(nèi)容，根據(jù)子欄目的內(nèi)容結(jié)構(gòu)可能會(huì)再派生出更多的子欄目。主場(chǎng)景作為“舞臺(tái)”基礎(chǔ)，基本保持自身的內(nèi)容不變，其它“演員”身份的子類、次子類內(nèi)容根據(jù)需要被導(dǎo)入到主場(chǎng)景內(nèi)。
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
第2章 網(wǎng)頁(yè)設(shè)計(jì)的開發(fā)工具與開發(fā)語(yǔ)言
2.1 網(wǎng)頁(yè)使用的開發(fā)工具
2.1.1Macromedia Flash 8.0 Pro Macromedia Flash 8.0 Pro相對(duì)于Macromedia Flash MX 2004增強(qiáng)了為移動(dòng)設(shè)備開發(fā)的功能,方便創(chuàng)建Flash Web增強(qiáng)的網(wǎng)絡(luò)視頻。雖然有更高的版本，但是Macromedia Flash 8.0 Pro仍是現(xiàn)在最主流的Flash制作軟件，配合其內(nèi)置的ActionScript 2.0能夠完美實(shí)現(xiàn)網(wǎng)站設(shè)計(jì)中所需要的各種動(dòng)態(tài)效果和交互效果，而我此次所做的Flash網(wǎng)站就是在Macromedia Flash 8.0 Pro的環(huán)境下制作。
新版本的Flash 8中引入了幾種高級(jí)技術(shù):實(shí)時(shí)渲染濾鏡、運(yùn)行時(shí)位圖緩沖、FlashType字體渲染引擎、自定義淡入淡出功能、改進(jìn)的視頻播放組件、增強(qiáng)的文本工具、增強(qiáng)的描邊屬性、高級(jí)漸變控制。其中一種非常棒的技術(shù)是，Macromedia減輕了Flash Player 8的渲染工作，在Flash文件中使用標(biāo)簽，F(xiàn)lash Player 8現(xiàn)在可以在用戶與Flash文件交互時(shí)實(shí)時(shí)渲染濾鏡。這意味著Macromedia已經(jīng)能夠合并內(nèi)建的濾鏡效果，象陰影、模糊、內(nèi)外發(fā)光、倒角、漸變倒角、顏色調(diào)整，以獲得更豐富的用戶體驗(yàn)。這些濾鏡或可視效果能夠被應(yīng)用到影片剪輯(MovieClips)和文本域，當(dāng)在網(wǎng)頁(yè)中運(yùn)行時(shí)，通過(guò)播放器渲染并顯現(xiàn)出來(lái)。2.1.2Adobe Photoshop CS2 作為Adobe公司出品的最出色的圖形圖像處理軟件，Photoshop以其強(qiáng)大的功能向我們證明著它的名至實(shí)歸。在falsh網(wǎng)頁(yè)設(shè)計(jì)時(shí)一些圖片素材如背景圖片、按鈕、LOGO等在載入Flash庫(kù)前有必要用Photoshop做適當(dāng)?shù)奶幚?2.2 網(wǎng)頁(yè)開發(fā)語(yǔ)言
Html（Hyper Text Markup Language）即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言，它是一種計(jì)算機(jī)程序語(yǔ)言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要內(nèi)容。
Html文件是用ASCLL代碼編寫成的，可以保存為最簡(jiǎn)單的TXT文本文件，F(xiàn)lash網(wǎng)頁(yè)設(shè)計(jì)
這樣用任何一個(gè)文字處理軟件都可以進(jìn)行編寫，這也是他能夠迅速迅速普及，并十分受歡迎的一個(gè)原因。
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
第3章 Flash網(wǎng)頁(yè)設(shè)計(jì)中的各種技術(shù)解析
3.1 主頁(yè)界面設(shè)計(jì)解析
3.1.1Flash網(wǎng)頁(yè)加載時(shí)的進(jìn)度條設(shè)計(jì)
(1)新建Flash文檔index.fla，設(shè)置舞臺(tái)的大小為550*550像素，設(shè)置背景的顏色為#786e28。
(2)建立進(jìn)度條設(shè)計(jì)主要是幫助觀察Flash網(wǎng)頁(yè)載入的進(jìn)度，建立進(jìn)度條設(shè)計(jì)樣式如圖3-1，時(shí)間軸上各層設(shè)計(jì)如圖3-2。
圖3-1進(jìn)度條
圖3-2進(jìn)度條在時(shí)間軸上各層
Actions：幀1代碼： total = _root.getBytesTotal();loaded = _root.getBytesLoaded();baifenshu = int((loaded/total)*100);baifenbi = baifenshu+“%”;setProperty(“jindutiao”, _xscale, baifenshu);Actions：幀2代碼：
Flash網(wǎng)頁(yè)設(shè)計(jì)
if(baifenshu == 100){
gotoAndPlay(4);} else { gotoAndPlay(1);} 3.1.2網(wǎng)頁(yè)LOGO與站點(diǎn)設(shè)計(jì)
網(wǎng)頁(yè)LOGO設(shè)計(jì)：
(1)新建圖形元件“元件42”。
(2)利用矩形工具建立一個(gè)白色矩形，在矩形正中建立一稍小些的背景色矩形形成白色矩形框。
(3)利用任意變形工具將白色矩形框變形成為白色平行四邊形框。用線條工具進(jìn)行分割裁剪，旋轉(zhuǎn)變換得到要設(shè)計(jì)的網(wǎng)頁(yè)LOGO。（如圖3-3）
圖3-3 logo展示圖
3.1.3網(wǎng)頁(yè)導(dǎo)航條的設(shè)計(jì)
(1)新建圖形元件“元件22”（如圖3-4），作為導(dǎo)航條背景。
圖3-4導(dǎo)航條背景
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
(2)建立6個(gè)圖形元件分別在各元件中設(shè)計(jì)各導(dǎo)航按鈕文字，字體樣式雅黑，字號(hào)12，顏色黑色，分別載入各影片剪輯做出動(dòng)態(tài)效果，對(duì)應(yīng)每個(gè)影片剪輯做一個(gè)與影片剪輯等大的按鈕，按鈕與影片剪輯放于不同層疊加在一起均勻排列與導(dǎo)航條上（如圖3-5）。
圖3-5導(dǎo)航按鈕
(3)給每個(gè)按鈕附加動(dòng)作。（如圖3-6）
圖3-6按鈕b1動(dòng)作目錄
代碼如下： 圖層4：幀1： stop();元件11： on(rollOver){ } on(press){
} 元件11： on(rollOut){
gotoAndPlay(1);
tellTarget(“/”){
}
loadMovieNum(“index101.swf”, 100);
gotoAndPlay(2);11
Flash網(wǎng)頁(yè)設(shè)計(jì)
} on(press){
} 圖層4：幀9： Stop（）； 元件11： on(rollOut){ } on(press){
} 3.1.4進(jìn)入主頁(yè)界面前動(dòng)態(tài)效果設(shè)計(jì)
(1)新建圖形元件“元件29”，創(chuàng)建長(zhǎng)條圖行，作為三個(gè)小窗口推薦酷站、本站作品、站內(nèi)更新的上框（如圖3-7）。建立三個(gè)圖形元件分別制作各個(gè)小窗口的名稱（如圖3-8）。
圖3-7小窗口的上框 圖3-8小窗口的名稱
tellTarget(“/”){
}
loadMovieNum(“index101.swf”, 100);
gotoAndPlay(1);
tellTarget(“/”){
}
loadMovieNum(“index101.swf”, 100);
(2)新建圖像元件，在其上創(chuàng)建與小窗口等大的白色和背景色的矩形色塊，在不同圖層中各小窗口的上框和窗體依次在時(shí)間軸上載入并做形狀補(bǔ)間Flash（如圖3-9）。
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
圖3-9小窗口動(dòng)態(tài)載入效果時(shí)間軸設(shè)置
(3)導(dǎo)航條、網(wǎng)頁(yè)頭尾的圖片條以相同方式在時(shí)間軸上依次載入并做形狀補(bǔ)間效果（如圖3-10），就可以完全載入主頁(yè)界面獲得完整的主頁(yè)框架界面。
圖3-10導(dǎo)航條、網(wǎng)頁(yè)頭尾的圖片動(dòng)態(tài)載入效果時(shí)間軸設(shè)置
3.1.5進(jìn)入主頁(yè)時(shí)的音效設(shè)置
(1)挑選合適的音效載入庫(kù)中。
(2)選擇適當(dāng)?shù)囊粜砑拥綍r(shí)間軸上的適當(dāng)位置（如圖3-11），使動(dòng)態(tài)效果更具表現(xiàn)力。
圖3-11在時(shí)間軸上添加聲音效果
主頁(yè)框架界面到現(xiàn)在已經(jīng)基本上設(shè)計(jì)完成了，主頁(yè)框架界面為一個(gè)獨(dú)立的Flash文檔，發(fā)布之后形成index.swf文件。此外，我們還要針對(duì)各個(gè)導(dǎo)航卡設(shè)計(jì)其對(duì)應(yīng)的swf文件，各swf文件之間通過(guò)as代碼連接形成一個(gè)整體，則構(gòu)成了本Flash網(wǎng)頁(yè)的主體結(jié)構(gòu)，再通過(guò)as代碼連接一些必要的網(wǎng)頁(yè)就構(gòu)成了一個(gè)完整
Flash網(wǎng)頁(yè)設(shè)計(jì)
Flash網(wǎng)頁(yè)。以下幾章我將對(duì)各個(gè)導(dǎo)航卡所對(duì)應(yīng)的.swf文件及它們所鏈接的網(wǎng)頁(yè)頁(yè)面的制作做進(jìn)一步的詳細(xì)說(shuō)明。
3.2 “賞漫軟件”Flash子頁(yè)面設(shè)計(jì)
3.2.1“賞漫軟件”目錄的制作
“賞漫軟件”子頁(yè)面載入效果和“迷你游戲”子頁(yè)面相仿不再贅述。賞漫軟件目錄的制作大體上與游戲目錄相仿，所不同的是不需要轉(zhuǎn)換和滑動(dòng)，也就比游戲目錄要好做多，同時(shí)目錄中軟件按鈕的制作也和游戲目錄中按鈕一樣，再此不在贅述目錄和按鈕的制作方法。我們來(lái)看一下做好的目錄的大概形狀樣式（如圖3-12），用以上做目錄的經(jīng)驗(yàn)可以輕松做好。
按鈕附加動(dòng)作代碼： on(press){
} unloadMovieNum(3);loadMovieNum(“此處最好填所連接swf文件的相對(duì)位置”, 2);
圖3-12軟件目錄樣式
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
3.2.2賞漫軟件的圖片文字介紹部分制作
該部分是以一個(gè)小的swf文件單獨(dú)存在的，在點(diǎn)擊軟件按鈕時(shí)會(huì)載入相應(yīng)的swf文件在界面的適當(dāng)位置。
接下來(lái)我們來(lái)做一下這個(gè)小swf文件，就那ACDSee圖片瀏覽軟件所對(duì)應(yīng)的swf文件來(lái)說(shuō)明吧。
（1）新建空白fla文件，命名.fla。將通過(guò)Photoshop設(shè)計(jì)好ACDSee軟件的圖片素材，載入到s2庫(kù)中。并生成影片剪輯。以影片剪輯動(dòng)態(tài)效果實(shí)現(xiàn)是通過(guò)逐幀F(xiàn)lash方式完成的（如圖3-13至3-14）
圖3-13本影片剪輯動(dòng)態(tài)效果的時(shí)間軸設(shè)置
圖3-14本影片剪輯動(dòng)態(tài)效果
3.3 “精品動(dòng)漫”Flash子頁(yè)面設(shè)計(jì)
“精品動(dòng)漫”Flash子頁(yè)面是一個(gè)與前幾個(gè)子頁(yè)面略有不同的子頁(yè)面，頁(yè)面的設(shè)計(jì)風(fēng)格與前幾個(gè)頁(yè)面有些許差異，不規(guī)則的背景使得頁(yè)面整體顯得翹起生動(dòng)。（如圖3-15）子頁(yè)面載入動(dòng)態(tài)效果及顯示出動(dòng)漫按鈕前的動(dòng)態(tài)效果在前面都有涉及不在贅述。
Flash網(wǎng)頁(yè)設(shè)計(jì)
圖3-15“精品動(dòng)漫”Flash子頁(yè)面
（1）新建空白fla文件，命名為index003。將通過(guò)Photoshop設(shè)計(jì)好Flash按鈕圖片素材，大小50*50像素，載入到index003庫(kù)中。
（2）新建圖形元件，將圖片載入圖形元件中并在圖片上面覆蓋一層多半透明的與圖片等大的色塊。（如圖3-16）
圖3-16圖像上覆蓋了透明色塊的圖形元件
（3）將圖像元件做成按鈕，按鈕元件第一幀是將該圖形元件透明度略調(diào)高一些（如圖3-17），在第二三幀恢復(fù)正常（如圖3-18）。
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
圖3-17按鈕第一幀
圖3-18按鈕第二三幀
（4）給每個(gè)按鈕附加動(dòng)作代碼以連接到要播放的swf文件。代碼如下： on(press){
} tellTarget(“/”){ } loadMovieNum(“xinFlash9.swf”, 2);3.4 “酷站導(dǎo)航”Flash子頁(yè)面設(shè)計(jì)
目錄的制作、按鈕的制作、子頁(yè)面載入動(dòng)態(tài)效果及顯示目錄時(shí)的動(dòng)態(tài)效果等在前面都有涉及不在贅述。這里僅提供該子網(wǎng)頁(yè)設(shè)計(jì)好后的最后效果。（如圖3-19）
Flash網(wǎng)頁(yè)設(shè)計(jì)
圖3-19“酷站導(dǎo)航”子網(wǎng)頁(yè)設(shè)計(jì)好后的效果
其中各個(gè)網(wǎng)頁(yè)按鈕附加動(dòng)作的代碼為： on(press){ } 其中對(duì)網(wǎng)頁(yè)的圖片展示和介紹部分同“賞漫軟件”子頁(yè)面中的小swf文件制作方法一致，可仿照其制作不再贅述。loadMovieNum(“需要讀取的swf文件的相對(duì)url地址”, 2);3.5 “酷炫漫畫”Flash子頁(yè)面設(shè)計(jì)
絕大部分和“賞漫軟件”子頁(yè)面中的設(shè)計(jì)保持一致，只是按鈕需要重新制作，右側(cè)的圖片展示部分也沒(méi)太多的改變，完全可以仿照其設(shè)計(jì)制作不再贅述。再次提供該子網(wǎng)頁(yè)設(shè)計(jì)好后的最后效果。（如圖3-20）
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
圖3-20“酷炫漫畫”子網(wǎng)頁(yè)設(shè)計(jì)好后的效果
3.6 “關(guān)于作品”Flash子頁(yè)面設(shè)計(jì)
本網(wǎng)頁(yè)就只有一個(gè)文字面板，文字面板的設(shè)計(jì)和其他頁(yè)面中目錄的設(shè)計(jì)比較相似，都是先在圖形元件中設(shè)計(jì)好其輪廓和背景，再在時(shí)間軸上通過(guò)形狀、亮度、透明度改變進(jìn)行形狀補(bǔ)間最終獲得文字面板（如圖3-21）。再次提供該子網(wǎng)頁(yè)設(shè)計(jì)好后的最后效果。（如圖3-22）
圖3-21文字面板設(shè)計(jì)在時(shí)間軸上的設(shè)置
圖3-22“關(guān)于作品”子網(wǎng)頁(yè)設(shè)計(jì)好后的效果
Flash網(wǎng)頁(yè)設(shè)計(jì)
結(jié)論
Flash網(wǎng)頁(yè)具有設(shè)計(jì)精美，擁有更多聲效、Flash、流媒體剪輯、美術(shù)效果及兼顧互動(dòng)性等特征，非常適合公司作在線產(chǎn)品展示。Flash網(wǎng)頁(yè)基本以圖形和Flash為主，所以比較適合做那些文字內(nèi)容不太多，以平面、Flash效果為主的應(yīng)用。如：企業(yè)品牌推廣、特定網(wǎng)上廣告、網(wǎng)絡(luò)游戲、個(gè)性網(wǎng)頁(yè)等。
制作全Flash網(wǎng)頁(yè)和制作Html網(wǎng)頁(yè)類似，事先應(yīng)先在紙上畫出結(jié)構(gòu)關(guān)系圖，包括：網(wǎng)頁(yè)的主題、要用什么樣的元素、哪些元素需要重復(fù)使用、元素之間的聯(lián)系、元素如何運(yùn)動(dòng)、用什么風(fēng)格的音樂(lè)、整個(gè)網(wǎng)頁(yè)可以分成幾個(gè)邏輯塊、各個(gè)邏輯塊間的聯(lián)系如何、以及你是否打算用Flash建構(gòu)全站或是只用其做網(wǎng)頁(yè)的前期部分等等，都應(yīng)在考慮范圍之內(nèi)。
因?yàn)楸救怂接邢蓿m然已從很多方面進(jìn)行闡述和講解，但終究是不能十全十美的，理論與實(shí)際永遠(yuǎn)是有距離的。希望能在今后的學(xué)習(xí)和工作中能不斷完善、進(jìn)步！
遼寧警察學(xué)院高職計(jì)算機(jī)畢業(yè)設(shè)計(jì)（論文）
致謝
畢業(yè)設(shè)計(jì)完成之際，我由衷地感謝楊虹老師的大力幫助和支持，感謝我的同學(xué)和朋友，在我遇到各種各樣復(fù)雜問(wèn)題的時(shí)候，給予我鼓勵(lì)和幫助，使我分析問(wèn)題和解決問(wèn)題能力有了很大提高
本論文是在楊虹老師的悉心指導(dǎo)下完成的。楊虹老師淵博的專業(yè)知識(shí)，誨人不倦的高尚師德，嚴(yán)以律己、寬以待人的崇高風(fēng)范，樸實(shí)無(wú)華、平易近人的人格魅力對(duì)我影響深遠(yuǎn)。不僅使我樹立了遠(yuǎn)大的學(xué)術(shù)目標(biāo)，還使我明白了許多待人接物與為人處世的道理。所有這一切都將成為我受益終生的寶貴財(cái)富!本論文從選題到完成，每一步都是在導(dǎo)師的指導(dǎo)下完成的，傾注了導(dǎo)師大量的心血。在此，我向?qū)煴硎境绺叩木匆夂陀芍缘母兄x！我在研究思想方法上得到了啟發(fā)，并且在工作中采用他們的部分研究成果與資料。盡管與他們?yōu)槲腋冻龅囊磺邢啾龋械恼Z(yǔ)言都顯得蒼白無(wú)力，但我仍要真誠(chéng)地說(shuō)聲:謝謝!感謝三年來(lái)各位老師和同學(xué)對(duì)我學(xué)習(xí)、生活的關(guān)心和幫助。在論文即將完成之際，我的心情久久無(wú)法平靜，從開始進(jìn)入課題到論文的順利完成，有多少可敬的師長(zhǎng)、同學(xué)、朋友給予了我無(wú)言的幫助，在這里請(qǐng)接受我誠(chéng)摯的謝意！
最后感謝我的母校—遼寧警察學(xué)院三年來(lái)對(duì)我的栽培。畢業(yè)設(shè)計(jì)完成之際，我由衷地感謝論文指導(dǎo)老師的大力幫助和支持，感謝熱心的同學(xué)與朋友，在我遇到種各樣復(fù)雜問(wèn)題的時(shí)候，給予我鼓勵(lì)和幫助。
Flash網(wǎng)頁(yè)設(shè)計(jì)
參考文獻(xiàn)
[1]向玫玫,林強(qiáng)，馬杰，薛雅娟,王亞冰，范文南.Flash設(shè)計(jì)(21世紀(jì)全國(guó)普通高等院校美術(shù)藝術(shù)設(shè)計(jì)專業(yè)十二五精品課程規(guī)劃教材)，遼寧美術(shù)出版社，2014.04.[2]李錫澤，王喆.《Flash動(dòng)畫網(wǎng)頁(yè)設(shè)計(jì)》，武漢大學(xué)出版社,2015年.[3]劉歡.《Flash ActionScript 3.0交互設(shè)計(jì)200例》，人民郵電出版社，2015.05.[4]劉斌.基于Flash的課件制作與應(yīng)用[J]，科技廣場(chǎng)，2012(7).P102-P103.[5]莫仲心.淺談Flash動(dòng)畫在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].信息通信.2012(1).P135-P136.22
第五篇：電大Dreamweaver的網(wǎng)頁(yè)設(shè)計(jì)論文
鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)
鄂爾多斯電視廣播大學(xué)
畢業(yè)設(shè)計(jì)（論文）
題目：個(gè)人網(wǎng)站設(shè)計(jì)——個(gè)人網(wǎng)站建設(shè)
學(xué) 院：_鄂爾多斯電大 _ 專 業(yè)：計(jì)算機(jī)應(yīng)用技術(shù) 班 級(jí)： 計(jì)算機(jī)班 姓 名：____s.____
2014年12月完成
I
鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)
摘 要
在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。
現(xiàn)今的社會(huì)，人們已經(jīng)離不開了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種形式，它能夠把事情的復(fù)雜化轉(zhuǎn)為簡(jiǎn)單化，擺脫了時(shí)間和空間的限制。網(wǎng)站為很多人提供了一個(gè)網(wǎng)絡(luò)生活空間，通過(guò)其網(wǎng)頁(yè)展示了企業(yè)介紹、城市文化、校園文化介紹、招商信息、加盟程序、留言等一系列內(nèi)容的介紹。為了更好的宣傳和服務(wù)于經(jīng)濟(jì)發(fā)展，我通過(guò)制作一個(gè)網(wǎng)站來(lái)介紹宣傳一下我的家鄉(xiāng)。本文比較系統(tǒng)的闡述了有關(guān)網(wǎng)站建設(shè)方面的相關(guān)理論知識(shí)及該網(wǎng)站開發(fā)設(shè)計(jì)，充分體現(xiàn)了計(jì)算機(jī)技術(shù)服務(wù)于經(jīng)濟(jì)建設(shè)的重要思想。
關(guān)鍵詞: 網(wǎng)站建設(shè)，Internet，城市
II
鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)
目錄
第一章 前言...........................................................1 1．1課題來(lái)源.......................................................1 1．2 網(wǎng)站開發(fā)項(xiàng)目需求分析.........................................1 第二章 網(wǎng)頁(yè)制作概述....................................................2 2.1 網(wǎng)頁(yè)的類型......................................................2 2.1.1 靜態(tài)頁(yè)面..................................................2 2.1.2 動(dòng)態(tài)頁(yè)面..................................................2 2.2 網(wǎng)頁(yè)開發(fā)技術(shù)....................................................3 2.3 網(wǎng)頁(yè)布局........................................................4 2.3.1 網(wǎng)頁(yè)布局的基本概念........................................4 2.3.2網(wǎng)頁(yè)布局方法...............................................6 2.3.2 網(wǎng)頁(yè)布局技術(shù)..............................................8 2.4網(wǎng)頁(yè)配色........................................................9 2.5 網(wǎng)頁(yè)設(shè)計(jì)流程...................................................10 第三章 涉及軟件......................................................11 3.1 DreamWeaVer cs5介紹...........................................11 3.2 DreamWeaVer cs5操作界面.......................................11 第四章 建立網(wǎng)頁(yè)鏈接..................................................12 4.1 文字鏈接.......................................................12 4.2 圖像鏈接.......................................................13 4.3在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接......................................14 第五章 結(jié)論........................................................16 致 謝................................................................17 參考文獻(xiàn)..............................................................18
III
鄂爾多斯電視廣播大學(xué)畢業(yè)設(shè)計(jì)
第一章 前言
1．1課題來(lái)源
隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的信息產(chǎn)業(yè)正在經(jīng)受著一個(gè)巨大的挑戰(zhàn)，同時(shí)也面臨著一個(gè)重大的機(jī)遇。就目前的科技發(fā)展水平而言，信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會(huì)化大生產(chǎn)的要求，因此，各個(gè)國(guó)家集中人力、財(cái)力加大對(duì)信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要。可喜的是在這幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)。互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。
互聯(lián)網(wǎng)拉近了各個(gè)領(lǐng)域之間的距離，如今利用互聯(lián)網(wǎng)來(lái)宣傳已經(jīng)是必不可少的工具，城市發(fā)展也需要互聯(lián)網(wǎng)的宣傳來(lái)帶動(dòng)自身的發(fā)展。
1.2網(wǎng)站開發(fā)項(xiàng)目需求分析
一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分來(lái)自于客戶的實(shí)際需求或者是出于自身發(fā)展的需要。在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動(dòng)。它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分。
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
第 I 條 第二章 網(wǎng)頁(yè)制作概述
2.1 網(wǎng)頁(yè)的類型
網(wǎng)頁(yè)有多種分類,我們籠統(tǒng)意義上的分類是動(dòng)態(tài)和靜態(tài)的頁(yè)面,原則上講靜態(tài)頁(yè)面多通過(guò)網(wǎng)站設(shè)計(jì)軟件來(lái)進(jìn)行重新設(shè)計(jì)和更改,相對(duì)的比較滯后，當(dāng)然現(xiàn)在有網(wǎng)站管理系統(tǒng)，也可以生成靜態(tài)頁(yè)面~我們稱這種靜態(tài)頁(yè)面為偽靜態(tài)。動(dòng)態(tài)頁(yè)面通過(guò)網(wǎng)頁(yè)腳本與語(yǔ)言自動(dòng)處理自動(dòng)更新的頁(yè)面。2.1.1 靜態(tài)頁(yè)面
靜態(tài)頁(yè)面是網(wǎng)頁(yè)的代碼都在頁(yè)面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。靜態(tài)頁(yè)面不能自主管理發(fā)布更新的頁(yè)面,如果想更新網(wǎng)頁(yè)內(nèi)容,要通過(guò)FTP軟件把文件DOWN下來(lái)用網(wǎng)頁(yè)制作軟件修改（通過(guò)fso等技術(shù)例外）。但是靜態(tài)頁(yè)面最大的好處是下載速度快，因?yàn)椴恍枰绦蜻\(yùn)算和數(shù)據(jù)庫(kù)連接。常見(jiàn)的靜態(tài)頁(yè)面以.html、.htm為擴(kuò)展名的。并非網(wǎng)站上沒(méi)有動(dòng)畫的就是靜態(tài)頁(yè)面[3]。2.1.2 動(dòng)態(tài)頁(yè)面
動(dòng)態(tài)頁(yè)面是通過(guò)執(zhí)行asp、php、jsp、.net等程序生成客戶端網(wǎng)頁(yè)代碼的網(wǎng)頁(yè)。動(dòng)態(tài)頁(yè)面通常可以通過(guò)網(wǎng)站后臺(tái)管理系統(tǒng)對(duì)網(wǎng)站的內(nèi)容進(jìn)行更新管理。發(fā)布新聞，發(fā)布公司產(chǎn)品，交流互動(dòng)，博客，網(wǎng)上調(diào)查等，這都是動(dòng)態(tài)網(wǎng)站的一些功能，也是我們常見(jiàn)的。動(dòng)態(tài)網(wǎng)頁(yè)是需要語(yǔ)言環(huán)境支持的，動(dòng)態(tài)頁(yè)面常見(jiàn)的擴(kuò)展名有：.asp、.php、.jsp、.cgi 等。動(dòng)態(tài)頁(yè)面的“動(dòng)態(tài)”是網(wǎng)站與客戶端用戶互動(dòng)的意思，而非網(wǎng)頁(yè)上有動(dòng)畫的就是動(dòng)態(tài)頁(yè)面[4]。
動(dòng)態(tài)網(wǎng)頁(yè)是最常用的網(wǎng)站建設(shè)的一種表達(dá)形式，其優(yōu)點(diǎn)在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請(qǐng)求返回相應(yīng)的數(shù)據(jù)。可以說(shuō)是一對(duì)多的關(guān)
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
系。從而達(dá)到資源的最大利用和節(jié)省服務(wù)器上的物理資源。如果今后需要改變站點(diǎn)風(fēng)格，只需要重新制作前臺(tái)所訪問(wèn)的數(shù)據(jù)即可。只要數(shù)據(jù)庫(kù)結(jié)構(gòu)不變，可以很快的進(jìn)行改版的。
2.2 網(wǎng)頁(yè)開發(fā)技術(shù)
動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)技術(shù)介紹——HTML、ASP、JSP、CGI、PHP。
HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語(yǔ)言，是www.tmdps.cnmon Gateway Interface(公用網(wǎng)關(guān)接口)。在早期，你可以使用不同的程序編寫合適的CGI程序，如Visual Basic,Delphi或C/C++等。雖然CGI技術(shù)成熟而且功能強(qiáng)大，但由于編程困難，效率低下，修改復(fù)雜等缺陷，所以有逐漸被新技術(shù)取代的趨勢(shì)。
ASP全名Active Server Pages，是一個(gè)WEB服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的WEB服務(wù)應(yīng)用程序。ASP采用腳本語(yǔ)言VB Script（Java script）作為自己的開發(fā)語(yǔ)言。ASP更精確的說(shuō)是一個(gè)中間件，這個(gè)中間件將Web上的請(qǐng)求轉(zhuǎn)入到一個(gè)解釋器中，在這個(gè)解釋器中將所有的ASP的Script進(jìn)行分析，再進(jìn)行執(zhí)行，而這時(shí)可以在這個(gè)中間件中去創(chuàng)建一個(gè)*.html文件（靜態(tài)網(wǎng)頁(yè)）。PHP是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語(yǔ)言.它大量地借用C,Java和Perl語(yǔ)言的語(yǔ)法, 并耦合PHP自己的特性,使WEB開發(fā)者能夠快速地寫出動(dòng)態(tài)生成頁(yè)面.它支持目前絕大多數(shù)數(shù)據(jù)庫(kù)。還有一點(diǎn)，PHP是完全免費(fèi)的[6]。
JSP 是Sun公司推出的新一代站點(diǎn)開發(fā)語(yǔ)言，他完全解決了目前ASP,PHP的一個(gè)通病－－腳本級(jí)執(zhí)行（據(jù)說(shuō)PHP4 也已經(jīng)在Zend 的支持下，實(shí)現(xiàn)編譯運(yùn)
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
行）。Sun 公司借助自己在Java 上的不凡造詣，將Java 從Java 應(yīng)用程序 和 Java Applet 之外，又有新的碩果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能強(qiáng)大的站點(diǎn)程序。
2.3 網(wǎng)頁(yè)布局
網(wǎng)站主頁(yè)就好象是宣傳欄或者店面——對(duì)訪問(wèn)者產(chǎn)生第一印象，都希望盡量給人留下好的印象。
一般來(lái)說(shuō)，好的網(wǎng)站應(yīng)該給人有這樣的感覺(jué)：
干凈整潔；
條理清楚；
網(wǎng)頁(yè)
專業(yè)水準(zhǔn)；
引人入勝。
網(wǎng)頁(yè)應(yīng)該力求抓住而不是淹沒(méi)瀏覽者的注意力，過(guò)多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪問(wèn)者無(wú)所適從——離開是最好的選擇，就象一些商店，播放震耳欲聾的發(fā)燒音樂(lè)，你要做的唯一決定就是離開那里，越快越好。(a)2.3.1 網(wǎng)頁(yè)布局的基本概念
最開始，網(wǎng)頁(yè)呈現(xiàn)在你面前的時(shí)侯，它就好像一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思，可以創(chuàng)造出自己的設(shè)計(jì)方案。，雖然你能控制一切你所能控制的東西，但假如你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣，那么你可以在此基礎(chǔ)上加上自己的東西，這樣你創(chuàng)造出來(lái)的網(wǎng)頁(yè)才能更好的被別人接受。
（1）頁(yè)面尺寸
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
由于頁(yè)面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁(yè)的局限性就在于你無(wú)法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁(yè)面范圍變得越來(lái)越小。一般分辨率在800x600的情況下，頁(yè)面的顯示尺寸為：780x428個(gè)象素；分辨率在640x480的情況下，頁(yè)面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁(yè)面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁(yè)面尺寸越大。
瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁(yè)面的尺寸是不一樣的。
在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容(尺寸)的方法。除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪問(wèn)者瀏覽。
（2）整體造型
造型就是創(chuàng)造出來(lái)的物體形象，這里是指頁(yè)面的整體形象。這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。
對(duì)于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁(yè)都是以矩形為整體造型；圓形帶表著柔和，團(tuán)結(jié)，溫暖，安全等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁(yè)面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁(yè)制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。
（3）頁(yè)頭
頁(yè)頭又可稱之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。這樣，訪問(wèn)者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁(yè)頭是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。
（4）文本
文本在頁(yè)面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個(gè)頁(yè)面布局的可視性。在過(guò)去因?yàn)轫?yè)面制作技術(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁(yè)面的任何位置。
（5）頁(yè)腳
頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方，而頁(yè)腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁(yè)腳的。
（6）圖片
圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。
（7）多媒體
除了文本和圖片，還有聲音，動(dòng)畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起，它們?cè)诰W(wǎng)頁(yè)布局上也將變得更重要。(b)2.3.2網(wǎng)頁(yè)布局方法
網(wǎng)頁(yè)布局的方法有兩種，第一種為紙上布局；第二種為軟件布局。下面分別加以介紹。
（1）紙上布局法
許多網(wǎng)頁(yè)制作者不喜歡先畫出頁(yè)面布局的草圖，而是直接在網(wǎng)頁(yè)設(shè)計(jì)器里邊設(shè)計(jì)布局邊加內(nèi)容。這種不打草稿的方法不能讓你設(shè)計(jì)出優(yōu)秀的網(wǎng)頁(yè)來(lái)。所以在開始制作網(wǎng)頁(yè)時(shí)，要先在紙上畫出你頁(yè)面的布局草圖來(lái)。
首先，尺寸的選擇。目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數(shù)訪問(wèn)者，你頁(yè)面的尺寸以800X600的分辨率為準(zhǔn)。
其次，造型的選擇。先在白紙上畫出象征瀏覽器窗口的矩形，這個(gè)矩形就是你布局的范圍了。選擇一個(gè)形狀作為整個(gè)頁(yè)面的主題造型，我們選擇圓形，因?yàn)樗碚呷岷停蜁r(shí)尚流行比較相稱，然后在矩形框架里隨意畫出來(lái)，你可以試者在增加一些圓形或者其它形狀。這樣畫下來(lái)，你會(huì)發(fā)現(xiàn)很亂。其實(shí)，如果你一
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
開始就想設(shè)計(jì)出一個(gè)完美的布局來(lái)是比較困難的，而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來(lái)。還要注意一點(diǎn)，你不要擔(dān)心你設(shè)計(jì)的布局是否能夠?qū)崿F(xiàn)。事實(shí)上，只要你能想到的布局都能靠現(xiàn)今的HTML技術(shù)實(shí)現(xiàn)。如圖2-1和圖2-2
圖2-1 手繪布局圖 圖2-2 布局圖
考慮到左邊向左凹的弧線，為了取得平衡我們?cè)陧?yè)面右邊增加了一個(gè)矩形，(也可以是一條線段)如圖2-3。
圖2-3 布局圖的改善
然后，增加頁(yè)頭。一般頁(yè)頭都是位于頁(yè)面頂部，所以我們?yōu)閳D3增加了一個(gè)頁(yè)頭，為了和左邊的弧線和右邊的矩形取得平衡，我們?cè)黾恿艘粋€(gè)矩形頁(yè)頭并讓頁(yè)頭相交與左邊的弧線，如圖2-4。
圖2-4 頁(yè)頭的圖示
然后，增加文本。頁(yè)面的空白部分加別加入文本和圖形。因?yàn)樵陧?yè)面右邊有矩形作為陪襯，所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不協(xié)調(diào)，如圖2-5。
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
圖2-5 文本的圖示
最后，增加圖片。圖片是美化頁(yè)面和說(shuō)明內(nèi)容必須的媒體。在這里把圖片加入到適當(dāng)?shù)牡胤剑鐖D2-6。
圖2-6 圖片的圖示
經(jīng)過(guò)以上的幾個(gè)步驟，一個(gè)時(shí)尚頁(yè)面的大概布局就出現(xiàn)了。當(dāng)然，它不是最后的結(jié)果，而是你以后制作時(shí)的重要參考依據(jù)。
（2）軟件布局法
除了紙上布局，還可以利用軟件來(lái)完成這些工作。如利用Photoshop。Photoshop所具有的對(duì)圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁(yè)布局上更顯得心應(yīng)手。利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設(shè)計(jì)出用紙張無(wú)法實(shí)現(xiàn)的布局意念。(c)2.3.2 網(wǎng)頁(yè)布局技術(shù)
（1）層疊樣式表的應(yīng)用
在新的HTML4.0標(biāo)準(zhǔn)中，CSS(層疊樣式表)被提出來(lái)，它能完全精確的定位文本和圖片。CSS有點(diǎn)復(fù)雜，但它的確是一個(gè)好的布局方法[7]。曾經(jīng)無(wú)法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。比如一些企業(yè)網(wǎng)站。
（2）表格布局
表格布局被廣泛使用，已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
表格布局唯一的缺點(diǎn)是，當(dāng)你用了過(guò)多表格時(shí)，頁(yè)面下載速度受到影響[8]。對(duì)于表格布局，打開一個(gè)站點(diǎn)的首頁(yè)，然后保存為HTML文件，利用網(wǎng)頁(yè)編輯工具打開它(要所見(jiàn)即所得的軟件)，會(huì)可以看到這個(gè)頁(yè)面是如何利用表格的。
（3）框架布局
由于它的兼容性，框架布局并沒(méi)有被所有人接受。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，把不同對(duì)象放置到不同頁(yè)面加以處理，因?yàn)榭蚣芸梢匀∠吙颍砸话銇?lái)說(shuō)不影響整體美觀。
2.4網(wǎng)頁(yè)配色
網(wǎng)站充斥著枯燥的設(shè)計(jì)，惠普、IBM、戴爾、微軟，以及其他數(shù)不盡的網(wǎng)站（相似的布局，相似的配色）。這樣一種標(biāo)準(zhǔn)化的界面可以使瀏覽更方便，但同時(shí)帶給用戶一種很世俗的體驗(yàn)，并不能與訪客產(chǎn)生一種積極的聯(lián)系。
面對(duì)這種單調(diào)的設(shè)計(jì)，有一種解決方法，就是使用顏色。可能沒(méi)有其他設(shè)計(jì)元素能像顏色一樣能影響人們對(duì)世界感受。顏色可以瞬間改變我們的情緒和意見(jiàn)。顏色會(huì)讓我們感覺(jué)到舒適、敬畏，或者激動(dòng)[9]。在界面設(shè)計(jì)中，顏色組合對(duì)設(shè)計(jì)非常有用。可以區(qū)分設(shè)計(jì)讓用戶更加難忘、引導(dǎo)用戶使用戶專注于交互、吸引用戶使頁(yè)面布局更舒適，更有魅力。
一旦有機(jī)會(huì)可以讓網(wǎng)站更獨(dú)特，就不能放棄。如果你的網(wǎng)站做的很醒目，那么用戶可能會(huì)花更多時(shí)間瀏覽并且想是從哪里訪問(wèn)過(guò)來(lái)的，他們有可能記住這個(gè)網(wǎng)站并且下次再訪問(wèn)。可能沒(méi)有比顏色更好的元素可以達(dá)到這樣的效果了。人們會(huì)馬上對(duì)顏色產(chǎn)生感覺(jué)：激動(dòng)、高興或者枯燥乏味。
當(dāng)你試圖在一個(gè)充滿飽和色調(diào)的頁(yè)面上瀏覽信息時(shí)，你的眼睛會(huì)不斷地返回那些亮的顏色。最強(qiáng)的視覺(jué)元素是最重要的。我們趨向于忘記那些深藍(lán)、黃色和灰色，因?yàn)槊刻於伎吹健Ｔ谀切┯脩粜枰L(zhǎng)時(shí)間在線使用的 Web 應(yīng)用程序中，注意這一點(diǎn)尤為重要。不是很強(qiáng)烈的配色可以使用戶專注于工作和接收重要信息。當(dāng)然完美的 Web 體驗(yàn)不能僅僅依靠顏色，結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作，來(lái)創(chuàng)建可用、易用的網(wǎng)站和應(yīng)用程序。但是顏色是平衡中的重要部分，不能忽略。
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
2.5 網(wǎng)頁(yè)設(shè)計(jì)流程
網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)互動(dòng)的過(guò)程，不僅是設(shè)計(jì)師構(gòu)思設(shè)計(jì)就可以完成的。從客戶提出需求到最終發(fā)布，期間需要客戶與設(shè)計(jì)人員共同參與協(xié)商才可以，具體流程如下：
首先，獲取客戶需求和資料。在設(shè)計(jì)網(wǎng)站頁(yè)面之前，設(shè)計(jì)師需要知道客戶的需求，從而確定客戶建立網(wǎng)站的目的。客戶提出網(wǎng)站需求是非常重要的一個(gè)環(huán)節(jié)。沒(méi)有詳細(xì)的需求，設(shè)計(jì)人員無(wú)法憑空進(jìn)行設(shè)計(jì)制作。在這個(gè)步驟中，雙方的溝通與交流是非常重要的。
其次，確定網(wǎng)站內(nèi)容。設(shè)計(jì)人員選擇適合自己的圖像編輯軟件、動(dòng)畫制作軟件和網(wǎng)頁(yè)制作軟件進(jìn)行網(wǎng)頁(yè)的初步設(shè)計(jì)，這中間可能還需要和客戶進(jìn)行多次溝通才能達(dá)到客戶滿意的效果。在具體設(shè)計(jì)時(shí)，設(shè)計(jì)人員應(yīng)該為網(wǎng)站定位一個(gè)主題，從而保證所有網(wǎng)頁(yè)都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，保證風(fēng)格的和諧統(tǒng)一。
然后，申請(qǐng)域名和空間。使用該方法能夠有效同步管理文件。還可以通過(guò)FTP軟件連接到服務(wù)器空間上，然后上傳發(fā)布文件。
最后，后期維護(hù)。一般靜態(tài)網(wǎng)站上傳后，如果客戶方?jīng)]有專業(yè)人員維護(hù)，這樣就需要設(shè)計(jì)人員從客戶方獲取新資料進(jìn)行定期或不定期的更新。如果是動(dòng)態(tài)網(wǎng)站，設(shè)計(jì)人員需要負(fù)責(zé)培訓(xùn)客戶方如何使用后臺(tái)管理，這樣客戶就可以自己通過(guò)后臺(tái)管理添加信息，設(shè)計(jì)人員只要及時(shí)更正動(dòng)態(tài)網(wǎng)站的錯(cuò)誤即可。
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
第三章 涉及軟件
3.1 DreamWeaVer cs3介紹
Dreamweaver CS3是Adobe(奧多比)公司收購(gòu)Macromedia公司后推出的Creative Suite 3 設(shè)計(jì)套裝中用于網(wǎng)頁(yè)設(shè)計(jì)與制作的組件。作為全球最流行，最優(yōu)秀的所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，Dreamweaver可以輕而易舉地制作出跨操作系統(tǒng)平臺(tái)，跨瀏覽器的充滿動(dòng)感的網(wǎng)頁(yè)，是目前制作Web頁(yè)站點(diǎn),Web頁(yè)和Web應(yīng)用程序開發(fā)的理想工具。Dreamweaver，F(xiàn)ireworks，F(xiàn)lash被稱為網(wǎng)頁(yè)制作的“三劍客”，這三款工具相輔相承，是制作網(wǎng)頁(yè)的最佳拍檔
3.2 DreamWeaVer cs3操作界面
DreamWeaVer cs3界面設(shè)計(jì)友好，空間廣闊，操作精微細(xì)致,是一種所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，既有效的減少了代碼編寫的工作量，也確保所設(shè)計(jì)文檔的專業(yè)性和兼容性。，如圖3.1所示。
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
圖3.1 DreamWeaVer cs3操作界面
第四章 建立網(wǎng)頁(yè)鏈接
網(wǎng)站實(shí)際上是由很多網(wǎng)頁(yè)組成的，那么網(wǎng)頁(yè)之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容----網(wǎng)頁(yè)的“鏈接”。“鏈接”，又稱“超鏈接"（Hyperlink）,它作為網(wǎng)頁(yè)的橋梁。網(wǎng)頁(yè)中的很多對(duì)象都可以加入“鏈接”屬性。在Dreamweaver 8中，如果以“鏈接”的媒介來(lái)劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共8種。
4.1 文字鏈接
“文字鏈接”即以文字作為媒介的鏈接，它是網(wǎng)頁(yè)中最常被使用的鏈接方式，具有“文件小、制作簡(jiǎn)單和便于維護(hù)”的特點(diǎn)。接下來(lái)結(jié)合我的個(gè)人網(wǎng)站為實(shí)例，來(lái)講解如何為文字建立“鏈接”。操作步驟：
步驟1、準(zhǔn)備好已經(jīng)制作完成的首頁(yè)的各個(gè)欄目頁(yè)面
步驟
2、在Dreamweaver 中打開首頁(yè)，之后反白選取作為“鏈接”的文字。步驟
3、觀察“屬性面板”，其中包括一個(gè)“鏈接”文本框。步驟
4、接下來(lái)需要把鏈接的位址加入到文本框中。
鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
步驟
5、在“鏈接”文本框下面還有一個(gè)“目標(biāo)”下拉列表，從中可以選擇鏈接網(wǎng)頁(yè)顯示的窗口方式，共有4種。如圖：
步驟
6、還可以設(shè)置一些“鏈接”的屬性，單擊“屬性面板”中的“頁(yè)面屬性”，選擇其中的“鏈接”分類，可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問(wèn)鏈接”顏色、“活動(dòng)鏈接”顏色及“下劃線樣式”。
步驟
7、至此，第1個(gè)欄目的鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，當(dāng)鼠標(biāo)放在“放松心情”這4個(gè)文字上時(shí)將變成手形，并且瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示鏈接到的網(wǎng)頁(yè)的位址，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第1個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。
步驟
8、同理，按照以上步驟，再為“閑情逸致”和“個(gè)人主頁(yè)”等其它欄制作指向?qū)?yīng)欄目的鏈接。
至此，整個(gè)“文字鏈接”的實(shí)例就全就全部完成了。
4.2 圖像鏈接
“圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首先應(yīng)該在網(wǎng)頁(yè)中插入“圖像”，有關(guān)插入“圖像”或“導(dǎo)航條”按鈕的內(nèi)容，接下來(lái)以我的網(wǎng)站“my web“為例，講解如何建立“圖像鏈接”。操作步驟：
步驟
1、首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁(yè)和各個(gè)欄目的頁(yè)面 步驟
2、在Dreamweaver中打開網(wǎng)站的首頁(yè)，之后選取要制作“鏈接”的圖像。
步驟
3、觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字位址。步驟
4、如果有需要，可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁(yè)顯示的鄂爾多斯電視廣播畢業(yè)設(shè)計(jì)
窗口方式，分別為-blank、-parent、-self或 top。
步驟
5、至此，第1個(gè)欄目的圖像鏈接就制作完畢了，按下Ctrl+S保存網(wǎng)頁(yè)，再按下F12預(yù)覽，測(cè)試一下，將鼠標(biāo)放在“動(dòng)畫制作”4個(gè)文字上時(shí)將變成手形，同時(shí)瀏覽器窗口下面的狀態(tài)區(qū)中會(huì)顯示出鏈接到的網(wǎng)頁(yè)的地址，并且會(huì)顯示出“替代”文本“動(dòng)畫制作”，單擊文字，頁(yè)面會(huì)立即跳轉(zhuǎn)到第3個(gè)欄目中，這表示鏈接已經(jīng)制作成功了。
步驟
6、同理，按照以上步驟，再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。步驟
7、在欄目頁(yè)面中制作“返回首頁(yè)”的鏈接，使得單擊后可以跳轉(zhuǎn)回首頁(yè)。
至此，整個(gè)“圖像鏈像”的實(shí)例就全部完成了。
4.3在HTML語(yǔ)言中建立網(wǎng)頁(yè)鏈接
一、文字鏈接
在HTML語(yǔ)言中用超鏈接標(biāo)記指向一個(gè)目標(biāo)。其基本格式為：舉個(gè)簡(jiǎn)單的“文本鏈接”的實(shí)例，該實(shí)例相對(duì)應(yīng)的HTML代碼如下所示。
a href-“index2.html”target=”-blank”>平面設(shè)計(jì)（新開窗口，-blank)
相冊(cè)（原窗口，默認(rèn)為空）
點(diǎn)擊咨詢 