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

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