页面设计规范
文档属性：
文档变更
页面开发规范
目录
1 概述...................................................................................... . (3)
1.1 背景..................................................................................... .. (3)
1.2 目的..................................................................................... .. (3)
2 规范细则...................................................................................... (3)
2.1 页面设计意图明确..................................................................................... . (3)
2.2 页面HTML代码结构清晰，易于阅读和研发嵌入程序代码 (4)
2.3 页面流程清晰，指向明确..................................................................................... .. (6)
2.4 页面制作规范及其细节，增强seo效果 (6)
2.5 页面id,class及其css命名规范参考，提高团队开发效率和方便管理 (6)
1概述
1.1 背景
不规范的页面，会存在很多的冗余代码、结构不合理等现象，将对研发的嵌套工作造成了一些影响，HTML页面代码的易读性较差。
1.2 目的
规范HTML页面：
1. 减少冗余代码
2. 提高代码的易读性
3. 逐步提高设计师对代码的理解，能够和开发工程师更好的交互
4. 让页面更优化，高效让用户能够更好的体验.
2规范细则
2.1 页面设计意图明确
1）页面标题明确，能清晰反映本页面策划功能，禁止“无标题文档”，“标题1”，“标题2”等归属不明确标题
2）页面文字描述清晰，和产品策划人员沟通确认页面文字描述
3）同项目中不同页面中相同或者相似功能页面文字描述保持一致性
2.2 页面HTML代码结构清晰，易于阅读和研发嵌入程序代码
1）HTML代码分区明确
在页面的每一个功能分区前后加入标记，说明此区块的功能指向，例如
2.3 页面流程清晰，指向明确
1）页面中的链接指向正确，链接指向代表了操作流程，操作流程的合理性在此会得到反映
2）页面中的链接指向禁止使用空链接以及#号代替
3）不同页面的文字、链接的样式等要保持风格一致性
4）导航链接清晰、指向明确完整、风格一致
5）不同页面图标、按钮风格一致，间距合理美观
6）页面中能够少用图片就少用图片，尤其背景色、边框等，尽量少用图片
7）页面中不要保留从其他页面拷贝的无用Javascript代码
8）页面中使用的style、javascript要单独放到文件引用，不能直接写入页面
2.4 页面制作规范细节，增强seo效果.
1）命名一律小写，尽量用英文，尽量少加中杠和下划线；尽量不缩写，除非一看就明白的单词如果可以话
2）目录建立的原则：以最少的层次提供最清晰简便的访问结构，根目录一般只存放index.htm 以及其他必须的系统文件，每个主要栏目开设一个相应的独立目录，根目录下的images
用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私
有图片。
3）所有的CSS，js的都采用外部调用，
rel="stylesheet" type="text/css">书写时重定义的最先，伪类其次，自定义最后
（其中a:link a:visi ted a:hover a:actived要按照顺序写）便于自己和他人阅
读。
4）为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或
者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。
5）图片都加上alt标签，防止嵌入程序时候程序员忘记此标签调用，合理的使用标题等文字去描述图片，这样能增加页面的关键字密度。
6）尽量不使用Table布局，去掉页面中的例如font/bgcolor等格式化控制标签。用符合web标准的代码来制作页面。这样能够让代码结构化、语义化。提高页面代码的可读性。
7）首页HTML代码的
和之间的内容，容易忘记加入的标签，网站简介 搜索关键
字
2.5 id,class及其css命名规范参考，提高团队开发效率和方便管理.
1）页面不统一的命名规则，会导致新制作没法很快接手，没法很好的维护现有的页面，一个大型的网站来说这个是一个重大的失误，所以制作请统一命名规范，大型网站团队开发统
一的命名规范，增强代码可读性，便于制作之间接手，配合，提高团队开发效率.以下是
增强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 新闻：news 下载：
download 注册：register 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright
2.css ID 的命名
外套：wrap
主导航：mainnav
子导航：subnav
页脚：footer
整个页面：content
页眉：header
页脚：footer
商标：label
标题：title
主导航：mainnav（globalnav）
顶导航：topnav 边导
航：sidebar 左
导航：leftsidebar
右导航：
rightsideba
r
旗志：logo
标语：banner
菜单内容1：menu1content
菜单容量：menucontainer
子菜单：submenu 边导航
图标：sidebarIcon 注释：
note
面包屑：breadcrumb(即页面所处位置导航提示）
容器：container
内容：content
搜索：search 登
陆：login
功能区：shop(如购物车，收银台)
当前的current
3.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>
4.样式文件命名
主要的master.css 布
局，版面 layout.css
专栏columns.css
文字 font.css 打
印样式print.css
主题themes.css
（注：可编辑下载，若有不当之处，请指正，谢谢!）