谋思网Web页面设计规范V.ppt

谋思网设计规范 V1.0 徐川寻 v是“version“的缩写 v1.0就是第一个版本呢 产品部 product Department 目录 一、 基础规范二、XHTML制作规范 01.网页的宽度和布局 1.1.一栏式布局、两栏式布局、三栏式布局 1.2.对齐方式 02.头部和页尾设计 03.页面元素 3.1.网站广告 3.2.网站表单设计 3.3.翻页 3.4.按钮 04.文字设计 05.图片 一、网页布局 01.目前我们网站的统一宽度为970px(特殊页除外) 布局结构一般分为，一栏式、两栏式和三栏式布局。 01.1.布局 u一栏式布局的页面我们主要用于结构简单，信息量小的一些页，如：注册页面、留言页、等视觉流清晰便于用户快速定 位。 u两栏式布局我们多用于列表页、资讯详细页等；这种结构能引导用户将视觉焦点放在大面积的主要内容上，右侧可放置 次要的信息或者广告，在用户阅读内容的同时或之后才能引导其关注更多相关信息。 u三栏式布局我们用于信息量比较多的页面，例如一些一级页面和频道页。 例如：关于我们、foot部分的一些页面 u网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 u并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，保持整个页面的通透性使我们的设计更有序。更方便阅读。 u我们的版块之间的间距一般为10px。 一、网页布局 01.2.对齐 二、头部和页尾设计规范 1.头部 网站头部，也称为header 目前我们网站常采用的头部设计主要包括一下2种类型。 背景色的填充宽度都是为100% 备：网站头部和底部都是写在单独的页面中，程序嵌套页面的时候只需要调页面相关统一的头部和底部即可，以便于日后的修改方便。 同一级别或者同一类型页面的头部设计尽量保持一致。 （样式一） （样式二） 二、头部和页尾设计规范 1.页尾设计 u网站尾部，也称为Tailer,指的是页面底部部分。 需要注意的是，页尾的信息不要过多过杂，整站能统一的地方尽量保持统一。 u目前我们整站有2种类型，一种只针对我们的网站首页使用，另一种用于网站首页除外的页面。 u 关于页尾的设计新趋势 为了更好地利用网站的空间，目前有些网站在页尾除了放置联系方式和行版权信息外，也放置网站的辅助导航，使页尾发挥更大的引导作用（如下图）。 三、页面元素 1.广告位 目前网站的广告位尺寸大概分为以下几种： 1、970像素 * 100像素 2、970像素 * 90像素 3、690像素 * 100像素 4、270像素 * 100像素 5、250像素 * 100像素 6、250像素 * 90像素 其他的广告位根据实际情况来定，不管是什么格式的广告位，一定要保证图片的清晰质量高，广告位的尺寸尽量为整。 2.图片 同页面中，相同的地方的图片大小要一致，便于后台提取，例如： 2.表单设计 表单是网站中运用较多的页面元素之一，主要用于采集和提交 用户输入的信息，可以通过表单采集用户的名字和E-mail地址等各种信息，最典型的就 是注册表单或会员资料表。 视觉美观的表单，能够使表单填写更加舒适，比如较大的字体和间距，不会让用户产生局促感等。 三、页面元素 我们一般采用标签右对齐的方式，这样可以减少 标签和输入框的距离， 可大量减少眼睛移动和填 写表单的时间，而且又美观。 对于内容较多的，我们尽量按逻辑分组。 对于这种表单，我们尽量加上 border,以至于各浏览器效果一 致。 3.翻页 u翻页也是我们常用的元素之一，尤其是列表页多用 u目前我们网站使的样式为： u目前样式比较多，也不是很美观，待统一。 4.按钮 按钮的主次关系，当页面上同时出现2个及以上的按钮时，比如 我们就需要根据按钮 间逻辑关系，重要程度及使用场景等考虑其主次关系，在突出主要按钮的同时，有必要减轻次要操作的视觉重量 。 三、页面元素 4.文字 网页中总体上使用： 字体 font-family:Arial, 宋体 字号 font-size:12px 14px; 字色 暂时还没有统一，按情况来定 字体设置上请尽量使用双尾数值，比如 12px 14px 16px 22px： 文字的行间距使用双尾数值： 12号字体常用行间距22px 24px 特殊情况除外 14号宋体常用行间距 24px特殊情况除外 u链接规范： 链接不带下划线为链接通常的默认风格，特殊位置为了美观和明显可特例。 链接的颜色可配合主题颜色风格改变，但鼠标移动其上时的链接颜色，本网站统一为加下划线“#BA2636；”。 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线。 三、页面元素 四、XHTML制作规范 01. 目录： 目录应使用小写字母，特殊情况除外,并且以字母开头其中不得包含汉字、空格与特殊字符。 目录命名请尽量英文为指导，不要以拼音作为目录名称。 像一些常用的： image 放网站不同栏目的页面都要用到的公共图片 flash、css、js 样式文件 02.网页编码和logo： 所有页面都是采用 页面中涉及到我们的logo的地方都该有链接,并链接到我们的网站首页；在切图时我们网站的logo统一存放在 images/logo文件下（便于我们以的管理）。 03. CSS调用规范： 所有的css的尽量采用外部调用： 代码较长的首页和重要栏目首页可直接内嵌css，避免调用时间太长，使页面未及时调用css风格而显得凌乱（ 这种情况我们目前还没有）。 某些独立存在的单页也可以使用内嵌方式。 04.img标签规范： 所有img标签除了程序控制宽高值外，都应该 width=“ height=“，这样在图形文件未被读取时，保证浏览器预留图形占用的空 间，防止网页最终显示时出现抖动现象。 所有带链接的img标签都应该 border=“0“。 一般img标签都应该设置 alt=“，alt的内容尽量贴近图的内容。 05.常用CSS缩写形式： 背景缩写： background:red url(images/bg.gif) repeat-y top right; 列表缩写： list-style : list-style-image | list-style-position | list-style