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

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

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

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

3、 第二章 飲食網(wǎng)站的分析 2.1 項(xiàng)目的提出 2.2 用戶需求 2.3 功能需求 2.4 資料搜集 第三章 飲食網(wǎng)站的設(shè)計(jì) 3.1 動態(tài)網(wǎng)站的設(shè)計(jì) 3.2 用戶瀏覽界面的實(shí)現(xiàn) 3.3 用戶注冊、登錄、留言界面功能的實(shí)現(xiàn)及ODBC數(shù)據(jù)源的設(shè)置 3.4 電子郵件功能的實(shí)現(xiàn) 3.5 IIS默認(rèn)站點(diǎn)的設(shè)置 第四章 網(wǎng)站評價(jià) 第五章 小結(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è)計(jì)與制作，我們自然會想到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ì)算機(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代碼，以及使用新的屬性檢查器和站點(diǎn)報(bào)告來擴(kuò)展Dreamweaver的功能。 1.3 Dreamweaver的基礎(chǔ)知識 在 Dreamweaver MX中，站點(diǎn)這個術(shù)語可以指 Web 站點(diǎn)，也可以指用來儲存屬于 Web 站點(diǎn)文檔的本地硬盤上的文件夾。當(dāng)開始考慮創(chuàng)建 Web 站點(diǎn)時，應(yīng)該按照一系列的規(guī)劃步驟進(jìn)行，才能確保成功地使用站點(diǎn)。設(shè)置站點(diǎn)的常規(guī)做法是：在本地磁盤上創(chuàng)建一個包含站點(diǎn)所有文件的文件夾（稱

7、作本地站點(diǎn)），然后在該文件夾中創(chuàng)建和編輯文檔。當(dāng)準(zhǔn)備好發(fā)布站點(diǎn)并允許公眾查看時，再將這些文件拷貝到 Web 服務(wù)器上。 在Dreamweaver程序中用戶可以對一系列不同類型的對象進(jìn)行命名，這些對象包括圖片、層、表單、文件、數(shù)據(jù)庫域等，這些對象將會被許多不同的工作引擎進(jìn)行分析處理，這些工具包括各種瀏覽器、JavaScript腳本解析器、網(wǎng)絡(luò)服務(wù)器、應(yīng)用程序服務(wù)器、查詢語言等等。 第二章 飲食網(wǎng)站的分析 2.1項(xiàng)目的提出 當(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)址，點(diǎn)擊自己感興趣的頁面和信息去了解自己想了解的信息和圖片。留言功能，則需要用戶進(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è)計(jì)數(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ì)用戶登錄頁面，通過用戶名和密碼的驗(yàn)證進(jìn)入留言板塊。 如圖：接下頁 用戶注冊、登錄、留言模塊： 用戶名 密碼 已注冊 用

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

12、及選擇文件存儲位置 點(diǎn)擊測試URL 點(diǎn)擊下一步完成。 3.2 用戶瀏覽界面的實(shí)現(xiàn) 如果要讓用戶瀏覽到準(zhǔn)確而賞心悅目的信息資料，那就一定要花精力去搜尋有關(guān)飲食健康方面的資料。在這方面，我通過在互聯(lián)網(wǎng)上搜集到一些有關(guān)方面的資料條聞和圖片及Flash小動畫，并且，我利用Photoshop圖像處理軟件做了一些效果圖片用做網(wǎng)頁設(shè)計(jì)當(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用戶注冊、登錄、留言界面功能的實(shí)現(xiàn)及ODBC數(shù)據(jù)源的設(shè)置 要實(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，點(diǎn)擊添加，添加數(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字段中的記錄。 下面介紹一下如何實(shí)現(xiàn)用戶注冊、登錄、留言界面的功能： 注冊界面功能實(shí)現(xiàn)： 1） 在頁面上的表單中鍵入用戶名和密碼的文本框，添加注冊和重寫按鈕。 2） 選中注冊按鈕，選擇窗口菜單中數(shù)據(jù)庫子菜單，將數(shù)據(jù)庫面板顯示在屏幕右側(cè)。 3） 選擇數(shù)據(jù)庫選項(xiàng)卡，點(diǎn)擊+號選擇數(shù)據(jù)源名稱（DSN），打開數(shù)據(jù)源名稱（DSN）對話框，輸入連接名稱為conn，數(shù)據(jù)源名稱（DSN）設(shè)為Microsoft Access數(shù)據(jù)庫名稱，Dreamweaver應(yīng)連接使用本地DSN。 4） 點(diǎn)測試按鈕，測試一下是否連接好了。 5） 測試無誤按確定鍵。 6） 再選中綁定選項(xiàng)卡，點(diǎn)中+號選擇記錄集（查

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

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

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

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

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

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

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