前端設(shè)計畢業(yè)設(shè)計

1、滁州職業(yè)技術(shù)學(xué)院信息工程系2014屆軟件專業(yè)畢業(yè)論文姓 名： - 班 級： - 設(shè)計課題： - 指導(dǎo)教師： - 2013年 11月 13 日摘要21世紀(jì)是信息高速發(fā)達的時代，網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來越被人們接受，并且融入我們的生活。隨著旅游類的網(wǎng)站不斷推進，網(wǎng)站的作用超越了傳統(tǒng)的信息獲取，交流它更能體現(xiàn)組織機構(gòu)的風(fēng)采，性質(zhì)。所以旅游類的網(wǎng)站對現(xiàn)在的發(fā)展已經(jīng)勢在必行。本論文主要圍繞旅游網(wǎng)站為開發(fā)主題，最基本也是最必須的三個技能。前端的開發(fā)中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現(xiàn)相應(yīng)的效果和交互。雖然表面看起來這些很簡

2、單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會得心應(yīng)手。分析并解決實現(xiàn)中的若干技術(shù)問題；介紹了個性化頁面的背景；闡述整個個性化頁面生成系統(tǒng)的系統(tǒng)結(jié)構(gòu)及工作原理；分析了系統(tǒng)實現(xiàn)中的特殊性，難點和重點；雖然還沒有設(shè)計用戶注冊，用戶登錄，用戶管理，但是我會把自己的網(wǎng)站以一種簡單明了的方式向大家展現(xiàn)出旅游的各個方面。分析并解決實現(xiàn)中的若干技術(shù)問題；建立完整的旅游網(wǎng)站，進行測試并分析結(jié)果。本網(wǎng)站的建立的作用具有一目了然的特性，不僅能讓本地區(qū)的人們了解更多的旅游資料，更可讓世界各地的人了解一些地區(qū)的明文風(fēng)景。該網(wǎng)站中還存在一些不足之處，如網(wǎng)站的留言

3、系統(tǒng)、用戶注冊、用戶登錄沒建立等等。這些問題和功能有待于進一步學(xué)習(xí)和添加。關(guān)鍵詞：網(wǎng)站設(shè)計 XHTML、CSS、javaScript和JQuery 目錄目錄3第一章 緒論41.1 引言41.2 旅游網(wǎng)站發(fā)展現(xiàn)狀41.3 本課題目的與意義6第二章 開發(fā)工具和開發(fā)技術(shù)簡介72.1 Dreamweaver簡介72.2 PhotoShop 簡介82.3 Adobe Flash 簡介92.4 HTML語言簡介92.5 CSS簡介10第三章 需求分析123.1 網(wǎng)站系統(tǒng)分析123.2 功能性需求分類123.3 非功能性需求13第四章 網(wǎng)站開發(fā)過程及實現(xiàn)144.1 創(chuàng)建站點144.2 首頁設(shè)計154.2.1

4、 首頁頂部設(shè)計164.2.2 導(dǎo)航欄設(shè)計184.2.3 首頁主要內(nèi)容設(shè)計204.2.4 首頁底部設(shè)計254.3 其余頁面的制作254.3.1 2級頁面的制作：254.3.2 3級頁面設(shè)計284.4 測試30第五章 結(jié)論32致謝34第一章 緒論1.1 引言新的世紀(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ù)管理和資源管理受到重視。隨著互聯(lián)網(wǎng)的普及和發(fā)展，必將

5、有越來越多的企業(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é)作，更多的與外界交流新的信息，和他人共享信息，特構(gòu)建旅游網(wǎng)站。旅游網(wǎng)站也是近十年來在我國逐步興起和發(fā)展的

6、，到現(xiàn)在已經(jīng)初步形成了類型齊全、涵蓋旅游業(yè)各個方面的網(wǎng)上旅游產(chǎn)業(yè)體系，旅游產(chǎn)品的在線宣傳和銷售正影響著越來越多的旅游者、旅游服務(wù)提供商和旅游管理者。隨著我國旅游業(yè)的迅猛發(fā)展，推進旅游信息化，廣泛實現(xiàn)旅游電子政務(wù)、電子商務(wù)，建立高度發(fā)達的網(wǎng)上旅游系統(tǒng)，對于促進我國旅游業(yè)的跨越式發(fā)展有著重要的作用。1.2 旅游網(wǎng)站發(fā)展現(xiàn)狀1我國旅游網(wǎng)站發(fā)展概述 第一階段（19972000年）：我國真正出現(xiàn)基于互聯(lián)網(wǎng)的旅游網(wǎng)站以1997年中國旅游資訊網(wǎng)和華夏旅游網(wǎng)的成立為標(biāo)志。此階段旅游網(wǎng)站信息很少，網(wǎng)站只由一到數(shù)張設(shè)計簡單、以景點介紹的簡單文字為主的網(wǎng)頁構(gòu)成。第二階段（20002001年）：2000年4月以網(wǎng)上預(yù)

7、訂為主的青旅在線誕生，電子商務(wù)模式首次引入旅游網(wǎng)站。此階段旅游網(wǎng)站提供的預(yù)訂服務(wù)一般只包括交通及住宿企業(yè)的電話等聯(lián)系方式，游客的預(yù)訂仍需繞開網(wǎng)站，直接與相關(guān)企業(yè)打交道。網(wǎng)站的資訊信息已日益豐富，并由層次分明、包含超級鏈接的網(wǎng)頁組成。第三階段（20012002年）：隨著2001年2月金旅雅途網(wǎng)的成立，中國出現(xiàn)一批以網(wǎng)上交易平臺服務(wù)為主要業(yè)務(wù)的旅游網(wǎng)站。此時旅游網(wǎng)站已有較強的互動性，且開始提供一些在線服務(wù)。網(wǎng)上預(yù)訂的業(yè)務(wù)也大大增強，只是從網(wǎng)上預(yù)訂客房后仍需通過銀行等途徑匯去所需款項，預(yù)訂的飛機票等也必須派人上門遞送，屬于“鼠標(biāo)加水泥”的模式。第四階段（2002）：2002年4月中國第一個旅游目的地

8、營銷系統(tǒng)“南海目的地營銷系統(tǒng)”在廣東省南海市建成，南海旅游網(wǎng)成為中國首個運行DMS的旅游網(wǎng)站。從此階段開始，功能強大的數(shù)據(jù)庫系統(tǒng)使游客可以很方便地實現(xiàn)食、住、行、游、娛、購等信息的在線查詢，甚至可以借助多媒體工具進行網(wǎng)上虛擬旅游。未來的旅游網(wǎng)站的知識內(nèi)容將日益豐富，欄目的內(nèi)容將日益詳細，分類將日益科學(xué)，單調(diào)的、一成不變的旅游行程表將被靈活多變的自助旅游的游程定制所替代，為游客提供個性化的旅游產(chǎn)品等智能服務(wù)將成為旅游網(wǎng)站的重要功能。（二）網(wǎng)站分類對于種類繁多的旅游網(wǎng)站可以從不同角度進行分類，如按網(wǎng)站性質(zhì)的不同可將我國旅游網(wǎng)站分為如下七類：政府旅游部門網(wǎng)站、應(yīng)用服務(wù)供應(yīng)商網(wǎng)站、旅游企業(yè)網(wǎng)站、專業(yè)旅

9、游網(wǎng)站、網(wǎng)絡(luò)內(nèi)容供應(yīng)商網(wǎng)站的旅游頻道、各類旅游目的地咨訊網(wǎng)和地方性旅游網(wǎng)站、個人旅游網(wǎng)站。此外，旅游網(wǎng)站還可按專業(yè)屬性、服務(wù)類型、提供信息等不同要素進行分類。（三）網(wǎng)站構(gòu)建中存在的問題目前我國旅游網(wǎng)站數(shù)量非常龐大，現(xiàn)在用各種搜索引擎搜索到的旅游網(wǎng)站已達數(shù)萬家。但是大多數(shù)旅游網(wǎng)站的構(gòu)建無論從網(wǎng)頁設(shè)計的科學(xué)性、有效性，還是從網(wǎng)站的服務(wù)內(nèi)容、服務(wù)范圍、服務(wù)功能來看，都非常不規(guī)范，存在不少問題。以政府旅游網(wǎng)站為例，域名的使用就非?；靵y，48%的省級政府旅游網(wǎng)站未使用的正規(guī)域名，網(wǎng)站的信息提供也參差不齊；再以專業(yè)旅游網(wǎng)站為例，從網(wǎng)上選取50家較為成功的專業(yè)旅游網(wǎng)站進行了測評結(jié)果來看，酒店客房和機票的查詢

10、預(yù)訂是專業(yè)旅游網(wǎng)站提供的主要功能，在選取的專業(yè)旅游網(wǎng)站中，100%的網(wǎng)站都提供了此兩項功能，但從具體功能來看，尚無一家旅游網(wǎng)站能夠提供客房的實時狀況，如最近一天的客房銷售情況和促銷優(yōu)惠的報價。火車票的查詢只有45%的網(wǎng)站提供，國內(nèi)火車票的預(yù)訂尚無一家網(wǎng)站開通，唯一一家開通火車票預(yù)訂的是再見城市網(wǎng)站，也僅開通了歐洲火車通票預(yù)訂。能提供出租車預(yù)訂的網(wǎng)站只占22.7%。目前，在所選取的網(wǎng)站中尚無一家提供酒店、機票、出租車、門票的組合預(yù)訂，而提供了門票或?qū)в晤A(yù)訂的也只有兩家。從預(yù)訂方式來看，選取的網(wǎng)站都提供了網(wǎng)上預(yù)訂功能，但提供網(wǎng)上支付功能的網(wǎng)站只占22.7%。此外，絕大多數(shù)專業(yè)網(wǎng)站沒有設(shè)計旅游投訴的

11、功能。 既能體現(xiàn)旅游網(wǎng)站內(nèi)涵又便于查詢記憶的網(wǎng)站域名和網(wǎng)站LOGO。名和標(biāo)志LOGO的設(shè)計既要體現(xiàn)旅游網(wǎng)站的內(nèi)涵，使游客通過網(wǎng)站的名稱就可以對網(wǎng)站的產(chǎn)品及服務(wù)有一定的了解，又要具有鮮明特色，便于查詢、記憶。如攜程旅游、再見城市、信天游、八千里路等旅游網(wǎng)站的中文域名就一目了然且極具個性。美觀大方且兼具合理性、系統(tǒng)性、邏輯性的網(wǎng)頁。先應(yīng)充分考慮網(wǎng)頁的美觀度，其次可運用多媒體技術(shù)，在網(wǎng)頁中加入FLASH、3D片頭動畫、三維實景演示及MPS、AVI、等音視頻播放下載，加強旅游信息展示的生動直觀性，此外，也應(yīng)處理好首頁打開速度與網(wǎng)頁美觀度之間的矛盾。如可將圖片以較小尺寸在首頁上顯示，通過點擊放大瀏覽原圖

12、。網(wǎng)站的網(wǎng)頁結(jié)構(gòu)設(shè)計必須注重科學(xué)性。應(yīng)在首頁上設(shè)置網(wǎng)站信息的總目錄。另外應(yīng)盡可能將主題內(nèi)容放在首頁，減少游客點擊進入下層網(wǎng)頁查閱的次數(shù)。首頁上的內(nèi)容應(yīng)定期更換，以提供最新最快的旅游資訊，更換下的內(nèi)容可放入下層網(wǎng)頁。我國主要國際旅游客源地情況制作不同語言版本的網(wǎng)頁。我國地大物博、歷史悠久，豐富多彩的旅游資源也不斷吸引著全世界的尋幽獵奇的旅游者。在開放的網(wǎng)絡(luò)中，我國的旅游網(wǎng)站所面對的也是全球旅游市場，來自世界各地的游客都可能成為旅游網(wǎng)站的瀏覽者和客戶。目前我國大多數(shù)旅游網(wǎng)站只有中文簡體一個語言版本，無法滿足全球不同地域游客的需要，應(yīng)根據(jù)我國現(xiàn)有的主要國際客源市場，盡量增設(shè)其他語言的網(wǎng)頁版本，如中文

13、繁體、英文、日文、韓文、法文、德文等，以滿足不同語種和區(qū)域游客的需要。此外，還可根據(jù)需要，單獨開設(shè)面向不同國家、民族的外語版塊，有針對性的提供相關(guān)信息。在對各類旅游網(wǎng)站的各種要素進行了綜合的測定分析后，筆者對未來中國旅游網(wǎng)站構(gòu)建要素提出以下設(shè)想，以使現(xiàn)有網(wǎng)站更臻完善。1.3 本課題目的與意義建立旅游網(wǎng)站是我個人的愛好，我希望自己的技術(shù)可以變?yōu)橐环N提高自我的表現(xiàn)，至于為何選擇旅游這個主題進行建設(shè)網(wǎng)站，那是因為我個人對此較為了解，也是看目前形式下此類網(wǎng)站不多，要不就是內(nèi)容不豐富，沒有自己獨特的創(chuàng)意才來建站，當(dāng)然，我不排除有的一些好的旅游網(wǎng)站，只是很少，所以我想自己單獨的制作出自己的旅游網(wǎng)站，一遍更

14、多的人了解旅游的各個景點。 第二章 開發(fā)工具和開發(fā)技術(shù)簡介2.1 Dreamweaver簡介Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver是在網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強大的軟件，隨著Dreamweaver 8的發(fā)布，更堅定Dreamweaver在該領(lǐng)域的地位。它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計、開發(fā)

15、、制作的首選工具。DREAMWEAVER特點：1、靈活的編寫方式Dreamweaver具有靈活編寫網(wǎng)頁的特點，不但將世界一流水平的“設(shè)計”和“代碼”編輯器合二為一，而且在設(shè)計窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。2、可視化編輯界面Dreamweaver是一種所見即所得的HTML編輯器，可實現(xiàn)頁面元素的插入和生成?？梢暬庉嫮h(huán)境大量減少了代碼的編寫，同時亦保證了其專業(yè)性和兼容性，并且可以對內(nèi)部的HTML編輯器和任何第三方的HTML編輯器進行實時的訪問。無論用戶習(xí)慣手工輸入HTML源代碼還是使用可視化的編輯界面，Dreamweaver都能提供便捷的方式使用戶設(shè)計網(wǎng)頁和管理網(wǎng)

16、站變得更容易。3、功能更多的CSS支持CSS可視化設(shè)計、CSS檢查工具4、動態(tài)跨瀏覽器驗證當(dāng)保存時系統(tǒng)自動檢查當(dāng)前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測試用瀏覽器，同時系統(tǒng)自動檢驗以確定頁面有沒有目標(biāo)瀏覽器不支持的tags或CSS結(jié)構(gòu)。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和CSS規(guī)則是否適應(yīng)目前的主瀏覽器。5、強大的WEB站點管理功能6、內(nèi)建的圖形編輯引擎7、Dreamweaver的集成特性Dreamweaver 8繼承了Fireworks、Flash和Shockwave的集成特性，可以在這些Web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實用的網(wǎng)頁。8、豐富的媒體支持能力可以方便

17、地加入Java、Flash、Shockwave、ActiveX以及其他媒體。Dreamweaver具有強大的多媒體處理功能，在設(shè)計DHTML和CSS方面表現(xiàn)得極為出色，它利用JavaScript和DHTML語言代碼輕松地實現(xiàn)網(wǎng)頁元素的動作和交互操作。Dreamweaver還提供行為和時間線兩種控件來產(chǎn)生交互式響應(yīng)和進行動畫處理。9、超強的擴展能力Dreamweaver還支持第三方插件，任何人都可以根據(jù)自己的需要擴Dreamweaver的功能，并且可以發(fā)布這些插件。2.2 PhotoShop 簡介Adobe Photoshop是一個由Adobe Systems出品的專業(yè)圖像處理軟件。與該公司的其

18、它軟件一樣，Photoshop適用于Mac OS及Microsoft Windows兩個操作系統(tǒng)，同時公司也發(fā)布了Unix操作系統(tǒng)上的版本。Google也正在透過Wine資助Linux版Photoshop的研究。Photoshop最初是由托馬斯諾爾（Thomas Knoll）和約翰諾爾（John Knoll）這對兄弟于1987年制作的，但直到1990年后，這個軟件才由Adobe公司首次發(fā)布。Photoshop最初用于處理那些在當(dāng)時價格不菲的掃描儀掃描下來的圖像。特性：Photoshop主要處理以像素（Pixels）所構(gòu)成的數(shù)字圖像。利用其廣泛的編修與繪圖工具，可以更有效的進行圖片編輯工作。獨特

19、的歷史紀(jì)錄浮動視窗和可編輯的圖層效果功能使用戶可以方便的測試效果。對各種濾鏡的支持更令使用者能夠輕松創(chuàng)造出各種奇幻的效果。目前，Photoshop也正在被更多的用于處理網(wǎng)絡(luò)圖片。Photoshop的幾個后續(xù)版本中捆綁了一個獨立的軟件ImageReady，加強了Photoshop對網(wǎng)絡(luò)圖像（主要是GIF圖像文件）的支持功能。而在CS3中ImageReady被Fireworks所代替。Photoshop CS3允許用戶更容易升級到最新的硬件平臺，支持蘋果的Intel為內(nèi)核的系統(tǒng)。Photoshop被人們認(rèn)為是最好的圖像處理軟件，但與著名的3D Studio Max一樣，昂貴的價格使其難以普及。這也

20、令Jasc Software公司的Paint Shop Pro，GIMP小組的GIMP和友立信息的Ulead PhotoImpact占領(lǐng)了相當(dāng)?shù)氖袌龇蓊~。為了爭奪市場，Adobe發(fā)布了一個Photoshop的簡易版本Photoshop Elements。雖然它對很多功能都作了限定，但繼承了原軟件的多數(shù)優(yōu)秀功能，價格比Photoshop便宜不少。2.3 Adobe Flash 簡介Adobe Flash，前稱Macromedia Flash，簡稱Flash，前身FutureSplash，既指Adobe Flash Professional多媒體創(chuàng)作程序，也指Adobe Flash Player。

21、自從Macromedia公司于2005年12月3日被Adobe公司收購，F(xiàn)lash也就成為了Adobe旗下的軟件。1、flash特性：(1)被大量應(yīng)用于因特網(wǎng)網(wǎng)頁的矢量動畫文件格式。(2)使用矢量圖形（Vector Graphics）的方式，產(chǎn)生出來的影片占用存儲空間較小。(3)使用Flash創(chuàng)作出的影片有自己的特殊文件格式（swf）(4)該公司聲稱全世界97%的網(wǎng)絡(luò)瀏覽器都內(nèi)置Flash播放器（Flash Player）(5)是Adobe提出的“富因特網(wǎng)應(yīng)用”（RIA）概念的實現(xiàn)平臺(6)Flash6之后版本納入面向?qū)ο蟪绦蚋拍?。與其他語言比較，不論是在數(shù)據(jù)庫、XML、PHP等各種平臺上，都

22、能更進一步的相互結(jié)合應(yīng)用。(7)從用戶體驗的角度，是目前最好的前端技術(shù)。2、主要文件格式：(1)swf是Shockwave Flash的縮寫，這是一個完整的影片檔，無法被編輯。有時會被念作“swiff”或“swaif”。SWF在發(fā)布時可以選擇保護功能，如果沒有選擇，很容易被別人輸入到他的源文件中使用。然而保護功能依然阻擋不了為數(shù)眾多的破解軟件，有不少閃客專門以此來學(xué)習(xí)別人的代碼和設(shè)計方式。(2)flaFlash的源文件，只能用Adobe Flash打開編輯。2.4 HTML語言簡介HTML（Hyper Text Markup Language 超文本置標(biāo)語言）是一種用來制作超文本文檔的簡單標(biāo)記

23、語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web上的信息表示語言，用于描述Homepage的格式設(shè)計和它與WWW上其它Homepage的連結(jié)信息。HTML文檔（即Homepage的源文件）是一個放置了標(biāo)記的ASCII文本文件，通常它帶有.html或.htm的文件擴展名。生成一個HTML文檔主要有以下三種途徑：1、手工直接編寫（例如用你所喜愛的ASCII文本編輯器或其它HTML的編輯工具）。2、通過某些格式轉(zhuǎn)換工具將現(xiàn)有的其它格式文檔（如WORD文檔）轉(zhuǎn)換成HTML文檔。

24、3、由Web服務(wù)器（或稱HTTP 服務(wù)器）一方實時動態(tài)地生成。HTML語言是通過利用各種標(biāo)記（tags）來標(biāo)識文檔的結(jié)構(gòu)以及標(biāo)識超鏈（Hyperlink）的信息。雖然HTML語言描述了文檔的結(jié)構(gòu)格式，但并不能精確地定義文檔信息必須如何顯示和排列，而只是建議Web瀏覽器（如Mosiac，Netscape等）應(yīng)該如何顯示和排列這些信息，最終在用戶面前的顯示結(jié)果取決于Web瀏覽器本身的顯示風(fēng)格及其對標(biāo)記的解釋能力。這就是為什么同一文檔在不同的瀏覽器中展示的效果會不一樣。目前HTML語言的版本是2.0，它是基于SGML（Standard Generalized Markup Language）標(biāo)準(zhǔn)廣義

25、置標(biāo)語言，是一套用來描述數(shù)字化文檔的結(jié)構(gòu)并管理其內(nèi)容的復(fù)雜的規(guī)范）中的一個子集演變而來的。雖然下一版本的標(biāo)準(zhǔn)HTML3.0（也稱為HTML+）正在制訂之中，但其中某些部分的實驗性標(biāo)準(zhǔn)草案已被廣泛采用，大多優(yōu)秀的Web瀏覽器（如Netscape等）都能解釋HTML3.0中的部分新標(biāo)記，因此在本章中介紹的一些HTML3.0新標(biāo)記均已被多數(shù)瀏覽器所接受。2.5 CSS簡介CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。頁面內(nèi)容存放在HTML文檔中，而

26、用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護站點的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。1.層疊式表的特點：(1)便于頁面的修改。(2)便于頁面風(fēng)格的統(tǒng)一。(3)減少網(wǎng)頁的體積。2. 采用CSS布局相對于傳統(tǒng)的TABLE網(wǎng)頁布局而具有的優(yōu)勢： (1)表現(xiàn)和內(nèi)容相分離：將設(shè)計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。 (2)提高頁面瀏覽速度：對于同一個頁面視覺效果，采用CSS布局的頁面容量要比TABLE編碼的頁面文件容量小得多

27、，前者一般只有后者的1/2大小。瀏覽器就不用去編譯大量冗長的標(biāo)簽。 (3)易于維護和改版：你只要簡單的修改幾個CSS文件就可以重新設(shè)計整個網(wǎng)站的頁面。第三章 需求分析3.1 網(wǎng)站系統(tǒng)分析本旅游網(wǎng)站是為以旅游信息發(fā)布、旅游資料共享、瀏覽客戶為核心的網(wǎng)站，宗旨是能及時、準(zhǔn)確、完整發(fā)布游客需要的旅游信息。瀏覽客戶瀏覽客戶是只在瀏覽器端瀏覽網(wǎng)站信息的用戶，也是整個網(wǎng)站信息需要面向的用戶，其主要實現(xiàn)功能為：(1)客戶可瀏覽旅游新聞信息(2)客戶可瀏覽旅游線路信息(3)客戶可瀏覽旅游酒店信息(4)客戶可瀏覽旅游圖片信息(5)客戶可瀏覽旅游景點信息3.2 功能性需求分類我的網(wǎng)站總體分為5個網(wǎng)站欄目，分別是步

28、行天下行首頁、牛人專線、旅游線路、旅游攻略、其他資訊和二級頁面。1 步行天下行首頁首頁網(wǎng)頁名稱是index，首頁是瀏覽者看到網(wǎng)站的第一個頁面。首頁可以說是一個精華，他總體的概括了該旅游網(wǎng)站的大致內(nèi)容，突出了主題。2 牛人專線牛人專線的網(wǎng)頁名稱是zhuanxian，它是一級頁面，當(dāng)進入首頁之后在導(dǎo)航條上直接選擇即可將進入到該頁面。牛人轉(zhuǎn)線這個頁面主要介紹了各個地方的旅游。3 旅游線路旅游線路網(wǎng)頁名稱是xianlu，同樣是一級頁面。進入首頁之后在導(dǎo)航條上即可選擇該功能。旅游線路主要介紹旅游的現(xiàn)在路線。4 旅游攻略旅游攻略網(wǎng)頁名稱是gonglue，同樣是一級頁面。進入首頁之后在導(dǎo)航條上即可選擇該功能

29、。旅游攻略主要可以看看各個景點的圖片。5 其他資訊其他資訊網(wǎng)頁名稱是zixun，同樣是一級頁面。進入首頁之后在導(dǎo)航條上即可選擇該功能。其他資訊主要是介紹現(xiàn)在有關(guān)旅游的各個資訊。6 二級頁面二級頁面主要是對以上四個頁面里的鏈接負責(zé)。3.3 非功能性需求1. 用戶界面需求用戶界面需求主要是風(fēng)格問題，首先確定了在整個網(wǎng)站頁面中標(biāo)題欄用白色為主色調(diào)，使網(wǎng)站產(chǎn)生一種優(yōu)雅、舒適的氣氛，使人可以長時間瀏覽，也不會覺得視覺疲勞。其次，要要求導(dǎo)航條簡潔明了。然后正文要用14px宋體，鼠標(biāo)移動的時候，字體將會變成淺灰色，這樣看起來會很舒適很舒適。另外，也可以用一些圖片做背景圖片加以修飾，也可以加一些圖片滾動和圖片

30、切換來添加一些動態(tài)的效果，從而不顯得那么單調(diào)，增加一些生機的氣息。2. 軟硬件環(huán)境需求軟件需求：操作系統(tǒng)：Windows2000或Windows XP；瀏覽器：IE 6.0及以上版本或FireFox 3.0及以上版本。開發(fā)工具：Dreamweaver 8.0（或記事本）+Fireworks 8.0。硬件需求：要求處理器是Pentien 3以上，并且內(nèi)存=512MB和硬盤=40G。3. 網(wǎng)站質(zhì)量需求正確性：要保證網(wǎng)站運行的正確性，無鏈接錯誤、圖片顯示錯誤及其他運行時錯誤。性能效率：網(wǎng)站設(shè)計要合理，代碼無冗余，運行速度快。易用性：要導(dǎo)航欄目清晰、合理、簡便易用。清晰性：導(dǎo)航欄目清晰，合理可擴展性：

31、兼容性強，用戶使用各主瀏覽器能有一致的用戶體驗可靠性：信譽度 第四章 網(wǎng)站開發(fā)過程及實現(xiàn)4.1 創(chuàng)建站點（1）啟動Dreamweaver。（2）打開“站點”菜單，選擇“新建站點”命令。如圖4-1：圖4-1 站點（3）在彈出的“站點定義”對話框中的“站點名稱”文本框中輸入“步行天下行”，在下面的“本地根目錄文件夾”文本框中輸入本地網(wǎng)站預(yù)保存的路徑，單擊“確認(rèn)”按鈕。（4） 隨即在組合面板中點彈出“站點”面板，現(xiàn)在可以在其中添加頁面了。（5） 右鍵單擊“站點”面板中的根目錄，在彈出菜單中選擇“新建文件”命令，把新建文件的名稱改為“index.html”（6） 雙擊index.html，進入頁面編輯

32、狀態(tài)。4.2 首頁設(shè)計首頁是一個網(wǎng)站的門面，如同公司的形象，特別注重設(shè)計和規(guī)劃。它是用戶首先見到的界面，它的好壞直接影響到網(wǎng)站的訪問率。為此，我從以下幾個方面對主界面進行了設(shè)計。1、在色彩搭配上，我用一種較明快的色彩為基調(diào)，配以相關(guān)的其他色彩，給用戶一種鮮而不艷的美感。2、在字體選用上，大小適當(dāng)，盡量使用常用字體，適當(dāng)配用藝術(shù)字。3、在網(wǎng)頁制作上，采用表格劃分區(qū)域的手法，方便文字和圖片的插入。4、在內(nèi)容上，主界面內(nèi)容充實而不繁雜，既體現(xiàn)本站特色，又能滿足用戶需要。在主頁的基礎(chǔ)上我把主頁中加入了可編輯區(qū)域，并另存為了模板。以后的頁面都是在模板的基礎(chǔ)上進行制作的。使用模板功能有助于用戶設(shè)計出風(fēng)格一

33、致的網(wǎng)頁。通過模板來創(chuàng)建和更新網(wǎng)頁，不僅可以大大提高工作的效率，而且維護網(wǎng)站也會變得更加輕松。步行天下行網(wǎng)首頁如下圖4-2：圖4-2 界面首頁4.2.1 首頁頂部設(shè)計其中的logo和Banner制作很簡單，如下圖4-3，是有一張圖片和一個搜索框所制作的。圖4-3 首頁頂部而制作這個logo和Banner的代碼： 熱門搜索：  合肥景點  北京景點  滁州景點  南京景點 其中的CSS代碼：/*logo和banner*/#header width:950px; height:100px; border:1px solid #CCC; margin:5px

34、auto; border:0;/*logo部分*/.tu1 float:left; width:450px; height:100px; no-repeat/*banner部分*/.banner float:right; width:500px; height:90px; .qq width:400px; height:40px; margin:0 auto; margin-top:20px; float:right#ww1 height:30px; width:300px; border:1px solid #CCC; color:#999; float:right#ww2height:30

35、px;width:80px;border:1px solid #666;vertical-align:bottom;position:absolute;cursor:pointer;background-color:#666;font-size:16px; .wz width:400px; height:35px; margin:0 auto; margin-top:5px; float:right .wz pfont:12px/20px 宋體;font-weight:bold;color:#669 .wz a font:12px/20px 黑體; font-weight:bold; .wz

36、a:hovercolor:#CC3;就這樣logo和Banner就可以制作出來了。4.2.2 導(dǎo)航欄設(shè)計當(dāng)然導(dǎo)航欄的制作就簡單多了，如下圖4-5：圖4-5 導(dǎo)航欄導(dǎo)航欄的代碼： 步行一天下行 牛人專線 旅游線路 旅游攻略 其他資訊 +_+出車時間 2:00     合肥到滁州 2:30     合肥到天長 3:00     合肥到安慶 6:00     合肥到池州 CSS的代碼：#menu wid

37、th:950px; height:26px; font-family:宋體; font-size:14px; margin:0 auto;#menu li float:left; width:97px; height:26px; list-style:none; text-align:center; line-height:26px; margin-right:2px; background:url(./image/nav.gif) no-repeat;#menu li acolor:#999; text-decoration:none;#menu li:hover color:#FFF; b

38、ackground:url(./image/nav.gif) no-repeat 0 -26px;#menu .n1 background:url(./image/nav.gif) no-repeat 0 -52px;#menu .n1 acolor:#999;font-weight:600;#f_select background:url(./image/select.png) no-repeat; width:355px; height:26px; float:left;#f_select h2font-size:14px;color: #33C;font-family:宋體;line-h

39、eight:26px;float:left;padding-left:25px;#f_select form float:left; #f_select select width:190px; margin-top:3px; margin-left:20px;4.2.3 首頁主要內(nèi)容設(shè)計左邊以圖片加文字介紹各個景點如圖4-6：圖4-6首頁的左側(cè)左邊的代碼： 安徽宏村 宏村，位于安徽省黃山西南麓，距黟縣縣城11公里，是古黟桃花源里一座奇特的牛形古村.落，古取宏廣發(fā)達之意，稱為弘村。全村現(xiàn)完好保存明清民居140余幢，承志堂“三雕”精湛，富麗堂皇，被譽 為“民間故宮”。著名景點還有：南湖風(fēng)光、南湖書

40、院、月沼春曉、牛腸水圳、雙溪映碧、亭前大樹、雷崗夕照、樹人堂、明代祠堂樂敘堂等。村周有聞名遐邇的雉山木雕樓、奇墅湖、塔川秋色、木坑竹海、萬村明祠“愛敬堂”等景觀。 安徽黃山 黃山雄踞風(fēng)景秀麗的安徽南部，是我國最著名的山岳風(fēng)景區(qū)之一。黃山集名山之長：泰山.之雄偉，華山之險峻，衡山之煙云，廬山之飛瀑，雁蕩山之巧石，峨眉山之清涼。明代旅行家、地理學(xué)家， 徐霞客兩游黃山，贊嘆說：“登黃山天下無山，觀止矣！”又留“五岳歸來不看山，黃山歸來不看岳”的美譽。更有“天下第一奇山”之稱?？梢哉f無峰不石，無石 不松，無松不奇，并以 奇松、怪石、云海、溫泉 黃山四絕著稱于世。其二湖，三瀑，十六泉，二十四溪相映爭輝。

41、春、夏、秋、冬四季景色各異。黃山還兼有“天然動物園和天下植物園”的美稱，有植物近1500種，動物500多種。 安徽狼牙山 狼牙山坐落在河北省保定市易縣西部的太行山東麓，距縣城45公里，因其奇峰林立，崢嶸.險峻，狀若狼牙而得名。以八路軍五勇士浴血抗擊日寇舍身跳崖而聞名于世。其實，狼牙山還是一座雄險奇?zhèn)ィ吧沱惖拿?。早在兩千年前的?zhàn)國時期，“狼山競秀”就是當(dāng)時燕國十景之一。 醉翁亭 醉翁亭為四大名亭之首，始建于北宋慶歷六年(1046年)，由唐宋八大家之一歐陽修命名并.撰醉翁亭記一文而聞名遐邇。 “滁之山水得歐公之文而愈光”。膾炙人口的佳句“醉翁之意不在酒，在乎山水之間也”更是家戶喻曉。景區(qū)內(nèi)亭

42、、臺、軒風(fēng)格各異，園中有園，景中有景，人稱“醉翁九景”；其中歐陽修手植梅為全國四大梅壽星之一，蘇東坡手書醉翁亭記碑堪稱稀世至寶；醉翁亭被譽為“天下第一亭”。 CSS代碼：#zuo float:left; margin:0 auto; float:left; width:310px; height:1080px;#zuo jd width:310px; height:677px; list-style:none;#jd1 clear:both; width:310px; height:160px; margin-top:9px; background:url(./image/jd.png);#j

43、d1 ul list-style:none; width:310px; height:140px;#jd1 ul li a float:left; width:120px; height:120px; padding-left:10px; padding-top:20px;#jd1 h1 float:right; line-height:20px; width:160px; margin-right:10px; padding-top:10px; border-bottom:1px dashed #666;#jd1 h1 a font-size:16px; color:#0F9;#jd1 ul

44、 li span float:right; font-size:14px; color:#666; line-height:25px; marign-top:50px; height:100px; width:150px; padding-right:20px; overflow:hidden;#jd2 clear:both; width:310px; height:160px; margin-top:9px; background:url(./image/jd.png);#jd2 ul list-style:none; width:310px; height:140px;#jd2 ul li

45、 a float:left; width:120px; height:120px; padding-left:10px; padding-top:20px;#jd2 h1 float:right; line-height:20px; width:160px; margin-right:10px; padding-top:10px; border-bottom:1px dashed #666;#jd2 h1 a font-size:16px; color:#0F9;#jd2 ul li span float:right; font-size:14px; color:#666; line-heig

46、ht:25px; marign-top:50px; height:100px; width:150px; padding-right:20px; overflow:hidden;#jd3 clear:both; width:310px; height:160px; margin-top:9px; margin:9px auto; background:url(./image/jd.png);#jd3 ul list-style:none; width:310px; height:140px;#jd3 ul li a float:left; width:120px; height:120px;

47、padding-left:10px; padding-top:20px;#jd3 h1 float:right; line-height:20px; width:160px; margin-right:10px; padding-top:10px; border-bottom:1px dashed #666;#jd3 h1 a font-size:16px; color:#0F9;#jd3 ul li span float:right; font-size:14px; color:#666; line-height:25px; marign-top:50px; height:100px; width:150px; padding-right:20px; overflow:hidden;#jd4 clear:both; width:310px; height:160px; margin-top:9px; background:url(./image/jd.png);#jd4 ul list-style:none; width:310px; height:140px;#jd4 ul li a float