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

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

2、網(wǎng)頁制作 風(fēng)格 板式 色彩 布局 商丘工學(xué)院畢業(yè)論文 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è)計(jì) .5 3.2 網(wǎng)頁設(shè)計(jì)布局及類型 .5 四四、色殘?jiān)诰W(wǎng)頁中的應(yīng)用色殘?jiān)诰W(wǎng)頁中的應(yīng)用.5 5 4.1 色彩在網(wǎng)頁設(shè)計(jì)中的應(yīng)用 .5 4.2 主頁色彩的處理 .6 4.3 常用的配色方案 .6 4.4 合理搭配網(wǎng)頁色彩 .7 五五、網(wǎng)頁設(shè)計(jì)形式與內(nèi)容相統(tǒng)一網(wǎng)頁設(shè)計(jì)形式與內(nèi)容相統(tǒng)一.7 7 六六、網(wǎng)頁制作工具網(wǎng)頁制作工具.8 8 七七、總結(jié)總結(jié).8

3、8 參考文獻(xiàn)參考文獻(xiàn).9 9 商丘工學(xué)院畢業(yè)論文 3 引言引言 隨著 internet 的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與 到網(wǎng)站建設(shè)中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個(gè)家，你就可以在這里向客戶介 紹你的企業(yè)，展示你的實(shí)力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個(gè)重 要的環(huán)節(jié)，相對(duì)于傳統(tǒng)的平面設(shè)計(jì)而言，網(wǎng)頁設(shè)計(jì)具有更多的新穎性，更多可 以表現(xiàn)的手法。所以，社會(huì)上對(duì)網(wǎng)頁制作人才的需求越來越大，網(wǎng)頁設(shè)計(jì)與制 作成了一個(gè)別時(shí)髦的工作，dreamweaver 因其所見即所得和可視化編程的特性， 無疑成了網(wǎng)頁設(shè)計(jì)與制作的最佳工具選擇。 商丘工學(xué)院畢業(yè)論文 4 一一、網(wǎng)站建設(shè)的流程網(wǎng)站建設(shè)的

4、流程 1定義合適的域名。由域名構(gòu)成的網(wǎng)址會(huì)像商標(biāo)一樣，有助于將來塑造 網(wǎng)上的形象。域名除了要符合公司的性質(zhì)以及信息內(nèi)容的特征外，還要具有簡 潔、易記、具有沖擊力的特點(diǎn)。 2租用虛擬服務(wù)器。有了域名后，就需要一個(gè)空間存放網(wǎng)站，這個(gè)空間 就是 internet 上的服務(wù)器。一般虛擬主機(jī)提供商都能向用戶提供大容量、高速 度的服務(wù)器，用戶可根據(jù)網(wǎng)站的內(nèi)容設(shè)置及其發(fā)展前景來選擇。 3設(shè)計(jì)網(wǎng)頁。網(wǎng)頁的設(shè)計(jì)制作可以自己完成，也可以通過虛擬主機(jī)提供 商或?qū)I(yè)的網(wǎng)頁設(shè)計(jì)制作商來完成。設(shè)計(jì)網(wǎng)頁前要收集所有需要放在網(wǎng)站上的 文本資料、圖片等，并盡量用文字詳細(xì)說明制作的框架結(jié)構(gòu)，將收集的材料提 供給網(wǎng)頁設(shè)計(jì)者。 4i

5、cp 備案。網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營活 動(dòng)，打擊不良互聯(lián)網(wǎng)信息的傳播，如果網(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)格與形式，因?yàn)橹挥行问脚c內(nèi)容 的完美統(tǒng)一，才能達(dá)到理想的宣傳效果。目前主頁的應(yīng)用范圍日益擴(kuò)大，幾 乎包括了所有的行業(yè)，林林總總，包羅萬象，但歸納起來大體有這么幾個(gè)大 類：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂藝術(shù)、電子商務(wù)、網(wǎng)絡(luò)中心等。 對(duì)于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的主頁風(fēng)格，

6、就像穿著打扮，應(yīng)依不同 的性別以及年齡層次而異一樣。例如：政府部門的主頁風(fēng)格一般應(yīng)比較莊重， 而娛樂行業(yè)則可以活潑生動(dòng)一些；文化教育部門的主頁風(fēng)格應(yīng)該高雅大方， 而商務(wù)主頁則可以貼近民俗，使大眾喜聞樂見。 主頁風(fēng)格的形成主要依賴于主頁的版式設(shè)計(jì)，依賴于頁面的色調(diào)處理， 還有圖片與文字的組合形式等。這些問題看似簡單，但往往需要主頁的設(shè)計(jì) 商丘工學(xué)院畢業(yè)論文 5 和制作者具有一定的美術(shù)素質(zhì)和修養(yǎng)。 還有，動(dòng)畫效果也不宜在主頁設(shè)計(jì)中濫用，特別是一些內(nèi)容比較嚴(yán)肅的 主頁。主頁畢竟主要依靠文字和圖片來傳播信息，它不是動(dòng)畫片，更不是電 視或電影。 三三、網(wǎng)網(wǎng)站站的的版版式式和和布布局局 3.13.1 網(wǎng)網(wǎng)

7、站站的的版版式式設(shè)設(shè)計(jì)計(jì) 網(wǎng)頁設(shè)計(jì)作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計(jì)不 等同于平面設(shè)計(jì)，但它們有許多相近之處。 版式設(shè)計(jì)通過文字圖形的空間組合，表達(dá)出和諧與美。 主頁的設(shè)計(jì)首先涉及到的是頁面的版面編排問題。主頁作為一種版面， 既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分；圖片也有大小， 而且有橫有豎之別。圖片和文字都需要同時(shí)展示給觀眾，因此必須根據(jù)內(nèi)容 的需要，將這些圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們 組成一個(gè)有機(jī)的整體，展現(xiàn)給廣大的觀眾。可以依據(jù)如下幾條來做： 1.主次分明，中心突出。 2.大小搭配，相互呼應(yīng)。 3.圖文并茂，相得益彰。 3 3.

8、.2 2 網(wǎng)網(wǎng)頁頁設(shè)設(shè)計(jì)計(jì)布布局局及及類類型型 網(wǎng)頁可以說是網(wǎng)站構(gòu)成的基本元素。當(dāng)我們輕點(diǎn)鼠標(biāo)，在網(wǎng)海中遨游， 一副副精彩的網(wǎng)頁會(huì)呈現(xiàn)在我們面前，那么，網(wǎng)頁的精彩與否的因素是什么 呢？色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素， 除了這些，還有一個(gè)非常重要的因素 網(wǎng)頁的布局。 網(wǎng)頁布局大致可分為 “國”字型、拐角型、標(biāo)題正文型、左右框架型、 上下框架型、綜合框架型、封面型、 flash 型、變化型 。 四四、 色色彩彩在在網(wǎng)網(wǎng)頁頁中中的的應(yīng)應(yīng)用用 4.14.1 色色彩彩在在網(wǎng)網(wǎng)頁頁設(shè)設(shè)計(jì)計(jì)中中的的作作用用 商丘工學(xué)院畢業(yè)論文 6 色彩是藝術(shù)表現(xiàn)的要素之一。在 網(wǎng)頁設(shè)計(jì)中，我

9、們的設(shè)計(jì)師根據(jù)和諧、 均衡和重點(diǎn)突出的原則，將不同的 色彩進(jìn)行組合搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對(duì)人們心理的影響，合 理地加以運(yùn)用。 先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩 統(tǒng)一，有層次感。簡單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠； 或者土黃，土灰，土藍(lán)。 在網(wǎng)頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。 背景和前文的對(duì)比盡量要大以便突出主要文字內(nèi)容。 4 4. .2 2 主主頁頁色色彩彩的的處處理理 色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花， 達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是 “總體協(xié)調(diào)，局部對(duì)比 ”， 也就是：

10、主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可 以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上，可以根據(jù)主頁內(nèi)容的需要，分 別采用不同的主色調(diào)。因?yàn)樯示哂邢笳餍?，例如：嫩綠色、翠綠色、金黃 色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例 如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如 冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個(gè)民族由于環(huán) 境、文化、傳統(tǒng)等因素的影響，對(duì)于色彩的喜好也存在著較大的差異。充分 運(yùn)用色彩的這些特性，可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵，從而提升主 頁的文化品位。 4 4. .3 3 常常用用的的配配色色方方案案

11、 1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運(yùn)用， 可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。 2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用，可使 主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。 3.對(duì)比色調(diào)。即把色性完全相反的色彩搭配在同一個(gè)空間里。例如：紅 與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺效果，給 人亮麗、鮮艷、喜慶的感覺。 商丘工學(xué)院畢業(yè)論文 7 最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個(gè) 術(shù)語，就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。 底色深，文字的顏色就要淺，以深 色的背景襯托淺色的內(nèi)容（文字或圖片）； 反

12、之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文 字或圖片）。這種深淺的變化在色彩學(xué)中稱為 “明度變化”。當(dāng)然，色彩 的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會(huì)使讀者的眼 睛受不了。 4.44.4 合理搭配網(wǎng)頁色彩合理搭配網(wǎng)頁色彩 網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，網(wǎng)頁的背景、文字、圖標(biāo)、邊框、 超鏈接等都要用到色彩。不同的色彩會(huì)使瀏覽者有不同的心理感受。合理的搭 配色彩，會(huì)更好的表現(xiàn)主題，吸引用戶的注意力。網(wǎng)頁色彩涉及到藝術(shù)知識(shí)， 讓美術(shù)教師參加網(wǎng)頁色彩設(shè)計(jì)，可能會(huì)出現(xiàn)比較理想的效果。在色彩搭配上要 注意色彩的鮮明性、獨(dú)特性、合適性、聯(lián)想性。背景色和前景色對(duì)比

13、要大，以 突出主要內(nèi)容 網(wǎng)站給人的第一印象來自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，并 可能影響到訪問者的情緒?！皹?biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色 彩，要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。至 于其它色彩也可以使用，但應(yīng)當(dāng)只是作為點(diǎn)綴和襯托，絕不能喧賓奪主。一般 來說，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過 3 種，太多則讓人眼花繚亂。適合于網(wǎng)頁標(biāo) 準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色。 五、五、網(wǎng)網(wǎng)頁頁設(shè)設(shè)計(jì)計(jì)形形式式與與內(nèi)內(nèi)容容相相統(tǒng)統(tǒng)一一 為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須 符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。 靈活運(yùn)用對(duì)

14、比與調(diào)和、 對(duì)稱與平衡、 節(jié)奏與韻律以及留白等手段，通 過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。 如對(duì)稱原則在頁面設(shè)計(jì)中， 它的均衡有時(shí)會(huì)使頁面顯得呆板，但如果加入 一些富有動(dòng)感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會(huì)達(dá)到比較 商丘工學(xué)院畢業(yè)論文 8 好的效果。 點(diǎn)、線、面作為視覺語 言中的基本元素，巧妙地互相穿插、 互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面 效果，充分表達(dá)完美的設(shè)計(jì)意境。 六六、網(wǎng)頁制作工具網(wǎng)頁制作工具 現(xiàn)在非常流行的 macromedia 公司出品的 dreamweaver studio 8 提供了更多 功能強(qiáng)勁的可視化設(shè)計(jì)工具、應(yīng)用開發(fā)環(huán)境以及代

15、碼編輯支持，是開發(fā)人員和 設(shè)計(jì)師能夠快捷的創(chuàng)建代碼規(guī)范的應(yīng)用程序，集成程度非常高，開發(fā)環(huán)境精簡 而高效，開發(fā)人員能夠運(yùn)用 dreamweaver 與他們的服務(wù)器技術(shù)構(gòu)建功能強(qiáng)大的 網(wǎng)絡(luò)應(yīng)用程序連接到用戶的數(shù)據(jù)、網(wǎng)絡(luò)服務(wù)體系。 平面圖形設(shè)計(jì)的 photoshop 軟件，photoshop 可以做出比較復(fù)雜的平面效果， 此次設(shè)計(jì)中采用 photoshop 編輯圖片。 網(wǎng)頁動(dòng)畫設(shè)計(jì)軟件 flash。flash 網(wǎng)頁動(dòng)畫設(shè)計(jì)軟件可以制作網(wǎng)頁互動(dòng)動(dòng)畫， 也可以將一個(gè)較大的互動(dòng)動(dòng)畫制作為一個(gè)完整的網(wǎng)頁，這是一個(gè)非常靈活的設(shè) 計(jì)軟件。由于利用 flash 可以設(shè)計(jì)強(qiáng)大的動(dòng)畫效果，所以 flash 動(dòng)畫已發(fā)展

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