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

緒論1.1網(wǎng)站開發(fā)需求分析一個網(wǎng)頁設計的確立是建立在各個方面的需求上進行設計的，現(xiàn)在的網(wǎng)頁設計已經(jīng)成為政府、企事業(yè)單位在信息化的建設當中的很重要部分。在Internet的飛速發(fā)展中，網(wǎng)頁成為了最重要的信息傳遞、獲取和發(fā)布的渠道?，F(xiàn)在它在人們的生活、政治、經(jīng)濟占據(jù)著很重要的位置，這樣就使網(wǎng)頁在現(xiàn)在的市場上有著舉足輕重的地位。1.2網(wǎng)頁設計的背景隨著計算機技術的不斷地發(fā)展和越來越深入民眾的生活中，網(wǎng)站的復雜性、美觀性越來越高，如何有效的設計美觀、實用的的網(wǎng)頁成為了一個大難題，網(wǎng)頁設計大量的浮出，就有效的解決了這個問題。我通過對現(xiàn)在甜品的市場調(diào)查，認為現(xiàn)在甜品的市場很大，而且現(xiàn)在很多的甜品店在網(wǎng)上沒有自己的網(wǎng)站，就很難讓顧客對甜品店的歷史、用材等一下信息，很難吸引到更多的客戶等一系列問題。我對甜品店進行網(wǎng)頁設計，目的是通過這個畢業(yè)設計完成甜品店在網(wǎng)上這一塊的缺失，讓顧客在家里就可以知道Ende甜品店有些什么新品、經(jīng)典招牌，和一些近期的活動。而且也可以在制作的網(wǎng)頁上把這個甜品店如何做甜品的視頻放在網(wǎng)頁上，讓顧客吃得放心。1.3網(wǎng)頁設計目的與意義現(xiàn)在的甜品深受年輕人的熱愛，而且年輕人又是現(xiàn)在上網(wǎng)的主力，所以我對甜品店進行網(wǎng)頁設計，給客戶提供一些有用的信息，讓客戶能夠一目了然的知道他們想了解的內(nèi)容。而且現(xiàn)在市場對自己的甜品店進行網(wǎng)頁設計的很少，這樣我對甜品店進行網(wǎng)頁設計，這樣就開創(chuàng)了新的市場。并且進行網(wǎng)頁設計也可以讓更多上網(wǎng)的人了解甜品店，使得甜品店有更多的顧客。目前網(wǎng)絡在不斷地發(fā)展，徹底的改變了人們的傳統(tǒng)生活，也參透了各個的工作領域中，而且網(wǎng)絡也在不斷的發(fā)展中，這正是我們將甜品店進行網(wǎng)頁設計的時機。現(xiàn)在人們也擁有了各種各樣的個人主頁或個人網(wǎng)站，也有很多的商家擁有了自己官網(wǎng)，所以說網(wǎng)頁成為了網(wǎng)絡上不可缺少的部分，而且網(wǎng)頁可以正確的、有效的、方便得向瀏覽者傳遞、瀏覽正確的信息。1.4使用的軟件本次的網(wǎng)頁設計，我采用了一些軟件，比如Dreamwork、Firework和ps。在大學的課程中，我也對這些軟件有一定的接觸，這也讓我很快的掌握了這些軟件的運用，也讓我能及時的完成我所想要網(wǎng)頁的要求。并且我在IE、火狐瀏覽器、360瀏覽器、搜狗瀏覽器、百度瀏覽器、谷歌瀏覽器、QQ瀏覽器，這些瀏覽器上都進行了測試。第2章網(wǎng)頁設計規(guī)劃2.1網(wǎng)頁制作步驟在網(wǎng)頁設計之前，我對我的網(wǎng)頁做了以下三個步驟：1.主題的確定：在進行網(wǎng)頁設計之前，就應該對自己需要設計的網(wǎng)頁進行主題的確定，這樣才能很好、有序的對這個網(wǎng)頁進行設計。2.材料的收集：在明確了網(wǎng)頁的主題之后，我就圍繞著我選擇的主題進行收集資料。這個資料我從網(wǎng)頁上、書本上和老師上課的材料上面進行獲得，然后在用自己的理念對自己的網(wǎng)頁設計進行設計。網(wǎng)頁的制作：以上兩部分做完之后，就進行了最重要的步驟，對網(wǎng)頁進行設計。在設計中，我先運用Firework，把網(wǎng)頁的整體效果做出來，進行預覽。在把效果圖做出來之后，就用Dreamwork把網(wǎng)頁給做出來，最后我運用div+css的方法，把網(wǎng)頁的整體效果給做出來了。2.2結構設計結構設計是一個公司網(wǎng)頁設計的重要部分，它能突出這個公司的主要業(yè)務。Ende甜品店的網(wǎng)頁設計的結構是采用的上中下，能有效的展示我們甜品店的形象。網(wǎng)頁的板塊從整體上可以分為主頁和副頁；主頁是由banner、logo、甜品店名稱、導航、欄目、版權聲明、組成；而副頁就相對簡潔些，主要分為banner、導航、欄目三個板塊。我們的甜品店主要是面向一些喜愛吃甜品的年輕人，而這一類的人，幾乎都會上網(wǎng)，而且我們甜品店主打的是港式甜品，里面有經(jīng)典的港式，也有我們獨創(chuàng)的，里面也有冷熱飲品，讓顧客能有很多選擇。里面的水果也是當天新鮮的，讓大家能吃的放心。所以我們的網(wǎng)頁就圍繞著這些方面設計的，首先整個網(wǎng)頁都是使用的暖色調(diào)，讓進入網(wǎng)頁的人感覺整個網(wǎng)站顯得柔和、柔軟。我們把企鵝站在蛋糕上設計成本店的logo，這寓意著我們一直向前，不斷地創(chuàng)新，不怕摔倒，直到做好為止。我們把網(wǎng)頁設計成樹形結構的網(wǎng)站，就是在目錄下有很多的分類，分類得很詳細，讓顧客有很好的網(wǎng)頁體驗，更容易找到自己想要的分類。2.3內(nèi)容規(guī)劃2.3.1首頁規(guī)劃我們的主頁面由頁面頭部、欄目導航、具體內(nèi)容、版權聲明這四個部分組成。頁面頭部：包含了Ende甜品店的logo及名稱，以及會員注冊、登錄，而且還可以連接微博、微信等。（詳圖見圖2-1頁面頭部圖）；欄目導航：此網(wǎng)頁是采用的頂部水平欄導航，單擊可以進入其它各內(nèi)容頁面。（詳圖見圖2-2欄目導航圖）；具體內(nèi)容：本頁的具體內(nèi)容包括Ende甜品的形象和甜品的品種，還制作了進入其他頁面的鏈接。（詳圖見圖2-3具體類容圖）；版權聲明：在頁腳部分，聲明了版權有Ende甜品店所有，也可以把對我們的意見告訴我們，還有招商加盟等（詳圖見圖2-4版權聲明圖）。圖2-1頁面頭部圖圖2-2欄目導航圖圖2-3具體類容圖圖2-4版權聲明圖2.3.2子頁規(guī)劃我們的子頁面由頁面頭部、欄目導航、具體介紹、具體樣式、版權聲明這五個部分組成。頁面頭部：包含了Ende甜品店的logo及名稱，以及會員注冊、登錄，而且還可以連接微博、微信等。（詳圖見圖2-1頁面頭部圖）；欄目導航：此網(wǎng)頁是采用的頂部水平欄導航，單擊可以進入其它各內(nèi)容頁面。（詳圖見圖2-2欄目導航圖）；具體介紹：本頁的具體內(nèi)容包括經(jīng)典招牌、特色小食、冷熱飲品、傳統(tǒng)撈糊，并且對其的具體內(nèi)容進行了介紹，讓顧客更加一目了然。（詳圖見圖2-5、2-6、2-7、2-8具體介紹圖）；具體樣式：具體樣式主要是展示本店的甜品有哪些，這也很好的讓顧客進行點單。（詳圖見圖2-9、2-10、2-11、2-12）版權聲明：在頁腳部分，聲明了版權有Ende甜品店所有，也可以把對我們的意見告訴我們，還有招商加盟等（詳圖見圖2-4版權聲明圖）。圖2-5具體介紹圖圖2-6具體介紹圖圖2-7具體介紹圖圖2-8具體介紹圖圖2-9具體樣式圖圖2-10具體樣式圖圖2-11具體樣式圖圖2-12具體樣式圖網(wǎng)頁設計實施HTML頁面結構圖圖3-1頁面結構圖3.2頁面DIV結構代碼<divid="header"><ahref="shpuye.html"><imgsrc="image/Ende_r1_c1.gif"width="327"height="128"/></a><imgsrc="image/Ende_r2_c3.gif"name="bq"width="89"height="19"id="bq"/><divid="zc">注冊|登錄</div><divid="fk"><ul><li><ahref="index.html">首頁</a></li><li><ahref="jdzp.html">經(jīng)典招牌</a></li><li><ahref="tsxs.html">特色小食</a></li><li><ahref="lryp.html">冷熱飲品</a></li><li><ahref="ctlh.html">傳統(tǒng)撈糊</a></li></ul></div></div><divid="banner"><imgsrc="image/Ende_r4_c1.gif"width="1000"height="333"/></div><divid="js"><divid="xp"><divid="a">新品上市</div><divid="b"><ahref="mbjd.html">+More</a></div><imgsrc="image/Ende_r6_c2.gif"name="lh"width="182"height="127"id="lh"/></div><divid="yp"><divid="g">冷熱飲品</div><divid="h"><ahref="lryp.html">+More</a></div><imgsrc="image/Ende_r6_c9.gif"width="180"height="127"/></div><divid="zp"><divid="c">經(jīng)典招牌</div><divid="d"><ahref="jdzp.html">+More</a></div><imgsrc="image/Ende_r6_c4.gif"name="dm"width="200"height="127"id="dm"/></div><divid="tj"><divid="e">店長推薦</div><divid="f"><ahref="dztj.html">+More</a></div><imgsrc="image/Ende_r6_c7.gif"name="db"width="200"height="127"id="db"/></div></div><divid="bottom"><imgsrc="image/Ende_r8_c1.gif"width="617"height="120"/><imgsrc="image/Ende_r8_c8.gif"width="383"height="120"/></div>3.3CSS代碼#header{ height:128px; width:1000px; margin-right:auto; margin-left:auto; margin-top:5px; position:relative; background-color:#FFC;}#banner{ margin-right:auto; margin-left:auto; height:333px; width:1000px;}#js{ height:227px; width:1000px; margin-right:auto; margin-left:auto; background-color:#9B9BCE; color:#000;}#bottom{ margin-right:auto; margin-left:auto; width:1000px; height:120px; background-color:#FFC;}#js#tj#db{ margin-top:28px; margin-left:4px;}#js#zp#da{ color:#F00; text-decoration:none;}第四章網(wǎng)站測試的原因與結果4.1網(wǎng)站測試的原因進行網(wǎng)站的測試是為了看制作的網(wǎng)頁的兼容性，確保是否每一種瀏覽器都可以展示出你想要的效果?，F(xiàn)在使用率最高的是360安全瀏覽器、其次是IE8.0、IE6.0，使用率分別為26.50%、20.84%和20.19%；Chrome和firefox在國內(nèi)使用率分別為2.56%和1.45%。所以我對Ende甜品店網(wǎng)頁設計進行了IE7.0和360瀏覽器的測試。4.2網(wǎng)站測試結果1.IE7.0以下測試結果圖4-1IE7.0測試結果2.360瀏覽器測試結果圖4-2360瀏覽器測試結果結論經(jīng)過了一個月的努力，終于完成了Ende甜品店的設計。在本次方案的設計過程中，我遇到了一些困難，比如說整個頁面的設計，網(wǎng)頁結構的構造，DW具體的使用等。通過網(wǎng)絡的查詢，上課的內(nèi)容，向老師咨詢，還有看書，最后把問題都一一解決了，基本上滿足了任務的要求。通過這次方案的設計，讓我對DW、FW的使用有了深入的了解，也使我更好的運用這兩個軟件，也讓我能獨立的制作出簡單的靜態(tài)網(wǎng)頁。在這次畢業(yè)設計中，我學到了以后不管做什么事，事先都應該仔細思考，認真分析，特別是在遇到困難的時候，應該沉著冷靜的分析問題，解決問題；這樣就可以很快的把困難解決掉，完成任務。網(wǎng)頁設計是一項很長久的工作，需要自己不斷的發(fā)現(xiàn)、積累資料和一些相關知識，然后自己慢慢整理、熟練，這樣才能真正的提高自己實力。參考文獻\t"/subview/23262/_blank"佚名.Fireworks3[J].電子計算機與外部設備,2000,(6):20-20.\t"/subview/23262/_blank"小三,不詳.Fireworks按鈕的制作[J].信息技術教育,2001,(5):99-100.楊選輝.網(wǎng)頁設計與制作教程[M].北京：清華大學出版社，2009.

趙祖蔭，王云翔，胡耀芳.網(wǎng)頁設計與制作教程[M].北京：清華大學出版社，2008.致謝經(jīng)過這幾周的努力，我終于完成了我的畢業(yè)設計。在這次畢業(yè)設計中，我學會了很多的課外的專業(yè)知識，雖然還不能很透徹的理解這些知識，但是相比原來，已經(jīng)是有很大的改變了。在做