网页设计和排版规范

一、网站建设尺寸规范
(1)页面标准按800×600分辨率制作,尺寸宽为760-780PX;
(2)页面标准按1024×768以及以上分辨率制作,尺寸宽为980-1004PX;
(3)注意考虑800×600分辨率制作的网页,要设定外层布局表格居中,以确保在1024*768情况下居中,页面长度原则上不超过3屏。
(4)全尺寸BANNER为468*60PX,小BANNER为88*31PX,另外120*90,120*60也是小图标的标准尺寸。
(5)最外层布局表格使用像素来定义,内部排版嵌套表格使用百分比来定义
二. 网页HEAD区代码规范  
网页的HEAD区是指首页HTML代码的<head>和</head>之间的内容。其中要包含必要的标题,网页显示字符集,关键字,与描述信息,作者,CSS链接代码,收藏夹图标等,该区域内容对于搜索引擎优化和排名有着非常关键的作用,应该在设计网页模板的时候考虑加入,具体内容应根据各个页面的内容来提取。
通常必须写入以下信息:
<TITLE>这个栏目的标题----公司网站名称</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META CONTENT="网页关键字" />
<META CONTENT="网页描述信息" />
< META NAME ="author" CONTENT ="www.xiaoyemen.com" />
<LINK REL="ICON" HREF="/FAVICON.ICO" />
<LINK REL="SHORTCUT ICON" HREF="/FAVICON.ICO" />
<LINK HREF="STYLE/该页所采用的样式表名称.CSS" REL="STYLESHEET" />
注意:TITLE、KEYWORDS 和DESCRIPTION   请根据题目文档中的各个文件对应的内容添加,在新建立HTML文件的时候加入,ICO图标   用工具软件把LOGO转换成ICO格式,然后放到根目录。
三、风格设计规范
1、依照客户对网站的定位和颜色喜好来确定整体的设计风格。
2、主体框架页面、内容页尽量采用方型结构。禁用长距离的斜线及弧线结构,可允许小范围内的斜线及弧线。封面页、专题页可不受此限制。
3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧,拐角可以有曲线变化。拐角块最大不得超过18像素。同一页面弧度尽量保持一致。
4、各主要栏目之间要求使用一致的布局,包括一致的页面元素,一致的导航形式,使用相同的铵钮,相同的顺序。可跟首页有变化。
5、首页及各级页面都必须带有网站的LOGO(建议小于150×54),并链接到网站首页。
6、统一按兼容分辨率800*600设计。为了使显示更友好,建议使用778或者760 px设计。
7、网站页面长度建议1屏半到2屏。原则上长度不超过3屏,宽度不超过1屏。根据用户习惯和网站需要,国内中文网站综合类、门户类(包括垂直门户)网站可设计超过3屏。
四、图形设计规范
1、 图片标准尺寸
全尺寸banner为468×60px,半尺寸banner为234×60px,小logo为88×31px另外150×68、120×90,120×60也是标准尺寸,网站logo一般控制在150×54以内,客户要求或特殊广告图片可另定尺寸。建议首页存储大小不得超过150K(包括图片),其它页面经压缩后尺寸不得超过70K。
2、 图片的分类及命名规则
☆ 名称分为头尾两两部分,用下划线隔开。
☆ 头部分表示此图片的大类性质,例如广告、标志、菜单、按钮等等。
☆ 一般来说:放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner;标志性的图片我们取名为:logo;在页面上位置不固定并且带有链接的小图片我们取名为button;在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu;装饰用的照片我们取名:pic;
不带链接表示标题的图片我们取名:title;依照此原则类推。
☆ 尾部分用来表示图片的具体含义,如果有类似图片就用数字区别。
☆ 下面是几个样例,大家应该能够一眼看明白图片的意义:
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_job.gif
title_news.gif
logo_police.gif
title_top01.gif
title_top02.gif
☆小标一定做成透明的。
3、Banner制作要求
1)大Banner(468×60Pixel)容量尽量限制在15K内,格式尽量选用GIF及动态格式。
2)帧切换时尽量半静半动。少用满底256色以上的图像。闪切变化主要体现在文字上。
3)广告条的border设为0,并要求加上alt说明。
4、图标和图片
1)在图标的制作上应采用简捷,色彩明快的图标;在选用单色图标时应根据本栏目的色彩进行搭配。
2)图标存储为GIF格式(除个别情况外),尽量采用16色、填充色或单色。
3)图片依情况存成GIF或JPEG格式,原则上色调单一的图片存成GIF格式,色彩复杂、层次丰富的存在JPEG格式。
4)设计时不得用15K以上的图片,如图片过大可以考虑采用图片分割的办法。
5)内容图片、导航图片的border设为0,并要求加上alt说明。
6)普通图片不必加alt说明,但如果有链接要把border设为0。
7)公用图片或有可能更换的图片不要指定图片的尺寸大小(width,height)。
五、页面制作排版规范
1、色彩规范
1)根据网站性质,避免在一个页面上有太多的色彩,活泼但不失稳重,颜色柔和但不乱
2)文字的色彩要与页面协调。
3)即使页面有背景图片,也应该设置背景色,通常默认设置背景色为白色
2、表格
  1)定义表格宽度时使用绝对值(指定像素)。
  2)内嵌最大表格宽度为775pix,align=left (前提在设定为778pix的框架内)
  3)页面中从上至下尽量拆分成多个层叠的表格,尽量用TBODY这个标签可以控制表格分行下载,当表格内容很大时比较实用,在需要分行下载处加上<tbody>和</tbody>
  4)表格必须指定(border,cellspacing,cellpadding),图文混排时推荐使用vspace=5   hspace=5。
  5)为加快网页下载速度,最好使用CSS定义类表格样式。
3、字体
1) 为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。
2) 大小为9pt时,行距为120%;信息类最终页面采用弹出方式,标题及正文字体规定为11pt,行距为140%。所有页面字体大小建议不要超过11pt。
  3) 考虑字体大小的兼容性,避免使用size=2的方式定义,尽量使用pt或px并用css定义
  4)文字颜色与页面配色协调,不使用与背景色相近的颜色。
  5) 非图像设计的字体一律采用windows标准宋体。(如果做特殊效果需做成图)要加粗文字用Bold,不要用Strong。
  6) 页面文本不使用下划线方式,也尽量少采用粗体显示。
4、JS调用规范
  所有的javascript脚本尽量采取外部调用
5、错误页面规范
  所有程序出错页面、找不到的页面不要使用默认的出错提示,要设计为带网站标识和说明的个性化的出错提示页面。
6、所有页面必须均需经过浏览器兼容测试,通常须支持主流浏览器IE、Firefox。
posted @ 2009-12-28 17:38  doing_zzh  阅读(676)  评论(0编辑  收藏  举报