美食網(wǎng)頁設計

1、信息工程學院 網(wǎng)站設計與建設 課程設計報告題 目： FoodStore美食網(wǎng) 專 業(yè)： 軟件工程 班 級： xxx 姓 名： xxx 學 號： 指導教師： 時 間： 2013年12月2日12月6日歡迎下載摘 要隨著Internet國際互聯(lián)網(wǎng)和經(jīng)濟的發(fā)展，越來越多的企業(yè)開始建造自己的網(wǎng)站。基于Internet的信息服務，產品服務已經(jīng)成為現(xiàn)代企業(yè)一項不可缺少的內容。計算機已經(jīng)被應用到社會的廣泛領域。與此同時，互聯(lián)網(wǎng)作為信息技術的通信橋梁連接著全球計算機，而網(wǎng)站作為網(wǎng)絡信息主要的表現(xiàn)形式，而且還是互聯(lián)網(wǎng)信息的主要承載者，在Internet上表現(xiàn)出極其重要的地位，并發(fā)揮著極其重要的作用。無論實在國內還

2、是國外都得以迅速的發(fā)展和壯大。并被人們重視和關注，互聯(lián)網(wǎng)已經(jīng)徹底的改變了世界，互聯(lián)網(wǎng)的世界里蘊藏著無限的可能，在這種情況下，各行各業(yè)及其個人、單位、工廠、企事業(yè)等。在網(wǎng)上構筑屬于自己的網(wǎng)絡信息平臺。保護自己的網(wǎng)絡資源，并在互聯(lián)網(wǎng)上開辟自己的市場和消費群體，以及構造自己的數(shù)字化世界和加強全球范圍內不同地域的人們聯(lián)系交流等活動，也就顯得日益重要。Internet的日益興起和以網(wǎng)頁為載體的網(wǎng)絡信息的廣泛傳播和應用，使得網(wǎng)站的建設及網(wǎng)頁制作得到發(fā)展的空間，大到大型企業(yè)的產品推銷，小到個人網(wǎng)頁的開發(fā)，形形色色，五彩繽紛，網(wǎng)頁制作也成為計算機網(wǎng)絡領域最熱門的話題。關鍵字：網(wǎng)頁制作 互聯(lián)網(wǎng) Internet

3、歡迎下載目 錄摘 要I第1章 概述11.1 選題的意義1第2章 系統(tǒng)分析22.1 技術分析22.2 功能分析2第3章 總體設計與詳細設計33.1 總體結構設計33.2 網(wǎng)站目錄結構設計43.3 詳細設計5第4章 系統(tǒng)測試64.1 設計和調試過程中遇到的問題64.2 運行通過后的結果7總結10參考文獻11附錄：1源代碼1歡迎下載第1章 概述1.1 選題的意義1主題Foodstore 美食網(wǎng)2選題的意義 隨著經(jīng)濟的發(fā)展，生活水平的提高，電子商務的興起，人們都習慣網(wǎng)上購物，美食的銷售在其中占有重要的位置。Foodstore網(wǎng)主要銷售生產糖果，果凍等食品，多個品種公司在發(fā)展的過程中，堅持不斷否定自己永

4、遠追求卓越的企業(yè)精神。打造良好的購物環(huán)境，保證食品的安全性，給顧客創(chuàng)造良好的購物環(huán)境，吃到可口美味的食品，節(jié)省顧客的時間以及省去了逛街購物帶來的麻煩和勞累，開拓了顧客的視野，色香味俱全。第2章 系統(tǒng)分析2.1 技術分析Foodstore美食網(wǎng)這個網(wǎng)站是運用了HTML靜態(tài)網(wǎng)頁技術，和Dreamweaver軟件相結合實現(xiàn)的。頁面間通過網(wǎng)頁鏈接，實現(xiàn)具體所要查找的食品，可以方便用戶的需要做出選擇，給人們帶來了極大地方便。2.2 功能分析Foodstore美食網(wǎng)是給用戶一個方便的購物空間，登陸Foodstore美食網(wǎng)界面，根據(jù)自己的需求選擇瀏覽，其功能有以下：1. 用戶可以通過瀏覽主頁，了解公司的簡介

5、以及圖片展示2. 用戶通過瀏覽子頁，可以對食品進行細致的了解第3章 總體設計與詳細設計3.1 總體結構設計1系統(tǒng)結構圖系統(tǒng)主界面聯(lián)系我們人才招聘面首頁新聞中心面公司簡介面產品中心面圖3-1 系統(tǒng)總體結構圖2系統(tǒng)設計草圖圖3-2 系統(tǒng)設計草圖3.2 網(wǎng)站目錄結構設計在網(wǎng)站的首頁上方能看到幾個選項卡，分別是：首頁、公司簡介、新聞中心、產品中心、人才招聘和聯(lián)系我們。當用戶點擊希望去的界面時，就會自動的鏈接到用戶希望的那個網(wǎng)頁。展現(xiàn)給用戶相應的界面，在每個界面都會有這幾個選項卡，用戶可以在其中自由的切換。3.3 詳細設計表格布局的過程：設計出框架為800*1000的布局表格，再在表格中添加適當?shù)膯卧?/p>

6、鏈接設計制作的過程：主頁與五個子頁進行連接圖片處理的過程：單元格設定好，圖片大小和單元格同等大小然后添加導航按鈕的設置等等第4章 系統(tǒng)測試4.1 設計和調試過程中遇到的問題1.建立靜態(tài)網(wǎng)頁時，圖片與表格的寬度不統(tǒng)一，圖片放入表格后總出現(xiàn)空白區(qū)，靜態(tài)網(wǎng)頁形成時，現(xiàn)實設定的的表格的大小與原來設定的表格的大小要大一些。解決方法：在制作表格之前要先量好圖片大小，依照圖片大小太制作表格，就不會出現(xiàn)這種空白區(qū)情況。2.靜態(tài)網(wǎng)頁形成后圖片容易丟失。解決方法：把圖片和網(wǎng)頁放入到同一個文件夾中。3. 子頁鏈接不到主頁。解決方法：將子頁鏈接回主頁4.2 運行通過后的結果圖4-1 系統(tǒng)界面截圖總結通過網(wǎng)站課程設計，

7、我學習到了很多，經(jīng)過自己親自的動手操作，運用Dreamweaver軟件制作出了網(wǎng)站，在設計過程中遇到了很多的問題，很多平時沒有注意到的細節(jié)，在這一階段都體現(xiàn)出來了，使自己能夠對網(wǎng)站的設計有了更深一層的了解。跟著老師上課講的理論知識，自己學到的僅僅是課本上的那一點很有局限性的知識，到了自己動手操作的時候卻不知道如何下手，經(jīng)過這次程序設計，很大程度上鍛煉了自己的動手操作能力，通過自己的親自動手實踐，在很大程度上使自己對程序有了更深刻的理解，也知道了，動手實踐是很重要的，學習理論知識只是一方面，理論和實踐的結合才能把網(wǎng)站設計學的更透徹，在網(wǎng)站制作過程中要不斷地發(fā)現(xiàn)問題，而且自己要及時認真的找出問題的

8、所在，自己親自發(fā)現(xiàn)的問題，再親自解決了，這樣才能印象深刻。在網(wǎng)站的設計過程中，能夠更加熟悉網(wǎng)站制作中所需要的工具和操作，經(jīng)過耐心的設計頁面，不斷的完善制作，才制作出了更加完美的網(wǎng)站，在生活中，在這個網(wǎng)絡發(fā)達的時期，電腦的使用更加的普遍，網(wǎng)站也是生活中最為常見的，制作出更加完美的網(wǎng)頁，才能充分展現(xiàn)出網(wǎng)頁的魅力。課程設計是培養(yǎng)學生綜合運用所學知識，發(fā)現(xiàn)，提出，分析和解決實際問題，鍛煉實踐能力的重要環(huán)節(jié)，是學生實際工作能力的具體訓練和考察過程，隨著科術發(fā)展的日新月異，當今計算機應用在生活中可以說得是無處不在，因此對于我們大學來說掌握計算機開發(fā)技術是十分重要的。在這次程序設計中，自己感覺到有很多不足的

9、地方，對于網(wǎng)站設計的很多相關知識了解的不夠，不知道從地方入手，在以后的學習過程中，自己一定要細心研的每一次制作，從每一步的設計中會得到自己沒有學到的知識，能更細致的研究有關網(wǎng)站的知識。參考文獻1 曾海文等.網(wǎng)頁設計與制作教程.北京:清華大學出版社,2010.92 楊選輝.網(wǎng)頁設計與制作教程.北京:清華大學出版社,2008.83 中國高等職業(yè)技術教育研究會.網(wǎng)站設計建設與維護實務.北京:高等教育出版社,20084 東方人華.網(wǎng)頁制作三劍客.北京:清華大學出版社2004.95 相萬讓.網(wǎng)頁設計與制作.北京:人民郵電出版社,2004.36 鄒婷.DreamweaverMX2004標準教程.北京:中國

10、青年出版社,2004.17 黃英等.網(wǎng)頁設計與制作上機實踐指導教程.北京:機械出版社,2004.歡迎下載附錄：源代碼無標題文檔table border-right-color:#CCCCCCtableborder-top-color:#CCCCCCtableborder-left-color:#CCCCCCtableborder-bottom-color:#CCCCCCa:link color: #000000;text-decoration: none;a:visited text-decoration: none;color: #000000;a:hover text-decoration

11、: none;a:active text-decoration: none;     首頁 公司簡介 新聞中心 產品中心 人才招聘 聯(lián)系我們   重要食品     胡蘿卜是一種營養(yǎng)豐富、老幼皆宜的菜蔬，人稱“小人參” . 緩解情緒，緩解壓力。巧克力能提高大腦內一種叫“塞洛托寧”的化學物質的水平. 研究人員對一組超過80歲的老年婦女進行了精神年齡測試，結果發(fā)現(xiàn)， 許多身體偏胖或擔心發(fā)胖的朋友，總認為在日常飲食中不吃或少吃肉食和含脂肪高的食品，就可以有效 . 綠豆芽 它含水分較多，被身體吸收后產生熱量較少，更不容易形成脂肪 .         玉米含有芥子油和淀粉酶，能促進脂肪的新陳代謝，防止過多的脂肪在皮下堆積而發(fā)胖，保持體態(tài)健美 夜盲癥和感冒，而且能增強人體的抗病能力，加上胡蘿卜含有大量的木質素，也有提高機體抗病能力的作用 黃瓜 黃瓜中含有丙醇二酸，有助于抑制各種食物中的碳水化合物在體內轉化為脂肪，胖人適當多吃些黃瓜     關于我們 | 聯(lián)系我們 | 使用幫助 | 廣告服務 | 請您留言 | 友情鏈接 | 首席顧問 | 設為首頁 | 加入