網(wǎng)頁設(shè)計畢業(yè)論文

1、編號： 商丘工學(xué)院 畢業(yè)論文 題 目: 系 別: 專 業(yè): 學(xué)生姓名: 成 績: 指導(dǎo)教師: 2012 年 4 月 摘摘要要 在互聯(lián)網(wǎng)飛速發(fā)展的今天，網(wǎng)絡(luò)已成為人們生活中不可缺少的一部分。網(wǎng) 站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子 商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站去談電子商務(wù)是不可能的。網(wǎng)頁作為新 興媒體,有著比報刊、雜志、廣播、電視等傳統(tǒng)媒體更多的構(gòu)成要素,如文字、 圖形、聲音、圖像和動畫等。網(wǎng)頁設(shè)計包括風(fēng)格定位、版面編排、布局、色彩 處理等諸多方面?？傊?，網(wǎng)頁設(shè)計需要時間和耐心去鉆研，才能做出好的網(wǎng)頁 藝術(shù)設(shè)計。 關(guān)鍵詞：關(guān)鍵詞：網(wǎng)頁制作 風(fēng)格 板式 色

2、彩 布局 目錄目錄 引言引言 .3 3 一一、網(wǎng)站建設(shè)的流程網(wǎng)站建設(shè)的流程.4 4 二、確定網(wǎng)站的整體風(fēng)格確定網(wǎng)站的整體風(fēng)格.4 4 三三、網(wǎng)站的板式及布局網(wǎng)站的板式及布局.5 5 3.1 網(wǎng)站的板式設(shè)計 .5 3.2 網(wǎng)頁設(shè)計布局及類型 .5 四四、色殘在網(wǎng)頁中的應(yīng)用色殘在網(wǎng)頁中的應(yīng)用.5 5 4.1 色彩在網(wǎng)頁設(shè)計中的應(yīng)用 .5 4.2 主頁色彩的處理 .6 4.3 常用的配色方案 .6 4.4 合理搭配網(wǎng)頁色彩 .7 五五、網(wǎng)頁設(shè)計形式與內(nèi)容相統(tǒng)一網(wǎng)頁設(shè)計形式與內(nèi)容相統(tǒng)一.7 7 六六、網(wǎng)頁制作工具網(wǎng)頁制作工具.8 8 七七、總結(jié)總結(jié).8 8 參考文獻(xiàn)參考文獻(xiàn).9 9 引言引言 隨著 i

3、nternet 的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與 到網(wǎng)站建設(shè)中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個家，你就可以在這里向客戶介 紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個重 要的環(huán)節(jié)，相對于傳統(tǒng)的平面設(shè)計而言，網(wǎng)頁設(shè)計具有更多的新穎性，更多可 以表現(xiàn)的手法。所以，社會上對網(wǎng)頁制作人才的需求越來越大，網(wǎng)頁設(shè)計與制 作成了一個別時髦的工作，dreamweaver 因其所見即所得和可視化編程的特性， 無疑成了網(wǎng)頁設(shè)計與制作的最佳工具選擇。 一一、網(wǎng)站建設(shè)的流程網(wǎng)站建設(shè)的流程 1定義合適的域名。由域名構(gòu)成的網(wǎng)址會像商標(biāo)一樣，有助于將來塑造 網(wǎng)上的形象。域名除了要符合

4、公司的性質(zhì)以及信息內(nèi)容的特征外，還要具有簡 潔、易記、具有沖擊力的特點。 2租用虛擬服務(wù)器。有了域名后，就需要一個空間存放網(wǎng)站，這個空間 就是 internet 上的服務(wù)器。一般虛擬主機(jī)提供商都能向用戶提供大容量、高速 度的服務(wù)器，用戶可根據(jù)網(wǎng)站的內(nèi)容設(shè)置及其發(fā)展前景來選擇。 3設(shè)計網(wǎng)頁。網(wǎng)頁的設(shè)計制作可以自己完成，也可以通過虛擬主機(jī)提供 商或?qū)I(yè)的網(wǎng)頁設(shè)計制作商來完成。設(shè)計網(wǎng)頁前要收集所有需要放在網(wǎng)站上的 文本資料、圖片等，并盡量用文字詳細(xì)說明制作的框架結(jié)構(gòu)，將收集的材料提 供給網(wǎng)頁設(shè)計者。 4icp 備案。網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營活 動，打擊不良互聯(lián)網(wǎng)信息的傳播，

5、如果網(wǎng)站不備案的話，很有可能被查處以后 關(guān)停。icp 備案可以自主通過官方備案網(wǎng)站 http:/ 在 線備案或者通過當(dāng)?shù)仉娦挪块T兩種方式來進(jìn)行備案 二二、確定網(wǎng)站的整體風(fēng)格確定網(wǎng)站的整體風(fēng)格 任何主頁都要根據(jù)主題的內(nèi)容決定其風(fēng)格與形式，因為只有形式與內(nèi)容 的完美統(tǒng)一，才能達(dá)到理想的宣傳效果。目前主頁的應(yīng)用范圍日益擴(kuò)大，幾 乎包括了所有的行業(yè)，林林總總，包羅萬象，但歸納起來大體有這么幾個大 類：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂藝術(shù)、電子商務(wù)、網(wǎng)絡(luò)中心等。 對于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的主頁風(fēng)格，就像穿著打扮，應(yīng)依不同 的性別以及年齡層次而異一樣。例如：政府部門的主頁風(fēng)格一般應(yīng)比較莊重， 而

6、娛樂行業(yè)則可以活潑生動一些；文化教育部門的主頁風(fēng)格應(yīng)該高雅大方， 而商務(wù)主頁則可以貼近民俗，使大眾喜聞樂見。 主頁風(fēng)格的形成主要依賴于主頁的版式設(shè)計，依賴于頁面的色調(diào)處理， 還有圖片與文字的組合形式等。這些問題看似簡單，但往往需要主頁的設(shè)計 和制作者具有一定的美術(shù)素質(zhì)和修養(yǎng)。 還有，動畫效果也不宜在主頁設(shè)計中濫用，特別是一些內(nèi)容比較嚴(yán)肅的 主頁。主頁畢竟主要依靠文字和圖片來傳播信息，它不是動畫片，更不是電 視或電影。 三三、網(wǎng)網(wǎng)站站的的版版式式和和布布局局 3.13.1 網(wǎng)網(wǎng)站站的的版版式式設(shè)設(shè)計計 網(wǎng)頁設(shè)計作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計不 等同于平面設(shè)計，但它們有許多相

7、近之處。 版式設(shè)計通過文字圖形的空間組合，表達(dá)出和諧與美。 主頁的設(shè)計首先涉及到的是頁面的版面編排問題。主頁作為一種版面， 既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分；圖片也有大小， 而且有橫有豎之別。圖片和文字都需要同時展示給觀眾，因此必須根據(jù)內(nèi)容 的需要，將這些圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們 組成一個有機(jī)的整體，展現(xiàn)給廣大的觀眾?？梢砸罁?jù)如下幾條來做： 1.主次分明，中心突出。 2.大小搭配，相互呼應(yīng)。 3.圖文并茂，相得益彰。 3 3. .2 2 網(wǎng)網(wǎng)頁頁設(shè)設(shè)計計布布局局及及類類型型 網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點鼠標(biāo)，在網(wǎng)海中遨游， 一副副精

8、彩的網(wǎng)頁會呈現(xiàn)在我們面前，那么，網(wǎng)頁的精彩與否的因素是什么 呢？色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素， 除了這些，還有一個非常重要的因素 網(wǎng)頁的布局。 網(wǎng)頁布局大致可分為 “國”字型、拐角型、標(biāo)題正文型、左右框架型、 上下框架型、綜合框架型、封面型、 flash 型、變化型 。 四四、 色色彩彩在在網(wǎng)網(wǎng)頁頁中中的的應(yīng)應(yīng)用用 4.14.1 色色彩彩在在網(wǎng)網(wǎng)頁頁設(shè)設(shè)計計中中的的作作用用 色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，我們的設(shè)計師根據(jù)和諧、 均衡和重點突出的原則，將不同的色彩進(jìn)行組合搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對人們心理的影響，合理地加以運用。 先選定一種色彩

9、，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩 統(tǒng)一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠； 或者土黃，土灰，土藍(lán)。 在網(wǎng)頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。 背景和前文的對比盡量要大以便突出主要文字內(nèi)容。 4 4. .2 2 主主頁頁色色彩彩的的處處理理 色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花， 達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是 “總體協(xié)調(diào)，局部對比 ”， 也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可 以有一些強(qiáng)烈色彩的對比。在色彩的運用上，可以根據(jù)主頁內(nèi)容的需要，分 別采用不同的主色調(diào)。因

10、為色彩具有象征性，例如：嫩綠色、翠綠色、金黃 色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例 如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如 冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個民族由于環(huán) 境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。充分 運用色彩的這些特性，可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵，從而提升主 頁的文化品位。 4 4. .3 3 常常用用的的配配色色方方案案 1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運用， 可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。 2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配

11、。這種色調(diào)的運用，可使 主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。 3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如：紅 與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺效果，給 人亮麗、鮮艷、喜慶的感覺。 最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個 術(shù)語，就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。 底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）； 反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文 字或圖片）。這種深淺的變化在色彩學(xué)中稱為 “明度變化”。當(dāng)然，色彩 的明度也不能變化太大，否則屏幕上的亮度反差

12、太強(qiáng)，同樣也會使讀者的眼 睛受不了。 4.44.4 合理搭配網(wǎng)頁色彩合理搭配網(wǎng)頁色彩 網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，網(wǎng)頁的背景、文字、圖標(biāo)、邊框、 超鏈接等都要用到色彩。不同的色彩會使瀏覽者有不同的心理感受。合理的搭 配色彩，會更好的表現(xiàn)主題，吸引用戶的注意力。網(wǎng)頁色彩涉及到藝術(shù)知識， 讓美術(shù)教師參加網(wǎng)頁色彩設(shè)計，可能會出現(xiàn)比較理想的效果。在色彩搭配上要 注意色彩的鮮明性、獨特性、合適性、聯(lián)想性。背景色和前景色對比要大，以 突出主要內(nèi)容 網(wǎng)站給人的第一印象來自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，并 可能影響到訪問者的情緒。“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色 彩，要用于網(wǎng)站的

13、標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。至 于其它色彩也可以使用，但應(yīng)當(dāng)只是作為點綴和襯托，絕不能喧賓奪主。一般 來說，一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過 3 種，太多則讓人眼花繚亂。適合于網(wǎng)頁標(biāo) 準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色。 五、五、網(wǎng)網(wǎng)頁頁設(shè)設(shè)計計形形式式與與內(nèi)內(nèi)容容相相統(tǒng)統(tǒng)一一 為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須 符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。 靈活運用對比與調(diào)和、 對稱與平衡、 節(jié)奏與韻律以及留白等手段，通 過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。 如對稱原則在頁面設(shè)計中， 它的均衡有時會使頁面顯得

14、呆板，但如果加入 一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較 好的效果。 點、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互 相襯托、互相補充構(gòu)成最佳的頁面效果，充分表達(dá)完美的設(shè)計意境。 六六、網(wǎng)頁制作工具網(wǎng)頁制作工具 現(xiàn)在非常流行的 macromedia 公司出品的 dreamweaver studio 8 提供了更多 功能強(qiáng)勁的可視化設(shè)計工具、應(yīng)用開發(fā)環(huán)境以及代碼編輯支持，是開發(fā)人員和 設(shè)計師能夠快捷的創(chuàng)建代碼規(guī)范的應(yīng)用程序，集成程度非常高，開發(fā)環(huán)境精簡 而高效，開發(fā)人員能夠運用 dreamweaver 與他們的服務(wù)器技術(shù)構(gòu)建功能強(qiáng)大的 網(wǎng)絡(luò)應(yīng)用程序連接到用戶的

15、數(shù)據(jù)、網(wǎng)絡(luò)服務(wù)體系。 平面圖形設(shè)計的 photoshop 軟件，photoshop 可以做出比較復(fù)雜的平面效果， 此次設(shè)計中采用 photoshop 編輯圖片。 網(wǎng)頁動畫設(shè)計軟件 flash。flash 網(wǎng)頁動畫設(shè)計軟件可以制作網(wǎng)頁互動動畫， 也可以將一個較大的互動動畫制作為一個完整的網(wǎng)頁，這是一個非常靈活的設(shè) 計軟件。由于利用 flash 可以設(shè)計強(qiáng)大的動畫效果，所以 flash 動畫已發(fā)展成 為一種獨特的藝術(shù)形式。至此 flash 動畫被廣泛應(yīng)用在網(wǎng)頁設(shè)計中，從 logo 到 網(wǎng)頁橫幅、按鈕，甚至整個網(wǎng)頁或網(wǎng)站，都可以用 flash 動畫來實現(xiàn)。為利用 flash 動畫制作網(wǎng)頁導(dǎo)航條的效果

16、尤佳。 七、總結(jié)七、總結(jié) 網(wǎng)頁制作主要是利用圖形制作軟件和處理軟件進(jìn)行網(wǎng)頁效果圖的制作。我 們需要了解一個完整網(wǎng)站的制作過程，并知道網(wǎng)頁制作在網(wǎng)站制作中的作用。 一方面結(jié)合具體的實例，多加練習(xí)，培養(yǎng)對于技術(shù)的敏感和快速適應(yīng)性，注意 到技術(shù)變化帶來的各種新的可能性，消除技術(shù)所形成的障礙；另一方面要多方 面、多角度地感受與掌握電腦設(shè)計的時尚語言，擴(kuò)展對傳統(tǒng)設(shè)覺設(shè)計范疇的認(rèn) 識。 這次網(wǎng)頁設(shè)計的實現(xiàn)我用到的軟件主要有 photoshop、dreamweaver、 word。網(wǎng)站建設(shè)從需求分析到設(shè)計、測試，我都力求規(guī)范化，努力讓自己以前 學(xué)的知識運用到本網(wǎng)站的開發(fā)中，盡量保證整個系統(tǒng)的開發(fā)質(zhì)量，順利完成這 次的畢業(yè)設(shè)計，為自己的大學(xué)生涯畫上一個完美的句號。不過，在網(wǎng)站建設(shè)過 程中，好多知識都是隨學(xué)隨用，就增加了很多不必要的麻煩。雖說這些都會消 耗開發(fā)的時間，但在老師、同學(xué)以及自己的不斷努力下，一些問題也隨之克服 了，通過這次校園網(wǎng)站設(shè)計，