Ende甜品店网页设计毕业设计说明书

绪论1.1网站开发需求分析一个网页设计的确立是建立在各个方面的需求上进行设计的，现在的网页设计已经成为政府、企事业单位在信息化的建设当中的很重要部分。在Internet的飞速发展中，网页成为了最重要的信息传递、获取和发布的渠道。现在它在人们的生活、政治、经济占据着很重要的位置，这样就使网页在现在的市场上有着举足轻重的地位。1.2网页设计的背景随着计算机技术的不断地发展和越来越深入民众的生活中，网站的复杂性、美观性越来越高，如何有效的设计美观、实用的的网页成为了一个大难题，网页设计大量的浮出，就有效的解决了这个问题。我通过对现在甜品的市场调查，认为现在甜品的市场很大，而且现在很多的甜品店在网上没有自己的网站，就很难让顾客对甜品店的历史、用材等一下信息，很难吸引到更多的客户等一系列问题。我对甜品店进行网页设计，目的是通过这个毕业设计完成甜品店在网上这一块的缺失，让顾客在家里就可以知道Ende甜品店有些什么新品、经典招牌，和一些近期的活动。而且也可以在制作的网页上把这个甜品店如何做甜品的视频放在网页上，让顾客吃得放心。1.3网页设计目的与意义现在的甜品深受年轻人的热爱，而且年轻人又是现在上网的主力，所以我对甜品店进行网页设计，给客户提供一些有用的信息，让客户能够一目了然的知道他们想了解的内容。而且现在市场对自己的甜品店进行网页设计的很少，这样我对甜品店进行网页设计，这样就开创了新的市场。并且进行网页设计也可以让更多上网的人了解甜品店，使得甜品店有更多的顾客。目前网络在不断地发展，彻底的改变了人们的传统生活，也参透了各个的工作领域中，而且网络也在不断的发展中，这正是我们将甜品店进行网页设计的时机。现在人们也拥有了各种各样的个人主页或个人网站，也有很多的商家拥有了自己官网，所以说网页成为了网络上不可缺少的部分，而且网页可以正确的、有效的、方便得向浏览者传递、浏览正确的信息。1.4使用的软件本次的网页设计，我采用了一些软件，比如Dreamwork、Firework和ps。在大学的课程中，我也对这些软件有一定的接触，这也让我很快的掌握了这些软件的运用，也让我能及时的完成我所想要网页的要求。并且我在IE、火狐浏览器、360浏览器、搜狗浏览器、百度浏览器、谷歌浏览器、QQ浏览器，这些浏览器上都进行了测试。第2章网页设计规划2.1网页制作步骤在网页设计之前，我对我的网页做了以下三个步骤：1.主题的确定：在进行网页设计之前，就应该对自己需要设计的网页进行主题的确定，这样才能很好、有序的对这个网页进行设计。2.材料的收集：在明确了网页的主题之后，我就围绕着我选择的主题进行收集资料。这个资料我从网页上、书本上和老师上课的材料上面进行获得，然后在用自己的理念对自己的网页设计进行设计。网页的制作：以上两部分做完之后，就进行了最重要的步骤，对网页进行设计。在设计中，我先运用Firework，把网页的整体效果做出来，进行预览。在把效果图做出来之后，就用Dreamwork把网页给做出来，最后我运用div+css的方法，把网页的整体效果给做出来了。2.2结构设计结构设计是一个公司网页设计的重要部分，它能突出这个公司的主要业务。Ende甜品店的网页设计的结构是采用的上中下，能有效的展示我们甜品店的形象。网页的板块从整体上可以分为主页和副页；主页是由banner、logo、甜品店名称、导航、栏目、版权声明、组成；而副页就相对简洁些，主要分为banner、导航、栏目三个板块。我们的甜品店主要是面向一些喜爱吃甜品的年轻人，而这一类的人，几乎都会上网，而且我们甜品店主打的是港式甜品，里面有经典的港式，也有我们独创的，里面也有冷热饮品，让顾客能有很多选择。里面的水果也是当天新鲜的，让大家能吃的放心。所以我们的网页就围绕着这些方面设计的，首先整个网页都是使用的暖色调，让进入网页的人感觉整个网站显得柔和、柔软。我们把企鹅站在蛋糕上设计成本店的logo，这寓意着我们一直向前，不断地创新，不怕摔倒，直到做好为止。我们把网页设计成树形结构的网站，就是在目录下有很多的分类，分类得很详细，让顾客有很好的网页体验，更容易找到自己想要的分类。2.3内容规划2.3.1首页规划我们的主页面由页面头部、栏目导航、具体内容、版权声明这四个部分组成。页面头部：包含了Ende甜品店的logo及名称，以及会员注册、登录，而且还可以连接微博、微信等。（详图见图2-1页面头部图）；栏目导航：此网页是采用的顶部水平栏导航，单击可以进入其它各内容页面。（详图见图2-2栏目导航图）；具体内容：本页的具体内容包括Ende甜品的形象和甜品的品种，还制作了进入其他页面的链接。（详图见图2-3具体类容图）；版权声明：在页脚部分，声明了版权有Ende甜品店所有，也可以把对我们的意见告诉我们，还有招商加盟等（详图见图2-4版权声明图）。图2-1页面头部图图2-2栏目导航图图2-3具体类容图图2-4版权声明图2.3.2子页规划我们的子页面由页面头部、栏目导航、具体介绍、具体样式、版权声明这五个部分组成。页面头部：包含了Ende甜品店的logo及名称，以及会员注册、登录，而且还可以连接微博、微信等。（详图见图2-1页面头部图）；栏目导航：此网页是采用的顶部水平栏导航，单击可以进入其它各内容页面。（详图见图2-2栏目导航图）；具体介绍：本页的具体内容包括经典招牌、特色小食、冷热饮品、传统捞糊，并且对其的具体内容进行了介绍，让顾客更加一目了然。（详图见图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具体样式图网页设计实施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">经典招牌</a></li><li><ahref="tsxs.html">特色小食</a></li><li><ahref="lryp.html">冷热饮品</a></li><li><ahref="ctlh.html">传统捞糊</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">经典招牌</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;}第四章网站测试的原因与结果4.1网站测试的原因进行网站的测试是为了看制作的网页的兼容性，确保是否每一种浏览器都可以展示出你想要的效果。现在使用率最高的是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浏览器测试结果图4-2360浏览器测试结果结论经过了一个月的努力，终于完成了Ende甜品店的设计。在本次方案的设计过程中，我遇到了一些困难，比如说整个页面的设计，网页结构的构造，DW具体的使用等。通过网络的查询，上课的内容，向老师咨询，还有看书，最后把问题都一一解决了，基本上满足了任务的要求。通过这次方案的设计，让我对DW、FW的使用有了深入的了解，也使我更好的运用这两个软件，也让我能独立的制作出简单的静态网页。在这次毕业设计中，我学到了以后不管做什么事，事先都应该仔细思考，认真分析，特别是在遇到困难的时候，应该沉着冷静的分析问题，解决问题；这样就可以很快的把困难解决掉，完成任务。网页设计是一项很长久的工作，需要自己不断的发现、积累资料和一些相关知识，然后自己慢慢整理、熟练，这样才能真正的提高自己实力。参考文献\t"/subview/23262/_blank"佚名.Fireworks3[J].电子计算机与外部设备,2000,(6):20-20.\t"/subview/23262/_blank"小三,不详.Fireworks按钮的制作[J].信息技术教育,2001,(5):99-100.杨选辉.网页设计与制作教程[M].北京：清华大学出版社，2009.

赵祖荫，王云翔，胡耀芳.网页设计与制作教程[M].北京：清华大学出版社，2008.致谢经过这几周的努力，我终于完成了我的毕业设计。在这次毕业设计中，我学会了很多的课外的专业知识，虽然还不能很透彻的理解这些知识，但是相比原来，已经是有很大的改变了。在做