網(wǎng)站設(shè)計(jì)與制作畢業(yè)論文

1、河南經(jīng)貿(mào)職業(yè)學(xué)院畢業(yè)論文職此一家網(wǎng)頁設(shè)計(jì)與制作論文作者： 李意娜 專 業(yè)：計(jì)算機(jī)多媒體技術(shù) 學(xué) 號(hào)： 班 級(jí)： 11電子六班 指導(dǎo)教師: 張州 答辯委員會(huì)主席_ 評(píng)閱人_ _論文答辯日期_獨(dú)創(chuàng)性聲明 本人聲明所呈交的畢業(yè)論文是我個(gè)人在導(dǎo)師指導(dǎo)下進(jìn)行的研究工作及取得的成果。盡我所知，除文中已經(jīng)標(biāo)明引用的內(nèi)容外，本論文不包含任何其他個(gè)人或集體已經(jīng)發(fā)表或撰寫過的研究成果。對(duì)本文的研究做出貢獻(xiàn)的個(gè)人和集體，均已在文中以明確方式標(biāo)明。本人完全意識(shí)到本聲明的法律結(jié)果由本人承擔(dān)。論文作者簽名： 李意娜 日期： 年 月 日畢業(yè)論文版權(quán)使用授權(quán)書 本畢業(yè)論文作者完全了解學(xué)校有關(guān)保留、使用畢業(yè)論文的規(guī)定，即：學(xué)校

2、有權(quán)保留并向有關(guān)部門或機(jī)構(gòu)送交論文的復(fù)印件和電子版，允許論文被查閱和借閱。本人授權(quán)河南經(jīng)貿(mào)職業(yè)學(xué)院要以將本論文的全部或部分內(nèi)容編入有關(guān)數(shù)據(jù)庫進(jìn)行檢索，可以采用影印、縮印或掃描等復(fù)制手段保存和匯編本論文。 保密，在_年解密后適用本授權(quán)書. 本論文屬于 不保密。（請(qǐng)?jiān)谝陨戏娇騼?nèi)打“”）畢業(yè)論文作者簽名： 李意娜 指導(dǎo)教師簽名：日期： 年 月 日 日期： 年 月 日摘要在互聯(lián)網(wǎng)飛速發(fā)展的今天，網(wǎng)絡(luò)已成為人們生活中不可缺少的一部分。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動(dòng)畫和視頻等信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動(dòng)特點(diǎn)，無可置疑，網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。隨著網(wǎng)絡(luò)技術(shù)

3、的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。個(gè)人網(wǎng)站也成為了一種時(shí)尚。越來越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡(luò)世界的一片天地，展示自己的才華和風(fēng)格。這篇論文是關(guān)于我對(duì)一個(gè)網(wǎng)站的設(shè)計(jì)，即“職此一家”的設(shè)計(jì)。首先介紹了網(wǎng)頁的一些基本內(nèi)容，其次介紹了網(wǎng)頁制作工具，之后從網(wǎng)站設(shè)計(jì)的整個(gè)流程出發(fā)，通過自己設(shè)計(jì)的這個(gè)網(wǎng)站作品來說明并演示一個(gè)完整的網(wǎng)站制作過程。在第四部分闡述了網(wǎng)站設(shè)計(jì)的完整步驟，由前期準(zhǔn)備到分析設(shè)計(jì)到最后的制作。關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)，策劃，制作目錄摘要I1 緒論12 網(wǎng)頁概述22.1 什么是網(wǎng)頁22.2 網(wǎng)頁設(shè)計(jì)涵蓋的內(nèi)容42.3 網(wǎng)頁設(shè)計(jì)的原則43 網(wǎng)頁制作工具53.1 夢(mèng)幻網(wǎng)頁的編織者-Dreamweave

4、r53.2 網(wǎng)頁動(dòng)畫的制作軟件-Flash53.3 影像與動(dòng)畫的制作軟件Photoshop63.4 JavaScript64職此一家的設(shè)計(jì)74.1 前期準(zhǔn)備74.1.1 整理網(wǎng)站資料74.1.2 網(wǎng)站策劃74.2 分析設(shè)計(jì)74.2.1 設(shè)計(jì)分析74.2.2 色彩分析84.3 制作網(wǎng)站84.3.1 網(wǎng)站說明84.3.2 網(wǎng)站Logo84.3.3 網(wǎng)站首頁94.3.4 網(wǎng)站列表頁114.3.5 網(wǎng)站內(nèi)容頁134.3.6 網(wǎng)站搜索頁185 結(jié)論20參考文獻(xiàn)21致謝221 緒論隨著Internet技術(shù)及其應(yīng)用的不斷發(fā)展，我們的生活，學(xué)習(xí)和工作也越來越離不開內(nèi)容豐富的網(wǎng)站，不只是政府機(jī)構(gòu)和企事業(yè)單位，甚

5、至是個(gè)人也開始制作和發(fā)布自己的網(wǎng)站和網(wǎng)頁。網(wǎng)頁是宣傳網(wǎng)站的重要窗口，內(nèi)容豐富，制作精美的網(wǎng)頁會(huì)吸引更多的訪問者的瀏覽，這是網(wǎng)站的生存和發(fā)展的關(guān)鍵。制作和發(fā)布精美的網(wǎng)頁已成為一項(xiàng)重要技能。1相對(duì)于傳統(tǒng)設(shè)計(jì)來說，網(wǎng)頁設(shè)計(jì)往往要結(jié)合動(dòng)畫，圖像特效與后臺(tái)的數(shù)據(jù)交互因素，在靜態(tài)頁面設(shè)計(jì)，圖片設(shè)計(jì)和網(wǎng)站動(dòng)畫設(shè)計(jì)等方面，也可以使網(wǎng)站設(shè)計(jì)人員的思想得到充分體現(xiàn)，而Dreamweaver，Photoshop，flash作為常用設(shè)計(jì)軟件也是目前網(wǎng)頁制作的首選工具，他們都具有強(qiáng)大的設(shè)計(jì)制作功能1。下面會(huì)介紹到這幾類軟件及網(wǎng)站制作的流程。2 網(wǎng)頁概述2.1 什么是網(wǎng)頁打開瀏覽器，在地址欄中輸入網(wǎng)址，顯示在瀏覽器中的就

6、是網(wǎng)頁。如圖所示：（1）網(wǎng)頁的基本構(gòu)成元素網(wǎng)頁實(shí)際上就是一個(gè)文件，這個(gè)文件存放在世界上某個(gè)地方的某一臺(tái)計(jì)算機(jī)中，并且這臺(tái)計(jì)算機(jī)與互聯(lián)網(wǎng)相連接。構(gòu)成網(wǎng)頁的最基本元素是文字和圖片。文字是網(wǎng)頁的內(nèi)容部分，圖片則是為了更好地充實(shí)內(nèi)容部分或者裝飾網(wǎng)頁的外觀。然而，除了文字和圖片以外，網(wǎng)頁元素還包括動(dòng)畫、聲音、視頻、表單、程序等。在網(wǎng)頁的空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“查看源文件”命令，或者在瀏覽器窗口中的菜單欄中執(zhí)行“查看>查看源文件”菜單命令，就會(huì)彈出一個(gè)記事本文件，這就是網(wǎng)頁的源文件。那么從源文件的角度看，網(wǎng)頁實(shí)際上只是一個(gè)純文本文件，它通過各種各樣的標(biāo)記對(duì)頁面上的文字、圖片、表格

7、、聲音等元素進(jìn)行描述（例如字體、顏色、大?。?，而瀏覽器則對(duì)這些標(biāo)記進(jìn)行解釋并生成頁面，這樣就得到我們所看到的網(wǎng)站頁面了。（2）網(wǎng)頁的設(shè)計(jì)構(gòu)思網(wǎng)頁設(shè)計(jì)是一個(gè)感性思考與理性分析相結(jié)合的復(fù)雜的過程，它的方向取決于設(shè)計(jì)的任務(wù)，它的實(shí)現(xiàn)依賴于網(wǎng)頁的制作。網(wǎng)頁設(shè)計(jì)中最重要的東西并不是在軟件的應(yīng)用上，而是在于設(shè)計(jì)者對(duì)網(wǎng)頁設(shè)計(jì)的整理以及設(shè)計(jì)制作的水平，還在于設(shè)計(jì)者自身的美感以及對(duì)頁面的把握上。設(shè)計(jì)的任務(wù)網(wǎng)頁設(shè)計(jì)的任務(wù)是指設(shè)計(jì)者要表現(xiàn)的主題和需要實(shí)現(xiàn)的功能。設(shè)計(jì)的任務(wù)是要實(shí)現(xiàn)設(shè)計(jì)者的意圖，并非創(chuàng)造美。網(wǎng)站的性質(zhì)不同，設(shè)計(jì)的任務(wù)也不同，從形式上可將站點(diǎn)分為以下3類。資訊類網(wǎng)站：例如網(wǎng)易、新浪、搜狐門戶網(wǎng)站。這類網(wǎng)

8、站為瀏覽器提供大量的信息，而且訪問量較大，因此需注意頁面的分割，結(jié)構(gòu)的合理，頁面的優(yōu)化，界面的人性化設(shè)計(jì)等問題。資訊和形象相結(jié)合的網(wǎng)站：像一些大公司的網(wǎng)站，高校的網(wǎng)站等。這類網(wǎng)站在設(shè)計(jì)上要求較高，保證資訊網(wǎng)站特點(diǎn)的同時(shí)要突出企業(yè)單位的形象。形象類網(wǎng)站：比如一些小型公司或單位的網(wǎng)站，這類網(wǎng)站一般較小，有的只有幾頁，需要實(shí)現(xiàn)的功能也較為簡(jiǎn)單，網(wǎng)頁設(shè)計(jì)的主要任務(wù)是突出企業(yè)形象。這類網(wǎng)站對(duì)設(shè)計(jì)者的美工水平較高。設(shè)計(jì)的實(shí)現(xiàn)可以分為兩個(gè)部分：一網(wǎng)站的規(guī)劃及草圖的繪制（可在圖紙上完成）。二頁面的制作（需在計(jì)算機(jī)上完成）。設(shè)計(jì)者的第一步是設(shè)計(jì)版面布局，可以將網(wǎng)頁看做傳統(tǒng)的報(bào)刊雜志編輯。網(wǎng)頁的元素有文字、圖像、

9、動(dòng)畫，設(shè)計(jì)者要做的工作就是以最適合的方式將圖片、文字和動(dòng)畫擺放在頁面的不同位置。接下來就要通過軟件將設(shè)計(jì)的藍(lán)圖變?yōu)楝F(xiàn)實(shí)。造型的組合在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)者主要通過視覺效果表現(xiàn)主題。造型在視覺傳統(tǒng)中是非常重要的一個(gè)元素，拋去圖像還有文字的問題，畫面上的所有元素可以統(tǒng)一作為畫面的基本構(gòu)成要素點(diǎn)、線、面進(jìn)行處理。通常使用的組合手法有秩序、比例、均衡、對(duì)稱、連續(xù)、間隔、重疊、反復(fù)、交叉、節(jié)奏、韻律、歸納、變異、特寫、反射等，這些組合手法都有各自的特點(diǎn)，在設(shè)計(jì)中應(yīng)根據(jù)具體情況選擇最適合的表現(xiàn)手法。（3）網(wǎng)頁設(shè)計(jì)的特點(diǎn)1.交互性2. 版式的不可控性3.技術(shù)與藝術(shù)結(jié)合的緊密性4.多媒體的綜合性5.多維性2.2

10、網(wǎng)頁設(shè)計(jì)涵蓋的內(nèi)容（1）網(wǎng)頁中的視聽元素主要包括網(wǎng)頁中的文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航、背景音樂、動(dòng)態(tài)影像等。（2）網(wǎng)頁版面設(shè)計(jì)網(wǎng)頁的版式設(shè)計(jì)與報(bào)刊雜志等平面媒體的版式設(shè)計(jì)有很多相通之處，它在網(wǎng)頁的藝術(shù)設(shè)計(jì)中占據(jù)著重要的地位，所謂網(wǎng)頁的版式設(shè)計(jì)是指在有限的屏幕空間上將各種視聽元素進(jìn)行有機(jī)的排列組合，將理性思維以個(gè)性化的形式表現(xiàn)出來，是一種具有個(gè)人風(fēng)格和藝術(shù)特色的視聽傳達(dá)方式。它在傳達(dá)信息的同時(shí)也產(chǎn)生了感官上的美感和精神上的享受。2.3 網(wǎng)頁設(shè)計(jì)的原則1.為用戶考慮的原則使用者優(yōu)先觀念 考慮用戶瀏覽器 考慮用戶的網(wǎng)絡(luò)連接2.主題突出原則3.整體原則4.內(nèi)容與形式相統(tǒng)一的原則5.更

11、新和維護(hù)的原則23 網(wǎng)頁制作工具3.1 夢(mèng)幻網(wǎng)頁的編織者-DreamweaverDreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺(tái)、跨瀏覽器的頁面。Macromedia的Roundtrip HTML技術(shù)允許用戶隨意導(dǎo)入HTML文檔而無需重新設(shè)置代碼格式。Dreamweaver可以為用戶做到：使用動(dòng)態(tài)HTML功能（例如具有動(dòng)態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺(tái)和瀏覽器中可能發(fā)生的錯(cuò)誤。Dreamweaver還是一個(gè)可以完全自定義的應(yīng)用程序。用戶可以創(chuàng)建自己的對(duì)象和命令修改菜單和快捷鍵，甚至編寫Jav

12、aScript代碼擴(kuò)展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。常用的Dreamweaver工作區(qū)組件有以下若干種：(一) 文檔窗口可顯示當(dāng)前文檔，文檔的外觀和瀏覽器中看到的非常相似。(二) 裝載器中包含一些打開和關(guān)閉常用檢查器和模板的按鈕。(三) 對(duì)象工具欄包含創(chuàng)建不同類型的對(duì)象（例如圖象、表格和層等）的按鈕。(四) 屬性檢查器顯示選定對(duì)象的屬性。(五) 快捷菜單可以使用戶對(duì)當(dāng)前選擇或區(qū)域快速執(zhí)行某些命令。(六) 可固定的浮動(dòng)工具欄允許用戶將浮動(dòng)窗口、檢查器和工具欄組合在一個(gè)或多個(gè)選擇窗口中3。3.2

13、網(wǎng)頁動(dòng)畫的制作軟件-FlashFlash用于web站點(diǎn)的交互式的矢量圖形和動(dòng)畫的制作，它可制作出用于瀏覽時(shí)的導(dǎo)航控制、制作動(dòng)畫圖標(biāo)、帶同步聲音的大段的動(dòng)畫，創(chuàng)建出生動(dòng)的富于表現(xiàn)力的網(wǎng)頁。Flash中的圖形都是矢量的，占據(jù)存儲(chǔ)空間較少，因而下載時(shí)間短，且能很好地適應(yīng)瀏覽者不同尺寸的屏幕。Flash 的交互性的大部分設(shè)置就在 Action 和 Fs Command 里，通過對(duì) Action 和 Fs Command 的設(shè)置，你可以隨意的設(shè)置各事件發(fā)生的效果，還有對(duì)變量及函數(shù)的設(shè)置3。3.3 影像與動(dòng)畫的制作軟件PhotoshopPhotoshop是目前最流行的圖形、圖像編輯設(shè)計(jì)軟件，在數(shù)碼影像處理

14、、圖像編輯合成、廣告設(shè)計(jì)、封面設(shè)計(jì)、美術(shù)繪畫、網(wǎng)頁設(shè)計(jì)等領(lǐng)域都被廣泛地應(yīng)用。(一) 文字處理更加方便(二)圖層集使圖層管理更有序。(三)圖像的剪切和剪裁比較方便。(四)所有工具的選項(xiàng)板會(huì)出現(xiàn)在工具選項(xiàng)欄工作區(qū)頂部，方便參數(shù)的設(shè)置。(五) 可以方便地用路徑繪畫，豐富的幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使矢量繪圖功能得到了加強(qiáng)3。3.4 JavaScriptJavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java 腳本語言（Java小程序）一起實(shí)現(xiàn)在一

15、個(gè)Web頁面中鏈接多個(gè)對(duì)象，與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，它是Java與HTML折衷的選擇3。4職此一家的設(shè)計(jì)4.1 前期準(zhǔn)備 整理網(wǎng)站資料所謂的整理網(wǎng)站資料，就是一個(gè)資料收集的過程。不同的網(wǎng)站有不同的收集方式，有的會(huì)用到數(shù)碼相機(jī)去拍攝，有的會(huì)用到掃描儀去掃描，然而職此一家網(wǎng)站中的素材大都是文章，有少部分是圖片，因此我選擇從網(wǎng)上搜索所需的素材。當(dāng)然僅靠這些資料，可能無法滿足網(wǎng)站的需要，所以我會(huì)在設(shè)計(jì)制作網(wǎng)站頁面時(shí)適當(dāng)?shù)剡M(jìn)行補(bǔ)充。 網(wǎng)站策劃一件事情的成功與否，其前期策劃舉足輕重。網(wǎng)站策劃是網(wǎng)

16、站設(shè)計(jì)的前提，主要包括確定網(wǎng)站的用戶群和定位網(wǎng)站的主題。最重要的一點(diǎn)是應(yīng)該切實(shí)遵循“以人為本”的創(chuàng)作思路。職此一家網(wǎng)站的主題以“職”字為主展開，跟求職有關(guān)，具體來說就是對(duì)求職前期的準(zhǔn)備做了一下匯總，里面設(shè)有簡(jiǎn)歷封面、求職信、求職故事、職場(chǎng)禮儀等?，F(xiàn)在的招聘網(wǎng)站比較多，像58同城、趕集網(wǎng)、前程無憂、智聯(lián)招聘等，我們都可以去尋找自己中意的公司及職位，所以在職此一家中沒有設(shè)置招聘信息。職此一家適合初次求職者或剛?cè)肼毑痪玫娜巳?，網(wǎng)站的內(nèi)容可以讓他們從中受益。4.2 分析設(shè)計(jì) 設(shè)計(jì)分析整體來說，職此一家網(wǎng)站大致分為上中下三欄。上欄放置網(wǎng)站Logo、導(dǎo)航菜單。下欄放置制作者、版權(quán)、聯(lián)系方式等信息。中間欄又

17、分為左、中、右三部分。左邊放置背景圖片；中間為頁面的主體部分，用來顯示文章和圖片；右邊放置了會(huì)員登錄框、站內(nèi)搜索框和一些推薦信息。矩形代表著正式，規(guī)則。所以整個(gè)頁面幾乎都是以矩形布局的。 色彩分析職此一家網(wǎng)站的主色調(diào)為橙色和白色。因?yàn)槌壬砻骼省⒂H切、活力，明度比紅色高，因而較紅色更溫暖，鮮艷，給人活潑，甘美，富麗，明朗，親切和充滿朝氣的感覺，一般用在激勵(lì)的環(huán)境下。經(jīng)過以上分析我的導(dǎo)航選用橙色做背景。4.3 制作網(wǎng)站4.3.1 網(wǎng)站說明導(dǎo)航欄目包含：首頁，簡(jiǎn)歷封面，簡(jiǎn)歷模板，求職信，面試技巧，職場(chǎng)禮儀，寫作技巧等。注：簡(jiǎn)歷封面為純圖片，其它欄目為純文章，簡(jiǎn)歷模板在文章內(nèi)容結(jié)束之處可以點(diǎn)擊下載

18、。底部信息包含：友情鏈接，站長(zhǎng)統(tǒng)計(jì)，版權(quán)信息，聯(lián)系方式和備案號(hào)。4.3.2 網(wǎng)站Logo網(wǎng)站logo的表現(xiàn)形式一般可以分為特定圖案，特定文字和合成文字。職此一家網(wǎng)站的logo采用純文字形式，由英文As This One和中文職此一家組成，上下排部，上部英文呈扇形彎曲，下部職此一家橫排排列，之后為突出“職”字，將職字稍作傾斜處理。整個(gè)看起來簡(jiǎn)單大方。如圖4-1。圖 4-1 網(wǎng)站logo4.3.3 網(wǎng)站首頁（1）首頁原型圖圖4-2 首頁原型圖（2）首頁效果圖圖4-3 首頁效果圖4.3.4 網(wǎng)站列表頁（1）列表頁原型圖圖4-4 列表頁原型圖（2）文章列表頁效果圖圖4-5 文章列表頁效果圖（3）圖片列

19、表頁效果圖圖4-6 圖片列表頁效果圖 網(wǎng)站內(nèi)容頁（1）內(nèi)容頁原型圖圖4-7 內(nèi)容頁原型圖（2）文章內(nèi)容頁效果圖圖4-8 文章內(nèi)容頁效果圖（3）圖片內(nèi)容頁效果圖第一種效果圖：圖4-9 圖片內(nèi)容頁效果圖<一>第二種效果圖：圖4-9 圖片內(nèi)容頁效果圖<二>第三種效果圖：圖4-9 圖片內(nèi)容頁效果圖<三> 網(wǎng)站搜索頁（1）搜索頁原型圖圖4-10 搜索頁原型圖（2）搜索頁效果圖圖4-11 搜索頁效果圖5 結(jié)論 此次畢業(yè)設(shè)計(jì)可以說是對(duì)我們大學(xué)生活三年來的一個(gè)總結(jié)性考察，里面包含了我們學(xué)過的很多方面的知識(shí)，平時(shí)的學(xué)習(xí)都是自己聽老師講解，或者就是做練習(xí)之類，缺少了自己的獨(dú)立思

20、考，通過這次的畢業(yè)設(shè)計(jì)，讓自己清楚了解到自己的學(xué)習(xí)程度，和自我學(xué)習(xí)思考的能力。從第一次聽到“同學(xué)們，我們?cè)搶懏厴I(yè)論文了”這幾個(gè)字時(shí)那種發(fā)愁的狀態(tài)，到最后看到自己做出的設(shè)計(jì)論文的成功，體驗(yàn)了一次從茫然到無助，到最后的成功的那種欣慰，真的讓自己受益匪淺，也使自己明白了，無論今后做什么事情，都要一步一步做好規(guī)劃，多從問題的關(guān)鍵出發(fā)，分析不同的思路，多做總結(jié)與比較，從而得到最佳的結(jié)果。這次的論文設(shè)計(jì)讓我重新了解了很多在學(xué)校所學(xué)不到的東西，也借此回顧了一下我大學(xué)所學(xué)的知識(shí)。它讓我掌握了很多網(wǎng)頁設(shè)計(jì)及制作的知識(shí)和PS軟件的運(yùn)用，讓我對(duì)我所學(xué)過的知識(shí)有所鞏固和提高。在整個(gè)過程中，我學(xué)到了新知識(shí)，擴(kuò)大了知識(shí)面。也讓我認(rèn)識(shí)到了學(xué)海無涯