美食園網(wǎng)站設(shè)計報告書.doc

1、網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)課程卷二實踐考核網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)設(shè)計說明書設(shè)計題目： 美食園網(wǎng)站設(shè)計與實現(xiàn) 姓 名： 糜麗娟 學(xué) 號： 20080530248 班 級： 08信管2 指導(dǎo)教師： 孫俊國 完成日期： 2010年12月15日 美食園網(wǎng)站的設(shè)計與實現(xiàn)一、 概述電子商務(wù)在我國得到了快速的發(fā)展，它是數(shù)字化商業(yè)社會的核心，是未來企業(yè)發(fā)展、生存的主流方式。因此新的社會需求要求我們大學(xué)生應(yīng)該具備自己設(shè)計開發(fā)網(wǎng)站的能力，在本學(xué)期的學(xué)習中，我已經(jīng)清晰的了解了建設(shè)電子商務(wù)網(wǎng)站的知識結(jié)構(gòu)，從電子商務(wù)網(wǎng)站的概念、網(wǎng)站的外觀設(shè)計和內(nèi)容編輯、Web應(yīng)用程序開發(fā)等三大方面的內(nèi)容全面的學(xué)習掌握了本學(xué)期商務(wù)網(wǎng)站的學(xué)習設(shè)計。本

2、網(wǎng)站是以與食品相關(guān)的系列產(chǎn)品為基準進行建立的，因此將它命名為“美食園”，這樣別人一看就很清楚是個什么網(wǎng)站，并且便于記憶。將“腦白金”的理念貫徹到命名當中，以徹底的“俗”讓更多的人記住它。在本次的網(wǎng)站制作過程中，我全面運用了本學(xué)期學(xué)習的電子商務(wù)網(wǎng)站建設(shè)教程中的各項知識點，從開始的建站點、網(wǎng)頁文件基本操作到層與表格的運用、超級鏈接與框架網(wǎng)頁運用、行為與時間軸應(yīng)用、表單應(yīng)用再到VBScript腳本語言運用，接著就開始了動態(tài)網(wǎng)頁的制作，其中包括了安裝IIS環(huán)境和建數(shù)據(jù)庫連接，實現(xiàn)登錄、注冊、改密碼功能。最后建設(shè)商品信息維護系統(tǒng)，包括了商品信息輸入、修改、查詢功能，并在集成購物車系統(tǒng)中實現(xiàn)商品搜索與購物

3、車等功能。 我這次的設(shè)計主題是開發(fā)建設(shè)一個關(guān)于介紹食品廚藝、美食文化典故、食療藥膳、營養(yǎng)健康、廚房餐廳、國外料理等的全面性美食網(wǎng)站，同時作為一個電子商務(wù)網(wǎng)站，其最重要的功能當然還是產(chǎn)品交易，在本網(wǎng)站中有中華各地特色食譜、美食文化和健康養(yǎng)生書籍、廚房餐廳圖集、各種食品材料和特色菜的買賣。希望通過網(wǎng)站大家即可訂購餐點或交流做菜心得，一圓自己的創(chuàng)業(yè)夢甚至一展自己的設(shè)計天份，并向大家推廣新式售賣模式，同時亦為某些創(chuàng)業(yè)者提供測試市場的平臺。 預(yù)期本次的網(wǎng)站制作將會滿足客戶的基本需求，網(wǎng)站能夠?qū)崿F(xiàn)基本的信息瀏覽、查詢、搜索等功能，為網(wǎng)站的訪問者提供全面舒心的服務(wù)。 二、 項目需求分析在這個市場經(jīng)濟的時代，

4、網(wǎng)易型的網(wǎng)站相信都是以利益為其宗旨的，但是“美食園”是一個給大學(xué)生實踐的平臺，這就注定了它的宗旨不能夠是唯利是圖。無論到什么時候，它只能是大學(xué)生的利益以及交流為第一宗旨，其次才是網(wǎng)站的商業(yè)運行等等。日前隨著科技的進步，人們對于網(wǎng)絡(luò)的需求將會越來越高，在現(xiàn)在網(wǎng)絡(luò)已經(jīng)為人們提供了更加方便快捷的交流、交易方式，各種各樣的信息將全會體現(xiàn)在網(wǎng)絡(luò)上。特別是隨著現(xiàn)在的趨勢，人們必然會越來越喜歡網(wǎng)上購物，我們網(wǎng)站便是緊緊捉住這一需求生活離不開食品，建設(shè)這一網(wǎng)站滿足大家的需求。對于網(wǎng)站設(shè)計來說，不僅應(yīng)了解該網(wǎng)站要運行什么應(yīng)用程序，需要如何連接單位現(xiàn)有系統(tǒng)等，還需知道這個網(wǎng)站希望達到什么樣的目的，即必須清楚網(wǎng)站的

5、目標市場在那里。這將成為整個網(wǎng)站所有設(shè)計思想的基礎(chǔ)。無論網(wǎng)站采用何種形式，什么樣的外觀，提供什么的內(nèi)容 ，都要以網(wǎng)站的最終目的為出發(fā)點來考慮。 我的客戶群體將是非常的廣泛，人的生存離不開食品，自然是不分職業(yè)、年齡、性別的各個階層的社會大眾都會瀏覽我們的網(wǎng)站，這樣就要求網(wǎng)站設(shè)計中注意信息的廣泛和豐富性，不過因為是學(xué)生設(shè)計，我將會更加傾向?qū)W生市場，滿足大學(xué)生的新潮需要。 大學(xué)是一個小社會，商業(yè)發(fā)展的程度也不壓于市場經(jīng)濟的發(fā)展程度。經(jīng)濟發(fā)展必然帶了相關(guān)產(chǎn)業(yè)的發(fā)展，然而地理位置、學(xué)習時間等等的影響，商品經(jīng)濟的發(fā)展受到很大的限制。網(wǎng)上交易就這樣孕育而生了，由于沒有時間、地理的局限，網(wǎng)上平臺得到了很大很快

6、的發(fā)展。為了給大家提供一個更好的網(wǎng)上環(huán)境，設(shè)計一個網(wǎng)上平臺，是相當有必要的。 根據(jù)交易平臺的目的，網(wǎng)站采用C2C的模式，任何個人只要提供有效的證件就可以成功注冊。我希望能夠?qū)⒕W(wǎng)站做的更加完善，可以讓用戶自己在這樣一個平臺上交流買賣，雙方可以通過自己的渠道進行協(xié)商，達成一致。提到盈利點，盡管網(wǎng)站的宗旨不是純粹的為了盈利，但網(wǎng)站要運行，也要發(fā)展，就需要一定的費用。我希望本網(wǎng)站不僅能夠買賣商品，更加可以為大家提供一個瀏覽了解相關(guān)知識的平臺。三、 項目總體設(shè)計通過我們詳細的需求分析之后，我們形成了項目的總體設(shè)計方案，主題是以食品為主，并附加包括食譜、材料、佐料、蔬果、餐廳、廚房廚具等在內(nèi)的一系列相關(guān)商

7、品信息。網(wǎng)站在設(shè)計中充分考慮到了用戶的閱讀需求，將頁面的結(jié)構(gòu)、色調(diào)、布局、導(dǎo)航條等都進行了細致的調(diào)整，保證用戶在閱讀是的舒適流暢。網(wǎng)站的整體架構(gòu)設(shè)計簡單圖示如下：主頁 中華美食國外料理廚房烹飪糕點主食營養(yǎng)健康食療藥膳四季保健功能調(diào)理餐廳展示廚房廚具烹飪技巧人群膳食疾病調(diào)理肝肺調(diào)理在欄目設(shè)計中大量應(yīng)用了布局技巧，通過布局、表格的精確使用，將整個網(wǎng)頁的布局更加的明確清晰，欄目的劃分中考慮了多方的因素，大標題中加入了小標題，欄目進一步的細化，還充分想到了人們對于對稱的接受力，所以，我在欄目的布局中加入了對稱結(jié)構(gòu)，使得信息分類更加的清晰明朗。同時，內(nèi)容中加入了相關(guān)的圖片、文字、視頻、導(dǎo)航條、FLAsh

8、按鈕等，將網(wǎng)頁的可讀性進一步的提高。導(dǎo)航條的設(shè)計中考慮到了各方的因素，根據(jù)信息的分類要求，使導(dǎo)航條明確化。在功能的設(shè)計中，加入了滾動文字、圖片轉(zhuǎn)換、背景音樂、時間軸應(yīng)用、登錄注冊功能、商品信息輸入、修改、查詢功能，并在集成購物車系統(tǒng)中實現(xiàn)商品搜索與購物車等功能。建設(shè)數(shù)據(jù)庫時使用的是Microsoft Office Access 2003，包括了數(shù)據(jù)庫中用戶和商品信息表的制作，各表間的關(guān)系連接，定義數(shù)據(jù)源，最后在的動態(tài)頁面中建立到數(shù)據(jù)庫的連接。同時還有IIS環(huán)境的配置，創(chuàng)建虛擬目錄，建立站點，最后就是登錄、注冊、修改密碼、信息輸入、修改、查詢等動態(tài)網(wǎng)頁的制作。四、 項目詳細設(shè)計 （一）、 前臺功

9、能設(shè)計板式參考大量用類網(wǎng)站，商業(yè)化的美食網(wǎng)站，都是采用中規(guī)中矩的結(jié)構(gòu)，通過大小不一的方框分解整個頁面。顏色為了提高閱讀的舒適度，顏色應(yīng)以柔和淡雅的色調(diào)為主，在作導(dǎo)航條等反差顏色采用也應(yīng)以采用柔和淡雅的色調(diào)。建立布局 在這次的網(wǎng)頁設(shè)計中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。把所有的素材都整理好（圖片，文章，相片），開始布局。最開頭是網(wǎng)頁的標題和網(wǎng)頁的導(dǎo)航欄，中間一大片用于放正文，分為五大板塊，下面就是版權(quán)信息，友情連接，聯(lián)系信息。這種布局方式看起來比較的整齊，簡潔美觀。大家都知道，沒有表格的幫助，很難組織出一個協(xié)調(diào)合理的頁面。1.點擊“ALT+F6”鍵，進入布局模式，插入布局表格。建立一個大

10、概的布局。 2.使用背景圖片：選中該項，按瀏覽可以插入一幅準備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。網(wǎng)頁中的圖像圖像與文字相比具有顯著的優(yōu)點：一是直觀，人眼觀看圖像時接受信息的速度遠遠超過觀看文字時接受信息的速度；二是能更清楚地表達細節(jié)內(nèi)容。正是由于這些優(yōu)點，所以在進行網(wǎng)頁設(shè)計時圖像很受歡迎。如果網(wǎng)頁做得像一幅風景畫，瀏覽者一定會流連忘返（如果圖片很大，效果會適得其反）。最常用的圖像格式是GIF、JPEG和BMP。 （一）在網(wǎng)頁中插入圖像 利用Dreamweaver cs3可以方便地在網(wǎng)頁中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且

11、可以直接對圖像進行編輯。1.新建一個空白網(wǎng)頁，把光標定位在網(wǎng)頁的開始位置。2.打開“工具”菜單，選擇“圖片”菜單項，在子菜單中選擇“來自文件”菜單項，或者單擊工具欄中的圖片工具圖標，彈出一個“圖片”對話框。3.在此對話框中單擊“瀏覽”按鈕，出現(xiàn)一個“選擇文件”對話框。4.在“選擇文件”對話框的文件列表中選擇某個圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中插入圖像后再對圖像的各種屬性進行設(shè)置。（二）圖像的各種屬性設(shè)置1.選中所插入的圖片，選擇圖片屬性2.編輯圖片屬性(1)設(shè)定圖像邊框粗細：根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。 (2

12、)編輯圖像大?。涸贒reamweaver 中，當在網(wǎng)頁中加入一幅圖像后，圖像大小默認設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標左鍵拖動圖像邊框，可任意調(diào)整圖像的寬度和高度直到達到你滿意的尺寸。 (3)設(shè)置圖像縮放比例：設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。1. 選中網(wǎng)頁中的圖像2. 在“大小”欄中同時選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完

13、成設(shè)置。還可以在屬性的“水平間距”和“垂直間距”欄里進行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。 （三）編輯網(wǎng)頁中的圖像在Dreamweaver 中，可以使用“圖片”工具欄中的各種工具對網(wǎng)頁中的圖像進行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。 （四）使用背景圖像使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)頁更美觀好看。1.新建一個空白網(wǎng)頁。2.單擊鼠標右鍵，彈出的快捷菜單里選“網(wǎng)頁屬性”，彈出“網(wǎng)頁屬性”對話框.3

14、.在“選擇背景圖像”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇文件”對話框。6.在“選擇文件”對話框的文件列表中選擇圖像文件，單擊“確定”按鈕。這樣，所選圖片將作為整個網(wǎng)頁的背景。插入flash動畫 關(guān)于 Flash 視頻 使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash 視頻內(nèi)容插入 Web 頁面，而無需使用 Flash 創(chuàng)作工具。設(shè)置鼠標經(jīng)過圖片，進行圖片交互再插入圖片的下拉菜單中有一項是“鼠標經(jīng)過”，點擊這一項，會彈出一個對話框，在對話框中可以設(shè)置鼠標經(jīng)過前的圖片和經(jīng)過時的圖片，選擇“確定”即可。設(shè)置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接

15、到的地址。我設(shè)置了鏈接本站點的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細的信息，方便用戶查詢。 （二）、后臺功能設(shè)計（1) 建立web應(yīng)用開發(fā)及運行環(huán)境1、 安裝和設(shè)置IIS：通過控制面板中添加/刪除程序添加/刪除Windows組件，創(chuàng)建虛擬目錄2、 建立IIS站點：打開網(wǎng)頁菜單中站點，創(chuàng)建站點3、 建立數(shù)據(jù)庫并連接站點：創(chuàng)建數(shù)據(jù)源，連接4、 實現(xiàn)用戶登錄、注冊、修改密碼功能：新建動態(tài)網(wǎng)頁，加入表單、表單元素和修改它們的屬性值5、 應(yīng)用程序中服務(wù)器行為的應(yīng)用：包括了用戶身份驗證登錄用戶、綁定階段變量、插入記錄、檢查新用戶名、記錄集、更新記錄等（2） 商品信息維護與集成購物車

16、系統(tǒng)1、 實現(xiàn)商品信息輸入功能：插入記錄行為的進一步應(yīng)用2、 實現(xiàn)商品信息修改功能：深入理解更新記錄服務(wù)器行為，運用表單、請求變量、記錄集、動態(tài)列表/菜單的設(shè)置動態(tài)數(shù)據(jù)3、 實現(xiàn)商品信息查詢功能：重復(fù)區(qū)域服務(wù)器行為的運用和引用動態(tài)數(shù)據(jù)，插入圖像占位符、綁定記錄集和記錄集分頁、顯示區(qū)域的應(yīng)用4、 實現(xiàn)商品信息搜索功能：用高級方式定義復(fù)雜的記錄集，在記錄集定義的SELECT語句中引用表單元素值5、 實現(xiàn)購物車功能：查看購物車頁面，定義購物系統(tǒng)的數(shù)據(jù)庫連接，創(chuàng)建記錄集，插入記錄到購物車，防止放入重復(fù)商品，檢查新用戶名。6、 集成的搜索和選購功能：手寫代碼實現(xiàn)復(fù)雜搜索、選購功能，改代碼實現(xiàn)清空購物車功

17、能，下訂單功能7、 留言板的制作和新聞公告的加入：留言板制作時包括了用戶留言的輸入、留言信息表、詳細信息瀏覽等頁面制作；商品新聞制作時要注意記錄集的制作和數(shù)據(jù)庫的建設(shè)。 （三）、重難點分析 1、 網(wǎng)頁的布局分欄制作時經(jīng)常出現(xiàn)胡亂現(xiàn)象，布局要重復(fù)的考慮到各方面的全面信息，做的合理明確。2、 在時間軸的制作中出現(xiàn)不少的問題，對其的操作并不熟練，在制作過程中添加幀、添加行為、移除幀等時出現(xiàn)錯誤，不過都及時的請教老師、同學(xué)，并改正。3、 動態(tài)網(wǎng)頁的制作過程中，一開始的IIS環(huán)境設(shè)置和站點、數(shù)據(jù)源的建立都花費很多時間，開始時并未能正確的理解怎樣創(chuàng)建，在這上面浪費了不少的時間。4、 到商品的復(fù)雜搜索、查看

18、購物車、放入購物車、清空購物車和下訂單時引用代碼的編寫時，經(jīng)常會粗心的寫錯代碼或是數(shù)據(jù)庫連接錯誤。五結(jié)論 這次設(shè)計讓我更加熟悉了從理論到實踐的跨越。從當初的在網(wǎng)上查閱資料，到現(xiàn)在的網(wǎng)站運行，這中間有很多值得回味的地方。在計算機的世界里，只要你有興趣，總會有太多新奇的東西吸引著你。這次的設(shè)計，從選題到實現(xiàn)，幾乎都是自己獨立完成的。網(wǎng)站建設(shè)從需求分析到設(shè)計、測試，我都力求規(guī)范化，努力讓自己以前學(xué)的知識運用到本網(wǎng)站的開發(fā)中，盡量保證整個系統(tǒng)的開發(fā)質(zhì)量，順利完成這次的設(shè)計，為自己的網(wǎng)頁制作課程結(jié)束畫一個完美的句號。不過，在網(wǎng)站建設(shè)過程中，好多知識都是隨學(xué)隨用，就增加了很多不必要的麻煩。雖說這些都會消耗開發(fā)的時間，但在自己的不斷努力下，一些問題也隨之克服了，通過這次美食網(wǎng)網(wǎng)站設(shè)計，使我