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

Web網(wǎng)頁設(shè)計(jì)報(bào)告2012 年 12 月01 日目 錄一 引言31.1網(wǎng)站建設(shè)概述31.2規(guī)劃思路3二 網(wǎng)站總體分析與設(shè)計(jì)42.1系統(tǒng)的功能結(jié)構(gòu)42.2 系統(tǒng)的功能特點(diǎn)42.3 頁面設(shè)計(jì)5三 各個(gè)功能模塊的實(shí)現(xiàn)53.1 信息記錄53.2 信息瀏覽功能63.3具體實(shí)現(xiàn)7四 總結(jié)8一 引言新的世紀(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ù)管理和資源管理受到重視。隨著互聯(lián)網(wǎng)的普及和發(fā)展，必將有越來越多的企業(yè)及個(gè)人在英特網(wǎng)上擁有自己的網(wǎng)站。網(wǎng)站建設(shè)成為企業(yè) 形象宣傳、產(chǎn)品展示推廣、客戶溝通的最新最快捷的橋梁；成為個(gè)人展示自我，與世界交流的重要平臺(tái)。越來越多的人已開始從對互聯(lián)網(wǎng)的認(rèn)知階段進(jìn)入到認(rèn)同和行動(dòng)階段。Internet上發(fā)布信息主要是通過網(wǎng)站來實(shí)現(xiàn)的，獲取信息也是要在Internet“海洋”中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。為了更好的協(xié)作，更多的與外界交流新的信息，和他人共享信息，特構(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)部分,使訪問者可查詢旅游有關(guān)的信息。1.2規(guī)劃思路網(wǎng)站的基本風(fēng)格是簡潔明快的界面、實(shí)用的旅游訊息和個(gè)性化的社區(qū)。網(wǎng)頁設(shè)計(jì)的構(gòu)思是：(1) 主頁上有標(biāo)志物，能讓瀏覽者一眼就知道是主頁。(2) 用到CSS模板制作網(wǎng)頁，這樣子的網(wǎng)頁比較有一致性。(3) 各個(gè)頁面上都有漂浮物，運(yùn)用JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果。(4) 設(shè)計(jì)漸進(jìn)顯示的頁面，每個(gè)圖標(biāo)都應(yīng)配有文字說明顯示，這樣做可以減少等待時(shí)不耐煩的心情。(5）圖象的應(yīng)用時(shí)要注意至多只用一到兩個(gè)主要的較大圖象，并輔以一系列較小的圖標(biāo)。(6）在網(wǎng)頁設(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ǎng)頁設(shè)計(jì)要體現(xiàn)專業(yè)特點(diǎn),富有特色,給人耳目一新的感覺?；谝陨纤鑼?shí)現(xiàn)的功能，所以我選擇了ASP技術(shù)結(jié)合Macromedia Dreamweaver MX 2004軟件架構(gòu)個(gè)人網(wǎng)站。二 網(wǎng)站總體分析與設(shè)計(jì) 2.1系統(tǒng)的功能結(jié)構(gòu)旅游網(wǎng)站主頁模型如圖所示。九寨溝旅游網(wǎng)主頁九寨溝簡介自然風(fēng)光出行指南旅游貼士風(fēng)土人情特產(chǎn)指南信息記錄資源瀏覽聯(lián)系我們通過進(jìn)入主頁及下級網(wǎng)頁,可以實(shí)現(xiàn)對旅游資源和旅游服務(wù)設(shè)施的瀏覽以及個(gè)人信息的錄入等功能。本旅游信息網(wǎng)站的功能是針對旅游者而設(shè)計(jì)的,有以下兩種功能:1. 查看瀏覽功能進(jìn)行旅游交通、住宿等的查詢。2. 信息記錄系統(tǒng)本系統(tǒng)的用戶。2.2 系統(tǒng)的功能特點(diǎn)（1）操作簡單、界面友好：完全控件式的頁面布局，使得旅游信息的錄入工作更簡便；許多選項(xiàng)包括信息類別、來源部門等只需要點(diǎn)擊鼠標(biāo)就可以完成；另外，跟蹤出現(xiàn)的提示信息也讓用戶隨時(shí)清楚自己的操作情況。（2）即時(shí)可見：對信息的處理,將立即在主頁的對應(yīng)欄目顯示出來，達(dá)到即時(shí)發(fā)布、即時(shí)見效的功能。（3）功能完善：完整地實(shí)現(xiàn)了網(wǎng)站對即時(shí)旅游信息的要求。2.3 頁面設(shè)計(jì)下面介紹一下網(wǎng)站中的幾個(gè)網(wǎng)頁的制作。九寨旅游的主頁（20.html），背景色采用藍(lán)色，藍(lán)色的背景可以給人天然的感覺，無疑是最好的選擇。圖片的下方為導(dǎo)航欄，導(dǎo)航欄下方是圖片與鏈接頁，正下方是用Photoshop處理過的圖片。左邊的有天氣查詢鏈接與景點(diǎn)介紹，右邊是一些特產(chǎn)與旅社的介紹。這樣制作豐富了頁面內(nèi)容，使整個(gè)頁面條理清晰。出行指南頁面（26.html），背景色與主頁保持一致。這一頁的主要內(nèi)容是有用到層的隱藏。整個(gè)頁面包括線路與交通等信息，清晰有致，比較大方，瀏覽者可以清楚的看到九寨溝的線路與景點(diǎn)。 個(gè)人信息記錄頁面（25.html），要求游客輸入個(gè)人信息包括登錄名性別，身份證號(hào)等信息，方便管理用戶資料。所有頁面整齊劃一，設(shè)計(jì)風(fēng)格保持一致，加上藍(lán)色的背景，給人簡潔、明了、大方的感覺。三 各個(gè)功能模塊的實(shí)現(xiàn)3.1 信息記錄進(jìn)入網(wǎng)站的游客，能瀏覽網(wǎng)頁并進(jìn)行個(gè)人信息錄入。 頁面的設(shè)計(jì)：3.2 信息瀏覽功能這是該網(wǎng)站的主要功能,用于各種與旅游有關(guān)的信息瀏覽:(1) 通過鼠標(biāo)選擇就可獲得與之相關(guān)的信息;(2) 根據(jù)用戶給定的條件（按按名稱、按交通路線、按距離、按區(qū)域等）相關(guān)信息顯示出來。通過以上方式,游客就可以進(jìn)行旅游資源查看: (1) 簡介與自然風(fēng)光：通過圖片與視頻的介紹，讓游客可以快速瀏覽到信息。(2) 出行指南：進(jìn)入九寨溝的線路以及交通道路狀況。根據(jù)游客需要,可分類查看到九寨溝的各景點(diǎn)的地理位置、名稱、乘車路線等信息。(3) 旅游貼士：氣候信息以及最佳的旅游時(shí)間,與天氣網(wǎng)站相連旅客可及時(shí)查詢到本地各旅游景區(qū)當(dāng)天的氣溫、污染指數(shù)等信息,為出游作好準(zhǔn)備。并給出旅客一些注意事項(xiàng)等信息。(4) 特產(chǎn)購物信息：旅客可查看到名優(yōu)特產(chǎn)、小吃等的名稱及其介紹資料,并配以聲音、動(dòng)畫、圖像等多媒體信息。(5) 資源瀏覽：推薦的一些游記以及FLASH動(dòng)畫，游客可下載瀏覽。(6) 其他信息：如旅客可查詢到旅行社團(tuán)、旅館、旅游監(jiān)督機(jī)構(gòu)等服務(wù)機(jī)構(gòu)的名稱、地址,及其文字資料、圖片、圖像等信息。頁面的設(shè)計(jì)：3.3具體實(shí)現(xiàn)（1）CSS模板（部分代碼）：bodybackground-color:#2286c6;margin: 0px;padding:0px;text-align:center;font-size:12px;font-family:Arial, Helvetica, sans-serif; #containerposition:relative;margin:0px auto 0px auto;width:780px;text-align:left; #leftfloat:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0px 0px 5px 0px;color:#d8ecff; #left div h3font-size:12px;padding:4px 0px 2px 15px;color:#003973;margin:0px 0px 5px 0px;background:#bbddff url(icon2.gif) no-repeat 5px 7px; #middlebackground-color:#FFFFFF;margin:0px 0px 0px 2px;padding:5px 0px 0px 0px;width:400px; float:left;#middle divmargin-left:5px;margin-right:5px;position:relative;#rightfloat:left;margin:0px 0px 1px 2px;width:176px;background-color:#FFFFFF;color:#d8ecff;#right divposition:relative;margin-left:5px;margin-right:5px;background-color:#5ea6eb;（2）主頁的部分代碼：首頁九寨溝簡介自然風(fēng)光出行指南旅游貼士風(fēng)土人情特產(chǎn)指南信息記錄資源瀏覽聯(lián)系我們四 總結(jié)旅游網(wǎng)站的開發(fā)涉及到各方面的知識(shí)。技術(shù)是為用戶服務(wù)的,網(wǎng)站更要體現(xiàn)對用戶的服務(wù)性,因?yàn)檫@關(guān)系到旅游信息傳播的及時(shí)性和高效性Macromedia Dreamweaver MX 2004軟件給網(wǎng)頁的制作帶來了很大的便