艾玲咖啡网站设计与实现毕业论文.doc

毕 业 设 计

毕业设计题
艾玲咖啡网站设计与实现
毕业设计类型
■ 产品设计 □工艺设计 □方案设计
姓名

班级

所属系部
物流信息系
专业
电子商务
指导教师

职称

完成时间

摘要
随着Internet电子商务的的迅速发展，网上购物越来越流行，B2C，C2C,B2B作为电子商务网站经营常用的模式，在前端商务平台其商务活动全过程中起着举足轻重的作用。
艾玲咖啡网站导航栏包括：艾玲首页、艾玲餐饮、关于艾玲、艾玲资讯、合作加盟、联系我们。
首页的网页布局采用了上下框架设计，其他子页面采用了拐角型以及左右框架型设计。背景采用了暖色调，整个网站的色调运用代码的设置可一键变换主题颜色，具体有咖啡色、卡其色、黑色、浅咖啡色、嫩黄色这几种不同的颜色。网站首页担负着网站“形象大使”的责任，从首页就基本能窥探出网站的定位和服务对象。运用静态和动态相结合布局成整个网站的首页，scripts、flash来实现了首页轮播图的动态效果。
艾玲咖啡网站其他子页面包括：艾玲餐饮、关于艾玲、合作加盟、艾玲资讯、联系我们，每个页面的功能不尽相同，公司的介绍、企业产品动态、加盟流程等都在子页面展示。
【关键词：网站 网站建设 网站设计 艾玲咖啡 网站实现】

目录
第一章 设计背景 - 6 -
1.1 企业网站设计目的 - 6 -
1.2 网站建设需求分析 - 7 -
1.3 网站整体结构 - 9 -
第二章 前期准备 - 10 -
2.1 素材收集整理 - 10 -
2.2 LOGO设计 - 10 -
2.3 Banner设计 - 11 -
2.4 首页效果图 - 11 -
第三章 网页设计制作 - 13 -
3.1 首页设计制作 - 13 -
3.2 其他页面设计制作 - 16 -
第四章 调试运行 - 22 -
4.1 网站调试及处理 - 22 -
4.2 网站运行 - 23 -
总结 - 24 -
致谢 - 25 -
文献 - 26 -

第一章 设计背景
1.1 企业网站设计目的
1.企业简介
艾玲咖啡是重所周知的咖啡连锁加盟。艾玲咖啡旗下产品包括50多款全球顶级的咖啡豆、各式手工制作的冷、热咖啡饮品、传统的意式咖啡、口感醇厚的西式糕点以及各式各样的咖啡机、咖啡杯等商品。
艾玲咖啡的产品不仅仅只是咖啡，咖啡只是其中的一种载体，就是通过咖啡这种载体，艾玲咖啡就是要把这种独特的格调和情感传递给顾客。而且咖啡消费在很大程度上是一种比较有档次的人群来消费的，而这种文化的沟通就是需要在咖啡店所营造的环境中去感染顾客，让顾客形成良好的生活体验。
2.品牌简介
艾玲咖啡主要从事咖啡产品的生产、合作加盟与连锁经营、中西餐饮。以其卓越的服务宗旨、舒适环境的文化氛围、多样式的产品、经营策略赢得了众多消费者的口碑，也成就了艾玲如今300 余连锁咖啡店，有着骄人的业绩。
艾玲咖啡有着一流品牌形象，以意式浓缩咖啡原文化为依托，把飘香似溢的意式咖啡文化，准确无误的走进中国市场；并以专业、专心、为企业经营理念。秉承诚信、务实的精神，坚持以客户为本，重视商家、更珍惜每一个商家与我们的合作机会。
艾玲咖啡的价值彰显于所做任何创新事情的不懈追求，艾玲的关系建立于真心和信任。艾玲始终坚信于人，创造和改变生活。在全公司培养充满快乐和激情的文化。
3.设计目的
随着中国经济的快速发展，咖啡消费在中国的城市里以成为一种流行趋势，也逐渐与现实生活相联系，也带动了咖啡消费量的迅速增加，形成了一种巨大消费潜在市场。
跨入21世纪后，中国经济的飞速增长，人们生活的质量正在不断提高，饮品日益多样化，咖啡逐渐与时尚、现代生活连在一起带动了咖啡消费量的迅猛增加，形成一种消费潜在市场。
据萨尔瓦多讯，国际咖啡组织执行官内斯托尔•奥索里奥2005年9月26日在巴西巴伊亚州首府萨尔瓦多举行的第二届世界咖啡大会说，由于中国市场巨大，咖啡消费增长前景看好，中国在世界咖啡业扩大需求的总战略中占据重要地位。
作为一种舶来品， 咖啡消费这几年在国内也得到了质的飞跃。有数据显示，华南、华北市场的咖啡消费量正以每年两位数的速度直速狂飚，部分地区甚至超过了百分百。
1.2 网站建设需求分析
随着信息时代的来临，互联网络的快速发展，使得企业建立网站已经成为一种在信息时代生存的必要手段，一个网站不仅是成为企业宣传产品和服务的窗口，也是树立一个企业形象的前沿。网站的建立使得企业的经营成本大大的降低，企业经营效率有着明显的提高。网站的建设必带给企业未来无限的商机。
网站的制作形式丰富多彩，规模有大有小，一个设计精美，信息充实的网站给人的直观印象就是代表一个企业的企业形象，所以企业网站建设毋庸质疑是一种宣传企业产品和服务的机会。
网站作为一个有互动功能的平台他可以起到与客户互动交流的作用，企业建立网站，将信息发布开设到网上，并有专人提供信息服务。可与外部建立一个信息交流渠道。有一些企业的网站就是以BBS或公告栏的形式来联系客户，客户也可以发表自己的意见，同时也能够看到其他客户的信息记录。可以使得客户全面客观地了解企业和企业的服务产品。
电子商务是现在比较新兴的商务模式，从多种角度出发有着不同的定位。电子商务也是未来经济形式发展的大趋势，目标是实现交易信息的网络化和电子化，企业通常都会加入到网上的某个行业协会网站或商业网站中，成为会员或网员。企业建立网站，从销售的观点上来看，可以减少交易的中间环节，降低成本。
发布企业广告，网站作为一种媒体的形式，企业网站本身就是广告，一些企业在网上建立自己的网页，或者开设自己的网站，把企业信息集中起来，分类分栏，就是为了方便客户浏览。现代社会中的所有著名企业都有在网上建立了自己的网页或网站。
综上所述，企业建设网站就是在互联网上开家分公司，是为了让更多的人了解企业产品服务，为企业带来更多的潜在客户，是一种性价比极高的新型宣传模式，是当今的大趋势，所以企业要想要在竞争中立于不败之地，必须得紧紧跟上时代的步伐，进行网站制作，是必要选择。
所以，为了要迎合时势需要，也为了扩大市场，为了打响品牌知名度，特建设了本网站，以做到向用户和相关人员宣传的这样一个效果。
1.3 网站整体结构
网站结构是指网站页面之间的层次关系，按照性质可分为逻辑结构及物理结构。网站结构对网站的搜索引擎有着非常重要的影响。网站结构是用来衡量网站用户体验好与坏的重要指标之一。一个清晰的网站结构可以帮助用户快速获取所需信息。
以下是本站的网站框架结构图：

图1-1 网站结构图
第二章 前期准备
2.1 素材收集整理
1.素材的收集
通过搜索引擎进行关键字搜索有关咖啡的图片和自己拍摄的材料，把搜集的材料去粗取精，去伪存真，利用photoshop处理后，放入相应文件夹中。
2.素材的制作
把上述所收集的图片根据网站的风格进行裁剪、加工与优化。把相关的图片加入文字效果，并进行美化且色彩合理搭配。根据网站的需要对图片进行色彩和形状的方面的改变，从而达到网站所展示出来的效果。
3．素材的整理
网站所有内容都统一放置一个文件夹中并命名为毕业设计，在其子文件夹新建image文件夹、css样式文件夹、flash文件夹、scripts文件夹。素材图片进行分类命名统一放在image文件夹中。
2.2 LOGO设计
logo作为一种识别和传达信息的视觉图形，以其简约、优美的造型语言，体现着品牌的特点和企业的形象，本站的logo是在photoshop中设计的，以名字命名，简洁，方便。
我设计的首页logo和其他各页面的logo从各方面都是一样的，主要的是大小不一样，是区分与首页与其他各页面的不同。
2.3 Banner设计
Banner设计使用图片轮播的方式。图片轮播是主要就是利用Flash技术实现，利用Flash技术主要优势，网络的发展和互联网用户的增多Flash用途广泛，Flash的文件存储量非常小，有利于在各种网络带宽的互联网上传播，Flash的即下即看的模式可以节省时间，Flash软件的扩展性好功能完备，并且各方面成本较低。
一个好的Banner设计能影响到一个网站的点击量与成交率，本站的图片轮播运用了LOGO与图片的结合，利用Flash处理的动态效果，可以带给人一种激动的感觉。图片轮播采用了带有产品logo的餐具、器皿、品牌广告词的图片，各种图片都展现了本品牌给人的真诚、幸福感。
2.4 首页效果图
首页的网页布局采用了上下框架设计，其他子页面采用了拐角型以及左右框架型设计。背景采用了暖色调，整个网站的色调运用代码的设置可一键变换主题颜色，具体有咖啡色、浅咖啡色、卡其色、白色、嫩黄色、黑色这几种不同的颜色。网页排版也要符合用户的阅读习惯，采用横向排列方式，版块层次较分明。

图2-1 首页设计图

第三章 网页设计制作
3.1 首页设计制作
网站首页担负着网站“形象大使”的责任，从首页就基本能窥探出网站的定位和服务对象，艾玲咖啡网站导航栏包括：艾玲首页、艾玲餐饮、关于艾玲、艾玲资讯、合作加盟、联系我们，动态功能主要包括图片轮播、script脚本。首页运用静态和动态相结合布局成整个网站的首页，运用代码来实现了首页轮播图的动态效果。浏览者可以在艾玲餐饮中找到自己喜欢的产品，在艾玲资讯里找到最新的行业资讯，在合作加盟里找到你想加盟的流程，在联系我们里可以加入我们艾玲咖啡和我们成为一个大团队。

图3-1 图片轮播
一个好的图片轮播能影响到一个网站的点击量与成交率，本站的图片轮播运用了LOGO与图片的结合，利用photoshop里面的动态效果，实现了给人一种激情的感觉。

图3-2 script脚本
最新加盟店利用了div、script语言把图片处理为的左右滚动的效果、鼠标经过则会暂停。<div id=www_qpsh_com
style=overflow:hidden;height:180px;width:1000px;color:#ff0000><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=www_qpsh_com1 valign=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td><img src="image/t016a21329c2f017419.gif" width="240" height="160" hspace=10/><br></td>
<td><img src="image/t0179d498aae2d07bf6.gif" width="240" height="160" hspace=10/><br></td> <td><img src="image/t01cd67e86cccf91beb.gif" width="240" height="160" hspace=10/><br></td> <td><img src="image/t0195dff254b3b05212.jpg" width="240" height="160" hspace=10/><br></td></tr></table></td>
<td id=www_qpsh_com2 valign=top></td></tr></table></div>
<script>var speed=10//速度数值越大速度越慢 www_qpsh_com2.innerHTML=www_qpsh_com1.innerHTML
function Marquee(){
if(www_qpsh_com2.offsetWidth-www_qpsh_com.scrollLeft<=0)
www_qpsh_com.scrollLeft-=www_qpsh_com1.offsetWidth
else{www_qpsh_com.scrollLeft++ }}
var MyMar=setInterval(Marquee,speed)
www_qpsh_com.onmouseover=function() {clearInterval(MyMar)}
www_qpsh_com.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

图3-3 div
艾玲首页导航栏利用DIV做了导航条下拉的效果，给顾客更加清晰的划分产品类目，方便浏览。

图3-4 导航条设计图
导航条就是指通过一定的技术手段，来为网站的访问者提供一定的途径，使其可以方便地访问到所需要访问的内容，使人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。利用导航条，客户就可以快速找到我们想要浏览的页面。本站的导航条就是用微软隶书字体和咖啡色背景用区块来制作的，同时也设置了鼠标经过图像等手段。条理清晰以便客户快速找到自己所想要的。
3.2 其他页面设计制作
1、艾玲餐饮
本页面由咖啡、冰沙、特饮、西餐、套餐等系列组成，里面有各系列所包含的产品及介绍，内容丰富，产品精美，聚集了各区域的特色饮品。

图3-5 艾玲餐饮

图3-6 内嵌框架设计图
利用了内嵌框架，使在一个窗口中可以打开多个一面。
<iframe name="in" src=“oulei.html” width="500" height="500" scrolling="no" frameborder="0"></iframe>

图3-7 加盟课程
利用了鼠标经过图像
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../毕业设计/image/5312eef930fbd.jpg',1)"><img src="../毕业设计/image/5312eeec8fe93.jpg" name="Image11" width="198" height="88" border="0" id="Image11" /></a>
2、关于艾玲
此页面由集团远景、企业文化、行业定位等三个主要栏目组成，主要讲述了企业的文化背景、历史发展、各行业的动态信息，以及对这行业的定位，对企业以后的发展进行规划。

3、 艾玲资讯

图3-8 艾玲资讯
4、 合作加盟

图3-9 合作加盟
5、 联系我们

图3-12 联系我们

图3-13 加入我们
<form id="form1" name="form1" method="post" action="">
<p>姓名：<label><input type="text" name="textfield" id="textfield" /></label>
<span class="td3">（*此栏目为必填项）</span></p>
<p>地址：<label><input type="text" name="textfield2" id="textfield2" /></label></p>
<p>邮箱：<label><input type="text" name="textfield3" id="textfield3" /></label>
<span class="td3">（*此栏目为必填项）</span></p>
<p>电话：<label><input type="text" name="textfield4" id="textfield4" /></label>
<span class="td3">（*此栏目为必填项）</span></p>
<p>标题：<label><input type="text" name="textfield5" id="textfield5" /></label>
<span class="td3">（*此栏目为必填项）</span></p>
<p>内容：<label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></label>
</p><p><label><br /><br />
<input type="submit" name="button" id="button" value="提交信息" /></label>
<label><input type="submit" name="button2" id="button2" value="重新填写" />
</label></p></form>

第四章 调试运行
4.1 网站调试及处理
1.导航条的调试
导航主要是讲用户在一个页面内操作的方式，在不同的页面之间跳转，在同一个页面放置太多信息往往会起到相反的作用。网站用户趋向于目地驱动，想很快找到一个导航，得看是否有自己所需要的信息，如果没有，就很快会离开。很少有用户会愿意花时间去熟悉网站，因此，网站导航帮助要要尽可能地准确，在网站设计的过程中也出现过导航链接页面错误的行为，最后发现问题所在，主要是由于在设计过程中更改了放置网页的文件夹名称，本网站部分页面是使用模板来实现，所以文件夹名称改变，导航条的链接页面也就跟着出现了问题。
2.图片的调试
通过来浏览页面，并发现页面的上的Flash出现偏移的现象，然后经过反复的调整后，Flash以正确显示，没有在出现偏移、变形等现象。图片要尽可能小，但又不能影响到页面的整体美观，这样可以节省些空间。
3.内容调试
内容调试主要用来检测网站所提供信息的正确性、准确性和相关性。然后经过核对，页面显示内容和设计的内容保持一致，有部分字体布局稍微有些偏差但也不影响页面的整体效果。
4.2 网站运行
1.IIS安装
Internet Information Services（IIS，互联网信息服务），是由微软公司所提供的基于运行Microsoft Windows的互联网基本服务。
安装步骤如下：开始—设置—控制面板—添加和删除程序—添加/删除Windows组件—弹出一个【Windows组件向导】对话框， 配置成功后在搜索地址栏输入：http://localhost出现下图即为验证IIS安装成功。

2.IIS运行
访问127.0.0.1\tqj后成功显示出首页。

总结
经过一个月的奋战，让我紧张而又充实的毕业设计终于落下了帷幕。在想想这段日子里的经历和感受吧，我感慨万千，在这次毕业设计的过程当中，我拥有很多难忘的回忆还有收获，直到今天，论文才基本完成。我从最初的茫然，到后来慢慢的进入状态，再到对思路变得的清晰，在整个设计过程中难以用语言来表达。一开始时，面对毕业设计时真是很茫然，不知道该怎么办。然后我向指导老师咨询了下，在老师的细心指导下，终于使得我对现在自己的设计方向和方法有了初步的掌握和认识。
　　网站设计的初期，我由于经验不足，无从下手，脑袋里只有设计想法，却不知道选哪个，经过导师的指导，我的设计终于有了头绪，通过查阅资料，逐渐确立了网站的初步方案。当我终于完成了毕业设计后整个人虽然感觉很累，但看到这份毕业设计我的心里油然而生一种成就感，我就觉得这一切都值得了。这次毕业论文的制作过程是使我对于自身的一种提高，价值的一种提升。在论文当中我也充分地运用了在那大学期间所学到的专业知识。
　　我一定不会忘记在这一个月所付出的成果。毕业论文的制作给了我难忘的回忆，也是对于自身的一种肯定。在我在各种资料里找到合适的素材时的激动和兴奋；在亲手设计网站结构、图片和功能的时间里，记忆里最深的就是每一步小小思路实现时那种喜悦感；这段旅程看似荆棘密布，实则蕴藏着无尽的宝藏。
致谢
我觉得脚踏实地，认真严谨，实事求是的学习态度，不怕困难、坚持不懈、吃苦耐劳的精神是我在这次设计中最大的收益。我想这是一次对于我意志的一种磨练，也是对我实际能力的一次提升，也会对我未来的学习和工作带来很大的帮助。
　　在这一次的毕业设计中使得我们的同学关系更为融洽，同学之间在一起互相帮助，有什么不懂的大家在一起商量互相学习，听一听不同的看法方便于我们更好的理解知识，所以在这里我非常感谢帮助过我的同学。
　　在此我更要感谢我的导师和其他专业老师，是你们的细心指导和关怀，使得我能够顺利的完成毕业设计。在我的学业和毕业设计的研究工作中无不倾注着老师们辛勤汗水和心血。是老师的无私的奉献精神使我深受启发。从尊敬的老师身上，我不仅学到了扎实、专业知识，也学到了很多做人的道理。在此我要向我的指导老师刘宁老师致以最衷心的感谢和深深的敬意。
最后，也是最重要的，感谢所有这两年半中传授我知识、给予我关怀和帮助的老师们，谢谢你们！

文献
[1] 赵增敏编《ASP动态网页设计》，电子工业出版社,2009年
[2]赵小林、刘志强、郑洁主编《网页制作技术教程-动态网页篇》，国防工业出版社,2006年
[3]庄王健主编《网页设计三剑客白金教程》，电子工业出版社,2005年
[4]吴涛主编《网站全程设计技术（修订本）》，北京：北京交通大学出版社,2007年
[5] 汪泓，汪明艳《电子商务——理论与实践》，清华大学出版社，2010年10月
[6]汪斌等《VBScript与Jscript实例教程》，电子工业出版社，2009年
[7]廖恩阳《Access数据库程序设计》，清华大学出版社，2010年
[8] 《Photoshop CS2图像处理标准教程/清华电脑学堂》. 作者：郝军启、吴华.清华大学出版社.2006年
[9]黎文峰,吴颂志 .Dreamweaver4网页制作与设计.中国青年出版社.2010年7月
[10]张爱军.电子商务技术的创新发展趋势.电脑知识与应用.2011年9月
[11]李东博.dreamweaver+flash+photoshop网页设计入门到精通.清华大学出版社.2010年11月
[12]马增友.photoshop图像处理技术.清华大学出版社.2013年1月
[13]牟奇春.二维动画制作技术.中国人民大学出版社.2010年12月
[14]唐守国主编.创意Photoshop cs4网页设计、配色与特效案例精粹.清华大学出版社.2010 7月第一版
[15] 李雪瑗.基于Flash技术的精品课程网站设计与实现.山东师范大学.2012年9月
[16]李琼，flash8.0闪客动画轻松现场实战。航空工业出版社，2007年
[17]陈青，Flash MX 2004标准案例教材。人民邮电出版社，2006年
[18]徐丽娟.电子商务概论.机械工业出版社.2011年11月
- 24 -