飲食網(wǎng)站設(shè)計網(wǎng)絡(luò)工程專業(yè)

《飲食網(wǎng)站設(shè)計網(wǎng)絡(luò)工程專業(yè)》由會員分享，可在線閱讀，更多相關(guān)《飲食網(wǎng)站設(shè)計網(wǎng)絡(luò)工程專業(yè)（9頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、 飲食網(wǎng)站設(shè)計 摘 要：本論文主要介紹了一個飲食網(wǎng)站的設(shè)計開發(fā)過程。利用Dreamweaver網(wǎng)頁制作軟件及Photoshop和Flash這些圖像制作軟件實現(xiàn)，其中主要應(yīng)用了ODBC對象操縱數(shù)據(jù)庫的技術(shù)手段，分別介紹了創(chuàng)建飲食網(wǎng)站的前期分析，網(wǎng)站的設(shè)計理念，動態(tài)站點的設(shè)置，電子郵件的鏈接，數(shù)據(jù)庫的鏈接，用戶的登錄和留言界面。本文所設(shè)計的飲食網(wǎng)站可以滿足用戶瀏覽和留言兩方面的需求。第一章主要是對Dreamweaver的發(fā)展做了介紹，并說明了Dreamweaver的運(yùn)行環(huán)境以及Dreamweaver在網(wǎng)絡(luò)中占有很重要的作用。第二章對飲食網(wǎng)站的前期分析進(jìn)行了總結(jié)，介紹了用戶需求及該網(wǎng)站實現(xiàn)的

2、功能。第三章進(jìn)行了具體的設(shè)計步驟，具體劃分了用戶瀏覽和用戶登錄兩個界面。實現(xiàn)了用戶的注冊、登錄、留言和瀏覽，并靈活實現(xiàn)了對留言板中新加記錄的更新操作，實現(xiàn)了密碼維護(hù)功能。使用了電子郵件鏈接技術(shù)。設(shè)計充分利用關(guān)系數(shù)據(jù)庫技術(shù)的強(qiáng)大力量，提高了網(wǎng)站的可讀性和技術(shù)性。 關(guān)鍵詞：數(shù)據(jù)庫；IIS；ODBC；動態(tài)站點；飲食與健康 目 錄 摘要 第一章 前言 1.1 Dreamweaver的發(fā)展 1.2 Dreamweaver的運(yùn)行環(huán)境 1.3 Dreamweaver的基本知識

3、 第二章 飲食網(wǎng)站的分析 2.1 項目的提出 2.2 用戶需求 2.3 功能需求 2.4 資料搜集 第三章 飲食網(wǎng)站的設(shè)計 3.1 動態(tài)網(wǎng)站的設(shè)計 3.2 用戶瀏覽界面的實現(xiàn) 3.3 用戶注冊、登錄、留言界面功能的實現(xiàn)及ODBC數(shù)據(jù)源的設(shè)置 3.4 電子郵件功能的實現(xiàn) 3.5 IIS默認(rèn)站點的設(shè)置 第四章 網(wǎng)站評價 第五章 小結(jié) 參考文獻(xiàn) 第一章 前 言 1.1 Dreamweaver的發(fā)展 作為一種新興的信息技術(shù)，互聯(lián)網(wǎng)正以前所未有的沖擊力影響著人類的生活，它的出現(xiàn)和發(fā)展，正慢慢地改變著人們的生活方式，互

4、聯(lián)網(wǎng)也因此成為目前比較熱門的一個話題，它具有強(qiáng)大的影響力。 網(wǎng)頁與網(wǎng)站是構(gòu)成互聯(lián)網(wǎng)的細(xì)胞，提起網(wǎng)頁設(shè)計與制作，我們自然會想到Dreamweaver，這是最優(yōu)秀一款可視化網(wǎng)頁制作與網(wǎng)站建設(shè)軟件，它不會降低對HTML原始檔的控制，不必學(xué)習(xí)HTML語法，就能在Dreamweaver中直接網(wǎng)頁并且把網(wǎng)頁上傳。另外，它還提供了許多新技術(shù)，如提供的DHTML編輯技術(shù)與JavaScript動作庫、支持JavaScript編輯技術(shù)、XML技術(shù)等，特別是整合了Dreamweaver到UltraDev以來，其功能不斷加強(qiáng)，可以支持ASP、ASP.NET、ColdFusion標(biāo)記語言（CFML）、JSP和PHP支

5、持，生成由動態(tài)數(shù)據(jù)庫支持的Web應(yīng)用程序等。 1.2 Dreamweaver的運(yùn)行環(huán)境 任何一款軟件都有其特殊的安裝與運(yùn)行環(huán)境，要在計算機(jī)中安裝與運(yùn)行Dreamweaver MX 2004，必須具備以下硬件和軟件環(huán)境： n Pentium II處理器或等效處理器，300MHz或以上主頻。 n Windows 98、Windows 2000、Windows NT（具有Sevice Pack 3或更高版本）、Windows ME或Windows XP操作系統(tǒng)。 n 96MB的可用內(nèi)存（RAM），建議采用128MB內(nèi)存。 n 275MB的可用磁盤空間。 n 分辨率可達(dá)800×600像素

6、的256色顯示器。 n CD-ROM驅(qū)動器。 Dreamweaver MX 2004可以完全自定義工作環(huán)境，用戶可以通過創(chuàng)建自己的對象和命令、修改鍵盤快捷方式、編寫JavaScript代碼，以及使用新的屬性檢查器和站點報告來擴(kuò)展Dreamweaver的功能。 1.3 Dreamweaver的基礎(chǔ)知識 在 Dreamweaver MX中，站點這個術(shù)語可以指 Web 站點，也可以指用來儲存屬于 Web 站點文檔的本地硬盤上的文件夾。當(dāng)開始考慮創(chuàng)建 Web 站點時，應(yīng)該按照一系列的規(guī)劃步驟進(jìn)行，才能確保成功地使用站點。設(shè)置站點的常規(guī)做法是：在本地磁盤上創(chuàng)建一個包含站點所有文件的文件夾（稱

7、作本地站點），然后在該文件夾中創(chuàng)建和編輯文檔。當(dāng)準(zhǔn)備好發(fā)布站點并允許公眾查看時，再將這些文件拷貝到 Web 服務(wù)器上。 在Dreamweaver程序中用戶可以對一系列不同類型的對象進(jìn)行命名，這些對象包括圖片、層、表單、文件、數(shù)據(jù)庫域等，這些對象將會被許多不同的工作引擎進(jìn)行分析處理，這些工具包括各種瀏覽器、JavaScript腳本解析器、網(wǎng)絡(luò)服務(wù)器、應(yīng)用程序服務(wù)器、查詢語言等等。 第二章 飲食網(wǎng)站的分析 2.1項目的提出 當(dāng)今社會是知識飛速發(fā)展的信息時代。人民在生活水平不斷提高的同時，不但注重物質(zhì)文明和精神文明的發(fā)展，同時向傳統(tǒng)的飲食習(xí)慣發(fā)起了新的挑戰(zhàn)。所謂民以食為天，現(xiàn)如今的人們越來越

8、注重飲食給自己帶來的影響，也有越來越多的人肯在飲食方面下功夫，來尋找一種真正適合自己的餐飲策略。這就需要我們做出一個關(guān)于餐飲業(yè)方面的網(wǎng)站，供大家來一起來欣賞與互動。利用飲食網(wǎng)站的方法，不但可以讓人們在第一時間內(nèi)瀏覽到最時尚的新式菜肴，還可以采取互動方式讓大家的興趣得到滿足。 飲食網(wǎng)站作為一種飲食信息資源的集散地，圖片和資料繁多，包含很多的飲食方法和飲食策略，如今，有很多的健康飲食方法不為人們所知，并且健康的飲食方法對人類的身體是絕對有益的。有研究證明，人的壽命與他的飲食習(xí)慣有著密切的關(guān)系。當(dāng)人們要想發(fā)表自己的意見時，往往會局限于很少的人際關(guān)系。那么，創(chuàng)建一個飲食網(wǎng)站，在這里向人們介紹各種菜式

9、，各種不同的烹飪方法及不同時間該吃什么樣的食物，并且，開辟出一個留言板塊，讓喜愛飲食健康的人們在這里暢所欲言，這對于有飲食健康概念的用戶來說，無疑是一種最美妙的方法。 2.2 用戶的需求 飲食網(wǎng)站主要是向用戶提供瀏覽和留言功能。所謂瀏覽，就是用戶可以通過在IE瀏覽器中的地址欄中輸入網(wǎng)址，點擊自己感興趣的頁面和信息去了解自己想了解的信息和圖片。留言功能，則需要用戶進(jìn)行注冊，注冊時需要輸入用戶名和密碼，才能注冊提交成功，成功后會進(jìn)入登錄頁面，輸入用戶名和密碼后就可以進(jìn)行留言并瀏覽留言首頁。在這里，如果用戶已注冊，則需直接進(jìn)入登錄頁面即可。這樣，每個用戶的見解都會被大家看到，提高了公眾的認(rèn)證性。

10、另外，還提供了用戶與我雙向的聯(lián)系方式，即電子郵件鏈接，用戶將自己的想法能過郵件發(fā)給我，這也是用戶對我的網(wǎng)站的認(rèn)同。 2.3 功能的需求 1） Dreamweaver基礎(chǔ)知識 2） 設(shè)計數(shù)據(jù)庫與網(wǎng)頁的鏈接：運(yùn)用Microsoft Access數(shù)據(jù)庫，將數(shù)據(jù)表與網(wǎng)頁綁定，并設(shè)置所需的服務(wù)器行為。 3） 設(shè)置電子郵件的鏈接 4） 設(shè)置ODBC數(shù)據(jù)源 5） 用戶瀏覽界面 6） 設(shè)計用戶登錄頁面，通過用戶名和密碼的驗證進(jìn)入留言板塊。 如圖：接下頁 用戶注冊、登錄、留言模塊： 用戶名 密碼 已注冊 用

11、戶 留言首頁 我要留言 通過密碼驗證 用戶名 飲食網(wǎng)站 密碼 未注冊 注冊 登錄 第三章 飲食網(wǎng)站的設(shè)計 3.1 動態(tài)站點的創(chuàng)建 根據(jù)飲食網(wǎng)站的要求，我們使用的是用戶注冊登錄界面，屬于動態(tài)頁面，網(wǎng)頁的擴(kuò)展名應(yīng)為.asp。所以我們要把站點創(chuàng)建成為動態(tài)的站點。 具體做法是：在站點菜單中選擇管理站點子菜單，打開管理站點對話框，點擊新建站點 為站點起名字 在下一步中選擇“是，我想使用服務(wù)器技術(shù)?！? 并選擇ASP VBScript服務(wù)器技術(shù) 選擇在本地進(jìn)行編輯和測試（我的測試服務(wù)器是這臺計算機(jī)）

12、及選擇文件存儲位置 點擊測試URL 點擊下一步完成。 3.2 用戶瀏覽界面的實現(xiàn) 如果要讓用戶瀏覽到準(zhǔn)確而賞心悅目的信息資料，那就一定要花精力去搜尋有關(guān)飲食健康方面的資料。在這方面，我通過在互聯(lián)網(wǎng)上搜集到一些有關(guān)方面的資料條聞和圖片及Flash小動畫，并且，我利用Photoshop圖像處理軟件做了一些效果圖片用做網(wǎng)頁設(shè)計當(dāng)中。這樣，就增加了網(wǎng)頁的可讀性與欣賞性。 關(guān)于網(wǎng)站結(jié)構(gòu)，我設(shè)置了1個主頁，7個子頁，它們分別是食尚聚焦、烹飪前沿、概念櫥房、營銷攻略、原料超市、美食驛站、關(guān)于我們。在主頁中可以進(jìn)行注冊或登錄，在其它的子頁當(dāng)中分別根據(jù)各自的主題來進(jìn)行資料顯示，各個子頁與主頁

13、都有超級鏈接，并把鏈接目標(biāo)設(shè)為_blank。在每個頁面底端，制作了一個郵件鏈接。并在首頁的頂端做了一個marquee屬性的文本，marquee屬性是在插入菜單中的標(biāo)簽子菜單中選擇HTML標(biāo)簽，在右面的框中選擇marquee屬性。具體的網(wǎng)站結(jié)構(gòu)圖如下頁： 網(wǎng)站結(jié)構(gòu)圖： 食尚聚焦：Photoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 烹飪前沿：Photoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接 +Flash動畫+電子郵件鏈接 概念櫥房：P

14、hotoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 首頁 營銷攻略：Photoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 原料超市：Photoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 美食驛站：Photoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 關(guān)于我們：Photoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接

15、 首頁：marquee屬性文本+ Photoshop圖片+導(dǎo)航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接+注冊界面鏈接+登錄界面鏈接 在整個網(wǎng)站的制作中最多用到的是表格和布局表格，將各個網(wǎng)頁的布局用表格的形式表現(xiàn)出來，并應(yīng)用了頁面屬性（主要是背景圖像）。 3.3用戶注冊、登錄、留言界面功能的實現(xiàn)及ODBC數(shù)據(jù)源的設(shè)置 要實現(xiàn)用戶的注冊、登錄、留言功能，必須與Microsoft Access數(shù)據(jù)庫進(jìn)行鏈接，但這之前必須要做好ODBC數(shù)據(jù)源的設(shè)置： 1） 打開控制面板，選擇管理工具。 2） 雙擊數(shù)據(jù)源（ODBC），打開ODBC數(shù)據(jù)源管理器。 3） 選中系統(tǒng)D

16、SN，點擊添加，添加數(shù)據(jù)庫類型，這里選擇Driver do Microsoft Access(*.mdb)。 4） 填寫數(shù)據(jù)源名，并選擇數(shù)據(jù)庫。 5） 確定完成。 ODBC數(shù)據(jù)源設(shè)置完畢后，要在所建的Microsoft Access數(shù)據(jù)庫中創(chuàng)建數(shù)據(jù)表，這里我創(chuàng)建了zhuce和liuyan兩個數(shù)據(jù)表，zhuce表用來與注冊界面連接綁定，liuyan表用來與留言界面連接綁定。在zhuce表中設(shè)置了userid和userpsw兩個字段，用來盛放注冊界面表單中的用戶名和密碼。在liuyan表中設(shè)置了userid、contect和email三個字段，用來盛放留言界面表格中的用戶名、留言內(nèi)容和Ema

17、il字段中的記錄。 下面介紹一下如何實現(xiàn)用戶注冊、登錄、留言界面的功能： 注冊界面功能實現(xiàn)： 1） 在頁面上的表單中鍵入用戶名和密碼的文本框，添加注冊和重寫按鈕。 2） 選中注冊按鈕，選擇窗口菜單中數(shù)據(jù)庫子菜單，將數(shù)據(jù)庫面板顯示在屏幕右側(cè)。 3） 選擇數(shù)據(jù)庫選項卡，點擊+號選擇數(shù)據(jù)源名稱（DSN），打開數(shù)據(jù)源名稱（DSN）對話框，輸入連接名稱為conn，數(shù)據(jù)源名稱（DSN）設(shè)為Microsoft Access數(shù)據(jù)庫名稱，Dreamweaver應(yīng)連接使用本地DSN。 4） 點測試按鈕，測試一下是否連接好了。 5） 測試無誤按確定鍵。 6） 再選中綁定選項卡，點中+號選擇記錄集（查

18、詢）。 7） 輸入名稱，選擇連接名為conn，表格選擇zhuce。 8） 點測試按鈕，測試一下是否連接好了。 9） 測試無誤按確定鍵。 10）選中服務(wù)器行為選項卡，點中+號選擇插入記錄。 11）連接名為conn，插入到表格選擇zhuce，插入后轉(zhuǎn)到選擇登錄頁面。獲取值自在注冊界面上的表單名，再把表單元單與列設(shè)置好，提交為文本。 12）確定完成。 這時，注冊頁面與數(shù)據(jù)庫的連接已完成。 登錄界面功能實現(xiàn)： 1） 在頁面上的表單中鍵入用戶名和密碼的文本框，添加登錄和重寫按鈕。 2）選中登錄按鈕，選擇窗口菜單中數(shù)據(jù)庫子菜單，將數(shù)據(jù)庫面板顯示在屏幕右側(cè)。 3）選中綁定選項卡，點中+

19、號選擇記錄集（查詢）。 4）輸入名稱，選擇連接名為conn，表格選擇zhuce。 5）點測試按鈕，測試一下是否連接好了。 6）測試無誤按確定鍵。 7）選中服務(wù)器行為選項卡，點中+號選擇用戶身份驗證 登錄用戶。 8）從表單獲取輸入選擇表單名，用戶名字段和密碼字段都選擇用戶名和密碼文本框的名字，使用連接驗證為conn，表格為zhuce,用戶名列為userid，密碼列為userpsw，如果登錄成功轉(zhuǎn)到liuyan.asp，如果登錄失敗，轉(zhuǎn)到fail.asp頁面。 9）確定完成。 至此，登錄頁面就與數(shù)據(jù)庫關(guān)聯(lián)好了，登錄成功就會轉(zhuǎn)到留言頁面，留言界面，有兩個鏈接：我要留言和留言首頁。

20、 現(xiàn)在介紹我要留言界面的實現(xiàn)： 1） 在頁面上的表單中鍵入用戶名和Email的文本框、留言內(nèi)容的文本區(qū)域，添加提交按鈕，并提示提交后將轉(zhuǎn)到留言首頁。 2）選中提交按鈕，選擇窗口菜單中數(shù)據(jù)庫子菜單，將數(shù)據(jù)庫面板顯示在屏幕右側(cè)。 3）選中綁定選項卡，點中+號選擇記錄集（查詢）。 4）輸入名稱，選擇連接名為conn，表格選擇liuyan。 5）點測試按鈕，測試一下是否連接好了。 6） 測試無誤按確定鍵。 選中服務(wù)器行為選項卡，點中+號選擇插入記錄。 7） 連接名為conn，插入到表格選擇liuyan，插入后轉(zhuǎn)到選擇留言頁面。獲取值自在我要留言界面上的表單名，再把表單元單與列設(shè)置好，提

21、交為文本。 8） 確定完成。 所以，我要留言界面的功能就實現(xiàn)了，提交后將自轉(zhuǎn)到留言首頁。 最后介紹留言首頁功能實現(xiàn)過程： 1） 在頁面中插入一個2行3列的表格，字段名分別為用戶名、留言內(nèi)容和Email。 2） 按照同上的方法把liuyan表綁定到網(wǎng)頁上面。 3） 選中服務(wù)器行為選項卡，選擇+號的重復(fù)區(qū)域子菜單，選擇記錄集為2）中的記錄集，顯示所有記錄。確定。 4） 再打開綁定選項卡，把記錄集（rs4）前面的+號打開，再把各個字段名拖入到網(wǎng)頁表格中適當(dāng)?shù)奈恢谩? 這樣留言首頁的功能也就實現(xiàn)了。 3.4電子郵件功能的實現(xiàn) 這一功能主要是在我與用戶之間搭起一座橋梁。這個操作非常簡單

22、：在每個頁面底端輸入我的郵箱地址，選中地址點擊插入菜單的電子郵件鏈接子菜單，在E-mail：處添加上我的郵箱地址即可。 3.5 IIS默認(rèn)站點的設(shè)置 如果有的電腦沒有IIS組件，可以在控制面板中添加組件（須插入Windows系統(tǒng)盤）獲得。添加好之后，打開管理工具中的Internet信息服務(wù)對話框，選擇本地計算機(jī)服務(wù)器，右擊默認(rèn)網(wǎng)站選屬性，在主目錄選項卡中，如果站點的文件夾就放在默認(rèn)的站點文件夾c:\Inetpub\wwwroot中，就不用修改；如果站點的文件夾放在別的目錄下，就要在這里將路徑改為剛才的目錄下，點擊確定即完成。這樣只要在Internet信息服務(wù)對話框中選取主頁，右擊瀏覽就可以

23、欣賞到完整的網(wǎng)站了。 第四章 網(wǎng)站評價 飲食網(wǎng)站的設(shè)計滿足用戶兩方面的需求，這兩個方面分別是瀏覽和發(fā)表見解。用戶瀏覽的需求是要了解自己所感興趣的有關(guān)于飲食方面的信息和圖片；用戶發(fā)表見解的需求是在自己進(jìn)入飲食網(wǎng)站之后對所見所得的一種評價和對網(wǎng)站設(shè)計者的承認(rèn)。對于瀏覽功能，網(wǎng)站所給的圖片和信息都是經(jīng)過精心挑先，最新最健康的，所以對于執(zhí)著于飲食健康的用戶來說，這無疑是最靚麗的風(fēng)景。而就發(fā)表見解這方面來說，用戶登錄界面和留言板塊，都運(yùn)用了與數(shù)據(jù)庫連接的技術(shù)，使用網(wǎng)頁與數(shù)據(jù)庫的鏈接，讓用戶通過用戶名和密碼的驗證來進(jìn)入留言板塊。沒有注冊的用戶則不能進(jìn)入留言板塊，這給用戶提供了一個集體互動的平臺。該

24、網(wǎng)站的運(yùn)用，既讓人感覺賞心悅目，又給用戶提供了發(fā)表自己看法的機(jī)會，給熱愛飲食健康的人們帶來知識與快樂，同時也給我與用戶聯(lián)系的機(jī)會。 第五章 小 結(jié) 本論文重點是掌握數(shù)據(jù)庫的連接，ODBC數(shù)據(jù)源的連接、數(shù)據(jù)表的綁定、服務(wù)器行為的設(shè)定以及用戶登陸身份的驗證。會連接數(shù)據(jù)庫，會實現(xiàn)用戶注冊、登錄、留言界面的功能及電子郵件的鏈接。 參考文獻(xiàn)： [1] 乘方工作室 朱仁成、李洪杰、曲宗福：《Dreamweaver MX Flash MX Fireworks MX 網(wǎng)頁設(shè)計培訓(xùn)教程》，西安電子科技大學(xué)出版社，2004年7月第一版第3次印刷，前言。 [2] 乘方工作室 朱仁成、孫愛芳：《Dreamweaver MX 2004網(wǎng)頁設(shè)計基礎(chǔ)與進(jìn)階培訓(xùn)教程》，西安電子科技大學(xué)出版社，2004年1月第一版第1次印刷，前言。 [3] 胡杰、王風(fēng)茂、米昶：《動態(tài)網(wǎng)頁設(shè)計基礎(chǔ)教程》，科學(xué)出版社，2005年8月第一版第1次印刷，第182—192頁。 ９ 青島職業(yè)技術(shù)學(xué)院畢業(yè)論文 網(wǎng)絡(luò)技術(shù)與信息處理03級3班 陳慧