标准网页设计规范（图文）

　　网页设计开发之前都应该遵循一定的网页设计规范，这样有利于项目的整体风格统一、代码的维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。这其中包括组件团队、开发工具、开发流程、文件命名规则、程序编码风格、数据库设计约定等。当然所有这些规范并非唯一标准，也不是一成不变的，应根据实际情况进行相应的调整。

一、页面尺寸与色彩规范

　　1．尺寸规范

　　页面标准统一按兼容分辨率800×600设计。为了使显示更友好，建议使用778或760像素设计。页面长度建议1屏半到2屏，原则上长度不超过3屏，宽度不超过1屏。一页网页在56K调制解调器完全显示的等待时间不得大于30s。首页及各级页面都必须带有网站的标志性图片Logo，并链接到网站首页。

　　2．色彩规范

　　(1)确定主色调。

　　红色是火的颜色，热情、奔放：也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

　　(2)根据需要进行配色。

　　单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。

　　根据网站性质，制定网站配色方案，避免在一个页面上有太多的色彩。活泼但不失稳重，颜色柔和但不乱。文字、图像等的色彩要与页面协调。即使页面有背景图片，也一定要定义背景色，通常默认设置背景色为白色。

二、网页的文字规范

　　为了保证不同浏览器上字号保持一致，字号建议用点数pt(point)和像素px(pixel)来定义。

　　1．pt一般使用中文宋体的9pt和11pt

　　这是经过优化的字号，黑体字或者宋体字加粗时，一般选用llpt和14．7px的字号比较合适。大小为9pt时，行距为120％。信息类最终页面采用弹出方式，标题及正文字体规定为1lpt，行距为140％。所有页面字体大小建议不要超过11pt。

　　2．px一般使用中文宋体12px和14．7px

　　3．文字颜色与页面配色协调，不使用与背景色相近的颜色

　　网站的所有网页文字风格要一致，必须使用CSS样式表来定义整个网站文字风格。处理网页中的文字，禁止直接复制粘贴Word中的文字，应将文字粘贴至记事本后再使用。非图像设计的字体一律采用Windows标准宋体。英文数字采用Arial，日文采用MS明朝(如果做特殊效果需做成图)。要加粗文字用Bold，不要用strong标签。

　　页面文本不使用下划线方式，也尽量少采用粗体显示。文字正确无误，段落层次清晰，中文段落首行缩进两个汉字方式。

三、表格与图形设计规范

　　1．表格设计规范

　　定义表格宽度时使用绝对值，即指定像素值。778px的框架内内嵌最大表格宽度为775px，且为左对齐。页面中从上至下尽量拆分成多个层叠表格，尽量用tbody标签去控制表格分行下载，这种方法当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。表格必须指定边框，边距和间距，图文混排时推荐使用边距为5，间距也为5。处理网页中的表格，禁止直接复制粘贴Word中的表格，应在网页制作软件中制作表格。在空的单元格中，应插入一些与网页背景颜色相同的色点，使表格在浏览器显示比较美观。为加快网页下载速度，最好使用CSS定义类表格样式。

四、网站目录结构规范

　　网站的目录结构是指网站组织和存放站内所有文档的目录设置情况。一个良好的网站目录结构，对于网站维护、内容的扩充和移植有着重要的影响。如大型网站的目录数量多、层次深、关系复杂，在网站设计中更需要合理定义目录结构和组织好所有文档。下面介绍一些在设计工作中行之有效的做法：

　　第一点：不要将网站中所有的文件都存放在同一个目录下。尽可能减少网站根目录下存放的文件数，网站根目录只存放index.html或index.asp等首页文件，以及其他必须的系统文件。

　　第二点：一般按照网站的主菜单栏目结构，给每个栏目建立一个目录。如果这个栏目的内容特别多，又分出很多下级栏目，则可以再增设相应的子目录。例如，根据需要在每个栏目的目录中建立images和media的子目录，独立存放此栏目专有的图片和多媒体文件。

　　第三点：在网站根目录中常包含的目录有：images目录存放网站所有页面都要用到的公共图片，例如公司的Logo标志、Banner广告、导航栏图片、按钮图片等。style目录存放CSS样式表文件。iS目录存放JavaScript脚本文件。media目录存放flash、avi、rm等多媒体文件。temp目录存放搜集的各类文字图片等原始资料。Templates目录存放网站的模板文件。

　　第四点：网站如有多个语言版本，每个语言版本应存放于独立的目录中。如“cn”存放中文版内容，“en”存放英文版内容，相应的CSS样式表文件分别存放在各语言版本下的style目录中。

标签:网页设计