基于Dreamweaver的快乐柠檬网站设计与制作

目录一、内容简介 毕业设计题目基本Dreamweaver的快乐柠檬网站设计与制作一、内容简介（一）背景与意义雅茗天地集团创办人吴伯超先生，因着对美食的热爱，从一名退伍军官转而投入了餐饮行业。吴伯超先生经过一年的时间进行考察、研究，于1992年在台湾台北市民生东路开始了他的茶饮事业，并以此为根基，2006年在上海创立了快乐柠檬外带式茶饮店。目前雅茗天地集团旗下拥有【仙踪林】、【快乐柠檬】、【游香食乐】及【alma】四个餐饮品牌，分布于大陆、香港、台湾、菲律宾、韩国、日本、英国及美国各地。做这个网站为了给更多人了解到我们的特色柠檬，利用互联网让用户在浏览柠檬信息的同时。还可以浏览到相关柠檬的文字信息和诱人的柠檬图片，本设计以网站形式介绍具有地方特色的柠檬文化。设计开发本网站最基本的意义，就是能够尽可能详细地展示、介绍特色柠檬企业文化、店铺设计、饮品种类、柠檬的种类等知识，快乐柠檬希望通过对其品牌理念和行业属性的精准定位，为其建设一个具有推广品牌形象、展现推广产品信息、传播品牌文化、加盟商招募、客户垂直服务等功能的综合型网站，我设计出这个网站就是在展示特色柠檬的同时也希望得到浏览者的认可，所以我设计了快乐柠檬网站。（二）资料收集和分析在我们的日常生活中，经常会去访问一些柠檬方面的网站，去了解如各地不同特色柠檬的种类、风味饮料柠檬样式等等知识，有很好的参考借鉴价值。我的作品需要制作出具有自己独特的风格，需要从网络上搜索相关资料，并且我专门去书店买了店铺设计装修装潢的有关书籍，从中也获得了不少图片素材，还专门跑了长沙河西王府井附近的不同品牌的饮料店铺参观。我还通过参考冯涛、王海波主编的《网页设计与制作项目教程》（第二版）（大连理工大学出版社）和张苏中、吕威飞、尤胜编《网页设计制作》（高等教育出版社）来完成制作编辑网站，撰写网站网页的文字材料。（三）方案设计快乐柠檬网站分别设计了共有七页：第一页、网站首页。包括快乐柠檬的种类图片、关于我们的内容、公司介绍等内容。第二页、关于我们。包括联系方式、图片、文字等内容。第三页、新品展示。包括联系方式、快乐柠檬的各种产品的图片和相关介绍。第四页、营门店。包括联系方式、各个自营门店的图片和文字介绍。第五页、合作加盟。包括加盟分类、加盟优势、加盟费用、加盟条件、加盟流程和联系方式等等文字内容。第六页、公司介绍。包括联系方式、公司发展历程等文字内容。第七页、联系我们。各种联系方式。（四）方案的实施用AdobeDreamweaverCS6软件制作时，完成设计方案的要求、制作并编辑网站效果图中包括快乐柠檬网站的首页、各个子页。包括网站的LOGO、快乐柠檬的产品及一些图片和背景，分店店铺设计的一些图片和背景图案。作为一个整体图片一起进行设计制作编辑网站效果图中展示。二、产品分析本设计项目的目的有两个方面：一、主要介绍了快乐柠檬公司的来历和发展，公司的发展理念。Happylemon快乐柠檬公司是一家发展迅速，形象鲜明的饮品零售品牌，短短的五个月内已在北京、上海、香港等地开设了接近二十家分店。Happylemon快乐柠檬公司实力雄厚，制度完善，福利良好，为员工提供无限的发展空间。

快乐柠檬happylemon主打卖茶。顾名思义，以柠檬作为主要卖点，主打柠檬类和茶类产品，兼营咖啡、可可、冰沙。产品口味多样化，其特点可以概括为清新、平淡、健康。产品种类丰富，有凸起的特色和概念。适中的价格利于发展壮大日常消费群体。二、介绍了快乐柠檬公司的主打产品。那就是健康柠檬子类，这个系列又包含了酸甜可口的柠檬C芦荟优多，口味丰富的翡翠柠檬菠萝冻，口感清凉的柠檬水晶薄荷蜜以及清新柠檬香的柠檬蜜红茶、绿茶等等，每一款饮品都具有“柠檬”的特色，清新爽口，甜而不腻，略带微酸，非常好喝。其次，就是可可、咖啡系列，它主打的是高热量的咖啡，有口感滑顺香甜的OREO曲奇咖啡、清爽怡人的葡萄柚冰咖啡以及口感平顺的拿铁咖啡，每一款都是美味，为咖啡爱好者带去了新的体验与享受。非常受年轻人的喜爱，它既有果肉丰富、口味清新酸甜的热情果晶钻果漾，也有芒果口味的绿茶，还有清爽怡人的葡萄柚芦荟绿茶，以及营养丰富的酷脆水晶抹绿，每一款的口感都很丰富、浓郁，也具有一定的清新酸甜口味，非常吸引人。最后用AdobeDreamweaverCS6制作并编辑网站将所有效果展示出来。在项目的设计和制作过程中，用AdobeDreamweaverCS6制作并编辑网站制作的分析、制作过程中，需要运用到AdobeDreamweaverCS6制作并编辑网站、网站设计代码编辑效果等知识。用AdobeDreamweaver软件播放时，需要添加代码、拆分、设计、实时视图效果浏览器的兼容网页设计。三、设计草图网站的主页和子页的基本框架都相似，页面上方是主题“快乐柠檬”，左侧是“柠檬的种类图片”右侧是“小题字体”、“字体内容”。然后根据子页的不同内容再加上相应的图案或文字。（一）“网站首页”页面草图图3.1编辑网站首页设计框架图（二）“关于我们”页面草图图3.2编辑关于我们设计框架图（三）“新品展示”页面草图图3.3编辑新品展示设计框架图（四）“营门店”页面草图图3.4编辑营门店设计框架图（五）“合作加盟”页面草图图3.5编辑合作加盟设计框架图（六）“公司介绍”页面草图图3.6编辑公司介绍设计框架图（七）“联系我们”页面草图图3.7编辑联系我们设计框架图四、设计效果图（一）“网站首页”设计效果图图4.1“网站首页”效果图（二）“关于我们”设计效果图图4.2“关于我们”效果图（三）“新品展示”设计效果图图4.3“新品展示”效果图（四）“营门店”设计效果图图4.4“营门店”效果图（五）“合作加盟”设计效果图图4.5“合作加盟”效果图（六）“公司介绍”设计效果图图4.6“公司介绍”效果图（七）“联系我们”设计效果图图4.7“联系我们”效果图（八）“快乐柠檬网站”设计代码图4.8“快乐柠檬”效果图源代码：<ahref="index.htm">首页</a><ahref="2.htm">关于我们</a><ahref="3.htm">新品展示</a><ahref="4.htm">店门展示</a><ahref="5.htm">合作加盟</a><ahref="6.htm">公司展示</a><<ahref="7.htm">联系我们</a>（九）“新品展示”设计代码图4.9“新品展示”效果图源代码：<h3><ahref="3-1.htm"title="OREO曲奇咖啡"target="_self">OREO曲奇咖啡</a></h3><h3><ahref="3-1.htm"title="蛋糕珍珠奶茶"target="_self">蛋糕珍珠奶茶</a></h3> <h3><ahref="3-1.htm"翡翠柠檬菠萝冻"target="_self">翡翠柠檬菠萝冻</a></h3><h3><ahref="3-1.htm"title="黑珍珠奶茶"target="_self">黑珍珠奶茶</a></h3><h3><ahref="3-1.htm"title="芒橙优多冰沙"target="_self">芒橙优多冰沙</a></h3><h3><ahref="3-1.htm"title="柠檬C芦荟优多"target="_self">柠檬C芦荟优多</a></h3><h3><ahref="3-1.htm"title="柠檬弹珠"target="_self">柠檬弹珠</a></h3><h3><ahref="3-1.htm"title="柠檬蜜红茶"target="_self">柠檬蜜红茶</a></h3><h3><ahref="3-1.htm"title="柠檬水晶薄荷蜜"target="_self">柠檬水晶薄荷蜜</a></h3><h3><ahref="3-1.htm"title="葡萄袖芦荟绿茶"target="_self">葡萄柚芦荟绿茶</a></h3><h3><ahref="3-1.htm"title="热情果晶钻果漾"target="_self">热情果晶钻果漾</a></h3><h3><ahref="3-1.htm"title="养乐多柠檬冰沙"target="_self">养乐多柠檬冰沙</a></h3>（十）“联系我们”设计代码图4.10“新品展示”效果图源代码：<formid="liulanform"name="wfform"action="/message/orderok8853.asp"method="post"target="_self"rel="nofollow"><h3align="left">在线留言，24小时内获得快速回复</h3><divclass="coco_form"style="width:75%;margin:0auto;"><divstyle="margin-bottom:10px;"><inputname="consignee"id="consignee"type="text"placeholder="您的称呼"></div><divstyle="margin-bottom:10px;"><inputname="mobile"id="mobile_contact"type="text"placeholder="您的手机号码"></div><divstyle="margin-bottom:10px;"><textareaname="user_note"id="user_note"placeholder="您的留言"></textarea></div><div><inputtype="submit"id="submit_contact"value="提交留言"style="border-radius:5px;background:#bb0303;color:#fff;width:100%;cursor:pointer;"> </div></div></form>五、过程图片制作柠檬的步骤：（以制作“快乐柠檬”为例）（一）启动Photoshop软件，新建大小为800×200像素，分辨率为72像素/英寸，颜色模式为RGB，背景内容为白色的图像文件。如图5.1所示。图5.1新建文件（二）新建图层“图层2”，选择工具时横排文字工具在封面上输入“快乐柠檬”（字体为微软雅黑，大小为75点），用鼠标单击工具箱中的移动工具，在标尺边缘拖出多条辅助线，Ctri+鼠标左单击命令文字里单击Delete命令并渐变工具名称色谱命令，效果如图5.2所示。图5.2底背景图（三）关闭标尺。新建图层3，选择“文件”-“置入嵌入的智能对象（L）”命令，鼠标右单击新建图层1删除图层命令，效果如图5.3所示。图5.3“快乐柠檬图标”效果图六、作品图片本设计项目制作了快乐柠檬网站，各个页面全部制作完毕以后，以AdobeDreamweaverCS6软件动态展示出来（具体的展示网站设计代码编辑效果见作品）。主要内容见下图。图6.1作品展示七、设计创意说明设计软件包括了AdobeDreamweaverCS6软件和图形处理软件。用AdobeDreamweaverCS6软件进行页面的制作，用网页设计代码面效果图进行展示。从快乐柠檬品牌形象定位出发，在界面中使用快乐柠檬的卡通公仔形象来进行引导和融合。卡通公仔特有的亲和力可以很好地吸引浏览者的目光，幽默有趣的表现形式构成让人类既亲切又陌生的情境。再加上技术的动感特效使得页面能够产生与众不同的特有风格。突出主题，达到良好的识别、宣传效果，给予浏览者强烈的视觉冲击和心理波动，实现特有的艺术冲击力，产生深刻的印象。八、设计总结：历经了三个月的奋战，我的毕业设计终于完成了。回想这段日子的经历和感受，让我感慨万千，在这次毕业设计的过程中，我努力提升自己，学习了Photoshop、flash、AdobeDreamweaverCS6等网页软件的应用。通过这次设计，我明白了自己的基础知识还比较欠缺，要学习的东西还很多。在以后的工作、生活中我都应该通过请教老师和同学等方式，不断的学习，提升自己。随着我的学习和提升，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，我的工作能力和学习能力得到了很大的提高。在整个快乐柠檬网站设计中我学到了许多东西，也培养了我独立工作的能力，树立了对自己工作能力的信心，相信会对今后的学习工作生活有非常深刻和积极的影响。在毕业设计项目期间，我大大提高了动手的能力，在完成设计项目的