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

飲食網(wǎng)站設計摘 要：本論文主要介紹了一個飲食網(wǎng)站的設計開發(fā)過程。利用Dreamweaver網(wǎng)頁制作軟件及Photoshop和Flash這些圖像制作軟件實現(xiàn)，其中主要應用了ODBC對象操縱數(shù)據(jù)庫的技術手段，分別介紹了創(chuàng)建飲食網(wǎng)站的前期分析，網(wǎng)站的設計理念，動態(tài)站點的設置，電子郵件的鏈接，數(shù)據(jù)庫的鏈接，用戶的登錄和留言界面。本文所設計的飲食網(wǎng)站可以滿足用戶瀏覽和留言兩方面的需求。第一章主要是對Dreamweaver的發(fā)展做了介紹，并說明了Dreamweaver的運行環(huán)境以及Dreamweaver在網(wǎng)絡中占有很重要的作用。第二章對飲食網(wǎng)站的前期分析進行了總結，介紹了用戶需求及該網(wǎng)站實現(xiàn)的功能。第三章進行了具體的設計步驟，具體劃分了用戶瀏覽和用戶登錄兩個界面。實現(xiàn)了用戶的注冊、登錄、留言和瀏覽，并靈活實現(xiàn)了對留言板中新加記錄的更新操作，實現(xiàn)了密碼維護功能。使用了電子郵件鏈接技術。設計充分利用關系數(shù)據(jù)庫技術的強大力量，提高了網(wǎng)站的可讀性和技術性。關鍵詞：數(shù)據(jù)庫；IIS；ODBC；動態(tài)站點；飲食與健康目 錄摘要第一章 前言1.1 Dreamweaver的發(fā)展1.2 Dreamweaver的運行環(huán)境1.3 Dreamweaver的基本知識第二章 飲食網(wǎng)站的分析 2.1 項目的提出2.2 用戶需求2.3 功能需求2.4 資料搜集第三章 飲食網(wǎng)站的設計 3.1 動態(tài)網(wǎng)站的設計 3.2 用戶瀏覽界面的實現(xiàn) 3.3 用戶注冊、登錄、留言界面功能的實現(xiàn)及ODBC數(shù)據(jù)源的設置 3.4 電子郵件功能的實現(xiàn) 3.5 IIS默認站點的設置第四章 網(wǎng)站評價第五章 小結參考文獻第一章 前 言1.1 Dreamweaver的發(fā)展作為一種新興的信息技術，互聯(lián)網(wǎng)正以前所未有的沖擊力影響著人類的生活，它的出現(xiàn)和發(fā)展，正慢慢地改變著人們的生活方式，互聯(lián)網(wǎng)也因此成為目前比較熱門的一個話題，它具有強大的影響力。網(wǎng)頁與網(wǎng)站是構成互聯(lián)網(wǎng)的細胞，提起網(wǎng)頁設計與制作，我們自然會想到Dreamweaver，這是最優(yōu)秀一款可視化網(wǎng)頁制作與網(wǎng)站建設軟件，它不會降低對HTML原始檔的控制，不必學習HTML語法，就能在Dreamweaver中直接網(wǎng)頁并且把網(wǎng)頁上傳。另外，它還提供了許多新技術，如提供的DHTML編輯技術與JavaScript動作庫、支持JavaScript編輯技術、XML技術等，特別是整合了Dreamweaver到UltraDev以來，其功能不斷加強，可以支持ASP、ASP.NET、ColdFusion標記語言（CFML）、JSP和PHP支持，生成由動態(tài)數(shù)據(jù)庫支持的Web應用程序等。1.2 Dreamweaver的運行環(huán)境任何一款軟件都有其特殊的安裝與運行環(huá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 分辨率可達800×600像素的256色顯示器。n CD-ROM驅(qū)動器。Dreamweaver MX 2004可以完全自定義工作環(huán)境，用戶可以通過創(chuàng)建自己的對象和命令、修改鍵盤快捷方式、編寫JavaScript代碼，以及使用新的屬性檢查器和站點報告來擴展Dreamweaver的功能。1.3 Dreamweaver的基礎知識在 Dreamweaver MX中，站點這個術語可以指 Web 站點，也可以指用來儲存屬于 Web 站點文檔的本地硬盤上的文件夾。當開始考慮創(chuàng)建 Web 站點時，應該按照一系列的規(guī)劃步驟進行，才能確保成功地使用站點。設置站點的常規(guī)做法是：在本地磁盤上創(chuàng)建一個包含站點所有文件的文件夾（稱作本地站點），然后在該文件夾中創(chuàng)建和編輯文檔。當準備好發(fā)布站點并允許公眾查看時，再將這些文件拷貝到 Web 服務器上。在Dreamweaver程序中用戶可以對一系列不同類型的對象進行命名，這些對象包括圖片、層、表單、文件、數(shù)據(jù)庫域等，這些對象將會被許多不同的工作引擎進行分析處理，這些工具包括各種瀏覽器、JavaScript腳本解析器、網(wǎng)絡服務器、應用程序服務器、查詢語言等等。第二章 飲食網(wǎng)站的分析2.1項目的提出當今社會是知識飛速發(fā)展的信息時代。人民在生活水平不斷提高的同時，不但注重物質(zhì)文明和精神文明的發(fā)展，同時向傳統(tǒng)的飲食習慣發(fā)起了新的挑戰(zhàn)。所謂民以食為天，現(xiàn)如今的人們越來越注重飲食給自己帶來的影響，也有越來越多的人肯在飲食方面下功夫，來尋找一種真正適合自己的餐飲策略。這就需要我們做出一個關于餐飲業(yè)方面的網(wǎng)站，供大家來一起來欣賞與互動。利用飲食網(wǎng)站的方法，不但可以讓人們在第一時間內(nèi)瀏覽到最時尚的新式菜肴，還可以采取互動方式讓大家的興趣得到滿足。飲食網(wǎng)站作為一種飲食信息資源的集散地，圖片和資料繁多，包含很多的飲食方法和飲食策略，如今，有很多的健康飲食方法不為人們所知，并且健康的飲食方法對人類的身體是絕對有益的。有研究證明，人的壽命與他的飲食習慣有著密切的關系。當人們要想發(fā)表自己的意見時，往往會局限于很少的人際關系。那么，創(chuàng)建一個飲食網(wǎng)站，在這里向人們介紹各種菜式，各種不同的烹飪方法及不同時間該吃什么樣的食物，并且，開辟出一個留言板塊，讓喜愛飲食健康的人們在這里暢所欲言，這對于有飲食健康概念的用戶來說，無疑是一種最美妙的方法。2.2 用戶的需求飲食網(wǎng)站主要是向用戶提供瀏覽和留言功能。所謂瀏覽，就是用戶可以通過在IE瀏覽器中的地址欄中輸入網(wǎng)址，點擊自己感興趣的頁面和信息去了解自己想了解的信息和圖片。留言功能，則需要用戶進行注冊，注冊時需要輸入用戶名和密碼，才能注冊提交成功，成功后會進入登錄頁面，輸入用戶名和密碼后就可以進行留言并瀏覽留言首頁。在這里，如果用戶已注冊，則需直接進入登錄頁面即可。這樣，每個用戶的見解都會被大家看到，提高了公眾的認證性。另外，還提供了用戶與我雙向的聯(lián)系方式，即電子郵件鏈接，用戶將自己的想法能過郵件發(fā)給我，這也是用戶對我的網(wǎng)站的認同。2.3 功能的需求1） Dreamweaver基礎知識2） 設計數(shù)據(jù)庫與網(wǎng)頁的鏈接：運用Microsoft Access數(shù)據(jù)庫，將數(shù)據(jù)表與網(wǎng)頁綁定，并設置所需的服務器行為。3） 設置電子郵件的鏈接4） 設置ODBC數(shù)據(jù)源5） 用戶瀏覽界面6） 設計用戶登錄頁面，通過用戶名和密碼的驗證進入留言板塊。如圖：接下頁用戶注冊、登錄、留言模塊：用戶名密碼已注冊用戶留言首頁我要留言通過密碼驗證用戶名飲食網(wǎng)站密碼未注冊注冊登錄第三章 飲食網(wǎng)站的設計3.1 動態(tài)站點的創(chuàng)建根據(jù)飲食網(wǎng)站的要求，我們使用的是用戶注冊登錄界面，屬于動態(tài)頁面，網(wǎng)頁的擴展名應為.asp。所以我們要把站點創(chuàng)建成為動態(tài)的站點。具體做法是：在站點菜單中選擇管理站點子菜單，打開管理站點對話框，點擊新建站點 為站點起名字 在下一步中選擇“是，我想使用服務器技術。”并選擇ASP VBScript服務器技術 選擇在本地進行編輯和測試（我的測試服務器是這臺計算機）及選擇文件存儲位置 點擊測試URL 點擊下一步完成。3.2 用戶瀏覽界面的實現(xiàn)如果要讓用戶瀏覽到準確而賞心悅目的信息資料，那就一定要花精力去搜尋有關飲食健康方面的資料。在這方面，我通過在互聯(lián)網(wǎng)上搜集到一些有關方面的資料條聞和圖片及Flash小動畫，并且，我利用Photoshop圖像處理軟件做了一些效果圖片用做網(wǎng)頁設計當中。這樣，就增加了網(wǎng)頁的可讀性與欣賞性。關于網(wǎng)站結構，我設置了1個主頁，7個子頁，它們分別是食尚聚焦、烹飪前沿、概念櫥房、營銷攻略、原料超市、美食驛站、關于我們。在主頁中可以進行注冊或登錄，在其它的子頁當中分別根據(jù)各自的主題來進行資料顯示，各個子頁與主頁都有超級鏈接，并把鏈接目標設為_blank。在每個頁面底端，制作了一個郵件鏈接。并在首頁的頂端做了一個marquee屬性的文本，marquee屬性是在插入菜單中的標簽子菜單中選擇HTML標簽，在右面的框中選擇marquee屬性。具體的網(wǎng)站結構圖如下頁：網(wǎng)站結構圖： 食尚聚焦：Photoshop圖片+導航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 烹飪前沿：Photoshop圖片+導航條+新聞圖片+信息文本鏈接 +Flash動畫+電子郵件鏈接 概念櫥房：Photoshop圖片+導航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接首頁 營銷攻略：Photoshop圖片+導航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 原料超市：Photoshop圖片+導航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 美食驛站：Photoshop圖片+導航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 關于我們：Photoshop圖片+導航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接 首頁：marquee屬性文本+ Photoshop圖片+導航條+新聞圖片+信息文本鏈接+Flash動畫+電子郵件鏈接+注冊界面鏈接+登錄界面鏈接在整個網(wǎng)站的制作中最多用到的是表格和布局表格，將各個網(wǎng)頁的布局用表格的形式表現(xiàn)出來，并應用了頁面屬性（主要是背景圖像）。3.3用戶注冊、登錄、留言界面功能的實現(xiàn)及ODBC數(shù)據(jù)源的設置要實現(xiàn)用戶的注冊、登錄、留言功能，必須與Microsoft Access數(shù)據(jù)庫進行鏈接，但這之前必須要做好ODBC數(shù)據(jù)源的設置：1） 打開控制面板，選擇管理工具。2） 雙擊數(shù)據(jù)源（ODBC），打開ODBC數(shù)據(jù)源管理器。3） 選中系統(tǒng)DSN，點擊添加，添加數(shù)據(jù)庫類型，這里選擇Driver do Microsoft Access(*.mdb)。4） 填寫數(shù)據(jù)源名，并選擇數(shù)據(jù)庫。5） 確定完成。ODBC數(shù)據(jù)源設置完畢后，要在所建的Microsoft Access數(shù)據(jù)庫中創(chuàng)建數(shù)據(jù)表，這里我創(chuàng)建了zhuce和liuyan兩個數(shù)據(jù)表，zhuce表用來與注冊界面連接綁定，liuyan表用來與留言界面連接綁定。在zhuce表中設置了userid和userpsw兩個字段，用來盛放注冊界面表單中的用戶名和密碼。在liuyan表中設置了userid、contect和email三個字段，用來盛放留言界面表格中的用戶名、留言內(nèi)容和Email字段中的記錄。下面介紹一下如何實現(xiàn)用戶注冊、登錄、留言界面的功能：注冊界面功能實現(xiàn)：1） 在頁面上的表單中鍵入用戶名和密碼的文本框，添加注冊和重寫按鈕。2） 選中注冊按鈕，選擇窗口菜單中數(shù)據(jù)庫子菜單，將數(shù)據(jù)庫面板顯示在屏幕右側。3） 選擇數(shù)據(jù)庫選項卡，點擊+號選擇數(shù)據(jù)源名稱（DSN），打開數(shù)據(jù)源名稱（DSN）對話框，輸入連接名稱為conn，數(shù)據(jù)源名稱（DSN）設為Microsoft Access數(shù)據(jù)庫名稱，Dreamweaver應連接使用本地DSN。4） 點測試按鈕，測試一下是否連接好了。5） 測試無誤按確定鍵。6） 再選中綁定選項卡，點中+號選擇記錄集（查詢）。7） 輸入名稱，選擇連接名為conn，表格選擇zhuce。8） 點測試按鈕，測試一下是否連接好了。9） 測試無誤按確定鍵。10）選中服務器行為選項卡，點中+號選擇插入記錄。11）連接名為conn，插入到表格選擇zhuce，插入后轉到選擇登錄頁面。獲取值自在注冊界面上的表單名，再把表單元單與列設置好，提交為文本。12）確定完成。這時，注冊頁面與數(shù)據(jù)庫的連接已完成。登錄界面功能實現(xiàn)：1） 在頁面上的表單中鍵入用戶名和密碼的文本框，添加登錄和重寫按鈕。2）選中登錄按鈕，選擇窗口菜單中數(shù)據(jù)庫子菜單，將數(shù)據(jù)庫面板顯示在屏幕右側。3）選中綁定選項卡，點中+號選擇記錄集（查詢）。4）輸入名稱，選擇連接名為conn，表格選擇zhuce。5）點測試按鈕，測試一下是否連接好了。6）測試無誤按確定鍵。7）選中服務器行為選項卡，點中+號選擇用戶身份驗證 登錄用戶。8）從表單獲取輸入選擇表單名，用戶名字段和密碼字段都選擇用戶名和密碼文本框的名字，使用連接驗證為conn，表格為zhuce,用戶名列為userid，密碼列為userpsw，如果登錄成功轉到liuyan.asp，如果登錄失敗，轉到fail.asp頁面。9）確定完成。至此，登錄頁面就與數(shù)據(jù)庫關聯(lián)好了，登錄成功就會轉到留言頁面，留言界面，有兩個鏈接：我要留言和留言首頁?，F(xiàn)在介紹我要留言界面的實現(xiàn)：1） 在頁面上的表單中鍵入用戶名和Email的文本框、留言內(nèi)容的文本區(qū)域，添加提交按鈕，并提示提交后將轉到留言首頁。2）選中提交按鈕，選擇窗口菜單中數(shù)據(jù)庫子菜單，將數(shù)據(jù)庫面板顯示在屏幕右側。3）選中綁定選項卡，點中+號選擇記錄集（查詢）。4）輸入名稱，選擇連接名為conn，表格選擇liuyan。5）點測試按鈕，測試一下是否連接好了。6） 測試無誤按確定鍵。選中服務器行為選項卡，點中+號選擇插入記錄。7） 連接名為conn，插入到表格選擇liuyan，插入后轉到選擇留言頁面。獲取值自在我要留言界面上的表單名，再把表單元單與列設置好，提交為文本。8） 確定完成。所以，我要留言界面的功能就實現(xiàn)了，提交后將自轉到留言首頁。最后介紹留言首頁功能實現(xiàn)過程：1） 在頁面中插入一個2行3列的表格，字段名分別為用戶名、留言內(nèi)容和Email。2） 按照同上的方法把liuyan表綁定到網(wǎng)頁上面。3） 選中服務器行為選項卡，選擇+號的重復區(qū)域子菜單，選擇記錄集為2）中的記錄集，顯示所有記錄。確定。4） 再打開綁定選項卡，把記錄集（rs4）前面的+號打開，再把各個字段名拖入到網(wǎng)頁表格中適當?shù)奈恢?。這樣留言首頁的功能也就實現(xiàn)了。3.4電子郵件功能的實現(xiàn)這一功能主要是在我與用戶之間搭起一座橋梁。這個操作非常簡單：在每個頁面底端輸入我的郵箱地址，選中地址點擊插入菜單的電子郵件鏈接子菜單，在E-mail：處添加上我的郵箱地址即可。3.5 IIS默認站點的設置如果有的電腦沒有IIS組件，可以在控制面板中添加組件（須插入Windows系統(tǒng)盤）獲得。添加好之后，打開管理工具中的Internet信息服務對話框，選擇本地計算機服務器，右擊默認網(wǎng)站選屬性，在主目錄選項卡中，如果站點的文件夾就放在默認的站點文件夾c:Inetpubwwwroot中，就不用修改；如果站點的文件夾放在別的目錄下，就要在這里將路徑改為剛才的目錄下，點擊確定即完成。這樣只要在Internet信息服務對話框中選取主頁，右擊瀏覽就可以欣賞到完整的網(wǎng)站了。第四章 網(wǎng)站評價飲食網(wǎng)站的設計滿足用戶兩方面的需求，這兩個方面分別是瀏覽和發(fā)表見解。用戶瀏覽的需求是要了解自己所感興趣的有關于飲食方面的信息和圖片；用戶發(fā)表見解的需求是在自己進入飲食網(wǎng)站之后對所見所得的一種評價和對網(wǎng)站設計者的承認。對于瀏覽功能，網(wǎng)站所給的圖片和信息都是經(jīng)過精心挑先，最新最健康的，所以對于執(zhí)著于飲食健康的用戶來說，這無疑是最靚麗的風景。而就發(fā)表見解這方面來說，用戶登錄界面和留言板塊，都運用了與數(shù)據(jù)庫連接的技術，使用網(wǎng)頁與數(shù)據(jù)庫的鏈接，讓用戶通過用戶名和密碼的驗證來進入留言板塊。沒有注冊的用戶則不能進入留言板塊，這給用戶提供了一個集體互動的平臺。該網(wǎng)站的運用，既讓人感覺賞心悅目，又給用戶提供了發(fā)表自己看法的機會，給熱愛飲食健康的人們帶來知識與快樂，同時也給我與用戶聯(lián)系的機會。第五章 小 結本論文重點是掌握數(shù)據(jù)庫的連接，ODBC數(shù)據(jù)源的連接、數(shù)據(jù)表的綁定、服務器行為的設定以及用戶登陸身份的驗證。會連接數(shù)據(jù)庫，會實現(xiàn)用戶注冊、登錄、留言界面的功能及電子郵件的鏈接。參考文獻：1 乘方工作室 朱仁成、李洪杰、曲宗福：Dreamweaver MX Flash MX Fireworks MX 網(wǎng)頁設計培訓教程，西安電子科技大學出版社，2004年7月第一版第3次印刷，前言。2 乘方工作室 朱仁成、孫愛芳：Dreamweaver MX 2004網(wǎng)頁設計基礎與進階培訓教程，西安電子科技大學出版社，2004年1月第一版第1次印刷，前言。3 胡杰、王風茂、米昶：動態(tài)網(wǎng)頁設計基礎教程，科學出版社，2005年8月第一版第1次印刷，第182192頁。青島職業(yè)技術學院畢業(yè)論文 網(wǎng)絡技術與信息處理03級3班 陳慧