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

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

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

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

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

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

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

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

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

9、旅館、旅游監(jiān)督機(jī)構(gòu)等服務(wù)機(jī)構(gòu)的名稱、地址，及其文字資料、圖片、圖像等信息。精選資料，歡迎下載頁(yè)面的設(shè)計(jì)：精選資料，歡迎下載3.3 具體實(shí)現(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) 主頁(yè)的部分代碼 : <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>首頁(yè) </a>v/li><li><a href="21.html"><li><a href="27.html">資源瀏覽 </a></li>九

14、寨溝簡(jiǎn)介 </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í)。技術(shù)是為用戶服務(wù)的, 網(wǎng)站更要體現(xiàn)對(duì)用戶的服務(wù)性, 因?yàn)檫@關(guān)系到旅游信息傳