前台页面开发规范

fanggangJava

浏览: 24690 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

CSS 浏览器 Web 框架搜索引擎

Web 开发的分散性和交互性，决定了 Web 开发必须遵从一定的开发规范和技术约定，只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量。

一、基本规范：
 页面一定要有相应的Title，特殊页面可以不要；如Iframe页、Include页等
 主要页面要有meta字段以便于搜索引擎查找，还可充当注释作用
 尽量使用广泛支持的技术。以流行的浏览器及版本为标准，同时照顾低版本
 不使用过小的字体不使用过大的图片、动画、声音、不使用过长的滚屏
 及时删除无用文件，防止无谓的下载速度减慢、后期维护简洁明了
 所有文件全部以小写字母命名，包括图形文件。禁止用中文作文件名
 页面支持最低800X600屏幕分辨率（实际尺寸为778*434px），即不能出现横向滚动条
 通常情况下页面应以居中为主，如有特殊要求可以设置居顶、居左
 图片采用gif, jpg压缩格式，以减小页面下载数据量，<img>标记要有width,height属性
 所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的

二、文件命名与目录结构规则
 首页面必须是以index.htm 、index.jsp命名的文件，按目录划分
 HTML文件扩展文件名一律用 .htm，不要同.html扩展名混用
 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。
 目录下新建css文件夹，专门用来存放本级目录的全局CSS样式文件
 目录下新建image文件夹，专门用来存放本级目录的全局图片资源，如gif、jpg
 目录下新建script文件夹，专门用来存放本级目录的全局脚本程序代码，如js、vbs
 目录下新建media文件夹，专门用来存放本级目录的全局媒体文件，如flash、avi
 目录下新建temp文件夹，专门用来存放本级目录的临时或测试资源文件
 根目录下一般只存放index页面及其所包含的帧页面与一些公共页面，如error、wait
 所有文件与目录尽量符合DOS系统8/3文件格式命名，即8字节文件名、3字节扩展名

三、表格嵌套布局规范
 在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 <colspan> <rowspan> 两个标记,经验表明,这两个标记会带来许多麻烦。
 一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 <tbody> 标记,以便能够使这个大表格分块显示。
 排版中我们经常会遇到需要进行首行缩进的处理,不要使用   或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记,注意,一般情况下,请不要省略 </p> 结束标记。
 原则上,禁止用 <img width=? height=?> 来人为干预图片显示的尺寸,而且建议 <img> 标签中不要带上 width 和 height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的,不会有这个现象）,尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img> 附上 width 和 height 属性。
 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用 <br> 来人工干预分段。
 不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
 请不要在网页中连续出现多于一个的   也尽量少使用全角空格（英文字符集下,全角空格会变成乱码）,空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 图片来实现。
 中英文混排时,我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体。
 行距建议用百分比来定义,常用的两个行距的值是 line-height:120%/150%
 网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样：<a href= “aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>

四、Web标准设计规范（XHTML+CSS）
 为页面添加正确的DOCTYPE，过渡型（Transitional）、严格型（Strict）、框架型（Frameset）
 设定名字空间（Namespace）<html XMLns="http://www.w3.org/1999/xhtml" >
 声明编码语言<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
 用小写字母书写所有的标签元素与属性名字
 为图片添加 alt 属性
 给所有属性值加引号””
 关闭所有的标签，包括空标签<br />
 用CSS定义元素外观
 用结构化元素代替无意义的垃圾代码
 给每个表格和表单加上id
 所有的XML标记都必须合理嵌套
 把所有<>和&特殊符号用编码表示； & l t ; & g t ; & a m p;等
 给所有属性赋一个值，没有值的就重复本身 <td nowrap="nowrap">
 不要在注释内容中使用“--”
 推荐定义font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
 辅助图片一律用背景处理
 尽量多使用群选择器、派生选择器来书写具有层次结构的CSS样式
 合理使用类别选择器与id选择器，同个ID只用一个地方，相同CLASS可用多个地方
 链接伪类一定要按照a:link、a:visited、a:hover、a: active的顺序书写
 多使用具有良好风格的注释，便于今后的维护与重构

前台开发编码规范
HTML编码规范
 一个标记必须占用一行不得出现两个标记在同一行的情况(同一标记的关闭标记除外)
 静态文件内容必须包含在<body></body>标记中间
 <body>标记必须包含在<html></html>标记中间
 对于需要关闭的标记，必须同其关闭标记同时出现，不得出现交叉包含的语句
 最高一级的父标记采用左对齐顶格方式书写
 下一级标记采用左对齐向右缩进一个Tab的方式书写
 在下一级依此类推，分别左对齐相对于父标记向右缩进一个Tab的方式书写
 同一级标记的首字符上下必须对齐

JavaScript编码规范
变量命名规范
 常量以及全局变量名必须全部使用大写字母
 变量名首字母必须小写
 变量名必须使用其类型的所写字符串开始。各种类型的所写字符串如下：
 整型变量：int；长整型变量：lng；浮点型变量：flt；双精度变量：dbl
 对象引用变量：obj；字符串变量:str；Date类型变量：dtm
 变量名必须采用有意义的单词命名
 变量名除首字母小写外，其他单词首字符必须大写
 如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释

变量使用规范
 变量使用前必须定义。没有定义的变量禁止使用
 变量的使用尽量缩小到小的作用域

对象命名规范
 text输入框：txt button按钮：btn    select下拉选择框：sel    option项：opt
 form表单：frm frame框架：fra    hidden表单项：hdn    div标记：div
 span标记：span 对话框对象：dlg    窗口对象：win

函数以及子过程命名规范
 函数命名必须使用动词＋名词对的方式，并且能够体现函数的功能
 函数命名的动词前缀必须是同函数功能相关的完整动词
 函数命名第一个单词的首字母小写，后面每一个单词的首字母大写

分享到：

WEB交互界面易用性设计和验收的指导性原则 | struts2 性能问题

2008-10-28 15:09
浏览 1733
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论