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

1、河北勞動關(guān)系職業(yè)學(xué)院計算機(jī)多媒體專業(yè)畢業(yè)論文論文題目：網(wǎng)頁設(shè)計與應(yīng)用 學(xué)生姓名：李慶軍學(xué)號：20090102019指導(dǎo)教師：翟蕾專業(yè)：計算機(jī)多媒體技術(shù)年級：09級網(wǎng)站的設(shè)計與應(yīng)用摘 要汽車網(wǎng)站是一個結(jié)合了汽車銷售等多功能瀏覽的汽車網(wǎng)站，我所使用的軟件是macromedia 公司推出的一款用于網(wǎng)頁設(shè)計的軟件dreamweaver8。在網(wǎng)頁的制作與鏈接中，我學(xué)到了很多，然后補(bǔ)充一些比較熱門的技巧。網(wǎng)站具有快捷。無距離更新的特性，同時提供進(jìn)入日常業(yè)務(wù)處理平臺的“入口”，具有較強(qiáng)的實(shí)用價值。這樣的網(wǎng)站被廣大消費(fèi)者普遍使用，隨著現(xiàn)在網(wǎng)絡(luò)的普及和高效性的不斷提高，它的展示作用和實(shí)用性已經(jīng)使它的應(yīng)用地位越來

2、越高，越來越廣泛。本文對網(wǎng)站設(shè)計作了介紹，進(jìn)行了需求分析、模塊劃分、框架和css的介紹。由于制作經(jīng)驗(yàn)不足，作品和論文中存在問題之處，請老師指導(dǎo)完善。 關(guān)鍵詞： 超鏈接，外觀，性能，框架，css目 錄第一章 前言1.1課題來源1.2網(wǎng)站開發(fā)項(xiàng)目需求分析1.3軟件1.4 軟件運(yùn)行環(huán)境第二章 網(wǎng)站制作2.1做網(wǎng)頁的步驟2.2做網(wǎng)頁的要素2.3系統(tǒng)各模塊功能實(shí)現(xiàn)第三章 網(wǎng)站的設(shè)計3.1主頁的要求3.2子頁的要求3.3網(wǎng)頁設(shè)計技巧第四章 網(wǎng)站的應(yīng)用 結(jié)束語參考文獻(xiàn)第一章 前言1、1 課題來源隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的電子信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機(jī)遇。就目前的

3、科技發(fā)展水平而言，電子信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術(shù)產(chǎn)業(yè)的投入，以適應(yīng)目前需要。可喜的是在這幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)。互聯(lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。以往，人們出行都以自行車居多，后來公交事業(yè)發(fā)展壯大，人們便乘坐公交汽車，現(xiàn)如今，隨著人們生活水平的提高，越來越多的家庭已經(jīng)擁有或者想擁有自己的私家車。正是因?yàn)槿藗兊倪@些需求，越來越多的汽車網(wǎng)站出現(xiàn)在網(wǎng)絡(luò)上，使人們可以隨時了解自己想知道的汽車方面的新聞，真正的做到足不出戶，便知天下事。把汽車銷售與網(wǎng)絡(luò)連接起來，是今后汽車銷售發(fā)

4、展的必然方向之一。12 網(wǎng)站開發(fā)項(xiàng)目需求分析一個網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實(shí)際需求或者是出于公司自身發(fā)展的需要，其中客戶的實(shí)際需求也就是說這種交易性質(zhì)的需求占了絕大部分。面對對網(wǎng)站開發(fā)擁有不同知識層面的客戶，項(xiàng)目的負(fù)責(zé)人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)站開發(fā)項(xiàng)目的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項(xiàng)目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項(xiàng)目開發(fā)方向進(jìn)行，是每個網(wǎng)站開發(fā)項(xiàng)目管理者需要面對的問題。據(jù)專家預(yù)計，2009年我國汽車需求量將超過850萬輛。所以，做好汽車網(wǎng)站就是

5、為了使廣大的消費(fèi)者提供及時和有效的信息，為其選擇適合自己的產(chǎn)品提供良好的參考。13 使用軟件dreamwraver軟件由美國著名的網(wǎng)站應(yīng)用開發(fā)工具生產(chǎn)廠商adobe macromedia于2005年6月推出并正式投入市場以來，已經(jīng)發(fā)展得相當(dāng)成熟。關(guān)于dreamwraver的技術(shù)介紹的相關(guān)書籍與網(wǎng)絡(luò)信息相當(dāng)豐富。通過大學(xué)中軟件開發(fā)環(huán)境課程的學(xué)習(xí)，對dreamwraver有了比較深刻的認(rèn)識，并比較輕松的掌握了dreamwraver的操作。因此，軟件技術(shù)可以完成任務(wù)的要求。14 軟件運(yùn)行環(huán)境dreamweaver是一款簡體中文軟件，可以在win2003/winxp中安全運(yùn)行第二章 網(wǎng)站制作21 制作

6、網(wǎng)頁的步驟在做網(wǎng)頁之前，我確定了做網(wǎng)頁的五個步驟。一、確定網(wǎng)站主題 ：網(wǎng)站主題就是要建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。二、搜集材料 ：明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。三、規(guī)劃網(wǎng)站 ：一個網(wǎng)站設(shè)計得成功與否，很大程度上決定于設(shè)計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計師設(shè)計大樓一樣，圖紙?jiān)O(shè)計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁

7、之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設(shè)計網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計。所謂先簡單后復(fù)雜，就是先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復(fù)雜的內(nèi)容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運(yùn)用

8、模板，這樣可以大大提高制作效率。此外，整體設(shè)計完成后我們還要將網(wǎng)頁上傳測試，使其和其他版本瀏覽器能夠兼容，再者對網(wǎng)站推廣宣傳，及時的維護(hù)更新。2.2 制作網(wǎng)頁的要素2.2.1 網(wǎng)頁的整體布局設(shè)計 網(wǎng)頁設(shè)計作為一種視覺語言，要講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處，應(yīng)充分加以利用和借鑒。版式設(shè)計通過文字圖形的空間組合，表達(dá)出和諧與美。一個優(yōu)秀的網(wǎng)頁設(shè)計者也應(yīng)該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點(diǎn)頁面的編排設(shè)計要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意

9、為了達(dá)到最佳的視覺表現(xiàn)效果，而講究整體布局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應(yīng)怎樣編排才能使瀏覽者有一個流暢的視覺體驗(yàn)，從而方便他對產(chǎn)品的了解，促成最后的購買。2.2.2 網(wǎng)頁設(shè)計中色彩的運(yùn)用 色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計時，應(yīng)使用淡雅而沉

10、靜的顏色，使人心理上感覺涼爽一些，增強(qiáng)人們的購買心理，使得在線營銷得到很好的實(shí)踐效果。另要注意的是網(wǎng)頁的顏色應(yīng)用雖沒有限制，但不能毫無節(jié)制地運(yùn)用多種顏色，一般情況下，先根據(jù)總體風(fēng)格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的cis（企業(yè)形象識別系統(tǒng)）的企業(yè)進(jìn)行網(wǎng)頁設(shè)計時，更應(yīng)該按照其中的vi進(jìn)行色彩運(yùn)用。在色彩的運(yùn)用過程中，還應(yīng)注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強(qiáng)烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。在設(shè)計中要考

11、慮眾多因素。2.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運(yùn)用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點(diǎn)、線、面作為視覺語言中的基本元素，要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計意境。23

12、 系統(tǒng)各模塊功能實(shí)現(xiàn)2.3.1 系統(tǒng)登錄模塊1、該功能模塊可以記錄客戶的郵箱地址，交易時還可以向客戶發(fā)送交易信息，到帳確認(rèn)等等。2、登陸后系統(tǒng)會調(diào)出客戶的記錄，按照交易量的不同客戶享受的折扣也不同， 系統(tǒng)主界面2.3.2 車輛展示模塊 1、該功能模塊主要實(shí)現(xiàn)對車輛的展示。2、該功能模塊圖片、文字介紹，360度flash對各種車輛的展示。2.3.3 賬號管理模塊1、掛失業(yè)務(wù)在正常工作中肯定會遇到掛失的業(yè)務(wù)，確定掛失后，數(shù)據(jù)庫會將該賬號掛起，等待客戶做進(jìn)一步操作。2、凍結(jié)業(yè)務(wù)，客戶對賬號有凍結(jié)的權(quán)利，在客戶沒有輸入解凍密碼之前，任何人都無法動用帳上的資金。3、流水查詢客戶可以查詢曾經(jīng)交易過的記錄。

13、4、客戶可以自行對其賬號密碼進(jìn)行修改，網(wǎng)站管理人員也可以添加或刪除賬號。第三章 網(wǎng)站的設(shè)計3.1主頁的要求對于銷售業(yè)務(wù)系統(tǒng)要求運(yùn)行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對于前臺展示界面要求系統(tǒng)便于維護(hù)，安全可靠，對于廣大客戶所要執(zhí)行的操作簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏覽者所想要了解的東西。3.2 子頁的要求 后面的工作就是子頁的選擇與鏈接，子頁應(yīng)該豐富多彩，內(nèi)容充實(shí)，瀏覽性強(qiáng)，比如說，想要銷售一輛汽車，應(yīng)該有它的全部資料，包括外觀、內(nèi)飾、性能指標(biāo)、出產(chǎn)地、價格等諸多方面，鑒于以上方面，我

14、開始了子頁的選擇與鏈接。3.3 網(wǎng)頁設(shè)計技巧 一張完美的主頁設(shè)計需要積累豐富的知識以及掌握大量的技巧。在這里從框架和css樣式的運(yùn)用兩方面來介紹網(wǎng)頁設(shè)計的技巧。 3.3.1 框架的使用 frame（框架）是web上經(jīng)常會看到的頁面結(jié)構(gòu)?？蚣艿淖畛Ｒ娪猛揪褪菍?dǎo)航。一組框架通常包括一個含有導(dǎo)航條的框架和另一個要顯示主要內(nèi)容頁面的框架。 使用框架具有以下優(yōu)點(diǎn)：訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形；每個框架都具有自己的滾動條(如果內(nèi)容太大，在窗口中顯示不下)，因此訪問者可以獨(dú)立滾動這些框架。例如，當(dāng)框架中的內(nèi)容頁面較長時，如果導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不

15、需要再滾動回頂部來使用導(dǎo)航條。 使用框架具有以下缺點(diǎn)：可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊；對導(dǎo)航進(jìn)行測試可能很耗時間。 許多專業(yè) web 設(shè)計人員不喜歡使用框架，并且許多瀏覽 web 的人也不喜歡框架。在大多數(shù)情況下，這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾厥褂每蚣艿恼军c(diǎn)(例如，每當(dāng)訪問者單擊導(dǎo)航按鈕時就重新加載導(dǎo)航框架內(nèi)容的框架集)。如果框架使用得法(例如，在允許其他框架的內(nèi)容發(fā)生更改的同時，使一個框架中的導(dǎo)航控件保持靜態(tài))，則這些框架對于某些站點(diǎn)可能非常有用。 3.3.2 css樣式的使用 css(層疊樣式表)是一種制作網(wǎng)頁的新技術(shù),它的全稱是級聯(lián)樣式表,即cascadi

16、ng stylesheets的縮寫，又稱之為風(fēng)格樣式表單。css是在網(wǎng)頁制作過程中普遍用到的技術(shù)。采用了css技術(shù)控制的網(wǎng)頁，設(shè)計者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實(shí)現(xiàn)更加精確地控制。 第四章 網(wǎng)頁的應(yīng)用4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。4.1.1 優(yōu)點(diǎn)：靜態(tài)網(wǎng)頁：1. 靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索；動態(tài)網(wǎng)頁：1. 動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大減少降低網(wǎng)站維護(hù)的工作量；2. 采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、頂訂單管理等等；.4.1.2 缺點(diǎn)：

17、靜態(tài)網(wǎng)頁：1. 靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站能制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難；2. 靜態(tài)網(wǎng)頁的交互性交叉，在功能方面有較大的限制。動態(tài)網(wǎng)頁：1. 動態(tài)網(wǎng)頁中的“？”對搜索引擎檢索存在一定的問題，搜索引擎一般不可能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，或者處于技術(shù)方面的考慮，搜索蜘蛛不去抓取網(wǎng)址中“？”后面的內(nèi)容，因此采用動態(tài)網(wǎng)頁的網(wǎng)站在進(jìn)行搜索引擎推廣時需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。4.2 我的認(rèn)識網(wǎng)頁應(yīng)用很廣泛，當(dāng)我們打開ie瀏覽器的時候，出現(xiàn)在屏幕上的就是一個網(wǎng)頁，隨著社會的進(jìn)步，生活節(jié)奏地加快，各行各業(yè)都開始使用互聯(lián)網(wǎng)來宣傳

18、自己的產(chǎn)品，或者進(jìn)行其他的活動。網(wǎng)站設(shè)計離不開網(wǎng)頁，網(wǎng)頁像書中的章頁，由這些頁面構(gòu)成了整個網(wǎng)站。不管是大企業(yè)還是小公司，都有自己的網(wǎng)站，當(dāng)然網(wǎng)站是離不開網(wǎng)頁的。網(wǎng)頁中的信息可以給我們帶來很多幫助，可以用來學(xué)習(xí)或者做一些活動的參考。通過對這門課程的學(xué)習(xí)會收獲很多。結(jié)束語在系統(tǒng)的需求分析過程中，由于不熟悉，產(chǎn)生了很大的困難，通過與指導(dǎo)老師的探討與溝通，我漸漸地對系統(tǒng)有了一個大體的認(rèn)識。雖然說在系統(tǒng)需求分析過程中花費(fèi)了很多時間，但是我認(rèn)為這是必要的也是必須的。這次畢業(yè)設(shè)計中我了解到了很多的知識，這對我今后的學(xué)習(xí)和生活都將會有很大的幫助。我明白了對于一個完整性的軟件設(shè)計流程的主要性，在整個網(wǎng)站設(shè)計過程中前期需求分析，可行性分析是非常重要的環(huán)節(jié)，可以說是軟件設(shè)計的核心，在過去我一直認(rèn)為詳細(xì)設(shè)計編碼才是最重要的，因?yàn)樵俸玫男枨?，編碼不成功，軟件就無法正常運(yùn)行。鍛煉了自己發(fā)現(xiàn)問題，解決問題的能力。開發(fā)過程中遇到一些需求的變化，通過修改設(shè)計思路，避免在后期產(chǎn)生更大的錯誤。再詳細(xì)設(shè)計的每一步都有可能出錯，所以會進(jìn)行非常多的調(diào)試工作，只要發(fā)現(xiàn)問題就調(diào)試解決，這樣不僅增強(qiáng)了信心，也很好的鍛煉了自己遇到問題不急不躁