1、.Web網頁設計報告2012年12月01日目 錄一 引 言21.1 網站建設概述21.2 規劃思路3二 網站總體分析與設計32.1 系統的功能結構32.2 系統的功能特點42.3 頁面設計4;.三 各個功能模塊的實現43.1 信息記錄43.2 信息瀏覽功能53.3 具體實現6四 總結8一 引 言新的世紀， 互聯網進入一個嶄新的階段，信息化的發展帶動其它產業的發展，各行業都將與它進行更深入的融合和滲透。，互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。為了適應知識經濟社會的需要，促進學習與交流。網上交流和協作的功能比較普遍；技術管理和資源管理

2、受到重視。隨著互聯網的普及和發展，必將有越來越多的企業及個人在英特網上擁有自己的網站。網站建設成為企業形象宣傳、產品展示推廣、客戶溝通的最新最快捷的橋梁；成為個人展示自我，與世界交流的重要平臺。 越來越多的人已開始從對互聯網的認知階段進入到認同和行動階段。 Internet上發布信息主要是通過網站來實現的，獲取信息也是要在 Internet “海洋”中按照一定的檢索方式將所需要的信息從網站上下載下來。因此網站建設在 Internet 應用上的地位顯而易見，它已成為政府、企事業單位信息化建設中的重要組成部分， 從而倍受人們的重視。 為了更好的協作，更多的與外界交流新的信息，和他人共享信息，特構建

3、旅游網站。1.1 網站建設概述;.此次設計的項目是構建一個九寨溝旅游網站，有個人信息記錄系統 , 網站主要實現旅游信息查詢系統部分 , 使訪問者可查詢旅游有關的信息。1.2 規劃思路網站的基本風格是簡潔明快的界面、實用的旅游訊息和個性化的社區。網頁設計的構思是：(1) 主頁上有標志物，能讓瀏覽者一眼就知道是主頁。(2) 用到 CSS模板制作網頁，這樣子的網頁比較有一致性。(3) 各個頁面上都有漂浮物，運用 JavaScript 實現動態效果。(4) 設計漸進顯示的頁面，每個圖標都應配有文字說明顯示，這樣做可以減少等待時不耐煩的心情。(5 ）圖象的應用時要注意至多只用一到兩個主要的較大圖象，并輔

4、以一系列較小的圖標。(6 ）在網頁設計中，設有導航欄，使得層次清晰，便于瀏覽者瀏覽。(7) 內容，內容是一個網站的靈魂。 要使網站脫穎而出 , 須注意其組織的條理性、內容的充實性和新鮮性 , 以區別于其它同類網站 , 讓上網者覺得物有所值。(8 ）多媒體、視頻，音樂等綜合功能。形式是一個網站內容的外在表現。其界面的質量直接影響訪問者的主觀感受。 網頁設計要體現專業特點 , 富有特色 , 給人耳目一新的感覺。基于以上所需實現的功能，所以我選擇了 ASP技術結合 Macromedia Dreamweaver MX 2004軟件架構個人網站。二 網站總體分析與設計2.1 系統的功能結構旅游網站主頁模

5、型如圖所示。九寨溝旅游網主頁九自出旅風特信資聯寨然行游土產息源系溝風指貼人指記瀏我簡光南士情南錄覽們介通過進入主頁及下級網頁, 可以實現對旅游資源和旅游服務設施的瀏覽以及個人信息的錄入等功能。本旅游信息網站的功能是針對旅游者而設計的, 有以下;.兩種功能 :1. 查看瀏覽功能進行旅游交通、住宿等的查詢。2. 信息記錄系統本系統的用戶。2.2 系統的功能特點（1）操作簡單、界面友好：完全控件式的頁面布局，使得旅游信息的錄入工作更簡便；許多選項包括信息類別、來源部門等只需要點擊鼠標就可以完成；另外，跟蹤出現的提示信息也讓用戶隨時清楚自己的操作情況。（ 2）即時可見：對信息的處理 , 將立即在主頁的

6、對應欄目顯示出來，達到 " 即時發布、即時見效 " 的功能。（ 3）功能完善：完整地實現了網站對即時旅游信息的要求。2.3 頁面設計下面介紹一下網站中的幾個網頁的制作。九寨旅游的主頁（ 20.html ），背景色采用藍色，藍色的背景可以給人天然的感覺，無疑是最好的選擇。 圖片的下方為導航欄， 導航欄下方是圖片與鏈接頁，正下方是用 Photoshop 處理過的圖片。 左邊的有天氣查詢鏈接與景點介紹， 右邊是一些特產與旅社的介紹。這樣制作豐富了頁面內容，使整個頁面條理清晰。出行指南頁面（ 26.html ），背景色與主頁保持一致。這一頁的主要內容是有用到層的隱藏。整個頁面包括線

7、路與交通等信息，清晰有致，比較大方，瀏覽者可以清楚的看到九寨溝的線路與景點。個人信息記錄頁面（ 25.html ），要求游客輸入個人信息包括登錄名性別，身份證號等信息，方便管理用戶資料。所有頁面整齊劃一，設計風格保持一致，加上藍色的背景，給人簡潔、明了、大方的感覺。三 各個功能模塊的實現3.1 信息記錄進入網站的游客，能瀏覽網頁并進行個人信息錄入。頁面的設計：;.3.2 信息瀏覽功能這是該網站的主要功能 , 用于各種與旅游有關的信息瀏覽:(1) 通過鼠標選擇就可獲得與之相關的信息 ;(2) 根據用戶給定的條件（按按名稱、按交通路線、按距離、按區域等）相關信息顯示出來。通過以上方式 , 游客就可

8、以進行旅游資源查看:(1) 簡介與自然風光：通過圖片與視頻的介紹， 讓游客可以快速瀏覽到信息。(2) 出行指南：進入九寨溝的線路以及交通道路狀況。根據游客需要 , 可分類查看到九寨溝的各景點的地理位置、名稱、乘車路線等信息。(3) 旅游貼士：氣候信息以及最佳的旅游時間 , 與天氣網站相連旅客可及時查詢到本地各旅游景區當天的氣溫、 污染指數等信息 , 為出游作好準備。并給出旅客一些注意事項等信息。(4) 特產購物信息：旅客可查看到名優特產、小吃等的名稱及其介紹資料 , 并配以聲音、動畫、圖像等多媒體信息。(5) 資源瀏覽：推薦的一些游記以及 FLASH動畫，游客可下載瀏覽。(6) 其他信息：如旅

9、客可查詢到旅行社團、 旅館、旅游監督機構等服務機構的名稱、地址 , 及其文字資料、圖片、圖像等信息。頁面的設計：;.3.3 具體實現（ 1） CSS模板（部分代碼）：bodybackground:#bbddffbackground-color:#2286c6;url(icon2.gif) no-repeat 5px 7px;margin: 0px;padding:0px;#middletext-align:center;background-color:#FFFFFF;font-size:12px;margin:0px 0px 0px 2px;font-family:Arial,Helveti

10、ca,padding:5px 0px 0px 0px;sans-serif;width:400px; float:left;#container#middle divposition:relative;margin-left:5px;margin:0px auto 0px auto;margin-right:5px;width:780px;position:relative;text-align:left;#right#leftfloat:left;float:left;margin:0px 0px 1px 2px;width:200px;width:176px;background-colo

11、r:#FFFFFF;background-color:#FFFFFF;margin:0px;color:#d8ecff;padding:0px 0px 5px 0px;color:#d8ecff;#right divposition:relative;#left div h3margin-left:5px;font-size:12px;margin-right:5px;padding:4px 0px 2px 15px;background-color:#5ea6eb;color:#003973;margin:0px 0px 5px 0px;（ 2）主頁的部分代碼：<div id=&quo

12、t;container">.<div id="banner"><img<li><a href="#">風土人src="banner.jpg"></div>情</a></li><div id="globallink"><li><a href="24.html"><ul>特產指南 </a></li><li><a

13、href="20.html"><li><a href="25.html">信息記錄 </a></li>首頁 </a></li><li><a href="27.html"><li><a href="21.html">資源瀏覽 </a></li>九寨溝簡介 </a></li><li><a href="#"><li><a href="22.html">聯系我們</a></li>自然風光 </a></li></ul><li><a href="26.htm">出行指南 </a></li><br><li><a href="23.html"></div>旅游貼士 </a></li>四 總結旅游網站的開發涉及到各方面的知