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

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

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