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

目 錄第一章 前言2 1.1 課題來源 21.2 網(wǎng)站開發(fā)項目需求分析 21.3 軟件 3 1.4 軟件運行環(huán)境第二章 網(wǎng)站制作3 第二章網(wǎng)絡制作32.1做網(wǎng)頁的步驟 32.2 做網(wǎng)頁的要素42.2.1網(wǎng)頁的整體布局設計42.2.2 網(wǎng)頁設計中色彩的運用42.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 42.3 系統(tǒng)各模塊功能實現(xiàn)4 2.3.1 系統(tǒng)登錄模塊 42.3.2 車輛展示模塊 52.3.3 賬號管理模塊5 第三章 網(wǎng)站的設計 53.1 主頁的要求53.2 子頁的要求53.3 網(wǎng)頁設計技巧5 3.3.1 框架的使用53.3.2 CSS 樣式的使用6第四章 網(wǎng)站的應用 6 4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁64.2 我的認識6結(jié)束語 7參考文獻7網(wǎng)頁設計與應用摘 要 ：汽車網(wǎng)站是一個結(jié)合了汽車銷售等多功能瀏覽的汽車網(wǎng)站，我所使用的軟件是 Macromedia 公 司 推 出 的 一 款 用 于 網(wǎng) 頁 設 計 的 軟 件 dreamweaver8。在網(wǎng)頁的制作與鏈接中，我學到了很多，然后補充一些比較熱門的技巧。網(wǎng)站具有快捷。無距離更新的特性，同時提供進入日常業(yè)務處理平臺的“入口”，具有較強的實用價值。這樣的網(wǎng)站被廣大消費者普遍使用，隨著現(xiàn)在網(wǎng)絡的普及和高效性的不斷提高，它的展示作用和實用性已經(jīng)使它的應用地位越來越高，越來越廣泛。本文對網(wǎng)站設計作了介紹，進行了需求分析、模塊劃分、框架和 CSS 的介紹。 由于制作經(jīng)驗不足，作品和論文中存在問題之處，請老師指導完善。關鍵詞： 超鏈接，外觀，性能，框架，CSS 目 錄第一章 前言1、1 課題來源 隨著二十一世紀新興科技的飛速發(fā)展，如今的電子信息產(chǎn)業(yè)正在經(jīng)受著一個巨大的挑戰(zhàn)，同時也面臨著一個重大的機遇。就目前的科技發(fā)展水平而言，電子信息產(chǎn)業(yè)的發(fā)展已經(jīng)不能夠滿足社會化大生產(chǎn)的要求，因此，各個國家集中人力、財力加大對信息技術產(chǎn)業(yè)的投入，以適應目前需要?？上驳氖窃谶@幾十年的發(fā)展中我們有了互聯(lián)網(wǎng)?；ヂ?lián)網(wǎng)加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。 以往，人們出行都以自行車居多，后來公交事業(yè)發(fā)展壯大，人們便乘坐公交汽車，現(xiàn)如今，隨著人們生活水平的提高，越來越多的家庭已經(jīng)擁有或者想擁有自己的私家車。 正是因為人們的這些需求，越來越多的汽車網(wǎng)站出現(xiàn)在網(wǎng)絡上，使人們可以隨時了解自己想知道的汽車方面的新聞，真正的做到足不出戶，便知天下事。把汽車銷售與網(wǎng)絡連接起來，是今后汽車銷售發(fā)展的必然方向之一。12 網(wǎng)站開發(fā)項目需求分析 一個網(wǎng)站項目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實際需求或者是出于公司自身發(fā)展的需要，其中客戶的實際需求也就是說這種交易性質(zhì)的需求占了絕大部分。面對對網(wǎng)站開發(fā)擁有不同知識層面的客戶，項目的負責人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)站開發(fā)項目的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準確、清晰以文檔的形式表達給參與項目開發(fā)的每個成員，保證開發(fā)過程按照滿足用戶需求為目的正確項目開發(fā)方向進行，是每個網(wǎng)站開發(fā)項目管理者需要面對的問題。據(jù)專家預計，2009 年我國汽車需求量將超過 850 萬輛。所以，做好汽車網(wǎng)站就是為了使廣大的消費者提供及時和有效的信息，為其選擇適合自己的產(chǎn)品提供良好的參考。13 使用軟件 dreamwraver 軟 件 由 美 國 著 名 的 網(wǎng) 站 應 用 開 發(fā) 工 具 生 產(chǎn) 廠 商 AdobeMacromedia 于 2005 年 6 月推出并正式投入市場以來，已經(jīng)發(fā)展得相當成熟。關于dreamwraver 的技術介紹的相關書籍與網(wǎng)絡信息相當豐富。 通過大學中軟件開發(fā)環(huán)境課程的學習，對 dreamwraver 有了比較深刻的認識，并比較輕松的掌握了dreamwraver 的操作。因此，軟件技術可以完成任務的要求。14 軟件運行環(huán)境 Dreamweaver 是一款簡體中文軟件，可以在 Win2003/WinXP 中安全運行 第二章 網(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)站設計得成功與否，很大程度上決定于設計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設置、網(wǎng)站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。 四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設計網(wǎng)頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。 五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實了，這是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設計好，然后再逐步完善小的結(jié)構(gòu)設計。所謂先簡單后復雜，就是先設計出簡單的內(nèi)容，然后再設計復雜的內(nèi)容，以便出 知新文化. HTML 完全手冊與速查辭典M.北京：科學出版社，第49頁，2007. 楊選輝，網(wǎng)頁設計與制作教程M.北京：清華大學出版社，第321頁，2009.現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。 此外，整體設計完成后我們還要將網(wǎng)頁上傳測試，使其和其他版本瀏覽器能夠兼容，再者對網(wǎng)站推廣宣傳，及時的維護更新。2.2 制作網(wǎng)頁的要素2.2.1 網(wǎng)頁的整體布局設計 網(wǎng)頁設計作為一種視覺語言，要講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處，應充分加以利用和借鑒。版式設計通過文字圖形的空間組合，表達出和諧與美。一個優(yōu)秀的網(wǎng)頁設計者也應該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達到最佳的視覺表現(xiàn)效果，而講究整體布局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應怎樣編排才能使瀏覽者有一個流暢的視覺體驗，從而方便他對產(chǎn)品的了解，促成最后的購買。2.2.2 網(wǎng)頁設計中色彩的運用 色彩是藝術表現(xiàn)的要素之一，在網(wǎng)頁設計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進行虛擬店面的頁面設計時，應使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強人們的購買心理，使得在線營銷得到很好的實踐效果。另要注意的是網(wǎng)頁的顏色應用雖沒有限制，但不能毫無節(jié)制地運用多種顏色，一般情況下，先根據(jù)總體風格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的 CIS（企業(yè)形象識別系統(tǒng)）的企業(yè)進行網(wǎng)頁設計時，更應該按照其中的 VI 進行色彩運用。在色彩的運用過程中，還應注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。在設計中要考慮眾多因素。2.2.3 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在 王誠君，劉振華，郭竑暉，高中山.Dreamweaver 8 網(wǎng)頁設計應用教程M.北京：清華大學出版社，第332頁，2007. 李光明，曹蕾，余輝.中文Dreamweaver 8 網(wǎng)頁設計與實訓教程M.北京：冶金工業(yè)出版社，第13頁，2006.周德華，許銘霖.新編網(wǎng)頁設計教程M.北京：冶金工業(yè)出版社，第159頁，2006.頁面設計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達到比較好的效果。點、線、面作為視覺語言中的基本元素，要使用點、線、面的互相穿插、互相襯托、互相補充構(gòu)成最佳的頁面效果。網(wǎng)頁設計中點、線、面的運用并不是孤立的，很多時候都需要將它們結(jié)合起來，表達完美的設計意境。23 系統(tǒng)各模塊功能實現(xiàn)2.3.1 系統(tǒng)登錄模塊 1、該功能模塊可以記錄客戶的郵箱地址，交易時還可以向客戶發(fā)送交易信息，到帳確認等等。 2、登陸后系統(tǒng)會調(diào)出客戶的記錄，按照交易量的不同客戶享受的折扣也不同，系統(tǒng)主界面2.3.2 車輛展示模塊1、該功能模塊主要實現(xiàn)對車輛的展示。 2、該功能模塊圖片、文字介紹，360 度 flash 對各種車輛的展示。2.3.3 賬號管理模塊 1、掛失業(yè)務在正常工作中肯定會遇到掛失的業(yè)務，確定掛失后，數(shù)據(jù)庫會將該賬號掛起，等待客戶做進一步操作。 2、凍結(jié)業(yè)務，客戶對賬號有凍結(jié)的權(quán)利，在客戶沒有輸入解凍密碼之前，任何人都無法動用帳上的資金。 3、流水查詢客戶可以查詢曾經(jīng)交易過的記錄。 4、客戶可以自行對其賬號密碼進行修改，網(wǎng)站管理人員也可以添加或刪除賬號。 第三章 網(wǎng)站的設計3.1 主頁的要求 對于銷售業(yè)務系統(tǒng)要求運行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對 于前臺展示界面要求系統(tǒng)便于維護，安全可靠，對于廣大客戶所要執(zhí)行的操作 簡單易懂，遠程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠程 操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏 覽者所想要了解的東西。3.2 子頁的要求 后面的工作就是子頁的選擇與鏈接，子頁應該豐富多彩，內(nèi)容充實，瀏覽 性強，比如說，想要銷售一輛汽車，應該有它的全部資料，包括外觀、內(nèi)飾、 性能指標、出產(chǎn)地、價 趙銘建，趙慧，喬孟麗，康梅娟. 網(wǎng)頁設計與制作M.東營：中國石油大學出版社，第66頁，2007. 趙祖蔭，王云翔，胡耀芳. 網(wǎng)頁設計與制作教程M.北京：清華大學出版社，第187頁，2008.格等諸多方面，鑒于以上方面，我開始了子頁的選擇 與鏈接。3.3 網(wǎng)頁設計技巧 一張完美的主頁設計需要積累豐富的知識以及掌握大量的技巧。在這里從框架 和 CSS 樣式的運用兩方面來介紹網(wǎng)頁設計的技巧。 3.3.1 框架的使用 FRAME（框架）是 Web 上經(jīng)常會看到的頁面結(jié)構(gòu)?？蚣艿淖畛Ｒ娪猛揪褪菍Ш?。 一組框架通常包括一個含有導航條的框架和另一個要顯示主要內(nèi)容頁面的框 架。 使用框架具有以下優(yōu)點：訪問者的瀏覽器不需要為每個頁面重新加載與導航相 關的圖形；每個框架都具有自己的滾動條如果內(nèi)容太大，在窗口中顯示不下， 因此訪問者可以獨立滾動這些框架。例如，當框架中的內(nèi)容頁面較長時，如果 導航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動 回頂部來使用導航條。 使用框架具有以下缺點：可能難以實現(xiàn)不同框架中各元素的精確圖形對齊；對 導航進行測試可能很耗時間。 許多專業(yè) Web 設計人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框 架。在大多數(shù)情況下，這種反感是因為遇到了那些使用框架效果不佳或不必要 地使用框架的站點例如，每當訪問者單擊導航按鈕時就重新加載導航框架內(nèi) 容的框架集。如果框架使用得法例如，在允許其他框架的內(nèi)容發(fā)生更改的同 時，使一個框架中的導航控件保持靜態(tài)，則這些框架對于某些站點可能非常 有用。 3.3.2 CSS 樣式的使用 CSS 層疊 樣 式 表 是 一 種 制 作 網(wǎng) 頁 的 新 技 術 它 的 全 稱 是 級 聯(lián) 樣 式 表 即Cascading StyleSheets 的縮寫，又稱之為風格樣式表單。CSS 是在網(wǎng)頁制作過程中普遍用到的技術。采用了 CSS 技術控制的網(wǎng)頁，設計者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實現(xiàn)更加精確地控制。 第四章 網(wǎng)頁的應用4.1 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。4.1.1 優(yōu)點：靜態(tài)網(wǎng)頁：1. 靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索；動態(tài)網(wǎng)頁：1. 動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術為基礎，可以大大減少降低網(wǎng)站維護的工作量；2. 采用動態(tài)網(wǎng)頁技術的網(wǎng)站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、 在線調(diào)查、用戶管理、頂訂單管理等等 陳季. Flash 基礎與實例教程M.北京：北京希望電子出版社，第88頁，2005.丁海祥.計算機平面設計實訓M. 北京：高等教育出版社，第54頁，2005.曹雁青，楊聰. Photoshop 經(jīng)典作品賞析M.北京：北京海洋智慧圖書有限公司，第35頁，2002.4.1.2 缺點：靜態(tài)網(wǎng)頁：1. 靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎ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)頁，或者處于技術方面的考慮，搜索 蜘蛛不去抓取網(wǎng)址中“？”后面的內(nèi)容，因此采用動態(tài)網(wǎng)頁的網(wǎng)站在進行 搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求。4.2 我的認識 網(wǎng)頁應用很廣泛，當我們打開 IE 瀏覽器的時候，出現(xiàn)在屏幕上的就是一個網(wǎng)頁，隨著社會的進步，生活節(jié)奏地加快，各行各業(yè)都開始使用互聯(lián)網(wǎng)來宣傳自己的產(chǎn)品，或者進行其他的活動。網(wǎng)站設計離不開網(wǎng)頁，網(wǎng)頁像書中