搜索
1石----------------院顶岗实习岗位技术工作论文网页设计毕业论文学号:----------------姓名:-----------专业:软件技术年级:12级企业指导老师:-----二〇一五年三月题目网页设计毕业论文企业指导教师评语指导教师(签章)年月日第1页摘要计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大，尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，由于以上的优势，各类网站如雨后春笋般的出现，产品公司网站也不例外。毕业设计使用了Photoshop、Dreamweaver、div+css制作了产品企业网站的界面。论文阐述了产品网站的设计制作过程，主要包括市场调研、献检索、设计实践、设计自评四个部分，其中市场调研主要是通过调研知产品网站了解蜂产品网站建站的特点和优缺点、文献检索主要介绍设计网站所使用的Photoshop、Dreamweaver、div+css三个主要软件、设计实践主要具体介绍了产品网站建站具体步骤和设计思路、设计自评主要总结设计作品后的心得体会。关键词：网上产品销售；网页设计；企业网页；Dreamweaver第2页目录摘要…………………………………………………………11.文献检索……………………………………………………………61.1网页制作软件Dreamweaver…………………………………61.2Div+css简介…………………………………………………61.3平面设计软件Photoshop……………………………………72.设计实践…………………………………………………………82.1设计立意……………………………………………………92.2网站结构规划………………………………………………102.3网页详细设计………………………………………………112.2.1首页设计与制作………………………………………122.2.2公司新闻页制作……………………………………152.2.3新闻详情页制作………………………………………152.2.4产品展示页制作………………………………………152.2.5产品展示详情页制作…………………………………152.2.6关于我们页制作……………………………………152.2.7联系我们页制作……………………………………162.4创作总结…………………………………………………………163.设计自评……………………………………………………………17致谢………………………………………………………………18参考文献………………………………………………………………19第3页引言当今世界已进入信息时代，Internet成为21世纪最受关注的焦点之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。因此，企业网站的建立是一个企业在当今社会发展的必然趋势。企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对于企业来说至关重要,企业概况、企业论谈、企业特色服务、最新企业新闻动态等部分应该能够为用户提供充足的信息。企业网站做成检索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、信息化与世界接轨的重要条件。在IT行业迅速发展的今天,企业网站的建设已经成为一个企业发展必不可少的存在。对于创意设计有限公司来说，必须建立一个以宣传为目的的网站类型。将于短期内强力打造公司的宣传力度，让更多的客户了解信任公司。网站的建设，也是公司对于宣传方面的长期投资。社会上有很多保健品宣传网站，调查研究显示，保健品企业的知名度、企业的实力往往是和网站的制作水平成正比的。可见，保健品企业网站的建设十分重要，它的定位以及页面的风格设计直接影响着保健品企业在网络推广应用的成败。因此保健品企业建设公司网站可是必要的，它可以帮助企业实现在线产品宣传，为用户带来更多方便和快捷，大大提高了企业的服务效率，于无形中树立起了良好的企业形象。第4页文献检索1.1网页制作软件DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：（1）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。（2）装载器中包含一些打开和关闭常用检查器和模板的按钮。（3）对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。（4）属性检查器显示选定对象的属性。（5）快捷菜单可以使用户对当前选择或区域快速执行某些命令。（6）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。1.2DIV+CSS简介DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用第5页技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在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）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。1.3平面设计软件PhotoshopAdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像,是对已有的位图图像进行编辑、加工、处理以及运用一些特殊效果。。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及,是专业设计人员的首选软件。Photoshop是图像处理软件，其优势不在图形创作。AdobePhotoshop的适用范围很多，主要有：（1）专业测评：Photoshop的专长在于图像处理，而不是图形创作。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形。（2）平面设计：平面设计是Photoshop应用最为广泛的领域，无论是图书封面，还招帖、海报，这些平面印刷品都需要Photoshop软件对图像进行处理。（3）广告摄影：广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往第6页要经过Photoshop的修改才能得到满意的效果。（4）影像创意：影像创意是Photoshop的特长，通过Photoshop的处理可以将不同的对象组合在一起，使图像发生变化。（5）网页制作：网络的普及是促使更多人需要掌握Photoshop，因为在制作网页时Photoshop是必不可少的网页图像处理软件。（6）后期修饰：在制作建筑效果图包括许多三维场景时，人物与配景包括场景的颜色常常需要在Photoshop中增加并调整。（7）视觉创意：视觉创意与设计是设计艺术的一个分支，此类设计通常没有非常明显的商业目的，但由于他为广大设计爱好者提供了设计的空间，因此越来越多的设计爱好者开始学习Photoshop，并进行具有个人特色与风格的视觉创意。（8）界面设计：界面设计是一个新兴的领域，受到越来越多的软件企业及开发者的重视。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是该软件。Photoshop的界面组成，如图2.1所示。a)分图Photoshop界面组成图第7页b)网站结构图（1）企业首页网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容，是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。（2）公司新闻主要介绍出企业最新最近的各项动态和走向，通知以及一些定时更新的行业新闻，通过这一模块可以让客户更好的了解公司的日常运作和具体实施项目的细节，以及公司的整体走向和发展程度。也更好是让公司内部信息的流通和扩散。（3）产品展示一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于创意设计有限公司来说，没有其实际物品展示，只有展现其出众的业绩实例才能让客户信服，才能从侧面展现出公司的实力，让客户更放心的把业务交给公司处理。（4）关于我们具体介绍出企业的背景，经营项目，荣誉资质和公司的发展史，结网站首页联系方式关于我们产品展示公司动态新闻分类行业资讯新闻详情新闻详情新闻详情产品分类产品分类产品分类产品分类产品详情产品详情产品详情产品详情第8页构，业务流程等等一系列来加大公司的宣传力度，好让客户能全面的了解公司便于树立企业形象。（5）联系我们浏览者通过联系方式对我们提出意见和建议，通过这个发现我们的不足和好的地方，要是发现我们的不好，我们也可以接收到您的宝贵意见并给您最满意的答复，同时也是公司业务对外联系的窗口，是意向客户主动联系公司的重要途径。2.1网站详细设计网站主页结构布局如图dd)首页结构图如图c)网站相关子页结构布局子页导航栏首页banner栏新闻热点产品展示联系方式版权信息相关链接LOGO第9页d)子页结构图子页分二级页面和三级页面，整体结构与图3.3一样，所以在此不一一举例。2.2首页设计与制作网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容，是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。中间部分插入banner，让浏览者可以看到公司企业文化核心展示的图片信息。在banner面板的下方分别为公司新闻、产品展示、联系方式，让浏览者可以直接看到所需要的信息。最后，插