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