网页程序界面开发规范

1580402552314第1页共31页网页程序界面开发规范1580402552314第2页共31页目录第一章前言....................................................................................................................................3一.编写目的..................................................................................................................................3二.编写背景..................................................................................................................................3三.文章注释..................................................................................................................................3第二章目录结构规范....................................................................................................................3第三章HTML代码编写规范.......................................................................................................5一.字符、段落规范：..................................................................................................................5二.HEAD规范：...........................................................................................................................6三.表格和列表的使用：..............................................................................................................8四.图片：....................................................................................................................................10五.其他：....................................................................................................................................11第四章网页内容、布局规范.......................................................................................................12一.设计原则：............................................................................................................................13二.内容规范：............................................................................................................................14三.布局规范：............................................................................................................................19四.文字与用语：........................................................................................................................24五.颜色的使用............................................................................................................................25第五章CSS样式表编码规范......................................................................................................261580402552314第3页共31页第一章前言一.编写目的本文件的编写和发布目的在于提高网络项目质量和可维护性,通过对规范的推行，形成统一的编码风格。二.编写背景为了提高源程序的质量和可维护性，提高软件产品质量，有必要对软件产品的源程序的编写风格做出统一的规范约束。本规范的内容包括：网站工程、目录结构、HTML、脚本、图片、多媒体等。三.文章注释文中出现的公式，以中括号“[…]”括起来的部分，是可选部分。文中出现蓝线浅灰色的文字部分，表示演示代码、代码说明。第二章目录结构规范创建目录的原则是：对工程中所有的资源进行归类存放，并考虑可能存在的各种业务需求，例如访问权限。同时，当代码交付于另一个开发者时，对方能非常明确的知道各个目录的意义，能方便快捷的1580402552314第4页共31页查找到相关的资源文件。目录结构应开设/images，/css，/script三个文件夹，分别存放图片资源、CSS样式表定义文件和脚本，有些项目还使用了其他的一些网页相关的资源，如flash、avi、rm、include等，可开设/common目录来存放这些资源。images目录中放不同栏目的页面都要用到的公共图片，如果图片较多，可按图片的职能类型，再划分子目录。根目录一般只存放首页，以及其他必须的系统文件，每个主要栏目开设一个相应的独立目录。目录命名规范除非有特殊情况，目录的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导。名字结构参照微软的命名习惯，以多个单词连接形成，其中第一个单词首字母小写，后面的单词首字母大写，例如：systemManage。对于过长的单词，可采用常规缩写，例如department的常规缩写是dept，原则上以他人能迅速理解为准。网页的命名规范指导思想：一是使得每一个成员能够方便的理解每一个文件的意义，二是当在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便查找、修改、替换、计算负载量等等操作。禁止使用中文命名。静态Html网页，为了统一拓展名，规定为htm，而不是html；1580402552314第5页共31页图片的命名规范：应将相同类型的图片，让它们放置在一起，类型参照下面的定义；◇广告、装饰图案等图片取名：banner，或bar◇标志性的图片取名为：logo◇在页面上位置不固定并且带有链接的小图片取名为button，或btn◇在页面上某一个位置连续出现，性质相同的链接图片取名：menu◇装饰用的照片取名：pic◇不带链接表示标题的图片取名：title◇依照此原则类推。命名的方法为：类型名_英文含义[区分符]例如button_searchUser.gif，memu_sendNotice.gif，禁止使用中文命名。第三章HTML代码编写规范必须考虑到客户浏览器兼容性、可维护、可拓展升级等要素。一.字符、段落规范：为了保证不同浏览器上字号保持一致，字号用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文1580402552314第6页共31页宋体12px和14px这是经过优化的字号，黑体字，一般选用11pt和14.7pt的字号比较合适。例如：font-size:9pt;font-family:宋体;font-size:14.7pt;font-family:黑体;注意：在定义字体尺寸的时候，不要分别定死在具体的表格中或font标记中，而应该定义样式表CSS文件，统一定义。如：*{font-size:9pt}为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用br来人工干预分段。行距用百分比来定义，通用性更强、更稳健，常用的两个行距的值是line-height:120%和150%。所有的字号都应该用样式表来实现，禁止在页面中出现fontsize=?标记。请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现二.Head规范：主要页面必须要写title，杜绝出现开发工具的默认标题字符，标题的格式为：[机构名称][分隔符][网站名称][分隔符][模块名称]1580402552314第7页共31页要注意编写meta代码：公司版权注释!--DesignedbyCMBChina--网页显示字符集简体中文：METAHTTP-EQUIV=Content-TypeCONTENT=text/html;charset=gb2312繁体中文：METAHTTP-EQUIV=Content-TypeCONTENT=text/html;charset=BIG5英语：METAHTTP-EQUIV=Content-TypeCONTENT=text/html;charset=iso-8859-1网站简介METANAME=DESCRIPTIONCONTENT=CMBChina…搜索关键字METANAME=keywordsCONTENT=xxxx,xxxx,xxx,xxxx,脚本代码编写规范格式：scriptlanguage=JavaScripttype=text/JavaScript.../script或：scriptlanguage=JavaScriptsrc=../script/common.js/注意：如果被引用的JS文件中，含有中文字符，并且明确所在的工程默认编码是支持简体中文显示的，请加上charset属性：scriptlanguage=JavaScriptsrc=../script/common.jscharset=GB2312/1580402552314第8页共31页否则，如果网站工程不支持GB2312会出现脚本错误。CSS样式表文件引用编写规范格式：linktype=text/cssrel=stylesheethref=../css/global.css/直接在页面中定义样式表：styletype=text/css…/sty