酒店預(yù)訂網(wǎng)站設(shè)計畢業(yè)論文

1、<p>　　編號 </p><p>　　畢 業(yè) 論 文（設(shè)計）</p><p>　　論文題目 以《酒店預(yù)定》為例的網(wǎng)頁設(shè)計</p><p>　　系（部）計算機與信息工程系</p><p>　　專 業(yè) 計算機教育 </p><p>　　班 級 計應(yīng)0901班

2、</p><p>　　學(xué) 號 </p><p>　　學(xué)生姓名 </p><p>　　指導(dǎo)教師 xx </p><p>　　職 稱 </p><p><b>　　2012年5月</b>

3、</p><p><b>　　目 錄</b></p><p>　　摘要……………………………………………………………………………（3）</p><p>　　Abstract………………………………………………………………………（4）</p><p>　　第一章 引言………………………………………………………………

4、…（5）</p><p>　　1.1 簡述…………………………………………………………………（5）</p><p>　　1.2 什么是網(wǎng)頁設(shè)計……………………………………………………（5）</p><p>　　1.3 課題來源……………………………………………………………（5）</p><p>　　第二章 素材的選擇及采集………………

5、…………………………………（7）</p><p>　　2.1 設(shè)計的選題…………………………………………………………（7）</p><p>　　2.2 材料的采集…………………………………………………………（7）</p><p>　　第三章 網(wǎng)頁的結(jié)構(gòu)圖 ……………………………………………………（10）</p><p>　　第四章 制

6、作前的準(zhǔn)備工作 ………………………………………………（11）</p><p>　　4.1 定義的方法 ………………………………………………………（11）</p><p>　　4.2 基本設(shè)置 …………………………………………………………（12）</p><p>　　第五章 網(wǎng)頁制作過程 ……………………………………………………（18）</p>&

7、lt;p>　　5.1 網(wǎng)頁首頁框架的制作 ……………………………………………（18）</p><p>　　5.2 部分子網(wǎng)頁展示 …………………………………………………（19）</p><p>　　5.3 建立超鏈接 ………………………………………………………（24）</p><p>　　5.4 檢查整個網(wǎng)頁 ……………………………………………………（

8、25）</p><p>　　第六章 結(jié)束語……………………………………………………………（27）</p><p>　　致謝…………………………………………………………………………（29）</p><p>　　參考文獻………………………………………………………………………（30）</p><p><b>　　摘 要</b>

9、;</p><p>　　在信息技術(shù)飛速發(fā)展的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。網(wǎng)頁設(shè)計伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。網(wǎng)頁講究的是排版布局，其功能主要就是提供一種形式給每個上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。而吸引瀏覽用戶的則是視覺效果出色、

10、信息量豐富、使用起來便捷的網(wǎng)頁，所以網(wǎng)頁設(shè)計尤為重要。本文從網(wǎng)頁設(shè)計的角度出發(fā)，介紹一些設(shè)計中要素和技巧，例如框架、層布局、網(wǎng)頁特效的運用等。</p><p>　　本文以網(wǎng)頁設(shè)計為開發(fā)過程，合理利用中各種圖標(biāo)的功能進行整個網(wǎng)頁的設(shè)計，并以北京好訂網(wǎng)（酒店預(yù)定）為例，將酒店預(yù)定功能具體運用到設(shè)計中去，另外本文簡單介紹了網(wǎng)頁設(shè)計發(fā)展的背景及它們的主要功能。</p><p>　　本設(shè)計以Drea

11、mweaver為工具，Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。是唯一提供視覺化編輯與原代碼編輯同步的設(shè)計工具。</p><p>　　關(guān)鍵詞：網(wǎng)頁設(shè)計 Dreamweaver 視覺化編輯 原代碼編輯</p&

12、gt;<p><b>　　Abstract</b></p><p>　　In the rapid development of information technology today, the way people get information from the Internet, the Internet is more becomes people quickly ge

13、t, release and transmit information important channel, it in people politics, economy, life aspects played an important role. Web design with the rapid development of network and rapid rise, as the main rely on, because

14、people use the Internet frequent and become very important. Web cultured is typesetting layout, its main function is to provid</p><p>　　Based on web design for the development process, reasonable use of vari

15、ous icon of function, the design of the entire page in primary school Chinese text "the alamo" as an example, the function of the specific application to design, in addition the paper simply introduces the deve

16、lopment of web page design background and their major functions. </p><p>　　This design to Dreamweaver for tools, Dreamweaver is the MACROMEDIA company development collection webpage making and management web

17、site at a suit wysiwyg page editor, it is the first set of aimed at professional web designer specific development visualization web development tool, using it can easily produce cross platform limit and across browsers

18、limit dynamic web pages. Is the only provide Roundtrip HTML editor, visualizations with the original code editor synchronization design tools. </p><p>　　Keywords: web design Dreamweaver visualization edit th

19、e original code editor </p><p>　　第一章 引言</p><p><b>　　1.1　簡述</b></p><p>　　在信息技術(shù)飛速發(fā)展的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網(wǎng)頁，所以網(wǎng)頁設(shè)計尤為重要。互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞

20、信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。網(wǎng)頁設(shè)計伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。Dreamweaver是由Macromedia公司開發(fā)的一款所見即所得的網(wǎng)頁編輯器。和二維動畫設(shè)計軟件FLASH，專業(yè)網(wǎng)頁圖像設(shè)計軟件FIREWORKS，并稱為“網(wǎng)頁三劍客”, 它是在網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強大的軟件，它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點管

21、理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計、開發(fā)、制作的首選工具。</p><p>　　1.2 什么是網(wǎng)頁設(shè)計</p><p>　　網(wǎng)頁設(shè)計就是根據(jù)行業(yè)不同需求不同，設(shè)計客戶網(wǎng)站樣式，是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)

22、”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口</p><p>　　1.3 課題來源 </p><p>　　在信息技術(shù)飛速發(fā)展的今天互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。網(wǎng)頁設(shè)計伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。Dream

23、weaver是唯一提供視覺化編輯與原始碼編輯同步的設(shè)計工具。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進行版面配置。所見即所得 Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusi

24、on，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。綜合以上Dreamweaver的優(yōu)點，我以工作過程中所做的《北京酒店預(yù)定》為例，具體運用Dreamweaver的其中一些功能，制作了本畢業(yè)設(shè)計。</p><p>　　第二章 素材的選擇及采集 </p><p><b>　　

25、2.1　設(shè)計的選題</b></p><p>　　選題是十分重要的一個步驟，一個積極向上的課題十分必要，這樣在展示了所掌握專業(yè)的知識的同時，也同時影響著我們的人生觀和價值觀。因此我選擇了小學(xué)五年級的語文課本上的一篇課文《白楊》，白楊樹從來就這么直。哪兒需要它，它就在哪兒很快地生根發(fā)芽，長出粗壯的枝干。不管遇到風(fēng)沙還是雨雪，不管遇到干旱還是洪水，它總是那么直，那么堅強，不軟弱，也不動搖。希望在展示作品的同

26、時，能夠?qū)θ藗儺a(chǎn)生一定的積極影響。</p><p><b>　　材料的采集</b></p><p>　　上網(wǎng)搜集了制作網(wǎng)頁時所需要的白楊樹的圖片以及戈壁灘的圖片，并用圖像處理軟件加以處理，得到合適的圖片素材。</p><p>　　白楊總是那么直 這幅圖 展示了白楊的直的特點</p><p>　　這幅圖則顯示了白楊生

27、長的戈壁灘惡劣的環(huán)境</p><p>　　另外運用網(wǎng)頁設(shè)計的功能，以及設(shè)計的需要，我篩選了聲音素材，在設(shè)計中在代碼編輯窗口添加了聲音，使得網(wǎng)頁聲貌俱全。</p><p>　　下面是在設(shè)計過程中通過代碼窗口插入背景音樂。</p><p>　　切換至代碼窗口，在網(wǎng)頁中添加背景音樂</p><p>　　第三章　 網(wǎng)頁的結(jié)構(gòu)圖</p>

28、<p>　　第四章　 制作前的準(zhǔn)備工作</p><p>　　在正式開始制作網(wǎng)頁之前，最好先定義一個新網(wǎng)站，這是為了更好地利用站點窗口對站點文件進行管理。</p><p>　　4.1 定義的方法</p><p>　　方法一：在站點窗口下拉菜單選最后一項管理站點，如下圖</p><p>　　此時會彈出一個新的對話框，點擊“新建”

29、按鈕就可以定義一個新網(wǎng)站，如果日后需要對舊網(wǎng)站重新定義，可以在左邊的網(wǎng)站列表中選中你需要重新定義的網(wǎng)站，然后點擊“編輯”即可。</p><p>　　方法二：選擇菜單“站點”——“新建站點”選項。（如圖所示）</p><p><b>　　基本設(shè)置</b></p><p>　　在接著看到的對話框中，要進行以下簡單的設(shè)置：</p>&l

30、t;p>　?、?網(wǎng)站名稱：為你的網(wǎng)站起一個名字，這個名字只起著識別的作用，與網(wǎng)站發(fā)布后真實的名字無關(guān)，例如這里的名字是：“我的網(wǎng)站”，而實際上我的網(wǎng)站叫“白楊”；</p><p>　　如果不需要什么特殊的服務(wù)器技術(shù)，就選“否”這項。</p><p>　?、诒镜馗夸洠涸O(shè)置網(wǎng)站在本地硬盤的位置，點擊后面的文件夾圖標(biāo)可以選擇硬盤的任意目錄作為存放網(wǎng)站文件的目錄； </p>

31、<p>　?、邰劭梢匀我膺x擇你想要將文件存儲在服務(wù)器上的位置，方法同上一步本地根目錄的建立相同。</p><p>　?、苓x擇默認(rèn)的狀態(tài)即可。</p><p>　　完成后，回到站點窗口，就可以看到如下類似的畫面</p><p>　　可以看到，“我的網(wǎng)站”的名稱已經(jīng)出現(xiàn)在站點窗口了，因為是新建的一個站點，所在在本地目錄看到的一片空白。　　站點定義完畢之后，

32、就可以正式制作屬于你自己的網(wǎng)頁了。</p><p>　　第五章　 網(wǎng)頁制作過程</p><p>　　5.1 網(wǎng)頁首頁框架的制作</p><p>　　要制作一個完整的網(wǎng)頁，不僅要取材到位，還要合理排版。將網(wǎng)頁的的所有功能發(fā)揮到最佳。網(wǎng)頁的大致框架如下圖：</p><p>　　課文背景是灰色，采用黑色字體，運用色彩的搭配，使得課文清晰呈現(xiàn)&l

33、t;/p><p>　　總的框架內(nèi)容包括了課題課文、白楊樹圖片、戈壁灘、課文重點詞句、本課生詞、課后鞏固、課后作業(yè)以及設(shè)計者簡介。在設(shè)計的同時要顧及到課題的實用性，使得欣賞的同時取得積極的影像效果。</p><p>　　從這個主頁面可以進入其下的各個子網(wǎng)頁。</p><p>　　5.2 部分子網(wǎng)頁展示</p><p>　　kehougonggu.

34、html 在此網(wǎng)頁制作中，我運用了特點是其中包含了滾動的文字 鼠標(biāo)移到文字上，文字停止?jié)L動，鼠標(biāo)移開，文字繼續(xù)滾動，此特效在代碼窗口即可實現(xiàn)，代碼如下圖所示：</p><p>　　shengci.html 在此網(wǎng)頁中制作了沿曲線路徑移動的動畫</p><p>　　制作方法：窗口———時間軸 調(diào)出時間軸面板，將所要移動的層拖至?xí)r間軸面板內(nèi)，然后點擊修改——時間軸——錄制層路徑，鼠標(biāo)拖動

35、層任意移動。</p><p>　　zuoye.html 在此網(wǎng)頁中，了表單包括文本域、下拉列表框、復(fù)選框，所有都可以通過表單工具欄中的圖標(biāo)實現(xiàn)，如圖</p><p>　　以單選按鈕為例點擊表單中 單選按鈕圖標(biāo)，彈出單選按鈕對話框如圖：</p><p>　　名稱填默認(rèn)即可，標(biāo)簽屬性中填寫單選的內(nèi)容，值屬性中填不同的數(shù)值，如第一行填0，第二行填1等，點擊確定即可，其他表

36、單類似設(shè)置。</p><p>　　ziwojianjie.html此網(wǎng)頁中制作了個拼圖 運用了行為面板的一些行為如拖動層、顯示-隱藏層等。</p><p>　　在工作區(qū)右邊標(biāo)簽檢查器中行為中設(shè)置點擊，彈出行為對話框，如下圖：</p><p>　　選擇顯示——隱藏層，彈出如下圖對話框：</p><p>　　選中所要隱藏或者顯示的層，然后點擊隱

37、藏或者顯示即可。</p><p><b>　　建立超鏈接</b></p><p>　　超級鏈接（Link），簡稱鏈接，是頁面與頁面之間一個單向的關(guān)聯(lián)關(guān)系。通過點擊鏈接，我們可以從一個頁面跳到另一個頁面。我們可以在文字、圖片建立鏈接。本文主要以文字建立超鏈接。</p><p>　　在頁面中選取需要建立鏈接的文字，如下9圖：</p>

38、<p>　　在屬性面板的連接（Link）一項，填寫鏈接地址，當(dāng)瀏覽者點擊該鏈接的時候，瀏覽器就回跳轉(zhuǎn)到該頁面，例如這里填寫的是baiyangtu.html</p><p><b>　　關(guān)于鏈接的提示</b></p><p>　　1、如果要鏈接到一個E-mail地址，則在“鏈接”處填寫：“mailto:地址”，例如mailto:dnkt@tenglong.ne

39、t，那么點擊該鏈接的時候，就回打開默認(rèn)的E-mail程序，例如Outlook，發(fā)送E-mail到dnkt@tenglong.net這個地址。　　2、如果鏈接到瀏覽器無法打開的文件，例如exe、Zip等文件，那么瀏覽者在點擊這個鏈接的時候，就會彈出對話框，詢問是將文件保存到硬盤的什么地方，這就實現(xiàn)了文件下載的功能</p><p><b>　　檢查整個網(wǎng)頁</b></p>&l

40、t;p>　　整個網(wǎng)頁制作完成后，進行最后的檢查，從主頁點擊進入各個網(wǎng)頁，仔細(xì)觀察并檢查是否完善。</p><p>　　第六章 結(jié)束語</p><p>　　制作的整體效果如圖所示：</p><p>　　在做畢業(yè)設(shè)計的近幾個月時間是我學(xué)生生涯中最有價值的一段時光。這里有治學(xué)嚴(yán)謹(jǐn)而不失親切的老師，有互相幫助的同學(xué)，更有向上、融洽的學(xué)習(xí)生活氛圍。借此論文之際，

41、我想向所有人表示我的謝意。</p><p>　　首先感謝老師。本論文是在老師的指導(dǎo)下修改完成的。在此，要對他們的細(xì)心幫助和指導(dǎo)表示由衷的感謝。在這段時間里，我從他們身上不僅學(xué)到了許多的專業(yè)知識，更感受到了他們工作中的兢兢業(yè)業(yè)，生活中的平易近人。此外，他們嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度和忘我的工作精神值得我去學(xué)習(xí)。</p><p>　　非常感謝我的同學(xué)，畢業(yè)設(shè)計中，他的指導(dǎo)給予了我極大的幫助，使我對整個畢業(yè)

42、設(shè)計的思路有了總體的把握，并耐心的幫我解決了許多實際問題，使我有了很大收獲。</p><p>　　感謝我的朋友們，過程中提出了許多建設(shè)性意見，并給我解決了一些專業(yè)性問題。</p><p>　　感謝三年來傳授我知識的老師們，更要感謝我的家人對我學(xué)業(yè)上的支持和鼓勵，感謝所有關(guān)心幫助過我的人。同時感謝大學(xué)，感謝焦作師專。</p><p>　　總之，在以后的學(xué)習(xí)生活中我將以

43、加倍的努力作為對給予我?guī)椭膶W(xué)校、老師及同學(xué)們的回報。</p><p><b>　　致謝</b></p><p>　　最后，感謝在制作這篇論文中所應(yīng)用到的網(wǎng)絡(luò)中提供的素材，還有那些幫助我的同學(xué)們以及指導(dǎo)老師提供的意見。 </p><p><b>　　參考文獻：</b></p><p>　　[1]《D