网页设计毕业论文(标准格式-下载就能用!).doc

石----------------院 顶岗实习岗位技术工作论文

网页设计毕业论文

学 号: ---------------- 姓 名: ----------- 专 业: 软件技术 年 级: 12级 企业指导老师: -----

二〇一五年三月

1

题 目 网页设计毕业论文

企业指导教师

评 语

指导教师 (签章)

年 月 日

摘 要

计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大，尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，由于以上的优势，各类网站如雨后春笋般的出现，产品公司网站也不例外。毕业设计使用了Photoshop、Dreamweaver、div+css制作了产品企业网站的界面。论文阐述了产品网站的设计制作过程，主要包括市场调研、献检索、设计实践、设计自评四个部分，其中市场调研主要是通过调研知产品网站了解蜂产品网站建站的特点和优缺点、文献检索主要介绍设计网站所使用的Photoshop、Dreamweaver、div+css三个主要软件、设计实践主要具体介绍了产品网站建站具体步骤和设计思路、设计自评主要总结设计作品后的心得体会。

关键词：网上产品销售； 网页设计； 企业网页； Dreamweaver

第1页

目 录

摘 要 …………………………………………………………1

1. 文献检索……………………………………………………………6 1.1网页制作软件Dreamweaver …………………………………6 1.2Div+css简介 …………………………………………………6 1.3平面设计软件Photoshop ……………………………………7 2. 设计实践 …………………………………………………………8 2.1 设计立意 ……………………………………………………9 2.2网站结构规划 ………………………………………………10 2.3 网页详细设计 ………………………………………………11 2.2.1 首页设计与制作 ………………………………………12 2.2.2 公司新闻页制作 ……………………………………15 2.2.3 新闻详情页制作………………………………………15 2.2.4 产品展示页制作………………………………………15 2.2.5 产品展示详情页制作…………………………………15 2.2.6 关于我们页制作 ……………………………………15 2.2.7 联系我们页制作 ……………………………………16

2.4 创作总结 …………………………………………………………16 3. 设计自评……………………………………………………………17 致 谢 ………………………………………………………………18 参考文献 ………………………………………………………………19

第2页

引言

当今世界已进入信息时代，Internet成为21世纪最受关注的焦点之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。因此，企业网站的建立是一个企业在当今社会发展的必然趋势。

企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对于企业来说至关重要,企业概况、企业论谈、企业特色服务、最新企业新闻动态等部分应该能够为用户提供充足的信息。企业网站做成检索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、信息化与世界接轨的重要条件。在IT行业迅速发展的今天,企业网站的建设已经成为一个企业发展必不可少的存在。对于创意设计有限公司来说，必须建立一个以宣传为目的的网站类型。将于短期内强力打造公司的宣传力度，让更多的客户了解信任公司。网站的建设，也是公司对于宣传方面的长期投资。

社会上有很多保健品宣传网站，调查研究显示，保健品企业的知名度、企业的实力往往是和网站的制作水平成正比的。可见，保健品企业网站的建设十分重要，它的定位以及页面的风格设计直接影响着保健品企业在网络推广应用的成败。因此保健品企业建设公司网站可是必要的，它可以帮助企业实现在线产品宣传，为用户带来更多方便和快捷，大大提高了企业的服务效率，于无形中树立起了良好的企业形象。

第3页

文献检索

1.1网页制作软件 Dreamweaver

Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。

Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。

至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：

（1）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 （2）装载器中包含一些打开和关闭常用检查器和模板的按钮。

（3）对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 （4）属性检查器显示选定对象的属性。

（5）快捷菜单可以使用户对当前选择或区域快速执行某些命令。

（6）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。

1.2 DIV+CSS简介

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用

第4页

技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在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 平面设计软件Photoshop

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

（1）专业测评：Photoshop的专长在于图像处理，而不是图形创作。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形。 （2）平面设计：平面设计是Photoshop应用最为广泛的领域，无论是图书封面，还招帖、海报，这些平面印刷品都需要Photoshop软件对图像进行处理。 （3）广告摄影：广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往

第5页

要经过Photoshop的修改才能得到满意的效果。

（4）影像创意：影像创意是Photoshop的特长，通过Photoshop的处理 可以将不同的对象组合在一起，使图像发生变化。

（5）网页制作：网络的普及是促使更多人需要掌握Photoshop，因为在制作网页时Photoshop是必不可少的网页图像处理软件。

（6）后期修饰：在制作建筑效果图包括许多三维场景时，人物与配景包括场景的颜色常常需要在Photoshop中增加并调整。

（7）视觉创意：视觉创意与设计是设计艺术的一个分支，此类设计通常没有非常明显的商业目的，但由于他为广大设计爱好者提供了设计的空间，因此越来越多的设计爱好者开始学习Photoshop，并进行具有个人特色与风格的视觉创意。

（8）界面设计：界面设计是一个新兴的领域，受到越来越多的软件企业及开发者的重视。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是该软件。

Photoshop的界面组成，如图2.1所示。

a ) 分图Photoshop界面组成图

第6页

行业资讯 新闻详情 公司动态 新闻分类 新闻详情 新闻详情 网 产品展示 产品分类 产品分类 产品分类 产品分类 产品详情 产品详情 产品详情 产品详情 站 首页 关于我们 联系方式 b) 网站结构图

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

（4）关于我们具体介绍出企业的背景，经营项目，荣誉资质和公司的发展史，结

第7页

构，业务流程等等一系列来加大公司的宣传力度，好让客户能全面的了解公司便于树立企业形象。

（5）联系我们浏览者通过联系方式对我们提出意见和建议，通过这个发现我们的不足和好的地方，要是发现我们的不好，我们也可以接收到您的宝贵意见并给您最满意的答复，同时也是公司业务对外联系的窗口，是意向客户主动联系公司的重要途径。

2.1网站详细设计

网站主页结构布局如图d

版权信息 相关链接 d) 首页结构图

新闻热点 产品展示 联系方式 LOGO 子页导航栏 首页banner栏 如图c) 网站相关子页结构布局

第8页

产品分类1 产品分类2 产品分类3 产品分类 相关子页详情页 LOGO 子页导航栏 首页banner栏

版权信息 相关链接 d) 子页结构图

子页分二级页面和三级页面，整体结构与图3.3一样，所以在此不一一举例。

2.2 首页设计与制作

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

第9页

要的东西。

首页包括网站logo、导航栏、banner、3个图文信息栏、底部公司信息、链接等

组件。 网站的Logo就是网站的标志，也是互联网上各个网站用来与其他网站链接的图形标志。

首页背景还是突出简单、大气，主要考虑到产品本身属于绿色食品，所以选用了简单的白色为背景。导航栏主要还是用了与背景类似的颜色。简洁、明了体现企业特色。如图3.5所示。

e) 首页导航栏

加上宋体标题后最终完成导航栏，如图3.6所示。

图f) 首页导航栏效果图

首页banner要体现企业的高端、大气、上档次，二是要体现蜂产品特色的风格。三是要符合整体的页面设计，具体效果如图3.11所示。

（1）首先在网上找了一个风景图片，把不需要的部分用图章工具抹去，在进行调色，如图3.7所示.

第10页

（2）在网上下载一个石狮子，用钢笔抠出来，放到图中，再进行调色，如图3.8所示.

图g) 图片处理

第11页

（3）整体效果定型后，整体合并调色，如图3.9所示.

图h) 合并处理

（4）最后加上公司字样体现企业为特色，如图3.10所示.

图I) 添加标识

底部左侧主要还是设计了网站开发者的信息和版权，右侧主要设计了一些相关方面的链接。如图所示。

图j)底部信息栏

最后切片且保存为index.html。在相应按钮上添加链接到相应页面。

2.3.3 新闻详情页制作

点击主页导航条上的公司新闻或者点击相关子页主题新闻，就能进入三级页面下的新闻详情页，左边放了公司新闻、最新动态、行业新闻、新闻分类四个大类目，右边详细新闻。

第12页

2.3.4产品展示页制作

点击主页导航条上的产品展示或者首页下方的第二个信息栏文字、图片，就能进入二级页面下的产品展示页，左边放了产品分类四个大类目，右边产品图片和详情介绍。

2.3.5 产品展示详情页制作

点击展品展示页上的产品或者主题或者首页下方的第二个信息栏文字、图片，就能进入三级页面下的产品展示详情页，左边放了产品分类四个大类目。

2.3.5关于我们页制作

点击主页导航条上的关于我们，就能进入二级页面下的关于我们页，左边放

了公司新闻、最新动态、行业新闻、新闻分类四个大类目，右边就是公司的公司简介。

2.3.7 联系我们页制作

点击主页导航条上的联系我们或者主题或者首页下方的第三个信息栏文字，就能进入二级页面下的联系我们页，左边放了公司新闻、最新动态、行业新闻、新闻分类四个大类目，右边就是公司的联方式。

3.1创作总结

经过为期半年的实习，在不懈的努力下终于完成了，从刚开始接触报告的时候到现在全部完成，虽然时间不是很长，但是所做的工作还是很多的，在课程设计的过程中，我不断地从讨论，分析到整理，到最终的完成稿，在其中我们花费的精力虽然很多，但是坚持的精神得到了最大的体现。

学习电子商务的这几年，经历过的网站制作工具有很多，比如说Dreamweaver， Fireworks，Flash，FrontPage还有Photoshop，但从来也没有深入而系统的认识和了解，更谈不上如何去分析，如何去整理和归纳。除了作业中自己摸索，了解，运用这些软件，其他更深层次的软件的更是从来没有涉及过，所以不做深层的了解。设计下来，我觉得收获很多，不仅对于制作网页的软件有一个全新的认识，并且在系统设计的技术方面也有了质的飞跃。

关于这次总结，先从网站的页面设计说起，在设计过程中，注意到对于电子商务

第13页

网站BtoC还是诸多好评的，单单从方便角度出发，已经是一个很重要的优点了，页面设计过程的时候，有些页面设计的填写，可详尽可简略，凸显主题，不是很能体现出这次调查的全面性，页面设计的很好，但从某些方面不是很完善，但是对于这次我觉得我们做的很尽心，我们努力的选择不同风格的页面去设计，并且在网页设计中，我们尽量的全面的问及我们所能涉及的问题，我们发现我们的获益很多，不仅仅单纯从问卷调查的过程，更从讨论中，汇总中我们了解了更多的知识，也全面提高我们对问题的分析能力。

这次网站设计，我总结了几点：（1）确定网站主题：对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。（2）掌握建网工具：在制作网页的时候，一定要熟练掌握软件的运用，要不断的摸索，对于细节的处理，我们需要做很多东西，只有不断的练习，才会更好的运用软件。（3）确定网站界面 ：网站的题材确定后，就要将收集到的资料内容作一个合理的编排，尽可能删除那些与主题无关的栏目，尽可能将网站内最有价值的内容列在栏目上，尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、各板块要有相对独立性，各板块要有相互关联，各板块的内容要围绕站点主题；按栏目内容建立子目录。子目录的建立，首先按主栏目建立。友情连接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：网站简介、站长情况等可以合并放在一个统一目录下。所有程序一般都存放在特定目录，在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。原因很简单，就是方便维护与管理。（4）确定网站风格：“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。风格是有人性的，通过网站的色彩、技

第14页

术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的。

最后来说说自己的日记以及个人总结的撰写，在刚开始写日记的时候，感觉思绪很匮乏，不知道该写些什么，虽然一天做的事很多，但是总感觉是流水账，在慢慢的几天适应以后，发现对于课程设计的体会越来越多，虽然在字数方面变化不大，但对于自己的体会感觉真的多了不少，也感觉到了在合作时完成任务的兴奋感和自己独立完成任务的感觉是不同的，在自己完成任务的时候，感觉很充实，但是我想一个人做事，涉及面不会是很广但是都融汇了自己的看法，也是一种突破。

在此，我对此次课程设计做出自己的一些总结，在这次课程设计中，我发现了团队的重要性，分工的重要性，从该开始的懵懂，但最后慢慢完成所有的任务，我充分体会到了合作的真谛，在合作的过程之中我体会到了，相互合作是非常重要的，在一些细节方面，多亏小组成员的指点，让我发现许多的不足，在某些逻辑思考的不完善，

节约了很多时间，因此最后很好的得完成任务。在此看来，团结合作的智慧和力量是不可忽视的，每个人都有自己所擅长的部分，只有团结一切可以团结的力量，发挥每一个人的才能，同心协力，才能够把任务最好得完成。

4. 设计自评

关于本次设计，设计思路来源于绿色食品，设计理念参考冠生园，汲取了多家网站的优点，将宣传产品、树立品牌、互动分享作为建站的重点，也实现了企业对外开放的最大程度，不仅给企业带来了良好的社会反响，而且有助于产品知识和企业文化的推广，实现了品牌推广和产品推广的双赢局面。在利用软件方面，我主要利用了Photoshop、Dreamweaver、div+css三个软件的开发。总的来说我的设计有以下几点特色：

（1）结构简洁又不失大气风范，整体结构采用了冠生园风格，但是BANNER页设计突出大气形象，整体和谐、美观。

（2）开设富有特色的页面设计，许多企业网站多以文字介绍为主，但是我的设计还有一个图片展示子页，设计思路来源于淘宝，目的是让更多人了解产品。 3）突出产品特性，绿色主题，作为绿色食品，建站的风格我没有弄得很庄重，而是以绿色logo和白色基调设计，体现出自然、朴实。

第15页

致 谢

时光飞逝，论文终于成稿，又一段求学旅途即将画上一个圆满的句号，回想求学的道路，有过梦想，有过失落，此时此刻，有太多的感激之情在内心之中，需要表达，感谢一直以来关心鼓励我的老师，同学和朋友们。

在本次毕业设计中，首先我衷心地感谢我的指导老师王老师在我的设计中给我的悉心指导。论文的每一篇不无倾注了王老师大量的时间和心血。王老师渊博的知识、敏锐的思维、深刻的洞察力、淡泊的心境、平易的待人方式和富有感召力的人格力量给我许多启发和帮助，使我领略到一个著名学者的风采和高尚的情操，使我在学习和设计工作中，都受益匪浅，在毕业设计过程中，在每个阶段都给予我细心的指导、提出宝贵的意见。王老师的言传身教，始终如一地关心我们各方面上的进展，反复审阅了论文稿，提出许多修改意见，为本文的完成付出了很多心血。使我在设计中及时改正了错误，增添了信心。在此，我对敬爱的王老师再次表示衷心的感谢！

第16页

参考文献

[1]陶国荣.HTML5实战.机械工业出版社.

[2]徐国平.网页设计与制作[M].北京:机械工业出版社.2008.

[3]泽卡斯著，李松峰，曹力译.JavaScript高级程序设计(第2版) [J].人民邮电出版社.2010年.

[4]徐莉.HTML与CSS前台页面设计[M].北京：中国水利水电出版社，2006.5. [5]唐守国.创意：Photoshop cs4网页设计、配色与特效案例精粹[M]. 北京：清华大学出版社，2010.7.

第17页