1、毕 业 论 文（设计）题 目 泾县蜂产品网站界面的设计与制作 指导老师 陈炜 专业班级 阿拉丁 20111 姓 名 陈凡 学 号 20112010149 2014 年 5 月 26 日浙江经贸职业技术学院毕业论文（设计）第 1 页摘要：计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大，尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，由于以上的优势，各类网站如雨后春笋般的出现，蜂产品公司网站也不例外。毕业设计使用了 Photoshop、Dreamweaver、div+css 制作了蜂产品企业网站的界面。论文阐述了蜂产品网站的设计制作
2、过程，主要包括市场调研、献检索、设计实践、设计自评四个部分，其中市场调研主要是通过调研知名蜂产品网站了解蜂产品网站建站的特点和优缺点、文献检索主要介绍设计网站所使用的Photoshop、Dreamweaver、div+css 三个主要软件、设计实践主要具体介绍了泾县永春养蜂专业合作社的蜂产品网站建站具体步骤和设计思路、设计自评主要总结设计作品后的心得体会。关键词：网上蜂产品销售；网页设计；企业网页； Dreamweaver 浙江经贸职业技术学院毕业论文（设计）第 2 页目 录引言 .11. 市场调研 .12. 文献检索 .32.1 网页制作软件 DREAMWEAVER .32.2 DIV+CS
3、S 简介 .42.3 平面设计软件 PHOTOSHOP.43. 设计实践 .63.1 设计立意 .63.2 网站结构规划 .63.3 网站详细设计 .83.3.1 首页设计与制作 .93.3.2 公司新闻页制作 .133.3.3 新闻详情页制作 .133.3.4 产品展示页制作 .143.3.5 产品展示详情页制作 .143.3.6 关于我们页制作 .163.3.7 联系我们页制作 .173.4 创作总结 .184. 设计自评 .20参考文献 .21浙江经贸职业技术学院毕业论文（设计）第 0 页引言当今世界已进入信息时代，Internet 成为 21 世纪最受关注的焦点之一,它的飞速发展和在全
4、球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。因此，企业网站的建立是一个企业在当今社会发展的必然趋势。企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对于企业来说至关重要,企业概况、企业论谈、企业特色服务、最新企业新闻动态等
5、部分应该能够为用户提供充足的信息。企业网站做成检索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、信息化与世界接轨的重要条件。在 IT 行业迅速发展的今天,企业网站的建设已经成为一个企业发展必不可少的存在。对于创意设计有限公司来说，必须建立一个以宣传为目的的网站类型。将于短期内强力打造公司的宣传力度，让更多的客户了解信任公司。网站的建设，也是公司对于宣传方面的长期投资。社会上有很多保健品宣传网站，调查研究显示，保健品企业的知名度、企业的实力往往是和网站的制作水平成正比的。可
6、见，保健品企业网站的建设十分重要，它的定位以及页面的风格设计直接影响着保健品企业在网络推广应用的成败。因此保健品企业建设公司网站可是必要的，它可以帮助企业实现在线产品宣传，为用户带来更多方便和快捷，大大提高了企业的服务效率，于无形中树立起了良好的企业形象。浙江经贸职业技术学院毕业论文（设计）第 1 页1. 市场调研在设计蜂产品网站之前，通过对大量企业网站浏览及时调查研究，发现和比较了几家比较典型和知名的蜂产品名企，总体定格网站设计思路，总结了各种企业网站的特色和制作，以冠生园官网为例，其界面如图 1.1 所示。图 1.1 冠生园官网首页冠生园作为蜂产品的行业老大，也是很多蜂产品企业仿效的对象，
7、它的页面设计简单、大气。整体以灰色渐变为主，突出体现蜂产品的传统风格与纯天然气息。整体的四栏设计把需要强调的东西强调出来。而且，关于细节的 LOGO 不仅因为颜色的反差更加突出，在整个页面多加入了 Logo 元素，是整体还有一种混天然的感觉，将企业重点突出，冠生园主页并不是用大幅内容放置产品，而是突出企业文化、食品安全和社会责任，这样会让更多的朋友看到企业会放心购买。蜂产品来自自然，也还给自然。客户就是上帝，冠生园以公益和责任，突出企业浙江经贸职业技术学院毕业论文（设计）第 2 页文化。页面右下方还加上自己的合作伙伴 LOGO，体现企业的社会影响力和名誉，也让客户一看上去就能感觉到大气、责任、
8、有影响的名牌企业。当然，在设计方面冠生园的主色调有些灰，不够体现绿色食品的宗旨；页面整体过于单调，过于强调整体感；主旨不够突出，最好将公司的宣传标语放在重点位置。泾县永春养蜂专业合作社，是一家集蜂产品采购、养蜂指导、蜂产品检测、产品包装一条线的蜂产品初级企业，企业硬件发展的同时更需要软件的同步。网络宣传是当今社会主流的宣传方式，利用网络可以让更多客户了解企业，也有利于企业走出国门乃至世界。泾县永春养蜂专业合作社目前需要一个完善的宣传网站，而制作网站的工具很多，如 dreamware, photoshop 等等，毕业设计将借鉴冠生园公司的网站的优点，避免其不足，用 dreamware, phot
9、oshop 为泾县做一个有特色的企业网站，让人们进一步了解蜂产品、泾蜂园和永春蜂业。2. 文献检索2.1网页制作软件 DreamweaverDreamweaver 是创建和管理网页的专业化可视编辑器。使用 Dreamweaver 可以轻松创建跨平台、跨浏览器的页面。Macromedia 的 Roundtrip HTML 技术允许用户随意导入 HTML 文档而无需重新设置代码格式。Dreamweaver 可以为用户做到：使用动态 HTML 功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver 还是一个可
10、以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写 JavaScript 代码扩展 Dreamweaver 的行为和属性检查器。至于 Dreamweaver 工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的 Dreamweaver 工作区组件有以下若干种：（1）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。（2）装载器中包含一些打开和关闭常用检查器和模板的按钮。（3）对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按浙江经贸职业技术学院毕业论文（设计）第 3 页钮。（4）属性检查器显示选定对象的属性。（5）快捷菜单可以
11、使用户对当前选择或区域快速执行某些命令。（6）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。2.2 DIV+CSS简介DIV+CSS 是网站标准（或称 “WEB 标准” ）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的 HTML 网页设计语言中的表格（table）定位方式,真正地达到了 w3c 内容与表现相分离。HTML 语言自HTML4.01 以来，不再发布新版本，原因就在于 HTML 语言正变得越来越复杂化、专用化。XHTML 语言是一种可以将 HTML 语言标准化，用 XHTML 语言重写后的 HTML 页面可以应用
12、许多 XML 应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在 XHTML 网站设计标准中，不再使用表格定位技术，而是采用 DIV+CSS 的方式实现各种定位。以下是 DIV+CSS 的特点简介：（1）符合 W3C 标准。微软等公司均为 W3C 支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。（2）支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是 IE7或者是火狐，您的网站都能很好的兼容。（3）搜索引擎更加友好。相对与传统的 table, 采用 DIV+CSS 技术的网页，对于搜索引擎的收录更加友好。（4）样式的调整更加方便。内容和样
13、式的分离，使页面和样式的调整变得更加方便。 现在 YAHOO,MSN 等国际门户网站，网易，新浪等国内门户网站，和主流的 WEB2.0 网站，均采用 DIV+CSS 的框架模式，更加印证了 DIV+CSS是大势所趋。 （5）CSS 的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 （6）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。浙江经贸职业技术学院毕业论文（设计）第 4 页2.3 平面设计软件 PhotoshopAdobe Photoshop，简称“PS” ，是由 Adobe Systems 开发和发行的图像处理软件。
14、Photoshop 主要处理以像素所构成的数字图像,是对已有的位图图像进行编辑、加工、处理以及运用一些特殊效果。 。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps 有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及,是专业设计人员的首选软件。Photoshop 是图像处理软件，其优势不在图形创作。Adobe Photoshop 的适用范围很多，主要有：（1）专业测评：Photoshop 的专长在于图像处理，而不是图形创作。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形。（
15、2）平面设计：平面设计是 Photoshop 应用最为广泛的领域，无论是图书封面，还招帖、海报，这些平面印刷品都需要 Photoshop 软件对图像进行处理。（3）广告摄影：广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往要经过 Photoshop 的修改才能得到满意的效果。（4）影像创意：影像创意是 Photoshop 的特长，通过 Photoshop 的处理 可以将不同的对象组合在一起，使图像发生变化。（5）网页制作：网络的普及是促使更多人需要掌握 Photoshop，因为在制作网页时 Photoshop 是必不可少的网页图像处理软件。（6）后期修饰：在制作建筑效果图包括许多三维场
16、景时，人物与配景包括场景的颜色常常需要在 Photoshop 中增加并调整。（7）视觉创意：视觉创意与设计是设计艺术的一个分支，此类设计通常没有非常明显的商业目的，但由于他为广大设计爱好者提供了设计的空间，因此越来越多的设计爱好者开始学习 Photoshop，并进行具有个人特色与风格的视觉创意。（8）界面设计：界面设计是一个新兴的领域，受到越来越多的软件企业及开发者的重视。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是该软件。Photoshop 的界面组成，如图 2.1 所示。浙江经贸职业技术学院毕业论文（设计）第 5 页图 2.1 Photoshop 界面组成图3. 设计
17、实践3.1设计立意本作品为蜂产品企业网站，主要介绍泾县养蜂永春专业合作社的蜂产品，蜂产品知识、公司企业文化，让更多的人了解泾县养蜂永春专业合作社。 蜂产品的网站需要有绿色大自然的气息，然后我做的是企业网站，不需要过多花哨的东西点缀，采用层叠样式表的应用，使用 CSS 实现出一个完美的网站。布局方法采用软件布局法，利用 Photoshop 软件对图像进行编辑。网页配色选用白色与灰色的色彩搭配，来实现企业网站的简单大方。 3.2 网站结构规划 泾县养蜂永春专业合作社网站界面设计的具体结构设计为以下 5 个模块，网站总体结构图如图 3.1 所示。浙江经贸职业技术学院毕业论文（设计）第 6 页图 3.
18、1 网站结构图 （1）企业首页网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容，是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。（2）公司新闻主要介绍出企业最新最近的各项动态和走向，通知以及一些定时更新的行业新闻，通过这一模块可以让客户更好的了解公司的日常运作和具体实施项目的细节，以及公司的整体走向和发展程度。也更好是让公司内部信息的流通和扩散。（3）产品展示一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于创意设计有限公司来说，没有其实际物品展示，只有展现其出众的业绩实例才能让客户信服，才能从侧面展现出公司的实力，让客户更放心的把业务交给公司处理。（4）关于我们具体介绍出企业的背景，经营项目，荣誉资质和公司的发展史，结构，业务流程等等一系列来加大公司的宣传力度，好让客户能全面的了解公司网站首页公司新闻联系方式关于我们产品展示公司新闻公司动态新闻分类行业资讯新闻详情新闻详情新闻详情新闻详情产品分类产品分类产品分类产品分类产品详情产品详情产品详情产品详情
