媒体公司网站的设计与制作文档格式.doc

1、1） 根据题目要求，查阅大量文献资料，并收集资料；了解用不同软件制作网站的基本方法，并进行分析和比较。2）以Dreamweaver软件为平台，结合图片处理软件制作一个媒体公司网站。要求提交电子版原始文件（.html）3）完成毕业论文。2、设计（论文）的主要内容1）网站设计与制作的相关基础知识；2）媒体公司网站设计与策划（确定主题，明确网站要提供和发布的信息）；3）媒体公司网站整体设计（网站LOGO设计、风格定位、主色调及视觉效果、网页布局及版面设计、栏目设计、导航设计）；4）网站分步设计。3、设计（论文）的基本要求1） 主题突出，内容充实，布局合理，结构清晰、规范。2） 色彩搭配合理、美观，设

2、计有创意。3） 导航美观、醒目，跳转方便。4） 要求有网站LOGO。独立完成网站制作并撰写论文。4、主要参考文献 可参考相关文献资料和已有的相关网站5、毕业设计（论文）时间安排 第一阶段：资料收集整理第二阶段：对资料进行分析，构思网站主题，确定设计方案第三阶段：设计与制作媒体公司第四阶段：编写毕业论文、完善设计备注：毕业论文答辩时间为大约为2012年4月上旬，以系部通知时间为准，有特殊情况的学生请提前与系里联系。注：1、此表一式三份，系部、指导教师、学生各一份。2、类别是指毕业论文或毕业设计，类型指应用型、理论研究型和其他。I南京蓝深泵业有限公司分公司网页制作 毕业设计（论文）摘要摘要 网页设

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

4、。进而对公司的宣传与推广提供了又一途径。关键词：网页色彩 网页制作 web页面布局设计误区 视觉传达设计IIABSTRACTWeb Design as an extension of the interactive user interface design, new media and new technologies Support to achieve a whole new field of creative design. Creative design web pages should follow the specific，Features and structure of id

5、eas, practical feasibility and stylish. This paper describes the site built，The general steps to set, combined with clear and concise color applications and Web design theory, through the Nanjing，Deep Blue Branch （Pump Industry Co., Ltd.） web production instance, describes the visual effect of the w

6、eb design，Fruit and the concrete operation. Discussed in detail the design and production of multi-media companys Web site concept and Note, including the framework of the overall layout of the companys Web site to understand, to collect material and concepts，Organize and use. With the popularizatio

7、n and promotion of IT and online information publishing platform more and more，Perfect, and thus also will improve the overall visual experience requirements. In the present life, online hopping and information to find has been like the air like into our lives, indispensable. And then right Publicit

8、y and promotion of the company to provide another way.Keywords：Web page color Web production web page layout design Myth Visual Communication DesignIII南京蓝深泵业有限公司分公司网页制作 毕业设计（论文）目录目录前 言1第1章 网页设计制作流程21.1网页制作流程21.2网页设计制作步骤21.3网页设计常用参数31.4网页设计制作常用工具介绍31.5网页布局4第2章 网页色彩设计及视觉设计62.1 色彩在网页中的应用62.2 色彩在网页设计中的重

9、要性92.3 视觉设计10第3章 南京蓝深泵业有限公司分公司网页制作133.1案例网页制作流程133.2案例网页页面设计143.3网页静态页面制作（div+css js）193.4网页设计制作小结23第4章 网页运行的总结244.1浏览器兼容性问题244.2 web页面布局成为败笔的设计误区27第5章 总结29参考文献30致 谢31IV南京蓝深泵业有限公司分公司网页制作 毕业设计（论文）前言前 言随着互联网的高速发展，许多人不在仅仅局限于网上冲浪，而是参与到网站建设中。越来越多的企业高度重视自身企业在互联网上的形象，新产品面世，都可能独立开发一个网页展示平台，可以向客户介绍企业形象和实例。网页

10、展示，在如今的市场经济条件下品牌传播中的作用可见一斑，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合我在公司实习过程，现就网站建设和管理过程中，网站设计与制作的具体经历，包括：网页设计与制作过程中的网页布局，色彩构置，框架结构等相关事项做以下论述。制作一个媒体公司网站，以确保其在相同网速流量的前提下，以最佳方式打开一个浏览界面，需要我们在制作网站页面中使用最佳的编排编码方式。在前人总结经验下逐渐形成以div+css的布局效果取代table网页布局，在选取图片的同时根据需要对图片的大小体积进行一定的压缩与简化，最好用一个像素解决

11、问题（使用css样式进行编排实现）。在相同的情况下能用编码文字效果实现时最好取代图片效果。1南京蓝深泵业有限公司分公司网页制作 毕业设计（论文）网页设计制作流程第1章 网页设计制作流程1.1网页制作流程1、客户基本要求：在客户确定制作网站网页时，收取客户公司的一些基本网站内容资料；2、制作工具：准备制作网页的工具、图片制作工作、网络工具等；超文本标识语言（HTML）编辑工具：editplus、记事本、Dreamweaver 3、页面设计及美化工具；使用工具：所有可制作平面的软件推荐使用Photoshop、Flash 4、编写网页：开始动手，编写网页，在Dreamweaver中使用div+css

12、进行编辑制作。1.2网页设计制作步骤网页是网站的表现形式，网站是网页的集合，一个站点用的所有网页构成一个网站。网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群体的定位、智能交互、制作策划、形象包装和宣传营销等设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看做一张报纸或者一张杂志来进行排版布局。1、草稿 新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力，创造力，

13、将想像的布局到页面上。这是原创阶段，不必讲究细腻工整，可以在草稿本上先画出整个布局框架，把多个板块的位置先粗略的布置上去进行下一步工作的展示，这一步可以借助photoshop或其他一些制图工具软件来完成。2、粗略布局在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、banner等主要部分模块放在最突出的位置，然后考率其他模块的布局。3、定稿定稿即将粗略布局精细化、具体化，完成整个页面设计。4、网页设计的制作首先在根据客户的要求下，完成首页制作，发给客户在经过客户的确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有

14、的页面都经过客户的确定后，完成网站的制作过程，交给后台程序员添加程序和后台加载内容。1.3网页设计常用参数图片质量与下载速度由于网络速度问题，我们需要考虑图片大小对传输速度的影响，如果图片太大就会影响浏览速度，访问者很快就会对这个网站失去了兴趣，只有充分了解图片质量与下载速度的关系，并了解不同的文件格式，才能更有效的表达内容。1、分辨率理解图像分辨率可以直接控制文件大小和下载速度，进而影响访问者的人数，创建WEB图片的小、快、好。显示器的分辨率起绝对性作用，大多数显示器使用的是1024*768的分辨率，因为要通过显示器显示页面，所以用高分辨率并不会增加图片质量还会降低图片的下载速度。2、位图习

15、惯性称为图像，而将矢量图称为图形，位图是位映射图像的简称，也可以叫栅格图。他将一副图分成许多栅格，栅格的每一个点就是图像的像素，其值就是像素的亮度和色彩度，扩大位图尺寸的效果就是增多像素，从而将线条和形状显示的参差不齐，位图与其他分辨率密切相关，因此在处理位图图像时，必须设置合适的图像分辨率，否则输出图像时会遗漏细节，使图像模糊。3、矢量矢量图也称为面向对像的图像或绘图图像，它使用一组线段造型描述一段图像，图像中包含的直线，弧线和造型的设置与开关是由指令描述的，矢量图适用于描述色彩简单的图像，矢量文件中的图像元素称为对象，每一个对象都是一个自成一体的主体，它具有形状、轮廓、大小和屏幕位置等属性

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

17、op， Dreamweaver和flash。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。Photoshop是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，Photoshop都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。Flash是网页flash动画处理软件，可以做出动画效果，主要是和Dreamweaver配合做网

18、页。对处理一般的动画效果比较实用，此软件深受大众喜爱。1.5网页布局常见网页版式布局结构有以下几种：1、两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。如 图1-1图1-1 两栏式构图2、三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。如 图1-2图1-2 三栏式构图3、“三”型结构，这种结构多用于国外网站或

19、者视频类网站，其特点是分类清晰，展示方便。左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。如 图1-3图1-3 “三”型构图4、上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。如 图1-4图1-4 上下框架型构图5南京蓝深泵业有限公司分公司网页制作 毕业设计（论文）网页色彩设计及视觉设计第2章 网页色彩设计及视觉设计2.1 色彩在网页中的应用色彩是艺术表

20、现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。如果您的企业有CIS（企业形象识别系统），我们将按照其中的VI进行色彩运用。1、了解你的网站所要传达的讯息和品牌。选择可以加强这些讯息的颜色。例如，如果在设计一个强调稳健的金融机构，那么就要选择冷色系、柔和的颜色，像是蓝、灰或绿。在这样的状况下，如果使用暖色系或活泼的颜色，可能会破坏了该网站品牌。 2、了解你的读者群。文化差异可能会使色彩产生非预期的反应。同时，不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色，但这

21、样的颜色却引不起高年龄层的兴趣。3、不要使用过多的颜色。除了黑色和白色以外，约选择四到五个颜色就够了。太多的颜色会导致混淆，也会拉走读者的注意力。 如 图2-1 与 图2-2 图2-1 色彩过多 图2-2 色彩简洁4、在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果，也会妨碍观众阅读。白底黑字的阅读效果最好。如 图2-3图2-3 文字排版5、用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜色的时候，有时候会很难决定每个颜色的相对值。为了要确认你的色盘能提供足够的对比，你可以建立一个仿真网站，并将它转换成灰阶即可。如 图2-4图2-4 灰阶对比6、选择颜色要注意时效性。同一个色彩很容

22、易就充斥着整个市场，且消费者很快的就对流行色彩感到麻木。但就另外一个角度来看，你可以使用几十年前的流行色彩，引起人们的怀旧之情。如 图2-5 与 图2-6 图2-5 流行色彩时效 图2-6 怀旧色彩感觉7、选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色，例如标题和超级链接等。8、注意网站色差问题。每一个网站开发人员都知道，即使是网络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的 gamma 值，并在不同的作业平台上测试你的色盘。在如今的市场经济条件下品牌传播中的作用可见一斑。（1）根据企业所在行业、VI、产品特性，确立色彩。原则上，力求网页色彩整体感。各个超链接在色

23、彩上发生相互作用和过渡，要求是自然的、和谐的。（2）整体布局协调。一般情况下，布局之前，对网页色彩进行系统地规划和设计。在确立一个完整的视觉印象前提下，根据内容的不同需要，小范围的调整。一般情况下，网页包括FLASH、GIF引导动画、VI、导航、图形图像等内容，这些内容的色彩使用，直接决定着网页色彩的感官感受。在确立背景色的情况下，在此基调的基础上进行微调，就能够起到很好的效果。 （3）色彩情感。很大程度上，一个网站的给访问者的感官感受是由网页色调决定的。色调作用于人的视觉和心理，通过与过去的经验、记忆或知识相联系，产生诸如进退、冷暖、轻重、软硬、华丽、朴素等不同感觉。进而容易使人产生各种复杂

24、的心理情感。除色相变化能引起人的情感变化外，色彩的明度和纯度变化也能影响人的情感。高长调的色彩响亮而明朗，让人心情舒畅；高短调色彩配置色调高雅，给人以纯洁、柔和而明快的心理感受。低长调的色彩仿佛黑夜中的闪电，神秘压抑又使人振奋；低短调的色彩仿佛暗夜里的幽灵，低沉冷漠让人心情暗淡；不同的色调引发不同感觉和感情倾向，给网页设计带来了丰富的情感因素。 如 图2-7 图2-7 色彩感情（4）色彩排列。色彩的排列方式也影响着色彩的情感表现。同样的色调因色彩的排列方式不同，也会影响着人的情绪。在网页中色彩的排列是四维度的，即在长、宽、深三维度的基础上加上时间维度。在二维平面上，色块有大小、疏密、对称、均衡

25、、聚散、节奏等变化，加上色彩重叠在三维的方向产生深度和层次感的变化，对色彩的情感倾向有很大的影响。页面色彩大面积的分割显得稳重而大气；小面积色彩有规律的交替变化，让人紧张而富有活力；对称的色彩排列庄重、有严肃感；均衡的色彩排列自由而浪漫 ；色彩排列节奏紧张，人的心理也会紧张；节奏舒缓心理就会放松。色彩还通过重叠、交叠、透叠等手法使平面产生纵深感和空间感，使人产生深远、神秘、梦幻等心理感受。网页的时间性变化也影响着色彩的情感。网页动画帧的变化、网页页面在屏幕上的上下左右移动，以及网页之间相互转化都能产生网页的时间性变化，并带来网页的色彩的变化。随着色彩变化的节奏，浏览者的心理会产生平静、紧张、舒

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

27、。受现代色彩观念的影响，色彩的丰富性从一开始就是网页设计的发展趋向。不同的色彩组合搭配构成各种风格的网页色彩设计。色彩风格的确立首先取决于网站的目标定位，网页的最终受众界定了色彩的倾向。只有符合受众审美需求的色彩风格，才能引起人们的感情共鸣。其次，色彩风格与网站的内容要能够相互呼应。避免虽然美观但与网页内容相冲突的色彩风格，使内容与色彩风格有机的结合起来，更好的发挥各类网站的色彩应用。2.2 色彩在网页设计中的重要性现在的人们浏览网页，已不仅仅满足于简单的文字堆砌上面，他们的审美要求越来越高，艺术设计在网页设计中的重要性是显而易见的。网页的界面好比一本书的封面，只有大方美观、重点突出，让浏览者

28、一目了然，才能激起阅读者深入浏览的兴趣。如果在页面堆砌太多的细节，使页面过于复杂，以致浏览者找不到重点，他们也很快就会对该网页失去兴趣。所以设计网页时，需要考虑网页自身内容的特性。文化类的网页，艺术设计找的比重相对较轻，整体构图、颜色使用可以丰富活泼一些；技术类的网页，艺术设计占的比重较轻，需要体现出严肃、稳重、具备深刻内涵的特点。另外还有一些信息门户网站，主要侧重于信息的含量，就不可能把它当作一个艺术作品来处理，用表格颜色、线条来区分，注意功能性的作用。色彩是美学的重要组成部分，不同的色彩能够表达不同的情感。根据网页的内容和特点，通过色彩构成的运用，选择不同的色彩搭配，使页面达到和谐统一的视觉效果，从而唤起人们的心灵感知，调动浏览者的情绪，达到信息传递和情感交流的目的。色彩是艺术设计中不可或缺的元素。好的色彩设计可给人以强烈的视觉冲击力和艺术感染力，能引发人们从美学意义上了解和鉴赏其表达的形象和内容，网页色彩设计的意义亦是如此。网页作为视