web前台页面开发规范.docVIP

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 两种字体。  行距建议用百分比来定