网站设计分为几个步骤

网站设计分为几个步骤

怎样才能设计一个好的网站？一个合格的网页设计师可以将自己设计的网站在修改或者

升级过程变成一件很简单的事情，经过一个合格的网站设计师之手的网站一定有高度的灵活性和可维护性。网站设计的流程是什么样的呢？

网站设计流程一：确定风格

网站的风格通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性:是粗犷豪放的，还是清新秀丽的; 是温文儒雅的，还是执着热情的; 是活泼易变的，还是墨守成规的。在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。风格的形成不是一次定位的，你可以在实践中不断强化、调整、改进。

网站设计流程二：搜集素材

查找并收集有关的文字、图片、声音、影像等素材，并对所收集的素材进行整理、处理。

网站设计流程三：网站布局

首页页面：首页主题还体现在logo 及网站标题上。准确概括的首页主题可以很好帮助用户选择自己有确切需求的网站。

首页导航：网站导航可以看做是对网站内容的分类 把网站的内容进行细分方便用户跟

据个人需求选择浏览相应栏目页面。

首页内容：页面的内容布局需先对网站的用户群体进行需求分析把用户关注最多的内容放置在首页的最重要位置。一般按照用户的浏览方式页面内容布局按照内容重要程度由左上到右下进行布置。

网站设计流程四：LOGO 设计

怎样设计logo 是许多网站设计师比较头疼的事情，在设计之前要进行基本的调研分析，也就是对该企业做全面的调查，然后就是要挖掘所需要的素材，最后就是进行设计开发了，这也是最重要的一步，只有经过反复的推敲修改，才能设计出令人满意的标志。

网站设计流程五：导航设计

在设计导航之前，要充分的分析用户需要什么？从导航的有效性、实现度和利用率来设计导航。

网站设计流程六：banner 设计

在设计banner 之前，要和客户沟通一下他们想在banner 上突出什么重点，然后有针对的展现banner 上的内容。当我们确定重点之后，banner 的色彩搭配要明亮干净要与整个页面相协调。

网站设计流程七：友情链接设计

设计网站的友情链接要考虑一下网站优化的问题，链接一定不能是滚动的，因为滚动的链接没有人交换，最好是在底部一一列出来。

网页设计制作过程中的注意事项

一、 页面的规划：

一篇文章要有主题，主题越明确，内容就会有深度，还要有中心思想，不能跑题。一个页面在规划的时候也一样，主题要集中，各个版块相关性要强，还得体现丰富，这个页面才会显得专业并且丰富，否则填写内容就会“神散”。主要体现在：

1． 主导航醒目清晰，突出重点

导航清晰了，无论从用户体验还是搜索引擎收录方面都有很大意义。用户浏览页面层层深入不会迷失其中，也能及时返回想回的位置；蜘蛛爬虫也是按航线走的，不是东边抓一点，西面也来一块。 2． 主栏目要显眼，一目了然

根据人的视觉习惯，先上后下，先左后右的原则，网页在设计的时候就要遵守原则。上边占一个页面的多少，中间留多少，下边又要剩多少；左边放什么留多大地方，中间是多少，右边又是多少，都是有科学依据的，不是随便放置的。这样规划出来的页面用户肯定喜欢。 3． 主要栏目链接多，引起重视

最终页面联于子栏目，子栏目要与主栏目相联，主栏目是根，就像一棵树，枝繁叶茂说明根深蒂固，一定是棵好树，网站也同样，跟主栏目链接的越多，主栏目出现的机会也就越多。 蜘蛛爬虫也会重视这个页面，用户也会更多的点击这个页面。

总之，页面在规划的时候要有的放失，该醒目的地方就突出下，重点的地方就重复几次。

二、 制作注意事项：

1． 注意页面体积

页面不能太大了，太大了下载速度慢，一是会影响用户的体验，二是蜘蛛爬虫也会觉得累，包括图像在内的网页字节数，最好不要超过50K 。 2． 忘记框架结构

框架结构（帧结构）从营销的角度上讲，主要问题在于不能为每个网页都设置一个标题（TITLE ），更为糟糕的是，有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次。所以一般情况下，尽可能不采用框架结构。现在一般网站都是采用表格定位的网页设计。 3． 丢掉特效链接

我们经常看到有些网站为导航链接加上了特效，如点击某个项目会展开下层链接等。这些效果一般通过Java Script实现，视觉上非常新颖，但在“蜘蛛”程序的眼里则没

那么诱人，相反它无法解读这种链接。为了让搜索引擎顺利检索到你的网页，建议还是牺牲掉这些花哨的东西。 4． 放弃FLASH 动画

到目前为止搜索引擎对FLASH 还不感冒，好的FLASH 可以满足视觉感观，除此外就没什么优点了，文件大，打开速度慢是用户离开网站的主要原因。 5． 不用图象区块 Image Maps，很多搜索引擎是不支持它的。当“蜘蛛”程序遇到这种结构时，往往会感到茫然不知所措。因此尽量不要设置Image Map链接。

如果说上面都是诗内功夫，下面就从诗外功夫说起

一个页面要想在搜索引擎中获得好的排名，更快的营销页面的话，除在设计、制作的时候就要重视、创造完高质量的内容后，还有要注重高质量的链接即导入链接，内容中的内部链接。 导入链接

搜索引擎在决定一个网站的排名时，不仅要对网页内容和结构进行分析，还围绕网站的链接展开分析。

网站内部链接是搜索引擎排名主要因素之一! 网站内部文件之间的链接情况如何，会影响网站的整体质量。 网站内部链接处理的恰到好处，会提示网站整体的PR 值，关键词排名。 网站内部链接处理过度，会引擎搜索引擎的处罚！

一、内部链接布局，应该考虑一个重要的因素，相关性。调用任何信息都要以相关性为主，相关性越高，页面的质量就越高。内部链接的布局，首先要考虑的就是相关性，在各个页面调用相关文章。

二、内部链接时效性，在页面上调用每天最新的网页信息。加快新网页的收录速度以及更新旧网页的信息。 网页的基本元素包括

1. 网站Logo 2.网站banner 3.导航栏 4.文本 5.图象 6.多媒体

1、logo 的尺寸大小

国际上规定的标准的广告尺寸有下面八种，并且每一种广告规格的使用也都有一定的范围。

一、120×120，这种广告规格适用于产品或新闻照片展示。

二、120×60，这种广告规格主要用于做LOGO 使用。

三、120×90，主要应用于产品演示或大型LOGO 。

四、125×125，这种规格适于表现照片效果的图像广告。

五、234×60，这种规格适用于框架或左右形式主页的广告链接。

六、392×72，主要用于有较多图片展示的广告条，用于页眉或页脚。

七、468×60，应用最为广泛的广告条尺寸，用于页眉或页脚。

八、88×31，主要用于网页链接，或网站小型LOGO 。

其中关于网站的LOGO ，目前有三种规格：

1.88*31 这是互联网上最普遍的LOGO 规格。

2.120*60 这种规格用于一般大小的LOGO 。

3.120*90 这种规格用于大型LOGO 。 logo常用尺寸：88*31；120*60；160*60；180*60；自定义尺寸

banner 常用尺寸：468*60；自定义尺寸；通栏banner

三折页广告：

标准尺寸: (A4)210mm x 285mm

普通宣传册：

标准尺寸: (A4)210mm x 285mm

文件封套：

标准尺寸:220mm x 305mm

招贴画：

标准尺寸:540mm x 380mm

挂旗：

标准尺寸:8开 376mm x 265mm 4开 540mm x 380mm

手提袋：

标准尺寸:400mm x 285mm x 80mm

信纸、便条：

标准尺寸:185mm x 260mm 210mm x 285mm

正度纸张：787×1092mm

开数(正度) 尺寸 单位（mm ）

全开 781×1086 2开 530×760 3开 362×781 4开 390×543 6开 362×390 8开 271×390 16开 195×271

注：成品尺寸=纸张尺寸－修边尺寸

大度纸张：850＊1168mm

开数(正度) 尺寸 单位（mm ）

全开 844×1162 2开 581×844 3开 387×844 4开 422×581 6开 387×422 8开 290×422

注：成品尺寸=纸张尺寸－修边尺寸

常见开本尺寸(单位：mm)

开本尺寸：787 x 1092

对开：736 x 520 4开：520 x 368

8开：368 x 260 16开：260 x 184 32开：184 x 130 开本尺寸(大度) ：850 x 1168 对开：570 x 840 4开：420 x 570 8开：285 x 420 16开：210 x 285

32开：203 x 140

正度纸张：787×1092mm

开数(正度) 尺寸 单位（mm ）

全开 781×1086 2开 530×760 3开 362×781 4开 390×543 6开 362×390 8开 271×390 16开 195×271

注：成品尺寸=纸张尺寸－修边尺寸

大度纸张：850＊1168mm

开数(正度) 尺寸 单位（mm ）

全开 844×1162 2开 581×844 3开 387×844 4开 422×581 6开 387×422 8开 290×422

注：成品尺寸=纸张尺寸－修边尺寸

16开 大度：210×285 正度：185×260 8开 大度：285×420 正度：260×370 4

开 大度：420×570 正度：370×540 2开 大度：570×840 正度：540×740 全开 大：889×1194 小：787×1092

名片：

横版:90*55mm 85*54mm 竖版:50*90mm 54*85mm 方版:90*90mm 90*95mm IC卡：

85x54MM

banner 常用尺寸：468*60；自定义尺寸；通栏bannerLOGO 的国际标准规范

为了便于INTERNET 上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO ，目前有国际标准规范

全尺寸banner 为468*60px， 半尺寸banner 为234*60px， 小banner 为88*31px 另外120*90，120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K ，全尺寸banner 不超过14K 由于网络页面和显示器目前的设定 网站LOGO 大小规定为88*31

而企业或者组织的LOGO 通常不限定大小 至于Banner 也是有相关尺寸规定的; 另:网站LOGO 设计规范

LOGO 的应用一直是CIS 导入的基础和最直接的表现形式，其重要性是不言而喻 的，网络标识的设计尤其如此。 一、标识的职能：

作为独特的传媒符号，标识（LOGO ）一直成为传播特殊信息的视觉文化语言。 具信，最早的符合CIS 精神的标识实例，是2433年前陪葬我国楚地的曾侯乙的一只 戟上的" 曾" 字型图标。无论从古时繁复的欧式徽标、中式龙文，到现代洗练的抽象纹 样、简单字标等都是在实现着标识被标识体的目的，即：

通过对标识的识别、区别、引发联想、增强记忆，促进被标识体与其对象的沟通 与交流，从而树立并保持对被标识体的认知、认同，达到高效提高认知度、美誉度的 效果。作为时代的前卫，网络LOGO 的设计，更应遵循CIS 的整体规律并有所突破。 二、网络LOGO 设计的基本应用原理：

在网络LOGO 设计中极为强调统一的原则。统一并不是反复某一种设计原理，应 该是将其他的任何设计原理如：主导性、从属性、相互关系、均衡、比例、反复、反 衬、律动、对称、对比、借用、调和、变异等设计人员所熟知的各种原理，正确地应 用于设计的完整表现。统一也可解释为，共通以上所述各原理，而更高、更概括、更 综合的原理。 构成LOGO 要素的各部分，一般都具有一种共通性及差异性，这个差异性又称为 独特性，或叫做变化，而统一是将多样性提炼为一个主要表现体，称为多样统一的原 理。统一在各部分之中的要素中，有一个大小、材质、位置等具有支配全体的作用的 要素，被称为支配。精确把握对象的多样统一并突出支配性要素，是设计网络LOGO

必备技术因素。

网络LOGO 所强调的辨别性及独特性，导致相关图案字体的设计也要和被标识体 的性质有适当的关联，并具备类似风格的造型。

记得最近EASTECHO 的网友论坛重新开张之时，就有小魔女对论坛的LOGO 表

示了异议，一个简单印刷字体的LOGO 与浪子固有的独特风格、精益求精的品质有较 大背离，并与整个网站LOGO 缺乏联系，从而产生认知的歧义。不过作为充斥英文

LOGO 的浪子网站，做了中文LOGO 尝试，算个突破吧。

网络LOGO 设计更应注重是一种对事物张力的把握，在浓缩了文化、背景、对象、 理念及各种设计原理的基调上，实现对象最冲动的视觉体现。也可以理解为一种最受 制约的冲动，在任何方面的张力不足的情况下，精心设计的LOGO 常会因为不理解、 不认同、不现实、不前卫、不艺术、不朴实等相互矛盾的理由而被用户拒绝或为受众 排斥、遗忘。所以恰到好处的理解用户及LOGO 的应用对象，是少做无用功的不二法 门。不考虑国情和用户的认识水平，对自身设计能力估计不足都是要不得的。在国内 给哪个卖计算机的老板设计个$300万的朗讯红圈LOGO ，很容易被看作是骗钱的。 三、网络LOGO 的表现形式：

作为具有传媒特性的LOGO ，为了在最有效的空间内实现所有的视觉识别功能， 一般是通过特示图案及特示文字的组合，达到对被标识体的出示、说明、沟通、交流 从而引导受众的兴趣、达到增强美誉、记忆等目的。

表现形式的组合方式一般分为特示图案，特示字体，合成字体。 1、特示图案：

属于表象符号，独特、醒目、图案本身易被区分、记忆，通过隐寓、联想、概括、 抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，但与被标识体关联 LOGO的国际标准规范为了便于INTERNET 上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO ，目前有三种规格： 1. 88*31 这是互联网上最普遍的LOGO 规格。 2. 120*60 这种规格用于一般大小的

LOGO 。 3. 120*90 这种规格用于大型LOGO 。

象素不是固定的 啊

一般性LOGO 都是矢量图片制成，所以并没有象素的说法。 网上出现的LOGO 都是72精度 如果用于印刷就是300精度

因为是矢量制成，所以想要多大的精度就有多大的精度

2、Babber 的尺寸大小

横幅广告（Banner ）

文件大小：gif:14K/swf:16K

广告尺寸：468*60像素

广告位置：页面顶部

按钮广告（Button ）

文件大小：gif:6K/swf:8K

广告尺寸：170*60/120*60像素

广告位置：第一屏 第二屏

备注：触发式LOGO ，弹出图片尺寸为160*160 文件大小gif:9K/swf:12K

弹出窗口广告（Pop up）

文件大小：gif:18K/swf:20K

广告尺寸：360*300像素

广告位置：第一屏

通栏广告（Full collumn）

文件大小：gif:20K/swf:25K

广告尺寸：770*100像素

广告位置：第一屏 第二屏

流媒体（Flash layer）

文件大小：swf:25K

广告尺寸：200*150像素

广告位置：第一屏

形式：浏览打开页面，该广告放映8秒后消失

画中画（PIP ）

文件大小：gif:20K/swf:25K

广告尺寸：360*300像素

广告位置：新闻最终页面

浮动标识（Float box）

文件大小：gif/swf/flash

广告尺寸：80*80像素

广告位置：第一屏右侧

全屏收缩广告 （Full screen）

文件大小：gif:20K

广告尺寸：750*550像素

广告位置：第一屏

形式：打开浏览页面前该广告以全屏形式出现3－5秒，随后消失

擎天柱（Sky-scraper ）

文件大小：gif:15K/swf:17K

广告尺寸：130*200像素

广告位置：第一屏 第二屏

视频广告

文件大小：gif/swf/flash

文字链接（Text link） 规格：不超过10个汉字 广告位置：第一屏 第二屏

备注:文字链接长度以不折行为准