Ende甜品店網頁設計畢業(yè)設計說明書

1、長沙民政職業(yè)技術學院題目： ende甜品店網頁設計類型:產品設計工藝設計方案設計7學生姓名： 學 號： 學院： 軟件學院專業(yè)：erp項目實施方向班 級： 學校指導教師：企業(yè)指導教師：2016年 5月 5日摘要網絡現在在迅速的發(fā)展和越來越廣泛的被人眾運用，網絡也成為了我們生活中必不 uj少的一部分。隨著時代的不停發(fā)展，網絡逐漸成為最火、最快捷的交流工具。從20 世紀初起，網絡進入了國民的生活中，使得人們越來越依賴網絡。為了適應時代的發(fā)展, 提高工作效率，提高品牌在民眾中的知名度，我為我們ende甜品店制作了網頁。在網 頁上，我們可以發(fā)介甜品種類的消息，近期的優(yōu)惠活動，材料的用料和制作方法。制作

2、網頁我使用了 fire work cs5、dearm work cs5相結合，利用html + css的技術來實 現完成的。如今，在網絡技術的迅猛發(fā)展下，互聯網的不斷普及，讓人們都感受到網絡的方便 快捷，從而大家都喜歡選擇從互聯網上獲取信息，w此，互聯網逐漸成為一個寬廣的信 息發(fā)亦平臺和獲取信息的平臺。本網站也需要通過internet來對外宣傳、普及，從而 幫助到更多喜歡甜品、想了解甜品的人。關鍵詞：網站結構；dearm work cs5；設計；fire work cs5目錄第1 #絡論11.1網站開發(fā)需求分析11.2網頁設計的背景11.3網頁設計目的與意義11.4使用的軟件2第2章網頁設計規(guī)

3、劃22. 1網頁制作步驟22. 2結構沒計22.3內容規(guī)劃32. 3. 1首頁規(guī)劃32. 3.2子頁規(guī)劃4第三章網頁設計實施73.2頁面d1v結構代碼73. 3css 代碼8第四章網站測試的原因與結果94. 1網站測試的原因104.2網站測試結果10結3侖10艾獻11顏12第1章緒論1.1網站開發(fā)需求分析個咧頁設計的確立是建立在各個方面的需求上進行設計的，現在的網頁設計已 經成為政府、企事業(yè)爭位在信息化的建設當屮的很重要部分。在internet的飛速發(fā)展 屮，網頁成為y最重要的信息傳遞、獲取和發(fā)布的渠道。現在它在人們的生活、政治、 經濟占據著很重要的位置，這樣就使m頁在現在的市場上有著舉足輕重

4、的地位。1.2網頁設計的背景隨著計算機技術的不斷地發(fā)展和越來越深入k眾的生活中，網站的復雜性、美觀性 越來越高，如何有效的設計美觀、實用的的網頁成為了一個大難題，網頁設計大景的浮 出，就有效的解決了這個問題。我通過對現在甜品的市場調查，認為現在甜品的市場很人，而且現在很多的甜品店 在m上沒有自己的網站，就很難讓顧客對甜品店的歷史、用材等一下信息，很難吸引到 更多的客戶等一系列問題。我對甜品店進行網頁設計，0的是通過這個畢業(yè)設計完成甜 品店在網上這一塊的缺失，讓顧客在家里就可以知道ende甜品店有些什么新品、經典 招牌，和一些近期的活動。而且也可以在制作的m頁上把這個甜品店如何做甜品的視頻 放在

5、網頁上，讓顧客吃得放心。1.3網頁設計目的與意義現在的甜品深受年輕人的熱愛，而且年輕人又是現在上網的主力，所以我對甜品店 進行網頁設計，給客戶提供一些有用的信息，讓客戶能夠一口了然的知道他們想y解的 內容。而且現在市場對自己的甜品店進行網頁設計的很少，這樣我對甜品店進行網頁設 計，這樣就開創(chuàng)了新的市場。并且進行網頁設計也可以讓更多上網的人y解甜品店，使 得甜品店有更多的顧客?？谇熬W絡在不斷地發(fā)展，徹底的改變了人們的傳統(tǒng)生活，也參透y各個的工作領域 屮，而且網絡也在不斷的發(fā)展屮，這正是我們將甜品店進行網頁設計的吋機。現在人們 也擁有y各種各樣的個人主頁或個人網站，也有很多的商家擁有了自己官網，所

6、以說網 頁成為丫網絡上不可缺少的部分，而且網頁可以正確的、有效的、方便得向瀏覽者傳遞、 瀏覽正確的信息。1.4使用的軟件本次的網頁設計，我采用了一些軟件，比如dream work、firework和ps。在大學的 課程屮，我也對這些軟件有一定的接觸，這也讓我很快的掌握了這些軟件的運用，也讓 我能及吋的完成我所想耍網頁的耍求。并且我在ffi、火狐瀏覽器、360瀏覽器、搜狗瀏覽器、百度瀏覽器、谷歌瀏覽器、 qq瀏覽器，這些瀏覽器上都進行了測試。第2章網頁設計規(guī)劃2.1網頁制作步驟在網頁設計之前，我對我的網頁做了以下三個步驟：1. 主題的確定：在進行網頁設計之前，就應該對自己需要設計的網頁進行主題的

7、 確定，這樣冰能很好、有序的對這個網頁進行設計。2. 材料的收集：在明確了網頁的主題之后，我就圍繞著我選擇的主題進行收集資 料。這個資料我從網頁上、書本上和老師上課的材料上面進行獲得，然后在用自己的理 念對自己的網頁設計進行設計。3. 網頁的制作：以上兩部分做完之后，就進行了最重要的步驟，對網頁進行設計。 在設計屮，我先運用firework,把網頁的整體效果做出來，進行預覽。在把效果圖做出 來之后，就用dreamwork把網頁給做出來，最后我運用div+css的方法，把網頁的整體 效果給做出來了。2.2結構設計結構設計是一個公司網頁設計的重耍部分，它能突出這個公司的主耍業(yè)務。ende 甜品店的

8、網頁設計的結構是采用的上中下，能宥效的展示我們甜品店的形象。網頁的板塊從整體上可以分為主頁和副頁；主頁是由banner、logo,甜品店名稱、 導航、欄目、版權聲明、組成；而副頁就相對簡潔些，主耍分為banner、導航、欄目三 個板塊。我們的甜品店主耍是面向一些喜愛吃甜品的年輕人，而這一類的人，幾乎都會上網， 而且我們甜品店主打的是港式甜品，里面宥經典的港式，也宥我們獨創(chuàng)的，里面也宥冷 熱飲品，讓顧客能宥很多選擇。里面的水果也是當天新鮮的，讓大家能吃的放心。所以我們的網頁就闈繞著這些方面設計的，首先整個網頁都是使用的暖色調，讓進入網頁的 人感覺整個網站顯得柔和、柔軟。我們把企鵝站在蛋糕上設計成

9、本店的logo,這寓意著 我們一直向前，不斷地創(chuàng)新，不怕摔倒，直到做好為止。我們把網頁設計成樹形結構的 網站，就是在目錄下有很多的分類，分類得很詳細，讓顧客有很好的網頁體驗，更容易 找到自己想要的分類。2.3內容規(guī)劃2.3.1首頁規(guī)劃我們的主頁血由頁血尖部、欄目導航、具體內容、版權聲明這四個部分組成。頁血尖部：包含了 ende甜品店的logo及名稱，以及會員注冊、登錄，而且還叫以連接微博、微信等。（詳圖見圖2-1頁血頭部圖）；欄目導航：此網頁是采用的頂部水平欄導航，單擊可以進入其它各內容頁血。（詳圖見圖2-2欄目導航圖）；具體內容：本頁的具體內容包括ende甜品的形象和甜品的品種，還制作了進入

10、其他 頁血的鏈接。（詳圖見圖2-3具體類容圖）；版權聲明：在頁腳部分，聲明了版權有ende甜品店所有，也uj以把對我們的意見告 訴我們，還有招商加盟等（詳圖見圖2-4版權聲明圖）。ende甜品店絕i登錄圖2-1頁面頭部圖首頁 經典招牌特色小食冷熱飲品傳統(tǒng)撈糊圖2-2欄目導航圖qelnece圖2-3具體類容圖網站鶴5 關于我們產品介b 招旅全腫分12«番我們會s（r樂助薄肋中心isi酮n : copyright ( c ) 2015-2016長沙ened甜齙膠系屯8 : 80010574 87410523圖2-4版權聲明圖2.3.2子頁規(guī)劃我們的子頁面由頁面頭部、欄目導航、具體介紹、具

11、體樣式、版權聲明這五個部分 組成。頁面頭部：包含了 ende甜品店的logo及名稱，以及會員注冊、登錄，而且還吋以 連接微博、微信等。（詳圖見圖2-1頁面頭部圖）；欄0導航：此網頁是采用的頂部水平欄導航，單擊吋以進入其它各內容頁面。（詳 圖見圖2-2欄0導航圖）；具體介紹：本頁的具體內容包括經典招牌、特色小食、冷熱飲品、傳統(tǒng)撈糊，并且 對其的具體內容進行了介紹，讓顧客更加一 0 了然。（詳圖見圖2-5、2-6、2-7、 2-8具體介紹圖）；具體樣式：具體樣式主要是展示本店的甜品冇哪些，這也很好的讓顧客進行點單。 （詳圖見圖 2-9、2-10、2-11、2-12）版權聲明：在頁腳部分，聲明了版權

12、有ende甜品店所有，也對以把對我們的意見告 訴我們，還冇招商加盟等（詳圖見圖2-4版權聲明圖）。經典招牌冷熱飲品經典招牌芒果趄ende甜品屋經典甜品的創(chuàng) 意之源！嚴格挑選香味純正、果肉多 汁的“熱帶果王”，由專人監(jiān)察，待 芒果成熟80%后才揀選使用，以發(fā)揮果 實似香鉍甜的味道！再配上q彈小丸了- 和甜甜的冰淇淋，酸甜交錯，令無盡 食客交口稱贊，成為鉍受喜愛的甜品 配料！圖2-5具體介紹圖特色小食各有各的味道，香鮮爽滑，是甜品 的絕配，讓人流連往返。圖2-6具體介紹圖冷熱飲品在這個冬天，不管你是想用熱飲暖 暖身，還是想用冷飲解解饞，在我們 的ende甜品店里都能找到哦！圖2-7具體介紹圖傳統(tǒng)撈

13、糊傳統(tǒng)撈糊一直是不可或缺的港式甜 品元素，ende甜品店一貫強調的是原 汁熬煮，演繹經典。圖2-8具體介紹圖經典招牌系歹己之戀多芒小九子多芒敏鼙颯炫米多芒25米圖2-9具體樣式圖特色小食系列圖2-10具體樣式圖冷熱飲品系列as賊從百e®粒校芒果夷哪金j靑哭圖2-11具體樣式圖傳統(tǒng)撈糊系列1q«米w®芝府翔撈杏仁芘芝珩槭摶杏仁轉龍瞄蓬子紅豆圖2-12具體樣式圖第三章網頁設計實施3.1 html頁面結構圖logo子夜導航首頁banner爛新品二市經典招牌店長推薦冷熱飲品版權信息相關鏈接圖3-1頁面結構圖3.2頁面div結構代碼<div id="head

14、er"<a href="shpuye. html"<img src="image/ende_rl_cl. gif" width="327" height="128 /></a><img src=z，image/ende_r2_c3. gifz，name二bq width=89 height=19 id=bq/><div id=zc>注冊 | 登錄/div<div id="fk"<ul><1 ixa href=z，ind

15、ex. html>首頁</a</li<li><a href="jdzp. html"經典招牌/a/li<li><a href=tsxs. html"特色小食/a/li<li><a href=lryp. html"冷熱飲品</a/li><li><a href=ctlh. html"傳統(tǒng)撈糊</a/li></u1x/div>/div<div id=/banner"<img src="image

16、/ende_r4_cl. gif" width="1000" height="333 /></div><div id="js"><div id="xp"><div 1(1=&新品上市</div><div id="b">a href="mbjd. html">+more/a/div><img src="image/ende_r6_c2. gif name=lh width

17、=182 height=127" id="lh" /></div><div id="yp"><div id=g>冷熱飲品</div><div id="h"<a href="lryp. html"+more</a</div><img src=image/ende_r6_c9. gif" 'vidth="180" height=127 /></div><div

18、 id="zp"><div id=c>經典招牌</div><div id="d"<a href="jdzp. html"+more</a</div><img src=image/ende_r6_c4. gif" name=dm 'vidth=200 height=127id="dm /> </div><div id=tj><div id=e>店長推薦</div><div id=&qu

19、ot;f">a href="dztj. html">+more/a/div><img src=image/ende_r6_c7. gif" name=db 'vidth="200" height=127id=db /> </div></div><div id=bottom>img src=image/ende_r8_cl. gif” width=617 height=120 /ximg src=image/ende_r8_c8. gif" width=

20、"383" height=120" /></div>3.3css代碼tthcadcr height: 128px; width: looopx; margin-right: auto; margin-left: auto; margin-top: 5px; position: relative; background-color: #ffc;banner margin-right: auto; margin-left: auto; height: 333px; width: looopx;#js height: 227px; width: loo

21、opx; margin-right: auto; margin-left: auto; background-color: #9b9bce; color: #000;bottom margin-right: auto; margin-left: auto; width: looopx; height: 120px; background-color: #ffc;#js #tj #db margin-top: 28px; margin-left: 4px;#js #zp #d a color: #f00; text-decoration: none;第四章網站測試的原因與結果4. 1網站測試的原

22、因進行網站的測試是為了看制作的網頁的兼容性，確保是否每一種瀏覽器都討以展示 出你想要的效果?，F在使用率最高的是360安全瀏覽器、其次是ie8. 0、ie6. 0,使用率分別為26. 50%、 20. 84%和 20. 19%； chrome 和 firefox 在國內使用率分別為 2. 56%和 1. 45%。所以我對ende甜品店網頁設計進行了 ie7. 0和360瀏覽器的測試。4.2網站測試結果1.ie7.0以下測試結果圖4-1ie7.0測試結果2. 360瀏覽器測試結果ia.oc o v fdc"枚肅， tots雜ao 科小> o文婷 i 少 va mi o圖4-2360瀏覽器測試結果結論經過了一個月的努力，終于完成了 ende甜品店的設計。在本次方案的設計過程中， 我遇到了一些困難，比如說整個頁面的設計，網頁結構的構造，dw具體的使用等。通過 網絡的查詢，上課的內容，向老師咨詢，還有看書，最后把問題都一一解決了，基本上 滿足了任務的要求。通過這次方案的設計，讓我對dw、fw的使用有了深入的了