页面设计规范样本.doc

资料内容仅供您学习参考，如有不当或者侵权，请联系改正或者删除。文档属性: 属性文档属性文档主题: 页面开发规范文档编号: 文档版本: 版本号(如: V1.0)版本日期: -12-30文档状态: 文档变更版本修订日期修订人描述V1.0 -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背景不规范的页面, 会存在很多的冗余代码、 结构不合理等现象, 将对研发的嵌套工作造成了 一些影响, HTML页面代码的易读性较差。1.2目的规范HTML页面: 1. 减少冗余代码2. 提高代码的易读性3. 逐步提高设计师对代码的理解, 能够和开发工程师更好的交互4. 让页面更优化, 高效让用户能够更好的体验.2规范细则2.1页面设计意图明确1) 页面标题明确, 能清晰反映本页面策划功能, 禁止”无标题文档”, ”标题1”, ”标题2” 等归属不明确标题2) 页面文字描述清晰, 和产品策划人员沟通确认页面文字描述3) 同项目中不同页面中相同或者相似功能页面文字描述保持一致性2.2页面HTML代码结构清晰, 易于阅读和研发嵌入程序代码1) HTML代码分区明确在页面的每一个功能分区前后加入标记, 说明此区块的功能指向, 例如2) 代码结构清晰明确, 要求HTML标签的开始和结束对齐, 合理换行, 代码缩进符合规范的代码: 这里是内容区域这里是内容区域不符合规范的代码: 这里是内容区域这里是内容区域这里是内容区域这里是内容区域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的都采用外部调用, 书 写 时 重 定 义 的 最 先 , 伪 类 其 次 , 自 定 义 最 后( 其 中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代码的和之间的内容, 容易忘记加入的标签, 网站简介 搜索关键字2.5id,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 版权: 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(如购物车, 收银台)当前的current3.另外在编辑样式表时可用的注释可这样写: 内容区4.样式文件命名主要的 master.css 布局, 版面 layout.css 专栏 columns.css文字 font.css 打印样式 print.css 主题 themes.css