天津電子信息職業(yè)技術(shù)學(xué)院 暨國家示范性軟件職業(yè)技術(shù)學(xué)院課程設(shè)計(jì)報(bào)告課程名稱： 企業(yè)門戶網(wǎng)頁制作實(shí)訓(xùn) 實(shí)訓(xùn)內(nèi)容： 旅游網(wǎng)站建設(shè)系 別： 軟件技術(shù)系專 業(yè)： 軟件技術(shù)專業(yè)班 級(jí)： 游戲軟

天津電子信息職業(yè)技術(shù)學(xué)院 暨國家示范性軟件職業(yè)技術(shù)學(xué)院

課程設(shè)計(jì)報(bào)告

課程名稱： 企業(yè)門戶網(wǎng)頁制作實(shí)訓(xùn) 實(shí)訓(xùn)內(nèi)容： 旅游網(wǎng)站建設(shè)

系 別： 軟件技術(shù)系

專 業(yè)： 軟件技術(shù)專業(yè)

班 級(jí)： 游戲軟件S10-1班

指導(dǎo)教師： 徐 麗

學(xué)生姓名： 于戰(zhàn)鵬 學(xué)號(hào)： 34

設(shè)計(jì)時(shí)間： 2011年12月19日至2011年12月23日

摘要：

本論文是關(guān)于我個(gè)人網(wǎng)站的設(shè)計(jì), 首先我先從網(wǎng)站設(shè)計(jì)和制作的概念、網(wǎng)站構(gòu)建的整套思路流程出發(fā), 然后通過自己的個(gè)人Web 作品來說明并演示一個(gè)完整的網(wǎng)站制作過程。本論文網(wǎng)頁設(shè)計(jì)有一條主線, 就是說明網(wǎng)站的策劃、設(shè)計(jì)、維護(hù)的全過程。本論文的每一章都是網(wǎng)站建設(shè)的一個(gè)步驟, 理論和實(shí)踐相結(jié)合。既有理論、又有實(shí)例, 把每一章的實(shí)例合在一起, 就構(gòu)成一個(gè)大實(shí)例。

本論文主要分為四個(gè)方面：一、網(wǎng)站策劃、制作的整個(gè)流程的闡述; 二、具體頁面的構(gòu)思和實(shí)現(xiàn)過程、設(shè)計(jì)技巧的靈活使用; 三、自己個(gè)人網(wǎng)頁設(shè)計(jì)作品展示; 四、總結(jié)和回顧。

在個(gè)人Web 作品制作過程方面, 我們小組詳細(xì)用上面的設(shè)計(jì)流程來設(shè)計(jì)自己的個(gè)人主頁, 應(yīng)用了包括：用Dreamweaver 對(duì)網(wǎng)頁進(jìn)行排版、用Fireworks 給圖像" 減肥" 、用Photoshop 做網(wǎng)站標(biāo)志、用Flash 進(jìn)行網(wǎng)頁裝修、用CSS 規(guī)劃網(wǎng)頁色彩。還包含設(shè)計(jì)的關(guān)鍵技巧：內(nèi)容, 頁面設(shè)計(jì), 布局,HTML 格式, 連接, 通則等等。

關(guān)鍵字：網(wǎng)頁三劍客 Photoshop 咪咪旅游網(wǎng)

目錄：

第一章..................................... 前言

第二章..................................... 網(wǎng)站策劃及流程

2.1...................................... 構(gòu)建此網(wǎng)站基礎(chǔ)

2.2...................................... 整體流程圖介紹

第三章..................................... 具體構(gòu)思

3.1...................................... 首頁及導(dǎo)航

3.2...................................... 網(wǎng)站的具體功能

3.3...................................... 網(wǎng)站的整體風(fēng)格

第四章..................................... 個(gè)人作品展示

4.1...................................... 首頁色彩

4.2...................................... 網(wǎng)站LOGO 設(shè)計(jì)

第五章..................................... 總結(jié)

5.1...................................... 心得體會(huì)

第六章...................................... 參考文獻(xiàn)

一、前言：

隨著互聯(lián)網(wǎng)在我國越來越普及，網(wǎng)上購物、網(wǎng)上支付等概念已漸漸成為現(xiàn)實(shí)。不僅如此，旅游借助互聯(lián)網(wǎng)，能夠解決眾多傳統(tǒng)旅游業(yè)不能解決的適應(yīng)游客行、吃、住、游、玩一體化的要求，同時(shí)也由于旅游業(yè)作為一個(gè)整體的商業(yè)生態(tài)鏈，涉及旅行服務(wù)機(jī)構(gòu)、酒店、景區(qū)等等，利用互聯(lián)網(wǎng)可以將這些連成一個(gè)統(tǒng)一的整體，進(jìn)而可以大大提高服務(wù)的水平和業(yè)務(wù)的來源。一方面，互聯(lián)網(wǎng)為傳統(tǒng)旅游業(yè)提的機(jī)遇和運(yùn)作水平的手段，另一方面，為了滿足不同游客對(duì)不同景點(diǎn)及景區(qū)的需求，通過互聯(lián)網(wǎng)也能夠令這些有特殊要求的游客了解更多關(guān)于自己想要知道的景區(qū)特點(diǎn)、環(huán)境、注意事項(xiàng)甚至提前做好開支的預(yù)算。

在個(gè)人Web 作品制作過程方面, 我詳細(xì)用上面的設(shè)計(jì)流程來設(shè)計(jì)自己的個(gè)人主頁, 應(yīng)用了包括：用Dream weaver對(duì)網(wǎng)頁進(jìn)本論文是網(wǎng)站建設(shè), 如果準(zhǔn)備投身網(wǎng)頁制作行業(yè), 就會(huì)知道Dream weaver的大名, 它是一種專業(yè)化的網(wǎng)頁創(chuàng)作工具, 它采用所見即所得編輯方式, 通過特有的行為, 模板, 時(shí)間線等技術(shù), 能夠快速高效地創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁, 使網(wǎng)頁創(chuàng)作過程變的簡單無比。本論文的實(shí)例我就采用Dream weaver來制作網(wǎng)頁的。

首先我先從網(wǎng)站設(shè)計(jì)和制作的概念、網(wǎng)站構(gòu)建的整套思路流程出發(fā), 然后通過自己的個(gè)人Web 作品來說明并演示一個(gè)完整的網(wǎng)站制作過程。本論文網(wǎng)頁設(shè)計(jì)有一條主線, 就是說明設(shè)計(jì)網(wǎng)站的策劃、設(shè)計(jì)、維護(hù)的全過程。本論文的每一章都是網(wǎng)站建設(shè)的一個(gè)步驟, 理論和實(shí)踐相結(jié)合。既有理論、又有實(shí)例。把每一章的實(shí)例合在一起, 就構(gòu)成一個(gè)大實(shí)例。本論文主要分為四個(gè)方面：一、是網(wǎng)站策劃、制作的整個(gè)流程的闡述, 二、是具體頁面的構(gòu)思和實(shí)現(xiàn)過程、設(shè)計(jì)技巧的靈活使用。三、自己個(gè)人網(wǎng)頁設(shè)計(jì)作品展示。四、總結(jié)和回顧。第五部分：參考文獻(xiàn)。

在網(wǎng)頁設(shè)計(jì)的背景和工具介紹方面, 介紹了網(wǎng)頁設(shè)計(jì)的背景和設(shè)計(jì)的開發(fā)工具。目前最流行的制作工具是網(wǎng)頁“三劍客”,即，Dreamweaver ，F(xiàn)ireworks ，F(xiàn)lash 。

在網(wǎng)站流程方面, 主要從設(shè)計(jì)意念、規(guī)劃設(shè)計(jì), 藝術(shù)性處理原則出發(fā), 同時(shí)對(duì)網(wǎng)站總體策劃、網(wǎng)站布局策劃、網(wǎng)站資料的收集、網(wǎng)站目錄結(jié)構(gòu)的規(guī)劃做了說明。

二 、網(wǎng)站策劃及流程

2.1 網(wǎng)站構(gòu)建的基礎(chǔ)

1、建設(shè)網(wǎng)站前的市場分析

隨著中國全面步入小康社會(huì)，中國民眾的生活水平也日益提升。越來越多的民眾在閑暇時(shí)間喜歡這樣或那樣的活動(dòng)來放松自己。而外出旅游就是其中最大的一項(xiàng)活動(dòng)。旅游，根據(jù)時(shí)間的長短以及投入資金的不同，所去的地方也大不相同。

舉一個(gè)例子，北京，作為中華人共和國的首都城市，作為中華民族上下五千年的歷史見證的城市，吸引著眾多國內(nèi)外游客的目光。它有著獨(dú)特的歷史魅力，比如那見證著大清王朝鼎盛至極的清故宮、頤和園等古老建筑。有著見證著中國近代屈辱史的圓明園遺址。有著氣勢(shì)磅礴堪稱中國龍脈的八達(dá)嶺長城和居庸關(guān)長城。不僅如此，在有著濃厚的歷史韻味的同時(shí)它也不缺乏著新時(shí)代城市所具備的青春活力。七九八一條街上的酒吧長廊，是北京夜生活鼎盛的表現(xiàn)。鳥巢、水立方那獨(dú)特的造型凝聚著中國人民的智慧結(jié)晶。王府

井大街眾多品牌專賣店，比起法國巴黎也毫不遜色。如此璀璨的一個(gè)城市，每天國內(nèi)外的游客當(dāng)然接踵而至。那么計(jì)劃去一次北京要如何計(jì)劃呢？時(shí)間長的、不缺少資金的當(dāng)然沒有這個(gè)問題，但是對(duì)于那些短時(shí)間旅游甚至沒有太多資金的游客來說，沒有好好計(jì)劃的一次出游最后一定會(huì)是帶著遺憾而歸的。因此，制定不同的旅游線路并將這些線路對(duì)應(yīng)不同的需求、不同類別的游客是必須得，這也將是我們咪咪旅游網(wǎng)站的一大特色，哪怕一個(gè)景區(qū)，也會(huì)出現(xiàn)至少三種對(duì)應(yīng)不同人群的旅游路線。

再比如，“住”這一方面，全球經(jīng)營一體化使酒店業(yè)客源更加豐富, 市場更加廣闊. 高新科技的進(jìn)步和發(fā)展, 導(dǎo)致人們的社會(huì)關(guān)系, 思想觀念, 生活方式不可避免地處于變化之中. 這就給酒店業(yè)制造了新的競爭載體, 通過網(wǎng)絡(luò)宣傳企業(yè)形象, 開展網(wǎng)上預(yù)訂客房, 讓客人了解酒店的的硬件及軟件設(shè)施, 選擇他們需要的服務(wù), 進(jìn)行遠(yuǎn)程預(yù)訂, 最終為酒店帶來更多的客源. 而酒店與顧客通過網(wǎng)上的交流, 進(jìn)而提供更為人性化個(gè)性化的服務(wù), 這比打價(jià)格戰(zhàn)要高明得多. 高明的競爭是獨(dú)辟蹊徑, 讓人難在摹仿. 在新的競爭條件下, 酒店業(yè)開始探詢?nèi)绾谓⑿聝?yōu)勢(shì)和獲得高于平均水平的利潤率新出路. 顯然, 酒店, 飯店能否上網(wǎng)已經(jīng)成為消費(fèi)者選擇酒店的一項(xiàng)重要內(nèi)容. 酒店上網(wǎng)可以解決諸多人為不能解決的問題, 比如客戶關(guān)系管理, 顧客資料的更新, 分析和統(tǒng)計(jì). 所以，我們旅游網(wǎng)站甚至?xí)⒃摼皡^(qū)周圍的酒店都詳細(xì)的介紹給我們的游客，供他們根據(jù)自己的喜好、需求進(jìn)行挑選。、

2、市場優(yōu)勢(shì)

我們將會(huì)在在許多內(nèi)部管理上都體現(xiàn)出了獨(dú)特的優(yōu)勢(shì)，比如在酒店入住的 這一方面:

（1）讓客人充分了解入住酒店, 建立一個(gè)宣傳平臺(tái), 變被動(dòng)為主動(dòng), 就像當(dāng)初酒店業(yè)者在客房設(shè)立衛(wèi)生間一樣;

（2）優(yōu)先推薦那些已經(jīng)建立酒店CRM 管理系統(tǒng)的酒店, 因?yàn)檫@些酒店能夠更好的進(jìn)行分類, 統(tǒng)計(jì), 整理顧客資料, 甚至提供個(gè)性化服務(wù), 讓客人選擇適合自己的收費(fèi)服務(wù), 如給顧客過生日.

（3）事先對(duì)酒店內(nèi)部進(jìn)行考察, 該酒店是否實(shí)現(xiàn)管理科學(xué)化, 能否及時(shí)準(zhǔn)確地捕捉顧客的需求, 提供相應(yīng)的服務(wù), 比如小酒吧的飲料食品。

（4）能否適時(shí)查看房間動(dòng)態(tài), 及時(shí)準(zhǔn)確的向客人提供服務(wù), 及時(shí)準(zhǔn)確的核算客人的消費(fèi).

（5）因?yàn)槲覀儽旧砭褪菍W(xué)生群體，所以對(duì)學(xué)生群體出游所設(shè)計(jì)的旅游路線一定會(huì)是性價(jià)比相當(dāng)高的路線，相對(duì)于其他旅游網(wǎng)站，我們的經(jīng)濟(jì)型路線一定會(huì)是含金量最高的線路，讓大家花最少的錢玩最開心的。

綜上所述，一個(gè)關(guān)于旅游的網(wǎng)站建設(shè)出現(xiàn)在我們腦海中。

2.2 整體流程圖的介紹

流程圖解說：

首先是扉頁部分，吸引游客的目光。 導(dǎo)航中分別表述幾個(gè)板塊：

（1）首頁：介紹全國各景點(diǎn)新動(dòng)態(tài)及熱門旅游路線

提供最新的旅游線路，會(huì)員登錄, 暢銷線路排行。 （2）天津市：介紹天津著名景點(diǎn)及風(fēng)味小吃。

（3）河北?。褐攸c(diǎn)介紹河北全省境內(nèi)著名旅游之處，并可以提

前定購車票。

（4）河南?。悍謩e將重點(diǎn)介紹洛陽及開封兩座古城。 （5）安徽省：重點(diǎn)有合肥和阜陽倆地的風(fēng)土人情。 （6）江蘇?。簱P(yáng)州、蘇州兩座南方美地。 （7）新 疆：邊域的風(fēng)土人情。

（8）關(guān)于我們：我組設(shè)計(jì)人員的信息。

三、具體構(gòu)思 3.1 首頁及導(dǎo)航

（一）首頁設(shè)計(jì)

頁頭:準(zhǔn)確無誤的標(biāo)識(shí)咪咪旅游站點(diǎn)網(wǎng)站和標(biāo)志。

頁面:應(yīng)是各大欄目導(dǎo)航, 最新推薦地區(qū)景點(diǎn)展示, 最新供應(yīng), 求購, 代理, 合作信息, 最新加入會(huì)員, 最新行業(yè)資訊。

（二）導(dǎo)航設(shè)計(jì)

導(dǎo)航系統(tǒng)是有效連接網(wǎng)站各處的工具, 它有效的分類網(wǎng)站內(nèi)容并指向它所代表的內(nèi)容. 是通過超文本鏈接或圖片鏈接, 使瀏覽者能夠在網(wǎng)站上自由前進(jìn)或后退, 而不會(huì)讓瀏覽者使用瀏覽器上的前進(jìn)或后退.

6、咪咪旅游網(wǎng)站導(dǎo)航項(xiàng)目：

⊙首頁

①網(wǎng)站簡介

②發(fā)展歷程

⊙省市推薦

主要為大部分人群推薦幾個(gè)不錯(cuò)的省市，分別為河南省、河北省、天津市、安徽省、江蘇省以及新疆這些地區(qū)的重點(diǎn)景區(qū)和推薦旅游路線。進(jìn)行景區(qū)展示, 對(duì)感興趣的人可以跟網(wǎng)站服務(wù)人員進(jìn)行聯(lián)系。

⊙關(guān)于我們

主要公布網(wǎng)站建設(shè)及維護(hù)者的個(gè)人信息。

3.2 網(wǎng)站具體功能

（一）首頁：

前臺(tái)實(shí)現(xiàn)功能

（1） 新用戶注冊(cè)

（2） 密碼修改功能

（3） 特色游

（4） 網(wǎng)站的最新動(dòng)態(tài)

（5） 游記攻略

（二）次頁：

將會(huì)依次介紹幾個(gè)重點(diǎn)旅游省份的特色景點(diǎn)，游記攻略，酒店預(yù)訂功能以及特色旅游線路查詢。

3.3 網(wǎng)站的整體風(fēng)格

網(wǎng)站定位：

一、地區(qū)性：此網(wǎng)站面向中國全體互聯(lián)網(wǎng)網(wǎng)民

二、權(quán)威性：及時(shí)更新，并親自對(duì)網(wǎng)站上所表述景區(qū)、景點(diǎn)進(jìn)行定位分析，務(wù)必確保網(wǎng)站所寫的內(nèi)容準(zhǔn)確、真實(shí)。

三、網(wǎng)站風(fēng)格：以大眾化為主，爭取適合全部中國網(wǎng)民瀏覽，功能上一大眾化方式進(jìn)行操作頁面設(shè)計(jì)在適應(yīng)大眾化的特色同時(shí)加以我們自己的特色。 網(wǎng)站設(shè)計(jì)

網(wǎng)頁設(shè)計(jì)作為一種視覺語言, 特別講究編排和布局, 雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì), 但它們有許多相近之處. 版式設(shè)計(jì)通過文字圖形的空間組合, 表達(dá)出和諧之美.

多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來, 特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系. 為了達(dá)到最佳的視覺表現(xiàn)效果, 設(shè)計(jì)時(shí)考慮到整體布局的合理性, 使瀏覽者有一個(gè)流暢的視覺體驗(yàn).

制作咪咪旅游網(wǎng)站時(shí)應(yīng)做到以下幾點(diǎn):、

第一, 網(wǎng)站的主頁應(yīng)能夠給游客們比較強(qiáng)烈和突出的印象, 要突出咪咪旅游的特點(diǎn)和風(fēng)格。

第二, 網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)合理, 層次清楚.

為了將豐富的含義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu), 形式, 語言必須符合頁面的內(nèi)容. 靈活運(yùn)用各種手段, 通過空間, 文字, 圖形之間的相互關(guān)系建立整體的均衡狀態(tài), 產(chǎn)生和諧的美感. 點(diǎn), 線, 面相結(jié)合, 充分表達(dá)完美的設(shè)計(jì)意境, 使顧客可以從主頁得知自己應(yīng)查的方向.

第三, 網(wǎng)頁內(nèi)容應(yīng)全面, 盡量涵蓋普遍游客所需的信息.

第四, 頁面的鏈接應(yīng)方便瀏覽, 傳輸速度和圖片的下載的速度快, 應(yīng)注意避免死鏈接, 調(diào)不出圖形等情況存在.

網(wǎng)站的頁面設(shè)計(jì)：采用綠色、天藍(lán)色紅色為基調(diào)，突出網(wǎng)站的青春活力性，并給人以自然清新的氣息感覺。網(wǎng)站首頁的風(fēng)格盡量簡單統(tǒng)一，讓大多數(shù)上網(wǎng)者易于接受，清晰明了的布局會(huì)更加使人記住我們的網(wǎng)站。

網(wǎng)站制作技術(shù)：以先進(jìn)的Javascript 、Flash 、Firework 等工具進(jìn)行開發(fā)。

網(wǎng)站內(nèi)容開發(fā)：網(wǎng)站內(nèi)容生動(dòng)活潑，簡明扼要，方便快速瀏覽，具有旅游潮流的風(fēng)格，我們將采用流行的CSS 、FLASH 、Javascript 等進(jìn)行網(wǎng)站的靜態(tài)和動(dòng)態(tài)頁面設(shè)計(jì)，動(dòng)態(tài)的按鈕，活動(dòng)的小圖標(biāo)，優(yōu)美協(xié)調(diào)的色彩分配將會(huì)給瀏覽者留下難忘的印象，以此來增加瀏覽量和點(diǎn)擊率。

四、個(gè)人作品展示

4.1 首頁及網(wǎng)站的整體色彩

采用綠色、天藍(lán)色紅色為基調(diào)，突出網(wǎng)站的青春活力性，并給人以自然清新的氣息感覺。網(wǎng)站首頁的風(fēng)格盡量簡單統(tǒng)一，讓大多數(shù)上網(wǎng)者易于接受，清晰明了的布局會(huì)更加使人記住我們的網(wǎng)站。

網(wǎng)站內(nèi)容生動(dòng)活潑，簡明扼要，方便快速瀏覽，具有旅游潮流的風(fēng)格，我們將采用流行的CSS 、FLASH 、Javascript 等進(jìn)行網(wǎng)站的靜態(tài)和動(dòng)態(tài)頁面設(shè)計(jì)，動(dòng)態(tài)的按鈕，活動(dòng)的小圖標(biāo)，優(yōu)美協(xié)調(diào)的色彩分配將會(huì)給瀏覽者留下難忘的印象，以此來增加瀏覽量和點(diǎn)擊率。

4.2 網(wǎng)站LOGO 設(shè)計(jì)

在我們小組里，我主要負(fù)責(zé)的就是網(wǎng)站美工及一些文字編輯，而網(wǎng)站美工中最重要的就是設(shè)計(jì)網(wǎng)站LOGO 標(biāo)志，上圖就是我所設(shè)計(jì)的網(wǎng)站LOGO 標(biāo)志。我所選用的色彩是草綠色和暖橙色為主體的顏色，草綠色的咪字給人以清新而富有活力的感覺，讓經(jīng)常在辦公室伏案工作的人們產(chǎn)生輕松的感覺，令他們加大對(duì)大自然的親近之情，而后三個(gè)字采用暖紅色則是希望帶給他們一種家的溫馨的感覺，好讓他們對(duì)我們的網(wǎng)站有著一種溫馨的感覺，再下次需要旅游這方面的咨詢的時(shí)候能夠馬上在腦海中浮現(xiàn)出我們咪咪的身影。

五、總結(jié)

5.1 心得體會(huì)

以前我雖然也做過做網(wǎng)頁，不過是在博客上，那里提供了摸板，只需要自己在里面添舔改改就行了，對(duì)一些代碼我在上課之前更本就看不懂，現(xiàn)在好了，雖然我不是很會(huì)，但是可以看懂一些了，也能改一些代碼了。盡管如此，但是我的編寫代碼水平還是不如我們小組的其他同學(xué)，所以我主要還是負(fù)責(zé)美工以及文本編輯這方面的工作，通過這次小組合作我更知道了個(gè)人的力量永遠(yuǎn)是渺小的，如果沒有小組其他成員的協(xié)助，我也不可能完成這次的實(shí)訓(xùn)的作業(yè)，所以，在今后的學(xué)習(xí)生活中我會(huì)努力提升自己，積極配合其他同學(xué)，大家共同進(jìn)步。

六、參考文獻(xiàn)

1、胡崧．最新html&css標(biāo)準(zhǔn)教程[M]．北京：中國青年出版社，2007

2、傅連仲. 網(wǎng)頁設(shè)計(jì)與制作教程. 北京：清華大學(xué)出版社,2007

3、慶秋輝. 網(wǎng)頁制作教程與上機(jī)實(shí)訓(xùn). 北京：機(jī)械工業(yè)出版社,2008

4、于筱荔、姜巧玲. 網(wǎng)頁設(shè)計(jì)與制作. 北京：人民郵電出版社,2008