欢迎来到推外网络,推外专注于SEO网站优化、营销型网站建设、危机公关、微信开发
新客户注册 推客云登录 关于推外
推外400电话 400-026-0708
全部产品

标准网页设计规范(图文)

作者:推外营销 阅读次数: 100000+

  网页设计开发之前都应该遵循一定的网页设计规范,这样有利于项目的整体风格统一、代码的维护和扩展。由于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目录中。

标签:网页设计

标签:网站建设