静态网页界面设计毕业论文.docx

1、静态网页界面设计毕业论文毕 业 论 文（设计）题 目 泾县蜂产品网站界面的设计与制作 指导老师 陈炜 专业班级 阿拉丁20111 姓 名 陈凡 学 号 * 2014 年 5 月 26 日摘要：计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大，尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，由于以上的优势，各类网站如雨后春笋般的出现，蜂产品公司网站也不例外。毕业设计使用了Photoshop、Dreamweaver、div+css制作了蜂产品企业网站的界面。论文阐述了蜂产品网站的设计制作过程，主要包括市场调研、献检索、设计实践、设计自

2、评四个部分，其中市场调研主要是通过调研知名蜂产品网站了解蜂产品网站建站的特点和优缺点、文献检索主要介绍设计网站所使用的Photoshop、Dreamweaver、div+css三个主要软件、设计实践主要具体介绍了泾县永春养蜂专业合作社的蜂产品网站建站具体步骤和设计思路、设计自评主要总结设计作品后的心得体会。关键词：网上蜂产品销售；网页设计；企业网页； Dreamweaver 引言当今世界已进入信息时代，Internet成为21世纪最受关注的焦点之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶

3、段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。因此，企业网站的建立是一个企业在当今社会发展的必然趋势。企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对于企业来说至关重要,企业概况、企业论谈、企业特色服务、最新企业新闻动态等部分应该能够为用户提供充足的信息。企业网站做成检索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实

4、时性强的功能完善的大型企业网站。这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、信息化与世界接轨的重要条件。在IT行业迅速发展的今天,企业网站的建设已经成为一个企业发展必不可少的存在。对于创意设计有限公司来说，必须建立一个以宣传为目的的网站类型。将于短期内强力打造公司的宣传力度，让更多的客户了解信任公司。网站的建设，也是公司对于宣传方面的长期投资。社会上有很多保健品宣传网站，调查研究显示，保健品企业的知名度、企业的实力往往是和网站的制作水平成正比的。可见，保健品企业网站的建设十分重要，它的定位以及页面的风格设计直接影响着保健品企业在网络推广应用的成败。因此保健品企业建设公司网站可是

5、必要的，它可以帮助企业实现在线产品宣传，为用户带来更多方便和快捷，大大提高了企业的服务效率，于无形中树立起了良好的企业形象。1. 市场调研在设计蜂产品网站之前，通过对大量企业网站浏览及时调查研究，发现和比较了几家比较典型和知名的蜂产品名企，总体定格网站设计思路，总结了各种企业网站的特色和制作，以冠生园官网为例，其界面如图1.1所示。 图1.1 冠生园官网首页冠生园作为蜂产品的行业老大，也是很多蜂产品企业仿效的对象，它的页面设计简单、大气。整体以灰色渐变为主，突出体现蜂产品的传统风格与纯天然气息。整体的四栏设计把需要强调的东西强调出来。而且，关于细节的LOGO不仅因为颜色的反差更加突出，在整个页

6、面多加入了Logo元素，是整体还有一种混天然的感觉，将企业重点突出，冠生园主页并不是用大幅内容放置产品，而是突出企业文化、食品安全和社会责任，这样会让更多的朋友看到企业会放心购买。蜂产品来自自然，也还给自然。客户就是上帝，冠生园以公益和责任，突出企业文化。页面右下方还加上自己的合作伙伴LOGO，体现企业的社会影响力和名誉，也让客户一看上去就能感觉到大气、责任、有影响的名牌企业。当然，在设计方面冠生园的主色调有些灰，不够体现绿色食品的宗旨；页面整体过于单调，过于强调整体感；主旨不够突出，最好将公司的宣传标语放在重点位置。泾县永春养蜂专业合作社，是一家集蜂产品采购、养蜂指导、蜂产品检测、产品包装一

7、条线的蜂产品初级企业，企业硬件发展的同时更需要软件的同步。网络宣传是当今社会主流的宣传方式，利用网络可以让更多客户了解企业，也有利于企业走出国门乃至世界。泾县永春养蜂专业合作社目前需要一个完善的宣传网站，而制作网站的工具很多，如dreamware, photoshop等等，毕业设计将借鉴冠生园公司的网站的优点，避免其不足，用dreamware, photoshop为泾县做一个有特色的企业网站，让人们进一步了解蜂产品、泾蜂园和永春蜂业。2. 文献检索2.1网页制作软件 DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨

8、浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作

9、区组件有以下若干种：（1）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。（2）装载器中包含一些打开和关闭常用检查器和模板的按钮。（3）对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。（4）属性检查器显示选定对象的属性。（5）快捷菜单可以使用户对当前选择或区域快速执行某些命令。（6）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。2.2 DIV+CSS简介DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式

10、,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介：（1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。（2）支持浏览器的向后兼容，也就是无论未来的浏览器

11、大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。（3）搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。（4）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 （5）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 （6）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。2.3 平面

12、设计软件PhotoshopAdobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像,是对已有的位图图像进行编辑、加工、处理以及运用一些特殊效果。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及,是专业设计人员的首选软件。Photoshop是图像处理软件，其优势不在图形创作。Adobe Photoshop的适用范围很多，主要有： （1）专业测评：Photoshop的专长在于图像处理，而不是图形创作。图像处理是对已有的位图图像进行编辑加

13、工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形。 （2）平面设计：平面设计是Photoshop应用最为广泛的领域，无论是图书封面，还招帖、海报，这些平面印刷品都需要Photoshop软件对图像进行处理。 （3）广告摄影：广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往要经过Photoshop的修改才能得到满意的效果。 （4）影像创意：影像创意是Photoshop的特长，通过Photoshop的处理 可以将不同的对象组合在一起，使图像发生变化。 （5）网页制作：网络的普及是促使更多人需要掌握Photoshop，因为在制作网

14、页时Photoshop是必不可少的网页图像处理软件。 （6）后期修饰：在制作建筑效果图包括许多三维场景时，人物与配景包括场景的颜色常常需要在Photoshop中增加并调整。 （7）视觉创意：视觉创意与设计是设计艺术的一个分支，此类设计通常没有非常明显的商业目的，但由于他为广大设计爱好者提供了设计的空间，因此越来越多的设计爱好者开始学习Photoshop，并进行具有个人特色与风格的视觉创意。 （8）界面设计：界面设计是一个新兴的领域，受到越来越多的软件企业及开发者的重视。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是该软件。 Photoshop的界面组成，如图2.1所示。 图

15、2.1 Photoshop界面组成图3. 设计实践3.1设计立意 本作品为蜂产品企业网站，主要介绍泾县养蜂永春专业合作社的蜂产品，蜂产品知识、公司企业文化，让更多的人了解泾县养蜂永春专业合作社。 蜂产品的网站需要有绿色大自然的气息，然后我做的是企业网站，不需要过多花哨的东西点缀，采用层叠样式表的应用，使用CSS实现出一个完美的网站。布局方法采用软件布局法，利用Photoshop软件对图像进行编辑。网页配色选用白色与灰色的色彩搭配，来实现企业网站的简单大方。 3.2 网站结构规划 泾县养蜂永春专业合作社网站界面设计的具体结构设计为以下5个模块，网站总体结构图如图3.1所示。 图3.1 网站结构图

16、 （1）企业首页网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容，是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。 （2）公司新闻主要介绍出企业最新最近的各项动态和走向，通知以及一些定时更新的行业新闻，通过这一模块可以让客户更好的了解公司的日常运作和具体实施项目的细节，以及公司的整体走向和发展程度。也更好是让公司内部信息的流通和扩散。 （3）产品展示一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于创意设计有限公司来说，没有其实际物品展示，只有展现其出众的业绩实

17、例才能让客户信服，才能从侧面展现出公司的实力，让客户更放心的把业务交给公司处理。 （4）关于我们具体介绍出企业的背景，经营项目，荣誉资质和公司的发展史，结构，业务流程等等一系列来加大公司的宣传力度，好让客户能全面的了解公司便于树立企业形象。 （5）联系我们浏览者通过联系方式对我们提出意见和建议，通过这个发现我们的不足和好的地方，要是发现我们的不好，我们也可以接收到您的宝贵意见并给您最满意的答复，同时也是公司业务对外联系的窗口，是意向客户主动联系公司的重要途径。3.3网站详细设计 网站主页结构布局如图3.2。 图3.2 首页结构图 网站相关子页结构布局如图3.3。图3.3 子页结构图子页分二级页

18、面和三级页面，整体结构与图3.3一样，所以在此不一一举例。3.3.1 首页设计与制作 网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容，是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。中间部分插入banner，让浏览者可以看到公司企业文化核心展示的图片信息。在banner面板的下方分别为公司新闻、产品展示、联系方式，让浏览者可以直接看到所需要的信息。最后，插入公司网站信息，联系方式以及站内站外链接，让客户更方便的找到自己想要的东西。首页包括网站logo、导航栏、banner、3个图文

19、信息栏、底部公司信息、链接等组件。 网站的Logo就是网站的标志，也是互联网上各个网站用来与其他网站链接的图形标志。 由于做的蜂产品企业网站是真实存在的，即不可变更其logo，所以引用了一个蜂蜜团的logo，如图3.4所示。 图3.4 蜂产品LOGO首页背景还是突出简单、大气，主要考虑到蜂产品本身属于绿色食品，所以选用了简单的白色为背景。导航栏主要还是用了与背景类似的颜色。简洁、明了体现企业特色。如图3.5所示。图3.5 首页导航栏 加上宋体标题后最终完成导航栏，如图3.6所示。 图3.6 首页导航栏效果图首页banner要体现企业的高端、大气、上档次，二是要体现蜂产品特色的风格。三是要符合整

20、体的页面设计，具体效果如图3.11所示。（1）首先在网上找了一个风景图片，把不需要的部分用图章工具抹去，在进行调色，如图3.7所示.图3.7 图片调色（2）在网上下载一个石狮子，用钢笔抠出来，放到图中，再进行调色，如图3.8所示.图3.8 图片处理（3）整体效果定型后，整体合并调色，如图3.9所示.图3.9 合并处理 （4）最后加上公司字样和一只小蜜蜂体现企业为特色，如图3.10所示.图3.10 添加标识图3.11 首页banner而banner下方是三栏信息栏，分别放置新闻、产品和联系方式3个重要信息，以便使用者更方便找到主要内容，如图3.12所示。图3.12 信息栏底部左侧主要还是设计了网

21、站开发者的信息和版权，右侧主要设计了一些相关方面的链接。如图3.13所示。图3.13 底部信息栏最后切片且保存为index.html。在相应按钮上添加链接到相应页面。首页最终效果图，如图3.14所示。图3.14 首页最终效果图 其他子页效果上下部分和首页相同，在此不一一列举。3.3.2 公司新闻页制作点击主页导航条上的公司新闻或者点击首页下方的第一个信息栏文字，就能进入二级页面下的公司新闻页，左边放了泾县永春养蜂专业合作社的公司新闻、最新动态、行业新闻、新闻分类四个大类目，每个类目下都有具体的新闻列表。如图3.15所示。 图3.15公司新闻页效果图 3.3.3 新闻详情页制作点击主页导航条上的

22、公司新闻或者点击相关子页主题新闻，就能进入三级页面下的新闻详情页，左边放了泾县永春养蜂专业合作社的公司新闻、最新动态、行业新闻、新闻分类四个大类目，右边详细新闻。如图3.16所示。 图3.16 新闻详情页效果图 3.3.4 产品展示页制作 点击主页导航条上的产品展示或者首页下方的第二个信息栏文字、图片，就能进入二级页面下的产品展示页，左边放了泾县永春养蜂专业合作社的产品分类四个大类目，右边产品图片和详情介绍，具体效果如图3.17所示。3.3.5 产品展示详情页制作点击展品展示页上的产品或者主题或者首页下方的第二个信息栏文字、图片，就能进入三级页面下的产品展示详情页，左边放了泾县永春养蜂专业合作

23、社的产品分类四个大类目，右边具体产品图片详情介绍，具体效果如图3.18所示。图3.17 产品展示页效果图图3.18 产品图片详情页效果图3.3.6 关于我们页制作 点击主页导航条上的关于我们，就能进入二级页面下的关于我们页，左边放了泾县永春养蜂专业合作社的公司新闻、最新动态、行业新闻、新闻分类四个大类目，右边就是永春公司的公司简介，具体效果如图3.19所示。图3.19 关于我们页效果图3.3.7 联系我们页制作 点击主页导航条上的联系我们或者主题或者首页下方的第三个信息栏文字，就能进入二级页面下的联系我们页，左边放了泾县永春养蜂专业合作社的公司新闻、最新动态、行业新闻、新闻分类四个大类目，右边

24、就是永春公司的联方式。如图3.20所示。图3.20 联系我们页效果图 其他详情页面的结构和制作过程与图3.20相同，在此不一一举例。3.4创作总结经过为期半年的实习，在不懈的努力下终于完成了，从刚开始接触报告的时候到现在全部完成，虽然时间不是很长，但是所做的工作还是很多的，在课程设计的过程中，我不断地从讨论，分析到整理，到最终的完成稿，在其中我们花费的精力虽然很多，但是坚持的精神得到了最大的体现。学习电子商务的这几年，经历过的网站制作工具有很多，比如说Dreamweaver， Fireworks，Flash，FrontPage还有Photoshop，但从来也没有深入而系统的认识和了解，更谈不上

25、如何去分析，如何去整理和归纳。除了作业中自己摸索，了解，运用这些软件，其他更深层次的软件的更是从来没有涉及过，所以不做深层的了解。设计下来，我觉得收获很多，不仅对于制作网页的软件有一个全新的认识，并且在系统设计的技术方面也有了质的飞跃。关于这次总结，先从网站的页面设计说起，在设计过程中，注意到对于电子商务网站BtoC还是诸多好评的，单单从方便角度出发，已经是一个很重要的优点了，页面设计过程的时候，有些页面设计的填写，可详尽可简略，凸显主题，不是很能体现出这次调查的全面性，页面设计的很好，但从某些方面不是很完善，但是对于这次我觉得我们做的很尽心，我们努力的选择不同风格的页面去设计，并且在网页设计

26、中，我们尽量的全面的问及我们所能涉及的问题，我们发现我们的获益很多，不仅仅单纯从问卷调查的过程，更从讨论中，汇总中我们了解了更多的知识，也全面提高我们对问题的分析能力。这次网站设计，我总结了几点：（1）确定网站主题：对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。（2）掌握建网工具：在制作网页的时候，一定要熟练掌握软件的运用，要不断的摸索，对于细节的处理，我们需要做很多东西，只有不断的练习，才会更好的运用软件。（3）确定网站界面 ：网站的题材确定后，就要将收集到的资料内容作一个合

27、理的编排，尽可能删除那些与主题无关的栏目，尽可能将网站内最有价值的内容列在栏目上，尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、各板块要有相对独立性，各板块要有相互关联，各板块的内容要围绕站点主题；按栏目内容建立子目录。子目录的建立，首先按主栏目建立。友情连接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：网站简介、站长情况等可以合并放在一个统一目录下。所有程序一般都存放在特定目录，在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很

28、是不方便，比如在栏目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。原因很简单，就是方便维护与管理。（4）确定网站风格：“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放

29、的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的。 最后来说说自己的日记以及个人总结的撰写，在刚开始写日记的时候，感觉思绪很匮乏，不知道该写些什么，虽然一天做的事很多，但是总感觉是流水账，在慢慢的几天适应以后，发现对于课程设计的体会越来越多，虽然在字数方面变化不大，但对于自己的体会感觉真的多了不少，也感觉到了在合作时完成任务的兴奋感和自己独立完成任务的感觉是不同的，在自己完成任务的时候，感觉很充实，但是我想一个人做事，涉及面不会是很广但是都融汇了自己的看法，也是一种突破。在此，我对此次课程设计做出自己的一些总结，在这次课程设计中，我发现了团队的重要性，分工的重要性

30、，从该开始的懵懂，但最后慢慢完成所有的任务，我充分体会到了合作的真谛，在合作的过程之中我体会到了，相互合作是非常重要的，在一些细节方面，多亏小组成员的指点，让我发现许多的不足，在某些逻辑思考的不完善，节约了很多时间，因此最后很好的得完成任务。在此看来，团结合作的智慧和力量是不可忽视的，每个人都有自己所擅长的部分，只有团结一切可以团结的力量，发挥每一个人的才能，同心协力，才能够把任务最好得完成。4. 设计自评关于本次设计，设计思路来源于绿色食品，设计理念参考冠生园，汲取了多家蜂产品网站的优点，将宣传产品、树立品牌、互动分享作为建站的重点，也实现了企业对外开放的最大程度，不仅给企业带来了良好的社会

31、反响，而且有助于蜂产品知识和企业文化的推广，实现了品牌推广和产品推广的双赢局面。在利用软件方面，我主要利用了Photoshop、Dreamweaver、div+css三个软件的开发。总的来说我的设计有以下几点特色： （1）结构简洁又不失大气风范，整体结构采用了冠生园风格，但是BANNER页设计突出大气形象，整体和谐、美观。 （2）开设富有特色的页面设计，许多企业网站多以文字介绍为主，但是我的设计还有一个图片展示子页，设计思路来源于淘宝，目的是让更多人了解产品。 （3）突出产品特性，绿色主题，作为绿色食品的蜂蜜，建站的风格我没有弄得很庄重，而是以绿色logo和白色基调设计，体现出自然、朴实。参考

32、文献1张玉祥.色彩构成M.北京：中国轻工业出版社，2008.11.2徐莉.HTML与CSS前台页面设计M.北京：中国水利水电出版社，2006.5.3戴一波.Dreamweaver CS3网站制作炫例精讲M.北京：电子工业出版社，2008.1.4何秀芳.网页制作与网站建设课堂实录M.北京：人民邮电出版社,2009.3.5唐守国.创意+：Photoshop cs4网页设计、配色与特效案例精粹M. 北京：清华大学出版社，2010.7.6王征主.JavaScript网页特效实例大全M. 北京：清华大学出版社，2006.9.7史晓燕，苏萍.网页设计基础（HTML，CSS和JavaScript）M. 北京：清华大学