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

目 錄第一章 前言2 1.1 課題來源 21.2 網(wǎng)站開發(fā)項(xiàng)目需求分析 21.3 軟件 3 1.4 軟件運(yùn)行環(huán)境第二章 網(wǎng)站制作3 第二章網(wǎng)絡(luò)制作32.1做網(wǎng)頁的步驟 32.2 做網(wǎng)頁的要素42.2.1網(wǎng)頁的整體布局設(shè)計(jì)42.2.2 網(wǎng)頁設(shè)計(jì)中色彩的運(yùn)用42.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 42.3 系統(tǒng)各模塊功能實(shí)現(xiàn)4 2.3.1 系統(tǒng)登錄模塊 42.3.2 車輛展示模塊 52.3.3 賬號管理模塊5 第三章 網(wǎng)站的設(shè)計(jì) 53.1 主頁的要求53.2 子頁的要求53.3 網(wǎng)頁設(shè)計(jì)技巧5 3.3.1 框架的使用53.3.2 CSS 樣式的使用6第四章 網(wǎng)站的應(yīng)用 6 4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁64.2 我的認(rèn)識6結(jié)束語 7參考文獻(xiàn)7網(wǎng)頁設(shè)計(jì)與應(yīng)用摘 要 ：汽車網(wǎng)站是一個結(jié)合了汽車銷售等多功能瀏覽的汽車網(wǎng)站，我所使用的軟件是 Macromedia 公 司 推 出 的 一 款 用 于 網(wǎng) 頁 設(shè) 計(jì) 的 軟 件 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)用地位越來越高，越來越廣泛。本文對網(wǎng)站設(shè)計(jì)作了介紹，進(jìn)行了需求分析、模塊劃分、框架和 CSS 的介紹。 由于制作經(jīng)驗(yàn)不足，作品和論文中存在問題之處，請老師指導(dǎo)完善。關(guān)鍵詞： 超鏈接，外觀，性能，框架，CSS 目 錄第一章 前言1、1 課題來源 隨著二十一世紀(jì)新興科技的飛速發(fā)展，如今的電子信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機(jī)遇。就目前的科技發(fā)展水平而言，電子信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財(cái)力加大對信息技術(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ā)展的必然方向之一。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ù)計(jì)，2009 年我國汽車需求量將超過 850 萬輛。所以，做好汽車網(wǎng)站就是為了使廣大的消費(fèi)者提供及時和有效的信息，為其選擇適合自己的產(chǎn)品提供良好的參考。13 使用軟件 dreamwraver 軟 件 由 美 國 著 名 的 網(wǎng) 站 應(yīng) 用 開 發(fā) 工 具 生 產(chǎn) 廠 商 AdobeMacromedia 于 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 制做網(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è)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。 四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設(shè)計(jì)網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。 五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡單后復(fù)雜，就是先設(shè)計(jì)出簡單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出 知新文化. HTML 完全手冊與速查辭典M.北京：科學(xué)出版社，第49頁，2007. 楊選輝，網(wǎng)頁設(shè)計(jì)與制作教程M.北京：清華大學(xué)出版社，第321頁，2009.現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運(yùn)用模板，這樣可以大大提高制作效率。 此外，整體設(shè)計(jì)完成后我們還要將網(wǎng)頁上傳測試，使其和其他版本瀏覽器能夠兼容，再者對網(wǎng)站推廣宣傳，及時的維護(hù)更新。2.2 制作網(wǎng)頁的要素2.2.1 網(wǎng)頁的整體布局設(shè)計(jì) 網(wǎng)頁設(shè)計(jì)作為一種視覺語言，要講究編排和布局，雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì)，但它們有許多相近之處，應(yīng)充分加以利用和借鑒。版式設(shè)計(jì)通過文字圖形的空間組合，表達(dá)出和諧與美。一個優(yōu)秀的網(wǎng)頁設(shè)計(jì)者也應(yīng)該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達(dá)到最佳的視覺表現(xiàn)效果，而講究整體布局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應(yīng)怎樣編排才能使瀏覽者有一個流暢的視覺體驗(yàn)，從而方便他對產(chǎn)品的了解，促成最后的購買。2.2.2 網(wǎng)頁設(shè)計(jì)中色彩的運(yùn)用 色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計(jì)時，應(yīng)使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強(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è)計(jì)時，更應(yīng)該按照其中的 VI 進(jìn)行色彩運(yùn)用。在色彩的運(yùn)用過程中，還應(yīng)注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強(qiáng)烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。在設(shè)計(jì)中要考慮眾多因素。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)生和諧的美感。如對稱原則在 王誠君，劉振華，郭竑暉，高中山.Dreamweaver 8 網(wǎng)頁設(shè)計(jì)應(yīng)用教程M.北京：清華大學(xué)出版社，第332頁，2007. 李光明，曹蕾，余輝.中文Dreamweaver 8 網(wǎng)頁設(shè)計(jì)與實(shí)訓(xùn)教程M.北京：冶金工業(yè)出版社，第13頁，2006.周德華，許銘霖.新編網(wǎng)頁設(shè)計(jì)教程M.北京：冶金工業(yè)出版社，第159頁，2006.頁面設(shè)計(jì)中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點(diǎn)、線、面作為視覺語言中的基本元素，要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計(jì)中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計(jì)意境。23 系統(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)交易過的記錄。 4、客戶可以自行對其賬號密碼進(jìn)行修改，網(wǎng)站管理人員也可以添加或刪除賬號。 第三章 網(wǎng)站的設(shè)計(jì)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)地、價 趙銘建，趙慧，喬孟麗，康梅娟. 網(wǎng)頁設(shè)計(jì)與制作M.東營：中國石油大學(xué)出版社，第66頁，2007. 趙祖蔭，王云翔，胡耀芳. 網(wǎng)頁設(shè)計(jì)與制作教程M.北京：清華大學(xué)出版社，第187頁，2008.格等諸多方面，鑒于以上方面，我開始了子頁的選擇 與鏈接。3.3 網(wǎng)頁設(shè)計(jì)技巧 一張完美的主頁設(shè)計(jì)需要積累豐富的知識以及掌握大量的技巧。在這里從框架 和 CSS 樣式的運(yùn)用兩方面來介紹網(wǎng)頁設(shè)計(jì)的技巧。 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)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動 回頂部來使用導(dǎo)航條。 使用框架具有以下缺點(diǎn)：可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊；對 導(dǎo)航進(jìn)行測試可能很耗時間。 許多專業(yè) Web 設(shè)計(jì)人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框 架。在大多數(shù)情況下，這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾?地使用框架的站點(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) 樣 式 表 即Cascading StyleSheets 的縮寫，又稱之為風(fēng)格樣式表單。CSS 是在網(wǎng)頁制作過程中普遍用到的技術(shù)。采用了 CSS 技術(shù)控制的網(wǎng)頁，設(shè)計(jì)者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實(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)查、用戶管理、頂訂單管理等等 陳季. Flash 基礎(chǔ)與實(shí)例教程M.北京：北京希望電子出版社，第88頁，2005.丁海祥.計(jì)算機(jī)平面設(shè)計(jì)實(shí)訓(xùn)M. 北京：高等教育出版社，第54頁，2005.曹雁青，楊聰. Photoshop 經(jīng)典作品賞析M.北京：北京海洋智慧圖書有限公司，第35頁，2002.4.1.2 缺點(diǎn)：靜態(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)來宣傳自己的產(chǎn)品，或者進(jìn)行其他的活動。網(wǎng)站設(shè)計(jì)離不開網(wǎng)頁，網(wǎng)頁像書中