页面设计规范

1、.文档属性：属性文档属性文档主题：页面开发规范文档编号：文档版本：版本号(如：V1.0)版本日期：2009-12-30文档状态：文档变更版本修订日期修订人描述V1.02009-1-23吕勇创建文档.页面开发规范目录1概述.31.1背景. 31.2目的. 32规范细则.32.1页面设计意图明确. 32.2页面HTML代码结构清晰，易于阅读和研发嵌入程序代码.42.3页面流程清晰，指向明确. 62.4页面制作规范及其细节，增强seo效果. 62.5页面id,class及其css命名规范参考，提高团队开发效率和方便管理.61概述1.1背景不规范的页面，会存在很多的冗余代码、结构不合理等现象，将对研发

2、的嵌套工作造成了 一些影响，HTML页面代码的易读性较差。1.2目的规范HTML页面：1. 减少冗余代码2. 提高代码的易读性3. 逐步提高设计师对代码的理解，能够和开发工程师更好的交互4. 让页面更优化，高效让用户能够更好的体验.2规范细则2.1页面设计意图明确1） 页面标题明确，能清晰反映本页面策划功能，禁止“无标题文档”，“标题1”，“标题2” 等归属不明确标题2） 页面文字描述清晰，和产品策划人员沟通确认页面文字描述3） 同项目中不同页面中相同或者相似功能页面文字描述保持一致性2.2页面HTML代码结构清晰，易于阅读和研发嵌入程序代码1） HTML代码分区明确在页面的每一个功能分区前后

3、加入标记，说明此区块的功能指向，例如2） 代码结构清晰明确，要求HTML标签的开始和结束对齐，合理换行，代码缩进符合规范的代码：这里是内容区域这里是内容区域不符合规范的代码：这里是内容区域这里是内容区域这里是内容区域这里是内容区域3） 同项目中不同页面中类似区域保持一致，例如表格样式、表格文字的对齐方式，要注意表格 单元格中文字的对齐方式、距离等因素2.3页面流程清晰，指向明确1） 页面中的链接指向正确，链接指向代表了操作流程，操作流程的合理性在此会得到反映2） 页面中的链接指向禁止使用空链接以及#号代替3） 不同页面的文字、链接的样式等要保持风格一致性4） 导航链接清晰、指向明确完整、风格一

4、致5） 不同页面图标、按钮风格一致，间距合理美观6） 页面中能够少用图片就少用图片，尤其背景色、边框等，尽量少用图片7） 页面中不要保留从其他页面拷贝的无用Javascript代码8） 页面中使用的style、javascript要单独放到文件引用，不能直接写入页面2.4页面制作规范细节，增强seo效果.1） 命名一律小写，尽量用英文，尽量少加中杠和下划线；尽量不缩写，除非一看就明白的单词 如果可以话2） 目录建立的原则：以最少的层次提供最清晰简便的访问结构，根目录一般只存放index.htm 以及其他必须的系统文件，每个主要栏目开设一个相应的独立目录 ，根 目 录 下 的images 用于存

5、放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私 有图片 。3） 所有的CSS，js的都采用外部调用， 书 写 时 重 定 义 的 最 先 ，伪 类 其 次 ，自 定 义 最 后（ 其 中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。4） 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来 定 义 ，pt一般使用中文 宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或 者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。5） 图片都加上

6、alt标签，防止嵌入程序时候程序员忘记此标签调用，合理的使用标题等文字去 描述图片，这样能增加页面的关键字密度。6） 尽量不使用Table布局，去掉页面中的例如font/bgcolor等格式化控制标签。用符合web标准 的代码来制作页面。这样能够让代码结构化、语义化。提高页面代码的可读性。7） 首页HTML代码的和之间的内容，容易忘记加入的标签，网站简介 搜索关键字2.5id,class及其css命名规范参考，提高团队开发效率和方便管理.1） 页面不统一的命名规则，会导致新制作没法很快接手，没法很好的维护现有的页面，一个大 型的网站来说这个是一个重大的失误，所以制作请统一命名规范，大型网站团队

7、开发统 一的命名规范，增强代码可读性，便于制作之间接手，配合，提高团队开发效率.以下是 增强SEO的div+css命名规范实例.1.css class 的命名页头：header 登录条：loginbar标志：logo侧栏：sidebar广告：banner 导航：nav子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 滚动：scroll页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏 目 标 题 ：title 加 入 ：joinus 指 南 ：guild 服 务 ：service 热 点 ：hot

8、 新 闻 ：news 下 载 ：download 注册：register 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright2.css ID 的命名外套：wrap 主导航：mainnav 子导航：subnav页脚：footer整个页面：content页眉：header页脚：footer商标：label标题：title主导航：mainnav（globalnav）顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar旗志：logo标语：banner菜单内容1： menu1content菜单容量：menucontainer 子菜单：submenu 边导航图标：sidebarIcon 注释：note面包屑：breadcrumb(即页面所处位置导航提示）容器：container 内容：content 搜索：search 登陆：login功能区：shop(如购物