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

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

2、</p><p>　　學(xué) 號(hào) </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 簡(jiǎn)述…………………………………………………………………（5）</p><p>　　1.2 什么是網(wǎng)頁(yè)設(shè)計(jì)……………………………………………………（5）</p><p>　　1.3 課題來源……………………………………………………………（5）</p><p>　　第二章 素材的選擇及采集………………

5、…………………………………（7）</p><p>　　2.1 設(shè)計(jì)的選題…………………………………………………………（7）</p><p>　　2.2 材料的采集…………………………………………………………（7）</p><p>　　第三章 網(wǎng)頁(yè)的結(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)頁(yè)制作過程 ……………………………………………………（18）</p>&

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

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

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

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

11、mweaver為工具，Dreamweaver是美國(guó)MACROMEDIA公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。是唯一提供視覺化編輯與原代碼編輯同步的設(shè)計(jì)工具。</p><p>　　關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) 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　簡(jiǎn)述</b></p><p>　　在信息技術(shù)飛速發(fā)展的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網(wǎng)頁(yè)，所以網(wǎng)頁(yè)設(shè)計(jì)尤為重要。互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞

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

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

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

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

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

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

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

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

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

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

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

31、<p>　　③③可以任意選擇你想要將文件存儲(chǔ)在服務(wù)器上的位置，方法同上一步本地根目錄的建立相同。</p><p>　?、苓x擇默認(rèn)的狀態(tài)即可。</p><p>　　完成后，回到站點(diǎn)窗口，就可以看到如下類似的畫面</p><p>　　可以看到，“我的網(wǎng)站”的名稱已經(jīng)出現(xiàn)在站點(diǎn)窗口了，因?yàn)槭切陆ǖ囊粋€(gè)站點(diǎn)，所在在本地目錄看到的一片空白?！　≌军c(diǎn)定義完畢之后，

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

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

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

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

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

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

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

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

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

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

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

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