媒体公司网站的设计与制作

设计（论文）题目：媒体公司网站设计与制作

指导教师：彭雪萍职称：讲师1、设计（论文）的主要任务类别：毕业设计

1)根据题目要求，查阅大量文献资料，并收集资料；了解用不同软件制作网站的基本方法，并进行分析和比较。2）以Dreamweaver软件为平台，结合图片处理软件制作一个媒体公司网站。要求提交电子版原始文件（.html）3）完成毕业论文。2、设计（论文）的主要内容

1）网站设计与制作的相关基础知识；2）媒体公司网站设计与策划（确定主题，明确网站要提供和发布的信息）；3）媒体公司网站整体设计（网站LOGO设计、风格定位、主色调及视觉效果、网页布局及版面设计、栏目设计、导航设计）；4）网站分步设计。3、设计（论文）的基本要求1）主题突出，内容充实，布局合理，结构清晰、规范。2）色彩搭配合理、美观，设计有创意。3）导航美观、醒目，跳转方便。4）要求有网站LOGO。独立完成网站制作并撰写论文。4、主要参考文献可参考相关文献资料和已有的相关网站5、毕业设计（论文）时间安排第一阶段：资料收集整理第二阶段：对资料进行分析，构思网站主题，确定设计方案第三阶段：设计与制作媒体公司第四阶段：编写毕业论文、完善设计备注：

毕业论文答辩时间为大约为2012年4月上旬，以系部通知时间为准，有特殊情况的学生请提前与系里联系。注：1、此表一式三份，系部、指导教师、学生各一份。

2、类别是指毕业论文或毕业设计，类型指应用型、理论研究型和其他。

I南京蓝深泵业有限公司分公司网页制作毕业设计（论文）摘要摘要网页设计作为用户界面交互设计的延伸，是在新的媒体和新的技术支持下实现一个全新的设计创作领域。设计创作网页应遵循其特有的特点和结构思路，具有实际可行性和外观时尚性。本论文讲述了网站建设的一般步骤，并结合简洁明了的色彩应用与网页设计理论，通过南京蓝深分公司（泵业有限公司）网页制作实例，阐述了网页设计的视觉效果和具体操作。详细地论述了多媒体公司网站设计与制作的相关概念和注意事项，包括公司网站的整体布局构架了解、素材的搜集以及概念的整理与运用。随着信息技术的普及与推广，网上信息发布平台也越来越完善，进而对整体视觉感受的要求也随之提高。在现在的生活中，网上购物与信息查找已经犹如空气般融入了我们的生活，不可或缺。进而对公司的宣传与推广提供了又一途径。

关键词：网页色彩

网页制作web页面布局设计误区视觉传达设计

II南京蓝深泵业有限公司分公司网页制作毕业设计（论文）摘要ABSTRACTWebDesignasanextensionoftheinteractiveuserinterfacedesign,newmediaandnewtechnologiesSupporttoachieveawholenewfieldofcreativedesign.Creativedesignwebpagesshouldfollowthespecific，Featuresandstructureofideas,practicalfeasibilityandstylish.Thispaperdescribesthesitebuilt，Thegeneralstepstoset,combinedwithclearandconcisecolorapplicationsandWebdesigntheory,throughtheNanjing，DeepBlueBranch(PumpIndustryCo.,Ltd.)webproductioninstance,describesthevisualeffectofthewebdesign，Fruitandtheconcreteoperation.Discussedindetailthedesignandproductionofmulti-mediacompany'sWebsiteconceptandNote,includingtheframeworkoftheoveralllayoutofthecompany'sWebsitetounderstand,tocollectmaterialandconcepts，Organizeanduse.WiththepopularizationandpromotionofITandonlineinformationpublishingplatformmoreandmore，Perfect,andthusalsowillimprovetheoverallvisualexperiencerequirements.Inthepresentlife,onlinehoppingandinformationtofindhasbeenliketheairlikeintoourlives,indispensable.AndthenrightPublicityandpromotionofthecompanytoprovideanotherway.

Keywords：Webpagecolor

CommunicationDesign

WebproductionwebpagelayoutdesignMythVisual

III南京蓝深泵业有限公司分公司网页制作毕业设计（论文）目录目录前言................................................................................................................................................1第1章网页设计制作流程............................................................................................................2

1.1网页制作流程....................................................................................................................21.2网页设计制作步骤............................................................................................................21.3网页设计常用参数............................................................................................................31.4网页设计制作常用工具介绍............................................................................................31.5网页布局............................................................................................................................4第2章网页色彩设计及视觉设计................................................................................................6

2.1色彩在网页中的应用.......................................................................................................62.2色彩在网页设计中的重要性...........................................................................................92.3视觉设计.........................................................................................................................10第3章南京蓝深泵业有限公司分公司网页制作......................................................................13

3.1案例网页制作流程..........................................................................................................133.2案例网页页面设计..........................................................................................................143.3网页静态页面制作（div+cssjs）..............................................................................193.4网页设计制作小结..........................................................................................................23第4章网页运行的总结..............................................................................................................24

4.1浏览器兼容性问题..........................................................................................................244.2web页面布局成为败笔的设计误区..............................................................................27第5章总结..................................................................................................................................29参考文献........................................................................................................................................30致谢..............................................................................................................................................31

IV南京蓝深泵业有限公司分公司网页制作毕业设计（论文）前言前言随着互联网的高速发展，许多人不在仅仅局限于网上冲浪，而是参与到网站建设中。越来越多的企业高度重视自身企业在互联网上的形象，新产品面世，都可能独立开发一个网页展示平台，可以向客户介绍企业形象和实例。网页展示，在如今的市场经济条件下品牌传播中的作用可见一斑，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合我在公司实习过程，现就网站建设和管理过程中，网站设计与制作的具体经历，包括：网页设计与制作过程中的网页布局，色彩构置，框架结构等相关事项做以下论述。

制作一个媒体公司网站，以确保其在相同网速流量的前提下，以最佳方式打开一个浏览界面，需要我们在制作网站页面中使用最佳的编排编码方式。在前人总结经验下逐渐形成以div+css的布局效果取代table网页布局，在选取图片的同时根据需要对图片的大小体积进行一定的压缩与简化，最好用一个像素解决问题(使用css样式进行编排实现)。在相同的情况下能用编码文字效果实现时最好取代图片效果。

1南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页设计制作流程第1章网页设计制作流程1.1网页制作流程

1、客户基本要求：在客户确定制作网站网页时，收取客户公司的一些基本网站内容资料；

2、制作工具：准备制作网页的工具、图片制作工作、网络工具等；超文本标识语言（HTML）编辑工具：editplus、记事本、Dreamweaver

3、页面设计及美化工具；使用工具：所有可制作平面的软件推荐使用Photoshop、Flash

4、编写网页：开始动手，编写网页，在Dreamweaver中使用div+css进行编辑制作。1.2网页设计制作步骤

网页是网站的表现形式，网站是网页的集合，一个站点用的所有网页构成一个网站。网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群体的定位、智能交互、制作策划、形象包装和宣传营销等

设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看做一张报纸或者一张杂志来进行排版布局。

1、草稿

新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力，创造力，将想像的布局到页面上。这是原创阶段，不必讲究细腻工整，可以在草稿本上先画出整个布局框架，把多个板块的位置先粗略的布置上去进行下一步工作的展示，这一步可以借助photoshop或其他一些制图工具软件来完成。

2、粗略布局

在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、banner等主要部分模块放在最突出的位置，然后考率其他模块的布局。

3、定稿

定稿即将粗略布局精细化、具体化，完成整个页面设计。4、网页设计的制作

首先在根据客户的要求下，完成首页制作，发给客户在经过客户的确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面都经过客户的确定后，完成网站的制作过程，交给后台程序员添加程序和后台加载内容。

2南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页设计制作流程1.3网页设计常用参数

图片质量与下载速度

由于网络速度问题，我们需要考虑图片大小对传输速度的影响，如果图片太大就会影响浏览速度，访问者很快就会对这个网站失去了兴趣，只有充分了解图片质量与下载速度的关系，并了解不同的文件格式，才能更有效的表达内容。

1、分辨率

理解图像分辨率可以直接控制文件大小和下载速度，进而影响访问者的人数，创建WEB图片的小、快、好。显示器的分辨率起绝对性作用，大多数显示器使用的是1024*768的分辨率，因为要通过显示器显示页面，所以用高分辨率并不会增加图片质量还会降低图片的下载速度。

2、位图

习惯性称为图像，而将矢量图称为图形，位图是位映射图像的简称，也可以叫栅格图。他将一副图分成许多栅格，栅格的每一个点就是图像的像素，其值就是像素的亮度和色彩度，扩大位图尺寸的效果就是增多像素，从而将线条和形状显示的参差不齐，位图与其他分辨率密切相关，因此在处理位图图像时，必须设置合适的图像分辨率，否则输出图像时会遗漏细节，使图像模糊。

3、矢量

矢量图也称为面向对像的图像或绘图图像，它使用一组线段造型描述一段图像，图像中包含的直线，弧线和造型的设置与开关是由指令描述的，矢量图适用于描述色彩简单的图像，矢量文件中的图像元素称为对象，每一个对象都是一个自成一体的主体，它具有形状、轮廓、大小和屏幕位置等属性。放大位图会失真，但放大矢量图不会失真。

4、图片格式

制作好的效果图可以保存为各种格式，包括GIF格式，JPEG格式和PNG格式等各个图片格式之间的区别为：GIF格式即图形交换格式；GIF格式的图片只能使用256种颜色，不适合显示色彩丰富的图像内容。其特点是1.采用隔行扫描的显示方式；2.可以设置背景透明；3.可以制作简单的动画。JPEG格式可以显示颜色复杂的图片，但是在处理大面积的颜色块时可能会出现明显的压缩痕迹。PNG格式的图片兼有GIF和JPEG的优点。1.4网页设计制作常用工具介绍

用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件，现在通常使用的软件是Photoshop，Dreamweaver和flash。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。

Photoshop是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，Photoshop都是首选的平面工具，它有很多的快捷方

3南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页设计制作流程式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。

Flash是网页flash动画处理软件，可以做出动画效果，主要是和Dreamweaver配合做网页。对处理一般的动画效果比较实用，此软件深受大众喜爱。1.5网页布局

常见网页版式布局结构有以下几种：

1、两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。如图1-1图1-1两栏式构图2、三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。如图1-2图1-2三栏式构图3、“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。如图1-34南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页设计制作流程图1-3“三”型构图4、上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。如图1-4图1-4上下框架型构图5南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页色彩设计及视觉设计第2章网页色彩设计及视觉设计2.1色彩在网页中的应用

色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。如果您的企业有CIS（企业形象识别系统），我们将按照其中的VI进行色彩运用。

1、了解你的网站所要传达的讯息和品牌。选择可以加强这些讯息的颜色。例如，如果在设计一个强调稳健的金融机构，那么就要选择冷色系、柔和的颜色，像是蓝、灰或绿。在这样的状况下，如果使用暖色系或活泼的颜色，可能会破坏了该网站品牌。

2、了解你的读者群。文化差异可能会使色彩产生非预期的反应。同时，不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色，但这样的颜色却引不起高年龄层的兴趣。

3、不要使用过多的颜色。除了黑色和白色以外，约选择四到五个颜色就够了。太多的颜色会导致混淆，也会拉走读者的注意力。如图2-1与图2-2图2-1色彩过多图2-2色彩简洁4、在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果，也会妨碍观众阅读。白底黑字的阅读效果最好。如图2-3图2-3文字排版5、用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜色的时候，有时候会很难决定每个颜色的相对值。为了要确认你的色盘能提供足够的对比，你可以建立一个仿真网站，并将它转换成灰阶即可。如图2-46南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页色彩设计及视觉设计图2-4灰阶对比6、选择颜色要注意时效性。同一个色彩很容易就充斥着整个市场，且消费者很快的就对流行色彩感到麻木。但就另外一个角度来看，你可以使用几十年前的流行色彩，引起人们的怀旧之情。如图2-5与图2-6图2-5流行色彩时效图2-6怀旧色彩感觉7、选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色，例如标题和超级链接等。

8、注意网站色差问题。每一个网站开发人员都知道，即使是网络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的gamma值，并在不同的作业平台上测试你的色盘。

在如今的市场经济条件下品牌传播中的作用可见一斑。

（1）根据企业所在行业、VI、产品特性，确立色彩。原则上，力求网页色彩整体感。各个超链接在色彩上发生相互作用和过渡，要求是自然的、和谐的。

（2）整体布局协调。一般情况下，布局之前，对网页色彩进行系统地规划和设计。在确立一个完整的视觉印象前提下，根据内容的不同需要，小范围的调整。一般情况下，网页包括FLASH、GIF引导动画、VI、导航、图形图像等内容，这些内容的色彩使用，直接决定着网页色彩的感官感受。在确立背景色的情况下，在此基调的基础上进行微调，就能够起到很好的效果。

（3）色彩情感。很大程度上，一个网站的给访问者的感官感受是由网页色调决定的。色调作用于人的视觉和心理，通过与过去的经验、记忆或知识相联系，产生诸如进退、冷暖、轻重、软硬、华丽、朴素等不同感觉。进而容易使人产生各种复杂的心理情感。除色相变化能引起人的情感变化外，色彩的明度和纯度变化也能影响人的情感。高长调的色彩响亮而明朗，让人心情舒畅；高短调色彩配置色调高雅，给人以纯洁、柔和而明快的心理感受。低长调的色彩仿佛黑夜中的闪电，神秘压抑又使人振奋；低短调的色彩仿佛暗夜里

7南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页色彩设计及视觉设计的幽灵，低沉冷漠让人心情暗淡；不同的色调引发不同感觉和感情倾向，给网页设计带来了丰富的情感因素。如图2-7图2-7色彩感情（4）色彩排列。色彩的排列方式也影响着色彩的情感表现。同样的色调因色彩的排列方式不同，也会影响着人的情绪。在网页中色彩的排列是四维度的，即在长、宽、深三维度的基础上加上时间维度。在二维平面上，色块有大小、疏密、对称、均衡、聚散、节奏等变化，加上色彩重叠在三维的方向产生深度和层次感的变化，对色彩的情感倾向有很大的影响。页面色彩大面积的分割显得稳重而大气；小面积色彩有规律的交替变化，让人紧张而富有活力；对称的色彩排列庄重、有严肃感；均衡的色彩排列自由而浪漫；色彩排列节奏紧张，人的心理也会紧张；节奏舒缓心理就会放松。色彩还通过重叠、交叠、透叠等手法使平面产生纵深感和空间感，使人产生深远、神秘、梦幻等心理感受。网页的时间性变化也影响着色彩的情感。网页动画帧的变化、网页页面在屏幕上的上下左右移动，以及网页之间相互转化都能产生网页的时间性变化，并带来网页的色彩的变化。随着色彩变化的节奏，浏览者的心理会产生平静、紧张、舒缓、热烈、不安等不同感受。显然，色彩排列引发的情感为创造不同个性风格的网页留下了自由的空间。

（5）色彩与音乐结合。为了最大程度的迎合访问者的感官感受需要，也为了更好的展现网页内容。在网页设计中，融入音乐这一元素，已经成为主流。色彩因其自身形式规律的存在而具有自身的形式美感。这种形式感的表现在色彩的调子、阶调、节奏、韵律上，与音乐的形式感有较多的共同性。网页色彩由于动画的存在，以及因浏览而产生页面的移动，更能体现出音乐流动的形式感。这就需要设计师去主动发现和控制色彩节奏和韵律，增强网页时间和空间的变化，使网页设计体现出生动感人的艺术魅力。如图2-8

8南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页色彩设计及视觉设计图2-8色彩与音乐结合（6）网页色彩的风格。受现代色彩观念的影响，色彩的丰富性从一开始就是网页设计的发展趋向。不同的色彩组合搭配构成各种风格的网页色彩设计。色彩风格的确立首先取决于网站的目标定位，网页的最终受众界定了色彩的倾向。只有符合受众审美需求的色彩风格，才能引起人们的感情共鸣。其次，色彩风格与网站的内容要能够相互呼应。避免虽然美观但与网页内容相冲突的色彩风格，使内容与色彩风格有机的结合起来，更好的发挥各类网站的色彩应用。2.2色彩在网页设计中的重要性

现在的人们浏览网页，已不仅仅满足于简单的文字堆砌上面，他们的审美要求越来越高，艺术设计在网页设计中的重要性是显而易见的。网页的界面好比一本书的封面，只有大方美观、重点突出，让浏览者一目了然，才能激起阅读者深入浏览的兴趣。如果在页面堆砌太多的细节，使页面过于复杂，以致浏览者找不到重点，他们也很快就会对该网页失去兴趣。所以设计网页时，需要考虑网页自身内容的特性。文化类的网页，艺术设计找的比重相对较轻，整体构图、颜色使用可以丰富活泼一些；技术类的网页，艺术设计占的比重较轻，需要体现出严肃、稳重、具备深刻内涵的特点。另外还有一些信息门户网站，主要侧重于信息的含量，就不可能把它当作一个艺术作品来处理，用表格颜色、线条来区分，注意功能性的作用。

色彩是美学的重要组成部分，不同的色彩能够表达不同的情感。根据网页的内容和特点，通过色彩构成的运用，选择不同的色彩搭配，使页面达到和谐统一的视觉效果，从而唤起人们的心灵感知，调动浏览者的情绪，达到信息传递和情感交流的目的。

色彩是艺术设计中不可或缺的元素。好的色彩设计可给人以强烈的视觉冲击力和艺术感染力，能引发人们从美学意义上了解和鉴赏其表达的形象和内容，网页色彩设计的意义亦是如此。网页作为视觉传达的一种新兴载体，有着比报刊、杂志、广播、电视等传统媒体更复杂的构成要素，如文字、声音、图像等并存于一体。打开一个网站，给用户的第一印象就是网页的色彩。色彩是网页设计的关键因素之一，它既是网页作品的表达语言，又

9南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页色彩设计及视觉设计是视觉传达的方式和手段。研究表明，网页设计中的色彩能提高信息浏览与分类的速度和准确度，好的色彩设计是网页设计成功的保证。如图2-9与图2-10图2-9视觉传达的方法展现图2-10视觉传达的手段展现2.3视觉设计

1、进行视觉设计

任何一个要素都可以发挥，任何一个元素所具有的视觉特征和意义都可以起到传情达意的作用，根据设计目的，两方面的作用可以相辅相成；根据不同的需求，侧重点不一样，有的需要营造气氛感染情绪，有的需要明确的传达信息；

10南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页色彩设计及视觉设计同样依据任何一条法则，组织不同的元素都能形成一个不错的画面，具体如何进行也是由设计目的决定的；

在一个完整的视觉设计中，涉及到的文字、色彩、图片、材质等等元素本身所具有的视觉特征和意义所起到的作用，应该统一起来，为同一个目标服务，不能分散；

关于对比与统一：不管元素如何，不管章法如何，最终形成的画面应该是协调舒服的的，有对比，也要统一，而对比不是杂乱无章的，统一也不是单一呆板的；

关于格式塔心理学：格式塔是德文“整体”的译音，其中的一点理论是说人们在视觉和感觉上更容易接受看起来像一个整体的事物。这一点与视觉画面整体上应该给人一种协调的感觉是相一致的。如图2-11图2-11视觉特征与意义关于规则：法则是用来打破的，也是用来放弃的，有时候跟着感觉走反而更好。人类在几千年的历史中已经形成了一整套完善的形式美法则，同样也形成了认识世界的一些约定俗成的东西。

2、视觉设计的四点规则

实际上是所谓的“视觉焦点”是视觉元素之间对比变化的集中体现，不管是多么简单的设计，都不可能是孤零零的一个元素，突出的焦点都是在对比和融合之中建立起来的，即使是一个简单的圆点，实际上它也是和背景建立了某种对比关系！

如何建立视觉焦点：突出该突出的，弱化其它的，优势在全面中变得平庸!

11南京蓝深泵业有限公司分公司网页制作毕业设计（论文）网页色彩设计及视觉设计一个焦点（对称中心对称）、两个焦点（疏密对比视觉平衡）、三个焦点？一个banner、一个模块、整个页面？要注意多个焦点之间的关系，构图是否主次分明、协调统一、视线流畅？用古人的话来说就是“经营位置”。如图2-12和图2-13及图2-14图2-12视觉设计四点规则图2-13视觉设计焦点图2-14视觉设计对齐12南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作第3章南京蓝深泵业有限公司分公司网页制作3.1案例网页制作流程

1．分析客户的要求和企业的类型，并参考相关类型的企业网站，结合自己的实际经验画出大概的框架图，并标明其用途和要实现的功能，这一步可直接在纸上完成。

2．利用PS来进行具体的设计，利用辅助线画出框架图，不同模块之间要画两条辅助线，并留一定的距离，便于对网页的控制，接下便可以制作企业的logo、广告条、导航条等主要内容，然后依次完成其他模块的制作。

3．对色彩、文字的排版、导航条、底部内容进行细化，使网站达到一定的品质感，完成首页的全部制作后就可以把做好的页面发给客户确定。

4.首页确定以后，便开始内页的制作，内页的制作相对简单，保持首页的整体风格不变，对相应的版块就行修改即可，相同模块的内容只需要制作一个即可，内页制作完成后发给客户确定，完成整个网页的设计，并交给程序员切片添加程序。

主题：南京蓝深泵业有限公司分公司网站制作（北京上海沈阳广东）结构分析图：

首页

公司简介公司新闻

企业理念企业掠影联系我们行业动态公司新闻产品展示技术支持成功案例公司连接

南京蓝深北京蓝深沈阳蓝深广东蓝深上海蓝深联系我们办公OA

颜色主题：科技蓝、草绿、浅白

科技蓝的色感清晰明厉，一种水的感觉体验，性格冷感而具有一定的吸引向心力，是一种对人刺激性中等的色。科技蓝容易引起人们对于思想的思考，也容易使人深思、展望、探索与追寻。草绿色给人一种生命的热情，正如科技蓝的水色感觉所衍伸出的一种生命感。在科技蓝中加入少量的浅白，使冷感趋于平静态，缓和冷感的距离感，进一步引人前去求知。网页的总体我采用了科技蓝，给人探寻、最求、向往的情绪，很符合水泵产业的网

13南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作页设计初衷，让更多的人去了解蓝深，感觉到它所带来的科技感，与衍伸出来的生命（源于生活中的不可或缺）。3.2案例网页页面设计

首先是蓝深泵业有限公司向我所在的公司提出设计需求，然后又根据他们所提出的要求作出初期

我采用的是规则型的网页，简单大方。在经过客户与一些工作的人员一起商讨与思考后做了相应的调整，使其更贴合整个公司网站风格。如图3-1与图3-2图3-1第一次设计index页面样式（沈阳）14南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作图3-2商讨后更改页面（广东）整体网站以灰白作为协调色，以logo上的科技蓝与草绿为相称色，并且以一些js技术效果实现一些动态效果，使界面实现一种连动性，为整个网站的效果增添技术科技感，使客户更便捷的浏览界面。首页我采用的是“三型”网页格局效果。

以网页首页来分析制作步骤介绍：

1、将photoshop打开，新建一个文档，命名为“首页”，大小为1000*700，分辨率为100pi，颜色模式为RGB，背景色为白色，点击确定。

2、将标尺打开，拉几条参考线。3、利用选框工具

画出相对应的框框，首先画出左上角的小框，利用渐变工具

。

main

bottom几个区域。如图3-3给框框加上渐变色使页面不会显得僵硬，4、将整个index页面分布为topbanner

图3-3渐变部分介绍15南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作5、其余的框框也根据步骤三来做，将人物素材图拖至适合的位置，利用钢笔工具做出top部分的线条效果，如图3-4图3-4首页人物部分介绍6、制作网页主题，在适当的位置选择与之相对应的字体写上中文主题文字显得更加神秘!如图3-5图3-5主题文字介绍7、制作按钮部分点开，设置如图3-6：

图3-6按钮图片的设置介绍8、其他网页页面效果图如下

--子页面布局的板式就基本没什么改变了如图3-716南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作图3-7公司简介页面展示由于每一区域展示的内容途径不同，所需的样式效果会有所变化如下图效果：

图3-8新闻中心页面展示17南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作图3-9成功案例页面展示图3-10联系我们页面展示18南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作3.3网页静态页面制作（div+cssjs）

首先用网页首页来分析如图3-11图3-11网站首页布局制作步骤的介绍：

1、我使用的是Dreamweavercs5进行静态页面编辑，使用代码输入效果实现静态页面，取代表格布局。如图3-12图3-12Dreamweavercs5打开截图2、新建站点

在“定义站点”向导进行的任意一个步骤，选择对话框上部的“高级”标签，可打开高级站点定义对话框。

建立蓝深分公司页面网站站点

19南京蓝深泵业有限公司分公司网页制作毕业设计（论文）南京蓝深泵业有限公司分公司网页制作3、新建一个html文件，命名为index.html，并建立链接外部样式（css链接外部样式代码为：css外部链接样式：

banner幻灯片效果链接样式：jsflash）

导航条js效果链接样式：

main部分窗口切换效果链接样式：

4、div布局规划：