Maxsoftware官网设计毕业设计

毕业设计说明书题目：Maxsoftware官网设计产品设计工艺设计方案设计√类型：学生姓名：_________________________学号：______________________学院：______软件学院___________________专业：______软件开发（ERP项目实施方向）班级：________________学校指导教师：_______________________企业指导教师：_____________________2015年5月2日摘要在互联网飞速发展的今天，网站已经成为了人民获取各种信息的主要渠道。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要，一个好的网站往往容易给人留下社科的印象。本文从网页设计的角度出发，介绍一些设计中要素和技巧，例如框架、CSS样式的使用，与排版类型使用了网页制作软件Dreamweaver；平面设计软件Photoshop等。关键词：信息;网页设计;网络；Dreamweaver目录1.绪论 41.1引言 42.网站设计工具介绍 42.1网页制作软件Dreamweaver 42.1.1平面设计软件PHOTOSHOP 42.2静态网页制作概述 53.网站的设计与实现 53.1网页布局 53.1.1网页配色 64.企业网页的实现 94.1布局与配色 95.总结 12参考文献 13致谢 14

1.绪论Maxsoftware是一家以科技创新为公司企业文化的科技公司。公司主要以网站建设，软件开发，云服务器的搭建等为主。是一家现代化的企业1.1引言当今世界已进入信息时代，Internet成为21世纪最受关注的焦点之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。企业极需要一种快捷，便利的平台来对外宣传企业形象,、企业文化、经营理念、介绍最新产品和及时售后服务。一个好的网站是一个公司的脸，所以选取了这个题目。 网站设计工具介绍2.1网页制作软件DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。2.1.1平面设计软件PHOTOSHOPAdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像,是对已有的位图图像进行编辑、加工、处理以及运用一些特殊效果。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及,是专业设计人员的首选软件。Photoshop是图像处理软件，其优势不在图形创作。AdobePhotoshop的适用范围很多。静态网页制作概述互联网的诞生和快速发展，给网页设计师提供了广阔的设计空间。相对传统的平面设计来说，网页设计具有更多的新特性和更多的表现手段，借助网络这一平台，将传统设计与电脑、互联网技术相结合，实现网页设计的创新应用与技术交流。网页设计是传统设计与信息、科技和互联网结合而产生的，是交互设计的延伸和发展，是在新媒介和新技术支持下的一个全新的设计创作领域。如今的网页设计往往要结合动画、图像特效与后台的数据交互等，而DreamweaverCS3、PhotoshopCS3和FlashCS3作为Adobe公司经典的常用网页设计软件，是目前网页制作的首选工具。它们具有强大的网页设计、动画制作和图像处理功能，在静态页面设计、图片设计和网站动画设计等方面，都可以使网站设计人员的思想体现得淋漓尽致。网站的设计与实现3.1网页布局网页布局的好不好就是给人的第一印象，布局的有新意，就会给人带来深刻的印象，下面我来介绍几种网页布局方式（1）“国字”型布局“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。（2）T型布局T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。（3）标题正文型标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。（4）左右框架型布局左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容（5）上下框架型上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。（6）综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术（7）POP布局POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。本网站采用的是T型布局3.1.1网页配色企业网页的配色主要采用蓝色和白色色这样一种大众化的配色，使网页简洁大方而且方便浏览者浏览，同时和公司logo非常搭配。颜色也可以代表很多意义，例如蓝色就是科技与生产力的代表。3.2网页设计流程1.网站的主题网页设计的首要任务就是确定网站的主题，即决定整个网站的方向、中心内容及提供的主要信息。这些都需要从浏览者的角度去考虑，也就是你设计的网页是准备给谁看。例如：个人网页主要是个人的一些资料库，主要是让他人了解自己的。而“电脑报信息网”则是为访问者提供各种即时的电脑技术知识的。2.规划网站内容的结构网站的目标明确之后，就要考虑网站里存放的具体内容，同时还要考虑如何使内容系统化，如何把各项内容以页面的形式表现出来。还要规划页面之间的关系。如图7-19所示。3.搜集有关资料网站的骨架搭建起来以后，就需要进行内容的搜集各整理了。4.设计网页版面有了骨干，有了内容，接下来就要考虑如何将这些信息展现给访问者，即进行网页版面设计阶段。决定各部分资料显示在什么位置，以及以什么样的方式呈现出来等等。我们可以通过画草图完成这一步的工作。主页主页关于作者网页设计友情链接兴趣经历相关技术游戏网站教育网站基础教育职业教育音乐运动图3-1规划网站内容和结构5.进入实际操作附阶段在规划出网页的版面和呈现方式后，就要进入实质性的工作了，即用各种软件，如文字编辑、图象处理、动画制作、音乐处理等来进行实际操作，最后通过网页设计软件将这些文字、图象、动画组合到页面中。6.检查网站内容当一切工作都已经完成后，在发布网页之前还要检查页面上的超链是否正确，图片是否正常显示，文字中是否有错别字等，以保证呈现给访问者一个完美的网站。3.3网页设计原则一、明确建立网站的目标和用户需求Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者(customer)”为中心，而不是以“美术”为中心进行设计规划。二、网页设计总体方案主题鲜明在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣，办出网站的特点。三、网站的版式设计网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。版式设计通过文字图形的空间组合，表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。四、色彩在网页设计中的作用色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合.搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。如果您的企业有CIS(企业形象识别系统)，我们将按照其中的VI进行色彩运用。五、网页设计形式与内容相统一为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。六、三维空间的构成和虚拟现实网络上的三维空间是一个假想空间，这种空间关系需借助动静变化.图像的比例关系等空间因素表现出来。在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。现在，人们已不满足于HTML语言编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务。七、网页设计中多媒体功能的利用网络资源的优势之一是多媒体功能。要吸引浏览者注意力，网页的内容可以用三维动画、FLASH等来表现。但要由于网络宽带的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。八、结构清晰并且便于使用如果人们看不懂或很难看懂您的网站，那么，他如何了解你的企业和服务呢?使用一些醒目的标题或文字来突出您的产品与服务。并且即使您拥有最棒的产品，如果客户从您的网站上不清楚您在介绍什么或不清楚如何受益的话，他们是不会喜欢您的网站的，这就是网页设计的失败。九、导向清晰网页设计中导航使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。我们在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。

4.企业网页的实现4.1布局与配色本网站布局技术采用层叠样式表的应用，使用CSS实现出一个完美的网站。是布局方法采用软件布局法，利用Photoshop软件对图像进行编辑。主体采用蓝色为主色调。突出科技创新。图4-1网页整体图4.2企业门户企业门户是展示一个企业最好的作品，一个好的企业门户会给人们对企业的看法留下深刻，美好的印象。首页包括网站logo、导航栏、banner、底部公司信息、等公司的logo设计的得不得体，就有很大一部分决定企业以后发展，把公司比喻成人的话，公司名称就是人的姓名，公司logo就相当于人的脸。脸好看，事才好办。首先查阅大量科技公司的网站，寻求共同点，确立好主题色，开始按T型布排版。图4-2网页标题图图4-3网页新闻图4.2.1.“联系我们”制作（3）左边放上公司联系人的信息，右边建立一个数据接口，方便统计用户数据图4-4联系我们图4.2.2.公司简介图4-5公司简介图4.2.3.“新闻”制作我们设置了新闻这一栏，方便了用户在浏览我们网站也可以关注该行情，增加用户粘性。图4-6网页新闻图4.2.4.店招设计左边放置公司LOGO，右边放置导航栏，整体清晰，易用性强，主题明确图4-7网站logo图5.总结一开始接触到这个网站建设时，凭着自己有设计这方面的技能，认为网站建设很容易，之前做了几个版面都不行，渐渐的发现了网站建设的困难的地方，并不是想象中的容易，做出来容易，做的漂亮难。这次网站建设我学习到了以下几点：（1）掌握设计工具（2）确定网站界面（3）确定网站风格。在今后的日子里，我会朝着这个方向更加努力，设计更多的精品网站。大学三年，不快也不慢，学习到的东西真的很多，对我以后人生也有很大的帮助，我可以很自信的说大学三年没有浪费青春。

参考文献[1]何秀芳.网页制作与网站建设课堂实录[M].北京：人民邮电出版社.2009，3[2]唐守国主编，创意+：Photoshopcs4网页设计、配色与特