页面设计规范

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

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

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

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

5、录下的images目录存放本栏目页而使用的私 有图片。3）所有的CSS, js的都采用外部调用，LINK href=z，style/style. cssrel二stylesheet type二text/css书写时重定义的最先伪类夷次目定义最后 （其中a: link a: visited a: hover a：actived要按照顺序写）便于自己和他人阅 读。4）为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt般使用中文宋体的9pt和llpt, px一般使用中文宋体12px和14. 7px这是经过优化的字号，黑体字或 者宋体字加粗时，一般选用llpt和14. 7px的

6、字号比较合适。5）图片都加上alt标签，防止嵌入程序时候程序员忘记此标签调用，合理的使用标题等文字去描述图片，这样能增加页面的关键字密度。6）尽量不使用Table布局，去掉页而中的例如font/bgcolor等格式化控制标签。用符合谥标准的代码来制作页面。这样能够让代码结构化、语义化。提高页面代码的可读性。7）首页代码的head和/head之间的内容，容易忘记加入的标签，网站简介META二DESCRIPTION CONTENT=，zxxxxxxxxxxxxxxxxxxxxxxxxxx/ 搜索关键META NAME二keywords CONTEXT二xxxx, xxxx, xxx, xxxxx,

7、 xxxx,2.5 id, class及其css命名规范参考，提高团队开发效率和方便管理.1）页而不统一的命名规则，会导致新制作没法很快接手，没法很好的维护现有的页而，一个大 型的网站来说这个是一个重大的失误，所以制作请统一命名规范，大型网站团队开发统 一的命需规范，增强代码可读性.便于制作之间接手，配合，提髙团队开发效率.以下是增强SEO的div+css命需规范实例.1. css class 的命名 页头：header 登录条:loginbar标志:logo侧栏:sidebar广告：banner 导航:nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：sc

8、roll页而主体：main内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips 栏目标题:title加入:joinus指南:guild服务:service热点：hot新闻:news卜载： download注册：register状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendlink 页脚：footer 版权：copyright2. css ID的命名子导航：subnav页脚：footer整个页而：content页眉：header页脚：footer商标：label标题：title主导航：mainnav (globalnav)顶导航：topnav边导航：sidebar 左导航：leftsidebar右导航：rightsidebar旗志：logo标语：banner菜单内容1:menu1content菜单容量：menucontainer子菜单：submenu边导航外套:wrap主导航：mainnav图标：sidebaricon 注释:note面包屑:容器： 内容： 搜索： 陆：功能区： 当前的breadcrumb （即页而所处位宜导航提示） container contentsearch 登loginshop（如购物车，收银台）current3. 列