1、页 面 开 发 规 范网购 第 1 页 共 9 页文档属性：属 性 文 档 属 性文 档 主 题 ： 页 面 开 发 规 范文 档 编 号 ：文 档 版 本 ： 版 本 号 (如 ： V1.0)版 本 日 期 ： 2009-12-30文 档 状 态 ：文档变更版 本 修 订 日 期 修 订 人 描 述V1.0 2009-1-23 吕 勇 创 建 文 档页 面 开 发 规 范网购 第 2 页 共 9 页页 面 开 发 规 范页 面 开 发 规 范网购 第 3 页 共 9 页目 录1 概述 31.1 背景 31.2 目的 32 规范 细则 .32.1 页面 设计 意图 明确 32.2 页面 HTM
2、L代码 结构 清晰 ，易 于阅 读和 研发 嵌入 程序 代码 42.3 页面 流程 清晰 ，指 向明 确 . 62.4 页面 制作 规范 及其 细节 ，增 强 seo效果 . 62.5 页面 id,class及其 css命名 规范 参考 ，提 高团 队开 发效 率和 方便 管理 .6页 面 开 发 规 范网购 第 4 页 共 9 页1 概 述1.1 背景不规范的页 面， 会 存 在很 多的 冗余 代码 、 结构 不合 理等现象， 将 对 研发 的嵌 套工 作造 成 了 一些影响 ，H TML页面 代码 的易 读性 较差 。1.2 目的规范 HTML页面 ：1. 减少 冗余 代码2. 提高 代码
3、 的易 读性3. 逐步 提高 设计 师对 代码 的理 解， 能够 和开 发工 程师 更好 的交 互4. 让页 面更 优化 ，高 效让 用户 能够 更好 的体 验 .2 规 范 细 则2.1 页面设计意图明确1） 页面 标题 明确 ， 能 清晰 反 映 本页 面策 划功 能， 禁 止 “ 无标 题文 档 ” ， “ 标题 1” ， “ 标题 2” 等归 属不 明确 标题2） 页面 文字 描述 清晰 ，和 产 品 策划 人员 沟通 确认 页面 文 字 描述3） 同项 目中 不同 页面 中相 同 或 者相 似功 能页 面文 字描 述 保 持一 致性2.2 页面HT ML代码结构清晰，易于阅读和研发嵌
4、入程序代码1） HTML代码 分区 明确在页 面的 每一 个功 能分 区前 后加 入标 记， 说明 此区 块的 功能 指向 ，例 如页 面 开 发 规 范网购 第 5 页 共 9 页页 面 开 发 规 范网购 第 6 页 共 9 页2） 代码 结构 清晰 明确 ，要 求 HTML标签 的开 始和 结束 对齐 ，合 理换 行， 代码 缩进符合 规范 的代 码：这里 是内 容区 域这里 是内 容区 域不符 合规 范的 代码 ：这里 是 内 容区 域这里 是内 容区 域这里 是 内 容区 域这里 是内 容区 域3） 同项 目中 不同 页面 中类 似 区 域保 持一 致， 例 如 表格 样式 、 表
5、格文 字的 对齐 方式 ， 要 注 意表 格 单元 格中 文字 的对 齐方 式、 距离 等因 素页 面 开 发 规 范网购 第 7 页 共 9 页2.3 页面流程清晰，指向明确1） 页面 中的 链接 指向 正确 ， 链 接指 向代 表了 操作 流程 ， 操 作流 程的 合理 性在 此会 得到 反映2） 页面 中的 链接 指向 禁止 使 用 空链 接以 及# 号代 替3） 不同 页面 的文 字、 链接 的 样 式等 要保 持风 格一 致性4） 导航 链接 清晰 、指 向明 确完 整、 风格 一致5） 不同 页面 图标 、按 钮风 格一 致， 间距 合理 美观6） 页面 中能 够少 用图 片就 少
6、用 图片 ，尤 其背 景色 、边 框等 ，尽 量少 用图 片7） 页面 中不 要保 留从 其他 页面 拷贝 的无 用 Javascrip t代码8） 页面 中使 用的 styl e、 javascrip t要单 独放 到文 件引 用， 不能 直接 写入 页面2.4 页面制作规范细节，增强se o效果.1） 命名 一律 小写 ， 尽 量 用英 文， 尽 量 少加 中杠 和下 划线 ； 尽 量 不缩 写， 除 非 一看 就明 白的 单 词 如果 可以 话2） 目录 建立 的原 则： 以最 少的 层次 提供 最清 晰简 便的 访问 结构 ，根 目录 一般 只存 放i ndex.htm 以及 其他 必
7、须 的系 统文 件， 每 个 主要 栏目 开设 一个 相 应 的独 立目 录 ， 根 目 录 下 的 images 用于 存放 各页 面都 要使 用的 公用 图片 ， 子 目 录下 的i mages目录 存放 本栏 目页 面使 用的 私 有图 片 。3） 所有 的 CSS， js 的都 采用 外部 调用 ， 书 写 时 重 定 义 的 最 先 ， 伪 类 其 次 ， 自 定 义 最 后 （ 其 中 a:link a:vis ited a:hover a:actived 要按 照顺 序写 ）便 于自 己和 他人 阅读 。4） 为了 保证 不同 浏览 器上 字号 保持 一致 ， 字 号 建议 用点
8、 数 pt和像 素 px来 定 义 ， pt一般 使用 中文 宋体 的 9pt和 11pt， px一般 使用 中文 宋体 12px 和 14.7px 这是 经过 优化 的字 号， 黑 体字或 者宋 体字 加粗 时， 一般 选用 11pt和 14.7px 的字 号比 较合 适。5） 图片 都加 上 al t标签 ，防 止嵌 入程 序时 候程 序员 忘记 此标 签调 用， 合理 的使 用标 题等 文字 去 描述 图片 ，这 样能 增加 页面 的关 键字 密度 。6） 尽量 不使 用Tabl e布局 ， 去 掉 页面 中的 例如 font/bgcolo r等格 式化 控制 标签 。 用 符 合 we
9、b标准 的代 码来 制作 页面 。这 样能 够让 代码 结构 化、 语义 化。 提高 页面 代码 的可 读性 。7） 首页 HTML代码 的 和 之间 的内 容， 容易 忘记 加入 的标 签，网站 简介 搜索 关 键 字 页 面 开 发 规 范网购 第 8 页 共 9 页2.5 id,class及其css命名规范参考，提高团队开发效率和方便管理.1） 页面 不统 一的 命名 规则 ， 会 导致 新制 作没 法很 快接 手， 没 法 很好 的维 护现 有的 页面 ， 一 个 大 型的 网站 来说 这个 是一 个重 大的 失误 ，所 以制 作请 统一 命名 规范 ，大 型网 站团 队开 发统 一的
10、 命名 规范 ， 增 强代 码可 读 性 ， 便 于制 作之 间接 手， 配 合 ， 提 高 团队 开发 效率 .以下 是 增强 SEO的 div+css命名 规范 实例 .1.css class 的命 名页头 ：header 登录 条： loginbar标志 ：l ogo侧栏 ：si debar广告 ： banner 导航 ：nav子导 航： subnav 菜单 ：m enu 子菜 单： submenu 搜索 ：sear ch 滚动 ： scroll页面 主体 ：m ain 内容 ：cont ent 标签 页： tab 文章 列表 ： list 提示 信息 ： msg 小技 巧： tips
11、栏 目 标 题 ： title 加 入 ： joinus 指 南 ： guild 服 务 ： service 热 点 ： hot 新 闻 ： news 下 载 ： download 注册 ： register 状态 ： status 按钮 ： btn 投票 ：v ote 合作 伙伴 ：pa rtner 友情 链接 ：f riendlink 页脚 ：f ooter 版权 ：copy right2.css ID 的命 名外 套： wrap 主导 航： mainnav 子导 航： subnav页 脚： footer整个 页面 ： content页 眉： header页 脚： footer商 标： l
12、abel标 题： title主导 航： mainnav（ globalnav）顶导 航： topnav 边导航： sidebar 左导航： leftsidebar 右导 航： rightsidebar旗 志： logo标 语： banner菜单 内容 1： menu1content菜单 容量 ： menucontainer 子菜 单： submenu 边导航图 标： sidebarIcon 注释 ：note页 面 开 发 规 范网购 第 9 页 共 9 页面包 屑： breadcrumb(即页 面所 处位 置导 航提 示）容器 ： container 内容 ： content 搜索 ： search 登陆 ： login功能 区： shop(如购 物车 ，收 银台 )当前 的 current3.另外 在编 辑样 式表 时可 用的 注释 可这 样写 ：内容 区4.样式 文件 命名主要 的 master.css 布局 ，版 面 layout.css 专栏 columns.css文字 font.css 打印 样式 print.css 主题 themes.css
