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

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

毕业设计论文任务书

注 1、此表一式三份系部、指导教师、学生各一份。

 、类别是指毕业论文或毕业设计类型指应用型、理论研究型和其他.

摘要

网页设计作为用户界面交互设计的延伸是在新的媒体和新的技术支持下实现一个

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

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

关键词:网页色彩网页制作 we页面布局设计误区视觉传达设计

AB S TRAC T

Web Desin as a etensin of the iterctie us r iterface desig ne

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

edia ad new techolo  es    or  o a ive a whole new ie  of creative dsig。 Cr tive desig b pages shol follow te spcii ,Fetures and  trc ur f  es, prctical f   ibi   t nd  ty i h. hi  papr des r  es t  s  te buil   e gnera  s  ps toset combined w h  ler nd coci   color pplicat  ns andWeb dsignteor  through teanj    De Bl   a h Pump Indus   Co.,Lt.)e produ  inins    e esribes te vi u  efec f he web d   g,rui  and te on ete  eration.Discusse   eta l the es  gn and production   mu ti—media ompay sWeb s  te onept anNot  includig h framewrk ofthe overall lyut oft  cpany’s Web  i  e to nde   tand, to cllet ma eria ad conceptsOrganize  d use。 With he pop  ari   io an promot  n   Iand nli  inormation pulishn platform m   an m e,Pe     ad hus also wi  l mprve the verall visual exprienc reuieents. I he  e ent life online hoping an nforma on to ind asbeen like t  air like ito our  ives indispnsale And the  ight Pu  iity and romotion of the cmpay o rov e another w .

Keord Web     colo e prod t o we age layout desiM h V sualCounict on D  ign

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

目录

前言. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

第章网页设计制作流程错误未定义书签。

1. 网页制作流程. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

1。 2网页设计制作步骤. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

  3网页设计常用参数. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

1.4网页设计制作常用工具介绍错误未定义书签。

 。 5网页布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

第2章网页色彩设计及视觉设计错误未定义书签。

2。 1色彩在网页中的应用错误未定义书签。

2。 色彩在网页设计中的重要性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

2。 3视觉设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

第3章南京蓝深泵业有限公司分公司网页制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

3.1案例网页制作流程错误未定义书签。

3。 2案例网页页面设计错误未定义书签。

3 3网页静态页面制作(d iv+ s   s). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

3。 4网页设计制作小结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

第章网页运行的总结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

4.1浏览器兼容性问题. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

4.2b页面布局成为败笔的设计误区29

第5章总结错误未定义书签。

参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

致谢. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .错误未定义书签。

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

前言

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

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

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

第章网页设计制作流程

1。 网页制作流程

 、客户基本要求:在客户确定制作网站网页时,收取客户公司的一些基本网站内容资料

 、制作工具准备制作网页的工具、图片制作工作、网络工具等超文本标识语言(TM L编辑工具:eitp lus、记事本、 Dre a mw a ve 

3、页面设计及美化工具使用工具所有可制作平面的软件推荐使用Phtoshop、

F as

4、编写网页开始动手,编写网页,在Dremwe a  中使用d iv+c s s进行编辑制作.

1 2网页设计制作步骤

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

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

1、草稿

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

 、粗略布局

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

 、定稿

定稿即将粗略布局精细化、具体化完成整个页面设计。

4、 网页设计的制作

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

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

1。 3网页设计常用参数

图片质量与下载速度

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

1、分辨率

理解图像分辨率可以直接控制文件大小和下载速度进而影响访问者的人数创建

E图片的小、快、好。显示器的分辨率起绝对性作用,大多数显示器使用的是1 24*78的分辨率因为要通过显示器显示页面所以用高分辨率并不会增加图片质量还会降低图片的下载速度.

2、位图

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

 、矢量

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

4、 图片格式

制作好的效果图可以保存为各种格式,包括GIF格式 JP格式和P格式等各个图片格式之间的区别为GI格式即图形交换格式GI格式的图片只能使用2 种颜色不适合显示色彩丰富的图像内容。其特点是1.采用隔行扫描的显示方式 2.可以设置背景透明;3。可以制作简单的动画。 JG格式可以显示颜色复杂的图片,但是在处理大面积的颜色块时可能会出现明显的压缩痕迹。P N格式的图片兼有GI F和JG的优点。

1。 4网页设计制作常用工具介绍

用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件现在通常使用的软件是Phot  op,Deamwevr和lash。在制作效果图时使用的软件对最终结果并没有什么影响用自己精通的即可。

Photo sho是一款非常好用的平面设计软件。 由Adoe公司开发设计,其用户界面易懂、功能完善、性能稳定是比较专业的图像处理软件,它具有强大的滤镜功能.所以,在很

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

多的的广告、出版、软件公司 ho toho都是首选的平面工具它有很多的快捷方式如抓手工具H键,ABE键切换显示或隐藏所有的控制板 D键、 X键迅速切换前景色和背景色等灵活的运用快捷键可以使设计的速度大大提高。

F la s h是网页flas动画处理软件可以做出动画效果主要是和Dreaweave r配合做网页.对处理一般的动画效果比较实用,此软件深受大众喜爱。

1 5网页布局

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

1、两栏式结构即页面顶部为网站标志或广告条,下面分为左右两栏,一般左栏式导航或分类信息右栏为主要内容这种布局很容易掌握但如果在色彩上不加以注意的很容易给人一种“乏味”的感觉。如 图11

图1—1两栏式构图

2、三栏式结构是一些大型网站常用的布局结构,一般为上面是横幅的广告条下面分为三竖栏 中间较大是主要的信息,左右是小条内容或者广告条。三栏式给人一种充实的感觉但页面拥挤不够灵活是网站常用的一种布局形式.如 图1—2

图1-2 三栏式构图

3、 “三”型结构这种结构多用于国外网站或者视频类网站其特点是分类清晰展示方便。左右框架型是企业网站或论坛常用的布局页面分为左右两部分,左边一般为导航部分右边是与导航相对应的内容。左右框架型的结果非常清晰,内容一目了然便于信息的查询。如图1—3