旅游網(wǎng)站設(shè)計

1、Web 網(wǎng)頁設(shè)計報告2012年 12月 01日目錄一引言.21.1 網(wǎng)站建設(shè)概述21.2 規(guī)劃思路3二網(wǎng)站總體分析與設(shè)計.32.1 系統(tǒng)的功能結(jié)構(gòu). .32.2 系統(tǒng)的功能特點42.3 頁面設(shè)計4精選資料，歡迎下載三各個功能模塊的實現(xiàn).43.1信息記錄43.2信息瀏覽功能53.3具體實現(xiàn)6四總結(jié)引言新的世紀(jì)，互聯(lián)網(wǎng)進入一個嶄新的階段，信息化的發(fā)展帶動其它產(chǎn)業(yè)的發(fā)展，各行業(yè)都將與它進行更深入的融合和滲透。，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。為了適應(yīng)知識經(jīng)濟社會的需要，促進學(xué)習(xí)與交流。網(wǎng)上交流和協(xié)作的功能比較普遍；技術(shù)管理和資源管

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

3、構(gòu)建旅游網(wǎng)站。1.1 網(wǎng)站建設(shè)概述精選資料，歡迎下載此次設(shè)計的項目是構(gòu)建一個九寨溝旅游網(wǎng)站，有個人信息記錄系統(tǒng)，網(wǎng)站主要實現(xiàn)旅游信息查詢系統(tǒng)部分，使訪問者可查詢旅游有關(guān)的信息。1.2 規(guī)劃思路網(wǎng)站的基本風(fēng)格是簡潔明快的界面、實用的旅游訊息和個性化的社區(qū)。網(wǎng)頁設(shè)計的構(gòu)思是：(1) 主頁上有標(biāo)志物，能讓瀏覽者一眼就知道是主頁。 用到 CSS 莫板制作網(wǎng)頁，這樣子的網(wǎng)頁比較有一致性。(3) 各個頁面上都有漂浮物，運用 JavaScript 實現(xiàn)動態(tài)效果。(4)設(shè)計漸進顯示的頁面，每個圖標(biāo)都應(yīng)配有文字說明顯示，這樣做可以減少等待時不耐煩的心情。(5)圖象的應(yīng)用時要注意至多只用一到兩個主要的較大圖象，并

4、輔以一系列較小的圖標(biāo)。(6) 在網(wǎng)頁設(shè)計中，設(shè)有導(dǎo)航欄，使得層次清晰，便于瀏覽者瀏覽。(7) 內(nèi)容，內(nèi)容是一個網(wǎng)站的靈魂。要使網(wǎng)站脫穎而出，須注意其組織的條理性、 內(nèi)容的充實性和新鮮性，以區(qū)別于其它同類網(wǎng)站 ，讓上網(wǎng)者覺得物有所值。(8 ) 多媒體、視頻，音樂等綜合功能。形式是一個網(wǎng)站內(nèi)容的外在表現(xiàn)。其界面的質(zhì)量直接影響訪問者的主觀感受。 網(wǎng)頁設(shè)計要體現(xiàn)專業(yè)特點 ，富有特色 , 給人耳目一新的感覺?；谝陨纤鑼崿F(xiàn)的功能，所以我選擇了ASP 技術(shù)結(jié)合 MacromediaDreamweaver MX 200欲件架構(gòu)個人網(wǎng)站。二 網(wǎng)站總體分析與設(shè)計2.1 系統(tǒng)的功能結(jié)構(gòu)旅游網(wǎng)站主頁模型如圖所示九

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

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

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

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

9、旅館、旅游監(jiān)督機構(gòu)等服務(wù)機構(gòu)的名稱、地址，及其文字資料、圖片、圖像等信息。精選資料，歡迎下載頁面的設(shè)計：精選資料，歡迎下載3.3 具體實現(xiàn)(1)CSS 莫板( 部分代碼 ) ：bodybackgrou nd-color:#2286c6;margi n: Opx;padd in g:0px;text-alig n:ce nter;fon t-size:12px;fon t-family:Arial, Helvetica, san s-serif;#containerpositi on:relative;margi n: 0px auto 0px auto;width:780px;text-ali

10、g n:left;#leftfloat:left;width:200px;backgro un d-color:#FFFFFF;margi n:0px;padd in g:0px 0px 5px 0px;color:#d8ecff;#left div h3fon t-size:12px;padd in g:4px 0px 2px 15px;color:#003973;(2) 主頁的部分代碼 : <div id="c on tai ner">margi n: 0px 0px 5px 0px;backgro un d:#bbddffurl(ic on 2.gif)

11、no-repeat 5px7px; #middlebackgro un d-color:#FFFFFF; margin: 0px0px 0px 2px; padd in g:5px0px 0px 0px; width:400px;float:left;#middle divmargi n-left:5px; margin-right:5px; positi on:relative;#rightfloat:left; margin: 0px 0px1px 2px; width:176px;backgro un d-color:#FFFFFF;color:#d8ecff;#right divpos

12、iti on:relative; margi n-left:5px;margin-right:5px; backgroun d-color:#5ea6eb;精選資料，歡迎下載<div id="banner"><img<li><a href="#">風(fēng)土人 情src="banner.jpg"></div></a></li><div id="globallink"><li><a href="24.

13、html"><ul>特產(chǎn)指南 </a></li><li><a href="20.html"><li><a href="25.html">信息記錄 </a></li>首頁 </a>v/li><li><a href="21.html"><li><a href="27.html">資源瀏覽 </a></li>九

14、寨溝簡介 </a></li><li><a href="22.html"><li><a href="#">聯(lián)系我自然風(fēng)光 </a></li>們 </a></li><li><a href="26.htm"></ul>出行指南 </a></li><br><li><a href="23.html">旅游貼士 </a></li></div>四 總結(jié)旅游網(wǎng)站的開發(fā)涉及到各方面的知識。技術(shù)是為用戶服務(wù)的, 網(wǎng)站更要體現(xiàn)對用戶的服務(wù)性, 因為這關(guān)系到旅游信息傳