竹城商品有限公司官方网站设计与实现毕业设计论文.doc

《竹城商品有限公司官方网站设计与实现毕业设计论文.doc》由会员分享，可在线阅读，更多相关《竹城商品有限公司官方网站设计与实现毕业设计论文.doc（28页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、毕 业 设 计毕业设计题 竹城商品有限公司官方网站设计与实现 毕业设计类型产品设计 工艺设计 方案设计 姓名 班级 所属系部 物流信息系 专业 电子商务 指导教师 职称 完成时间 摘要随着计算机信息技术快速演变与互联网1.0向2.0不断纵深，以虚拟经济为依托的电子商务正在逐步走上历史舞台，发展成为我国新兴产业的中间力量。信息经济时代，电子商务对经济发展的影响呈现出明显的“乘数效应”，带动我国传统经济领域的二次腾飞，为广大毕业新青年创造大量就业机会，为实现我国GDP的快速稳定增长起到至关的推动作用。可以说，电子商务正在发挥着越来越重要的基础设施平台作用，汇聚了海量生产信息、交易信息与消费者信息，

2、深刻改变着消费行为、企业形态与社会价值创造方式，对我国经济的深远意义远远超过工业时代。电子商务与传统的商务比较具有巨大优势，特产行业应当及时抓住这个机遇，大力发展电子商务，加速产业流通，利用电子商务手段扩大产品市场和树立产品品牌，为土特产品走出深山面向市场提供巨大的支撑作用，帮助土特产行业进行突飞猛进的发展。竹城商品有限公司网站导航栏包括：首页、公司简介、新闻动态、产品展示、产品文化、美食传说、联系我们，网站首页担负着网站“形象大使”的责任，从首页就基本能窥探出网站的定位和服务对象。竹城商品有限公司网站其他子页面包括：产品展示、公司简介、新闻动态、产品文化、美食传说，每个页面的功能不尽相同，公

3、司新闻、产品分类等都在子页面展示。关键词：竹城商品、竹城特产、网站设计与实现1目录第一章 设计背景31.1 企业网站设计目的51.2 网站建设需求分析71.3 网站总体结构8第二章 前期准备92.1 素材收集整理92.2 LOGO设计92.3 Banner设计112.4 首页效果图12第三章 网页设计制作133.1 首页设计制作143.2 其他页面设计制作20第四章 调试运行214.1 网站调试及处理214.2 网站运行24总 结25致 谢26参考文献27第1章 设计背景1.1企业网站设计目的1.企业简介竹城商品有限公司是一家专门做永州特产的公司。为了将永州独特的特产推向消费市场。让更多的人知

4、道永州特产文化及历史背景，让更多人更加了解永州特产的独特。让永州特产住进每个人的生活里。竹城商品有限公司，特产食品行业知名品牌，湖南省著名商标，湖南省名牌产品，全国食品质量工业优秀龙头食品企业，全国农产品加工业出口示范企业，专业从事籽仁系列产品及其他水果、肉类产品的加工、销售的中外合资企业竹城商品有限公司，是一家具有出口自营权的中外合资企业，成立于2014年10月4日，下辖一个全资子公司、两个销售分公司、二个生产厂，总占地面积15万平方米。 2.品牌简介公司主营业务为籽仁系列产品及其他水果、肉类产品的加工与销售。公司产品包括吊瓜子籽仁、红瓜子、葵花籽仁等籽仁类产品；银杏果等坚果类产品；瓜籽系列

5、综合利用产品以及豆类、杂粮等其他产品。其中吊瓜子籽仁、红瓜子为本公司的主要产品。产品销售分为国外和国内两个渠道，国外市场分布在欧、美、亚及大洋洲等20几个国家和地区，国内市场已经同华润万家、大润发、步步高等国内知名的大型连锁超市和食品加工、批发厂家建立了友好合作关系，形成了覆盖面广、服务体系完善的国内外销售网络。 公司视产品质量如生命，以持续向广大消费者提供安全与健康的产品为前提，建立了质量管理体系，对原材料采购、在产品、产成品制定标准化的操作规程和质量标准，从原料采购到各个生产加工过程直到产品销售，都严把产品质量关，实现了“全员参与、全面落实、全程控制”，不断提高技术水平，全力构建食品安全体

6、系。建设了占地200余平米的检测中心，实现了纯度、水分、酸价、过氧化值、霉菌、大肠菌群等多项物理、化学、微生物指标的自主检测。 2014年以来，公司以“公司+农户+基地”的模式，进行红瓜子种植基地建设。公司充分调动农户种植积极性，向农户提供种植技术指导，聘请农业大学教授为顾问，深入田间地头为农户进行种植技术培训，提供技术服务，与农户签订种植回收合同，保护价回收产品，彻底解决了农户的后顾之忧。 回顾过去，激情满怀。展望未来，任重道远。我们将一如既往的以“超越、卓越、合和、共赢”核心价值观为指导，以“做良心食品、做放心企业”为使命，积极履行企业的社会责任，向“树百年品牌、建百年企业”的目标迈进。3

7、.设计目的公司官网的设计其实都是为了以下6点而设计的：第一、降低企业销售利息，利用网上电子商务提高产品竞争力。第二、促进了信息的交流 ，进行行业信息收集及日常电子邮件的传输第三、提升了企业的服务品质 ，加强了对目标对象的售前售后服务。第四、推广提高产品的品牌形象第五、宣传企业自身形象。第六、寻求合资、合作伙伴 。以上6点可以让企业的商业机会得到有效扩大，在电子商务方式下可通过专业为您提供网上筹划，将信息传送给需求群体。利用电子商务与客户建立方便的联络方式进行业务洽谈。大幅度减少了人员出差的时间和费用，降低通信、传真、信息，同时主动在网上查询配件的相关商家的信息，并与其直接联系推销，从而有效降低

8、了推销本钱。更加宣传了企业的产品，通过企业网页宣传企业的同时。使其网页上的产品信息更加方便地传达到全球的目标客户群，建立网站前的企业，产品销售渠道受到很大的区域名限制，建立网站后，获得了更大的客户群体，为企业的产品走向国际打下了坚实的基础，从而不时提高产品的品牌形象。企业也可以不限区域的向外宣传企业的文化、企业的产品、服务品质以及新闻等方面的资讯。包括产品的各种性能参数，使用说明等；利用图文声像的网页形象宣传企业，以便于企业更快速地进行市场开拓和发展。所以，为迎合时势需要，也为了扩大市场，打响品牌知名度，特建设了本网站，以做到向用户和相关人员宣传的这样一个效果。1.2 网站建设需求分析电子商务

9、交易的个性化、自由化可为企业创造无限商机，降低成本，同时可以更好地建立同客户、经销商及合作伙伴的关系，为此，许多公司积极拓展电子商务，为客户服务，进行价值链集成。 随着全球信息网络的发展，Internet 在世界上已不仅仅是一种技术，更重要的是它已成为一 种新的经营模式。从 4C（ Connection.，Communication ，Commerce 。Co-operation ）层次上彻底改变了人类工作，学习，生活，娱乐的方式，已成为国家经济和区域经济增长的主要动力。Internet 正成为世界最大的公共资料信息库，它包含无数的信息资源，所有最新的信息都可以通过网络搜索获得。更重要的是，大

10、部分信息都是免费的，应用电子商务可使企业获得在传统模式下所无法获得的巨量商业信息，在激烈的市场竞争中领先对手。互联网真是商机无限。目前，我国许多企业上网，但只是展示企业网上形象，离电子商务的内涵还很远。企业上网并不代表实现了电子商务，只有当网站为企业带来实质性的帮助和显著的效益 （如新闻发布、网上调查、BBS 等），具备网上交易功能等的网站才是企业电子商务发展的方向，电子商务的核心应是商务，电子是一种手段。在互联网时代，企业应充分利用互联网的手段，洞察消 费者需求，冲破销售服务的限制，扩大市场机会，早日进行电子商务的实践，感受电子商务 的博大魅力，把机会踩在脚下，建立一个以服务客户为中心，满足

11、消费者及合作伙伴全方位 需求，吸引众多浏览者，增强企业品牌辐射效应的商务网站。 为此，我们结合网站将来发展方向，本着专业负责的精神，在原有网站的基础上，进一步强 化贵公司网站网站的互动性，完善产品展示功能，推荐新闻发布功能，售后服务功能，企业论坛等功能，密切上海宇威同其合作伙伴、经销商、客户、和浏览者之间的关系，优化企业 经营模式，提高企业运营效率。采用最新的技术架构和应用系统平台，协助贵公司网站优化 复杂的商业运作流程。1.3 网站整体结构 网站结构是指网站中页面间的层次关系，按性质可分为逻辑结构及物理结构。本网站支持图文动画混合编排，能够上传图片、动画、电影、附件，发布资讯等，能在前台显现

12、整洁标准的资讯内容，全站能生成静态格式。具有完整性和实时性，可随时更新网站内容及信息。并且作为一个展示型的网站，我们主要突出的是我们的品牌意识和企业文化，以及一些相关产品文化。以下是本网站的结构图：竹城商品有限公司 首页公司简介新闻动态产品文化美食传说联系我们产品展示图1功能结构分析示意图为了结构更清晰,网站文件名以英文或汉语拼音命名，便于记忆，便于推广,使用明确实用的网站导航，查找相关资讯相当方便,利用了首页框架、分类框架、页面模型分析明确，排列整齐。 具体页面结构分析：首页：采用了静态的展示效果，主要有一些当前资讯以及新产品的展示产品文化：介绍了本公司产品的历史文化及制作方法 产品展示：介

13、绍了本公司的一些产品，可分为粮油米面、干货山珍、休闲零食、水产肉类、生鲜果蔬等来进行分类； 新闻动态：当前政府对该类企业的支持以及该行业的相关动态 公司简介：介绍了本公司的企业文化、经营理念等美食传说：介绍了本公司每一款产品的来源与背后的故事联系我们：留有QQ在线咨询、电话、传真、地址、邮箱、网址方便大家联系第二章 前期准备2.1 素材收集整理1.素材的收集通过搜索引擎进行关键字搜索有关护肤品的图片，从中挑选合适的并加以保存，放入相应文件夹中。2.素材的制作把上述所收集的图片根据网站的风格进行裁剪、加工与优化。把相关的图片加入文字效果，且色彩搭配合理。根据网站的需要对图片进行色彩和形状的方面的

14、改变，从而达到网站所展示出来的效果。3素材的整理网站所有内容都统一放置一个文件夹中并命名为毕业设计，在其子文件夹新建images文件夹、css样式文件夹、flash文件夹。素材图片进行分类命名统一放在images文件夹中。动画素材统一放于flash文件夹中。2.2 LOGO设计logo作为一种识别和传达信息的视觉图形，以其简约、优美的造型语言，体现着品牌的特点和企业的形象，本站的logo是在photoshop中设计的，以名字命名，简洁、方便、易记。我设计的首页logo和其他各页面的logo都是一样的。背景都是采用透明色，这样更方便使用到不同的页面中。Logo大小：120px*60px图2-1

15、logo2.3 Banner设计Banner设计使用图片轮播的方式。图片轮播是利用Flash技术实现，利用Flash技术主要的优势有：网络的发展和互联网用户的增多，Flash的文件存储量非常小，有利于在各种网络带宽的互联网上传播，Flash的即下即看的模式可以节省时间，Flash软件的扩展性好功能完备，并且各方面成本较低。一个好的Banner设计能影响到一个网站的点击量与成交率，本站的图片轮播运用了不同类型产品的图片与公司的名称相结合组成，利用Flash处理的动态效果，实现了给人一种往下看的感觉。图片轮播采用了江华苦茶图片、金浩茶油图片、永州夏橙图片以及永州吊瓜子图片，各种图片展现了丰富网站内

16、容，简单明了的介绍了该网站的特产类型，给人视觉上的感官清晰自然更好的衬托出产品的特点。图2-2 banner设计的图片2.4 首页效果图网站首页图片轮播、导航条均以浅灰色为主，字体采用的黑色，为了帮助用户方便地浏览，每个网页都设有标题导航，且网页标题清楚地表明了网页的内容。网页排版符合用户的阅读习惯，采用横向排列方式，版块层次比较分明。图2-3 首页截图第三章 网页设计制作 3.1 首页设计制作首页由图片轮播、导航、首页、公司简介、新闻动态、产品展示、产品文化、联系我们、美食传说、产品分类、公司新闻组成，图片轮播是网页的中心旨意的体现，形象鲜明表达网站最主要的情感思想或宣传中心。导航可以是顾客

17、方便地访问到所需的内容，是顾客浏览网站时可以快速从一个页面转到另一个页面的快速通道。公司简介介绍可以向顾客展示公司品牌的发展历程、品牌使命、价值主张、科研背景等相关信息。产品分类将产品分为干货山珍、休闲零食、滋补养生、生鲜果蔬、粮油米面、水产肉类等，有利于顾客及时找到自己想要的产品，能节省顾客的时间。图3-1 图片轮播图片轮播部分本网站利用了flash，是图片轮流播放，使网页页面有了动态的效果。图3-2 产品展示 产品展示利用JavaScript语言把图片处理为鼠标经过图像更换图3-3 导航条设计 导航条是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人

18、们浏览网站时可以快速从一个页面转到另一个页面的快速通道。利用导航条，客户就可以快速找到我们想要浏览的页面。本站的导航条运用的字体是黑体，字体颜色是黑色和浅灰色的背景用photoshop来制作的，条理清晰以便客户快速找到自己想要的。3.2 其他页面设计制作1公司简介截图此页面介绍了本公司的企业文化、经营理念等,例如:湖南省永州市，原名零陵地区，简称永州，雅称“潇湘”，别称“竹城”，并以“绿色、健康、营养、美味”的经营理念等等.图3-4 公司简介2新闻动态截图当前政府对该类企业的支持以及该行业的相关动态等.图3-5 新闻动态3产品展示截图介绍了本公司的一些产品，可分为粮油米面、干货山珍、休闲零食、

19、水产肉类、生鲜果蔬等来进行分类。方便客户快速找到自己想要购买的产品。图3-6产品展示4.产品文化截图该页面介绍了本公司产品的历史文化以及产品特色图3-7 产品文化5.联系我们截图有QQ在线咨询、电话、传真、地址、邮箱、网址方便大家联系图3-8 联系我们6.美食传说截图介绍了本公司每一款产品的来源与背后的故事。让每个消费者都知道每一款产品都有它独有的文化底蕴。图3-9 美食传说第四章 调试运行4.1 网站调试及处理1.导航条的调试导航描述了用户在一个页面内操作的方式，在不同的页面之间跳转，在一个页面放置太多信息往往起到相反的作用。网站用户趋向于目地驱动，很快找到一个导航，看是否有自己所需要的信息

20、，如果没有，就会很快离开。很少有用户愿意花时间去熟悉网站，因此，网站导航帮助要尽可能地准确，在网站设计的过程中也出现过导航链接页面错误的行为，最后发现问题所在，由于设计过程中更改了放置网页的文件夹名称，本网站部分页面是使用模板实现，所以文件夹名称改变，导航条的链接页面也跟着出现了问题。2.图片的调试通过浏览页面，发现页面的Flash出现偏移的现象，经过反复调整后，Flash以正确显示，没有出现偏移、变形的现象。图片尽可能小，但又不影响页面美观，这样可以节省空间。3.内容调试内容调试用来检验网站提供信息的正确性、准确性和相关性。经过核对，页面显示内容和设计的保持一致，有部分字体布局稍微有些偏差但

21、也不影响页面的整体形象。4.2 网站运行1.IIS安装Internet Information Services（IIS，互联网信息服务），是由微软公司提供的基于运行Microsoft Windows的互联网基本服务。安装步骤如下：开始设置控制面板程序和功能打开或关闭windows功能Internet信息服务“web管理工具万维网服务确定控制面板管理工具，如下图：图4-1 IIS安装配置成功后在搜索地址栏输入：http:/localhost出现下图即为验证IIS安装成功。图4-2验证安装成功2.IIS运行访问/127.0.0.1/xxsp后成功显示出首页的截图如下：图4-3访问成功总结2014

22、年11月上旬，我开始了我的毕业设计工作，时至今日，设计基本完成。从最初的茫然，到慢慢的进入状态，再到对思路逐渐的清晰，整个写作过程难以用语言来表达。历经了1个月的奋战，紧张而又充实的毕业设计终于落下了帷幕。回想这段日子的经历和感受，我感慨万千，在这次毕业设计的过程中，我拥有了无数难忘的回忆和收获。11月下旬，在几经纠结中我的题目定了下来，以湖南供销网作为参考，将永州特产作为本次毕业设计的主题。由于动态网站学习不是很扎实，所以当毕业设计的任务目标定下来的时候，我当时便立刻着手资料的收集工作中，当时面对浩瀚的书海真是有些茫然，不知如何下手。在老师细心的指导下，终于使我对自己现在的工作方向和方法有了

23、掌握。在搜集资料的过程中，我破天荒的去到学校图书馆搜集资料，还在网上查找各类相关资料，将这些宝贵的资料全部记在U盘上，尽量使我的资料完整、精确、数量多，这有利于论文的撰写。然后我将收集到的资料仔细整理分类，及时拿给老师与同学进行沟通。12月上旬，当我终于完成了所有打字、排版、校对等任务后整个人都很累，但同时看着电脑荧屏上的毕业设计稿件我的心里是甜的，我觉得这一切都值了。这次毕业论文的制作过程是我的一次再学习，再提高的过程。在论文中我充分地运用了大学期间所学到的知识，将一个个难点攻克，达到了我想要的结果。致谢毕业论文暂告收尾，这也意味着我在学院的两年多的学习生活既将结束。回首既往，自己一生最宝贵

24、的时光能于这样的校园之中，能在众多学富五车、才华横溢的老师们的熏陶下度过，实是荣幸之极。在这两年多的时间里，我在学习上和思想上都受益匪浅。这除了自身努力外，与各位老师、同学和朋友的关心、支持和鼓励是分不开的.网页制作是枯燥繁琐而又富有挑战的。但老师的谆谆教导、同学的出谋划策及家长的支持鼓励，是我坚持完成论文的动力源泉。在此，我特别要感谢指导我做毕业设计的老师，他总是那么的细心、耐心教我，当我有不会的时候他会亲自教我，还帮我出谋划策。还要感谢教导我网页制作的老师以及教导我的PS实用软件的向老师、flash动画制作的老师。没有他们的悉心教导我也不可能这么快掌握网页制作和PS、flash这门技能，所

25、以在此我要衷心地感谢这几位老师。感谢电商班的各位同学，与他们的交流使我受益颇多。最后要感谢我的家人以及我的朋友们对我的理解、支持、鼓励和帮助，正是因为有了他们，我所做的一切才更有意义；也正是因为有了他们，我才有了追求进步的勇气和信心。时间的仓促及自身专业水平的不足，整篇论文肯定存在尚未发现的缺点和错误。恳请阅读此篇论文的老师、同学，多予指正，不胜感激.参考文献【1】Patrick McNeil 著 网页设计创意书 第2章基本设计原则【2】丁士锋著 网页制作与网站建设实战大全 1.3 网站建设的基本步骤【3】元呈明著 电子商务概论 出版社：化学工业出版社【4】井上诚一郎 JavaScript编程全解 出版社： 人民邮电出版社【5】唐守国主编.创意Photoshop cs4网页设计、配色与特效案例精粹.清华大学出版社.2010年7月第一版【6】李雪瑗.基于Flash技术的精品课程网站设计与实现.山东师范大学.2012年9月【7】马增友.photoshop图像处理技术.清华大学出版社.2013年1月【8】李东博.dreamweaver+flash+photoshop网页设计入门到精通.清华大学出版社.2010年11月27