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

《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程卷二實踐考核網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)設(shè)計說明書設(shè)計題目：美食園網(wǎng)站設(shè)計與實現(xiàn)*名：***學號：***********班級：08信管2指導教師：***完成日期：2010年12月15日美食園網(wǎng)站的設(shè)計與實現(xiàn)一、概述電子商務在我國得到了快速的發(fā)展，它是數(shù)字化商業(yè)社會的核心，是未來企業(yè)發(fā)展、生存的主流方式。因此新的社會需求要求我們大學生應該具備自己設(shè)計開發(fā)網(wǎng)站的能力，在本學期的學習中，我已經(jīng)清晰的了解了建設(shè)電子商務網(wǎng)站的知識結(jié)構(gòu)，從電子商務網(wǎng)站的概念、網(wǎng)站的外觀設(shè)計和內(nèi)容編輯、Web應用程序開發(fā)等三大方面的內(nèi)容全面的學習掌握了本學期商務網(wǎng)站的學習設(shè)計。本網(wǎng)站是以與食品相關(guān)的系列產(chǎn)品為基準進行建立的，因此將它命名為“美食園”，理念貫徹到命名當中，以在本次的網(wǎng)站制作過程中，我全面運用了本學期學習的《電子商務網(wǎng)站建設(shè)教程》中的各項知識點，從開始的建站點、網(wǎng)件基本操作到層與表格的運用、超級鏈接與框架網(wǎng)頁運用、行為與時間軸應用、表單應用再到VBScript腳本語言運用，接著就開始了動態(tài)網(wǎng)頁的制作，其中包括了安裝IIS環(huán)境和建數(shù)據(jù)庫連接，實現(xiàn)登錄、注冊、改密碼功能。最后建設(shè)商品信息維護系統(tǒng)，包括了商品息輸入、修改、查詢功能，并在集成購物車系統(tǒng)中實現(xiàn)商品搜索與購物車等功能。我這次的設(shè)計主題是開發(fā)建設(shè)一個關(guān)于介紹食品廚藝、美食文化典故、食療藥膳、營養(yǎng)健康、廚房餐廳、國外料理等的全面性美食網(wǎng)站，同時作為一個電子商務網(wǎng)站，其最重要的功能當然還是產(chǎn)品交易，在本網(wǎng)站中有中華各特色食譜、美食文化和健康養(yǎng)生書籍、廚房餐廳圖集、各種食品材料和特色菜的買賣。希望通過網(wǎng)站大家即可訂購餐點或交流做菜心得，一圓自己的創(chuàng)業(yè)夢這樣別人一看就很清楚是個什么網(wǎng)站，并且便于記憶。將“腦白金”的徹底的“俗”讓更多的人記住它。頁文信地甚至一展自己的設(shè)計天份，并向大家推廣新式售賣模式，同時亦為某些創(chuàng)業(yè)者提供測試市場的平臺。預期本次的網(wǎng)站制作將會滿足客戶的基本需求，網(wǎng)站能夠?qū)崿F(xiàn)基本的信息瀏覽、查詢、搜索等功能，為網(wǎng)站的訪問者提供全面舒心的服務。二、項目需求分析在這個市場經(jīng)濟的時代，網(wǎng)易型的網(wǎng)站相信都是以利益為其宗旨的，但是“美食園”是一個給大學生實踐的平臺，這就注定了它的宗旨不能夠是唯利是圖。無論到什么時候，它只能是大學生的利益以及交流為第一宗旨，其次才是網(wǎng)站的商業(yè)運行等等。日前隨著科技的進步，人們對于網(wǎng)絡的需求將會越來越高，在現(xiàn)在網(wǎng)絡已經(jīng)為人們提供了更加方便快捷的交流、交易方式，各種各樣的信息將全會體現(xiàn)在網(wǎng)絡上。特別是隨著現(xiàn)在的趨勢，人們必然會越來越喜歡網(wǎng)上購物，我們網(wǎng)站便是緊緊捉住這一需求——生活離不開食品，建設(shè)這一網(wǎng)站僅應了解該網(wǎng)站要運行什么單位現(xiàn)有系統(tǒng)等，還需知道這個網(wǎng)站希望達到什么樣的目的，即必須清楚網(wǎng)站的目標市場在那里。這將成為整個網(wǎng)站所有設(shè)計思想的基礎(chǔ)。無論網(wǎng)站采用何種形式，什么樣的外觀，提供什么的內(nèi)容，都要以網(wǎng)站的最終目的為出發(fā)點來考慮。我的客戶群體將是非常的廣泛，人的生存離不開食品，自然是不分職業(yè)、年齡、性別的各個階層的社會大眾都會瀏覽我們的網(wǎng)站，這樣就要求網(wǎng)站注意信息的廣泛和豐富性，不過因為是學生設(shè)計，我將會更加傾向?qū)W生市場，滿足大學生的新潮需要。大學是一個小社會，商業(yè)發(fā)展的程度也不壓于市場經(jīng)濟的發(fā)展必然帶了相關(guān)產(chǎn)業(yè)的發(fā)展，然置、學習時間等等的影響，商品經(jīng)濟的發(fā)展受到很大的限制。網(wǎng)上交易就這樣孕育而生了，由于沒有時間、地理的局限，網(wǎng)上平臺得到了很大很快的發(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è)計方案，主題是以滿足大家的需求。對于網(wǎng)站設(shè)計來說，不應用程序，需要如何連接設(shè)計中發(fā)展程度。經(jīng)濟而地理位任何個人只要提供有效的證希望

食品為主，并附加包括食譜、材料、佐料、蔬果、餐廳、廚房廚具等在內(nèi)的一系列相關(guān)商品信息。網(wǎng)站在設(shè)計中充分考慮到了用戶的閱讀需求，將頁面的結(jié)構(gòu)、色調(diào)、布局、導航條等都進行了細致的調(diào)整，保證用戶在閱讀是的舒適流暢。網(wǎng)站的整體架構(gòu)設(shè)計簡單圖示如下：主頁中華美食食療藥膳糕點主食廚房烹飪營養(yǎng)健康國外料理疾功肝能烹飪技巧廚房廚具人群膳保食健四季餐廳展示病調(diào)理肺調(diào)調(diào)理理在欄目設(shè)計中大量應用了布局技巧，通過布局、表格的精確使用，將整個網(wǎng)的明確清晰，欄目的劃分中考慮了多方的因素，大標題中加入了小所以，在我欄頁的布局更加標題，欄目進一步的細化，還充分想到了人們對于對稱的接受力，目的布局中加入了對稱結(jié)構(gòu)，使得信息分類更加的清晰明朗。同時，內(nèi)容中加入了相關(guān)的圖片、文字、視頻、導航條、FLAsh按鈕等，將網(wǎng)頁的可讀性進一步的提高。導航條的設(shè)計中考慮到了各方的因素，化。在功能的設(shè)計中，加入了滾動文字、圖片轉(zhuǎn)換、背景音樂、時間軸應用、登、商品信息輸入、修改、查詢功能，并在集成購物車系統(tǒng)中實現(xiàn)商品搜索與購物車等功能。建設(shè)數(shù)據(jù)庫時使用的是MicrosoftOfficeAccess2003，包括了數(shù)據(jù)庫中用戶和商品信息表的制作，各表間的關(guān)系連接，源，最后在ＡＳＰ的動態(tài)頁面中建立到數(shù)據(jù)庫的連接。同時還有IIS環(huán)境的配置，創(chuàng)建虛擬目錄，建立根據(jù)信息的分類要求，使導航條明確錄注冊功能定義數(shù)據(jù)參考大量用類網(wǎng)站，商業(yè)化的美食網(wǎng)站，都是采用中規(guī)中矩的結(jié)構(gòu)，通過大小不一的方框分解整個頁面。顏色為了提高閱讀的舒適度，顏色應以柔和淡雅的色調(diào)為主，在作導航條等反差顏色采用也應以采用柔和淡雅的色調(diào)。建立布局在這次的網(wǎng)頁設(shè)計中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。把所有的素材都整理好（圖片，文章，相片），開始布局。最開頭是網(wǎng)頁的標題和網(wǎng)頁的導航欄，中間一大片用于放正文，分為五大板塊，下面就是版權(quán)信息，友情連接，聯(lián)系信息。這種布局方式看起來比較的整齊，簡潔美觀。大家都知道，沒有表格的幫助，很難組織出一個協(xié)調(diào)合理的頁面。1.點擊“ALT+F6”鍵，進入布局模式，插入布局表格。建立一個大概的布局。2.使用背景圖片：選中該項，按瀏覽可以插入一幅準備好的圖片作為表格的背景，因為圖片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。圖像與文字相比具有顯著的優(yōu)點：一是直觀，人眼觀看圖像時接受信息的速度遠遠超過觀看文字時接受信息的速度；二是能更清楚地表達細節(jié)內(nèi)容。正是由于這些優(yōu)點，所以在進行網(wǎng)頁設(shè)計時圖像很受歡迎。如果網(wǎng)頁做得像一幅風景畫，瀏覽者一定會流連忘返（如果圖片很大，效果會適得其反）。最常用的圖像格式是GIF、JPEG和BMP。（一）在網(wǎng)頁中插入圖像利用Dreamweavercs3可以方便地在網(wǎng)頁中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對圖像進行編輯。1.新建一個空白網(wǎng)頁，把光標定位在網(wǎng)頁的開始位置。2.打開菜單項，或者單擊工具3.在此對話框中單擊“瀏覽4.在“選擇文件”對話框的文件列表中選擇某個圖像文按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁中。在網(wǎng)頁中插入圖像后再對圖像的各種屬性進行設(shè)置?！肮ぞ摺辈藛?，選擇“圖片欄中的圖片工具圖標，彈出一個”按鈕，出現(xiàn)一個“選擇文件”對件，然后單擊“確定””菜單項，在子菜單中選擇“來自文件”話框。話框?！皥D片”對（二）圖像的各種屬性設(shè)置1.選中所插入的圖片，選擇圖片屬性2.編輯圖片屬性(1)設(shè)定圖像邊框粗細：根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。(2)編輯圖像大小：在Dreamweaver中，當在網(wǎng)頁中加入一幅圖像后，圖像大小默認設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整圖像大小非常簡單靈活，只要你選中加入的圖像，用鼠標左鍵拖動圖像邊框，可任意調(diào)整圖像的寬度和高度直到達到你滿意的尺寸。縮放比例：設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例瀏覽器窗口里圖像都能(3)設(shè)置圖像變化，與瀏覽器的大小成一固定比例，這樣在不同大小的正常的顯示外觀。1.選中2.在“大小”欄中“寬度”和“高度”下面的“百分比”單選按后然在“寬度”和“高度”欄里輸入想顯示的置。還可以“水平間距”和“垂直間距”欄里進行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。（三）編輯在Dreamweaver中，可以圖像進行編輯，編輯網(wǎng)頁中的圖像同時選中鈕，比例，單擊“確定”完成設(shè)在屬性的網(wǎng)頁中的圖像使用“圖片”工具欄中的各種工具對網(wǎng)頁中的功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。（四）使用背景圖像使用背景圖像填充，而使用背景圖像頁更美觀好看。1.新建一個空白網(wǎng)頁。2.單擊鼠標右鍵，彈出的快捷菜單里選話框.3.在“選擇背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁的背景用某種顏色則是將網(wǎng)頁的背景用圖像平鋪。這樣做可以使制作的網(wǎng)“網(wǎng)頁屬性”，彈出“網(wǎng)頁屬性”對”對話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個“選擇

插入flash動畫關(guān)于Flash視頻使用Dreamweaver中的“插入Flash視頻”命令，可將Flash視頻內(nèi)容插入Web頁面，而無需使用Flash創(chuàng)作工具。設(shè)置鼠標經(jīng)過圖片，進行圖片交互再插入圖片的下拉菜單中有一項是“鼠標經(jīng)過”，點擊這一項，會彈出一個對話框，在對話框中可以設(shè)置鼠標經(jīng)過前的圖片和經(jīng)過時的圖片，選擇“確定”即可。設(shè)置鏈接選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址。我設(shè)置了鏈接本站點的網(wǎng)頁頁面，同時也連接了外網(wǎng)，使得大家訪問頁面時能夠查詢更多詳細的信息，方便用戶查詢。（二）、后臺功能設(shè)計（一)建立web應用開發(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、應用程序中服務器行為的應用：包括了用戶身份驗證——登錄用戶、綁定——階段變量、插入記錄、檢查新用戶名、記錄集、更新記錄等（二）商品信息維護與集成購物車系統(tǒng)2、實現(xiàn)商品信息修改功能：深入理解更新記錄服務器行為，運用表單、請求變量、記錄集、動態(tài)列表/菜單的設(shè)置動態(tài)數(shù)據(jù)3、實現(xiàn)商品信息查詢功能：重復區(qū)域服務器行為的運用和引用動態(tài)數(shù)據(jù)，插入圖像占位符、綁定記錄集和記錄集分頁、顯示區(qū)域的應用4、實現(xiàn)商品信息搜索功能：用高級方式定義復雜的記錄集，在記錄集定義的SELECT語句中引用表單元素值5、實現(xiàn)購物車功能：查看購物車頁面，定義購物系統(tǒng)的數(shù)據(jù)庫連接，創(chuàng)建記錄集，插入記錄到購物車，防止放入重復商品，檢查新用戶名。6、集成的搜索和選購功能：手寫代碼實現(xiàn)復雜搜索、選購功能，改代碼實現(xiàn)清空購物車功能，下訂單功能2、在時間軸的制作中出現(xiàn)不少的問題，對其的操作并不熟練，在制作過程中添加幀、添加行為、移除幀等時出現(xiàn)錯誤，不過都及時的請教老師、同學，并改正。3、動態(tài)網(wǎng)頁的制作過程中，一開始的IIS環(huán)境設(shè)置和站點、數(shù)據(jù)源的建立都花費很多時間，開始時并未能正確的理解怎樣創(chuàng)建，在這上面浪費了不少的時間。4、到商品的復雜搜索、查看購物車、放入購物車、清空購物車和下訂單時引用代碼的編寫時，經(jīng)常會粗心的寫錯代碼或是數(shù)據(jù)庫連接錯誤。五．結(jié)論這次設(shè)計讓我更加熟悉了從理論到實踐的跨越。從當初的在網(wǎng)上查閱資料，到現(xiàn)在的網(wǎng)站運行，這中間有很多值得回味的地方。在計算機的世界里，只要你有興趣，總會有太多新奇的東西吸引著你。這次的設(shè)計，從選題到實現(xiàn)，幾乎都是自己獨立完成的。網(wǎng)站建設(shè)從需求分析到設(shè)計、測試，我都力求規(guī)范化，努力讓自己以前學的知識運用到本網(wǎng)站的開發(fā)中，盡量保證整個系統(tǒng)的開發(fā)質(zhì)量，順利完成這次的設(shè)計，為自己的網(wǎng)頁制作課程結(jié)束畫一個完美的句號。在網(wǎng)站建設(shè)過程中，好多知識都是隨學隨用，就增加了很多不必要的力下，一些問題也隨之克服了，通過這次美食網(wǎng)網(wǎng)站設(shè)計，使我增加了很多的知也掌握了很多網(wǎng)頁設(shè)計的操作技巧，雖然還有很多不足之處，但這并不重要，重要的是我對網(wǎng)頁的設(shè)計又有了更深的了解。麻煩。雖說這些都會消耗開發(fā)的時間，但在自己的不斷努識，學習網(wǎng)頁設(shè)計需要耐心，如果沒有耐心，就學不好網(wǎng)頁設(shè)計，應為當你一個問題時，如果不能立刻得到問題的答案，你可能需要很長時間去解決，我就碰到過一個問題，用了很長時間才解決。碰到學習網(wǎng)頁設(shè)計需要堅持，堅持不斷的學習，因為設(shè)計網(wǎng)頁的軟件在不斷的更新，因此我們要不斷的學習。我認為網(wǎng)頁設(shè)計應該注重實用性，因為它是讓人瀏覽的，是用戶可以撫摸，可以評論，可以交互的。因此我提倡簡單的美。不要過于注重色彩的燦爛，只要簡單就行。我們最終追求的主要是實用價值。

信息工程學院《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》實踐環(huán)節(jié)考核報告單2010-2011學年度第一學期