网页程序界面开发规范剖析.doc

网页程序界面开发规范 目录 第一章 前言 3 一.编写目的 3 二.编写背景 3 三.文章注释 3 第二章 目录结构规范 3 第三章 HTML代码编写规范 5 一.字符、段落规范： 5 二.Head规范： 6 三.表格和列表的使用： 8 四.图片： 10 五.其他： 11 第四章 网页内容、布局规范 12 一.设计原则： 13 二.内容规范： 14 三.布局规范： 19 四.文字与用语： 24 五.颜色的使用 25 第五章 CSS样式表编码规范 26  第一章 前言 一.编写目的 本文件的编写和发布目的在于提高网络项目质量和可维护性,通过对规范的推行，形成统一的编码风格。 二.编写背景 为了提高源程序的质量和可维护性，提高软件产品质量，有必要对软件产品的源程序的编写风格做出统一的规范约束。 本规范的内容包括：网站工程、目录结构、HTML、脚本、图片、多媒体等。 三.文章注释 文中出现的公式，以中括号“[ …]”括起来的部分，是可选部分。 文中出现蓝线浅灰色的文字部分，表示演示代码、代码说明。 第二章 目录结构规范 创建目录的原则是：对工程中所有的资源进行归类存放，并考虑可能存在的各种业务需求，例如访问权限。同时，当代码交付于另一个开发者时，对方能非常明确的知道各个目录的意义，能方便快捷的查找到相关的资源文件。 目录结构 应开设 /images，/css，/script 三个文件夹，分别存放图片资源、CSS样式表定义文件和脚本，有些项目还使用了其他的一些网页相关的资源，如flash、avi、rm、include等，可开设 /common 目录来存放这些资源。images目录中放不同栏目的页面都要用到的公共图片，如果图片较多，可按图片的职能类型，再划分子目录。 根目录一般只存放首页，以及其他必须的系统文件，每个主要栏目开设一个相应的独立目录。 目录命名规范 除非有特殊情况，目录的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导。名字结构参照微软的命名习惯，以多个单词连接形成，其中第一个单词首字母小写，后面的单词首字母大写，例如：systemManage。对于过长的单词，可采用常规缩写，例如department 的常规缩写是dept，原则上以他人能迅速理解为准。 网页的命名规范 指导思想：一是使得每一个成员能够方便的理解每一个文件的意义，二是当在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便查找、修改、替换、计算负载量等等操作。禁止使用中文命名。 静态Html网页，为了统一拓展名，规定为 htm，而不是 html； 图片的命名规范：应将相同类型的图片，让它们放置在一起，类型参照下面的定义； 广告、装饰图案等图片取名：banner ，或 bar 标志性的图片取名为：logo 在页面上位置不固定并且带有链接的小图片取名为button，或 btn 在页面上某一个位置连续出现，性质相同的链接图片取名：menu 装饰用的照片取名：pic 不带链接表示标题的图片取名：title ◇ 依照此原则类推。 命名的方法为： 类型名_英文含义 [区分符] 例如 button_searchUser.gif， memu_sendNotice.gif，禁止使用中文命名。 第三章 HTML代码编写规范 必须考虑到客户浏览器兼容性、可维护、可拓展升级等要素。 一.字符、段落规范： 为了保证不同浏览器上字号保持一致，字号用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体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%。 所有的字号都应该用样式表来实现，禁止在页面中出现 font size=? 标记。 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现 二.Head规范： 主要页面必