资源描述
资料内容仅供您学习参考，如有不当或者侵权，请联系改正或者删除。
文档属性:
属性
文档属性
文档主题:
页面开发规范
文档编号:
文档版本:
版本号(如: V1.0)
版本日期:
-12-30
文档状态:
文档变更
版本
修订日期
修订人
描述
V1.0
-1-23
吕勇
创立文档
页面开发规范
目 录
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) 代码结构清晰明确, 要求HTML标签的开始和结束对齐, 合理换行, 代码缩进
符合规范的代码:
<!-- 铃声排行开始 -- >
<table cellpadding=”0” cellspacing=”0” border=”0”>
<tr>
</tr>
</table>
<td>
这里是内容区域
</td>
<td>
这里是内容区域
</td>
<!-- 统一头结束/铃声排行结束 -- >
不符合规范的代码:
<table cellpadding=”0” cellspacing=”0” border=”0”>
<tr><td>这里是内容区域
</td>
<td>
这里是内容区域
</td> </tr>
</table><table cellpadding=”0” cellspacing=”0” border=”0”>
<tr><td>这里是内容区域
</td>
<td>
这里是内容区域
</td>
</tr>
</table>
3) 同项目中不同页面中类似区域保持一致, 例如表格样式、 表格文字的对齐方式, 要注意表格 单元格中文字的对齐方式、 距离等因素
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的都采用外部调用, <LINK href="style/style.css" rel="stylesheet" type="text/css"> 书 写 时 重 定 义 的 最 先 , 伪 类 其 次 , 自 定 义 最 后( 其 中a:link a:visited 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代码的<head>和</head>之间的内容, 容易忘记加入的标签,
网站简介<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx"> 搜索关键字<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
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 右导航: rightsidebar
旗
志:
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
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
