1、1UI规范文件山东新中天信息技术有限公司制作日期(2008 年 8 月 8 日)2这个 UI 模板规范只是为了适应我们现在面对的开发环境和组织流程做的一些权宜的努力，和解决了一些与程序沟通和接口的问题，尽量避免误会和摩擦。1、 适用环境和对象2、 必要性3、 技术原则4、 代码编写规范5、 页面模版使用规范1、 适用环境和对象本规范适用基于浏览器的 B/S（）版软件项目开发工作。开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。适用对象为开发编码人员、UI 设计人员、模版编写人员、界面测试人员等。2、 必要性本规范旨在制订开发编码人员和 UI 模版编写人员之间在工作交叉部分的技术标
2、准，使他们遵循同一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，提高沟通和技术协3作的水平，提高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。3、 技术原则3.1. 代码规范化书写代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通的前提。3.2. 数据层、结构层、表现层分离数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。这里强调的“真正”，是指纯粹的数据信息本身。
3、把信息内容以一种合适的方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构(Structure)” 虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现(Presentation)” “表现”的作用使内容看上去漂亮、赏心悦目、打动人心！所有 HTML 和 XHTML 页面就是由 “结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Beha
4、vior） ”,示意草图如下：4对于数据、结构与表现相分离，最早是在软件开发架构理论中提出来的。UI 设计师设计出页面模版，程序员负责内容数据的嵌入，数据可能是从数据库中提取出来，也可能是静态写入的提示性文字，最后形成一个新的页面展示给软件操作者。模版文件的结构利用HTMLXHTML 标签来定义，而所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是 CSS。数据、结构与表现相分离的好处是：程序员不需要过多的思考页面显示问题，而只需要根据模版效果把数据放入模版相应的位置。界面的结构和表现由 UI 设计师负责。填入结构的数据自觉套用设计好了的表现效果。最后呈现一个实现功能
5、的完整界面。表现层的分离保持整个软件界面视觉的一致性，使改版也变得非常简单，修改样式表就可以了；由于结构清晰，数据层相对独立，对数据的集成、更新、处理和再利用也更加方便灵活；4、 代码编写规范4.1. 目录结构及命名规则4.1.1. 目录结构规范a) 目录建立的原则：以最少的层次提供最清晰简便的访问结构。b) 根目录一般只存放 index.htm 以及其他必须的系统文件c) 在根目录中原则上应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个 images 和 media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏
6、目，可以相应的再开设其他目录。根目录下的 images 用于存放各页面都要使用的公用图片，子目录下的images 目录存放本栏目页面使用的私有图片d) 所有 JS 脚本存放在根目录下的 scripts 目录e) 所有 CSS 文件存放在根目录下 style 目录f) 每个语言版本存放于独立的目录。例如：简体中文 gbg) 所有 flash, avi, ram, quicktime 等多媒体文件存放在根目录下的 media 目录5h) temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。4.1.2. 图片的命名规范a) 名称分为头尾两两部分，
7、用下划线隔开。b) 头部分表示此图片的大类性质。例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为 button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。c) 尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.g
8、if logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpgd) 有 onmouse 效果的图片，两张分别在原有文件名后加“_on“和“_off“命名4.1.3. 其它文件命名规范js 的命名原则以功能的英语单词为名。例如：广告条的 js 文件名为:ad.js4.1.4. html 编写规则4.1.4.1. 一般原则a) 在编写模版文件，排布结构表格之前，要思考一个最佳方案，表格的嵌套尽量控制在三层以内；要考虑程序套用的可实现性、通用性、灵活性、预见性，所有内容均采用积木式组织，可替换和删除，并对总体结构不会造成破坏性影响b)
9、 尽量避免 两个标记，经验表明，这两个标记会带来许多麻烦c) 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内。因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长6时间，然后所有的网页内容同时出现。如果必须这样做，请使用 标记，以便能够使这个大表格分块显示d) 排版中经常会遇到需要进行首行缩进的处理，不要使用全角空格来达到效果，规范的做法是在样式表中定义 p text-indent: 2em; 然后给每一段加上 标记，注意，一般情况下，请不要省略 结束标记e) 原则上，我
10、们禁止用 来人为干预图片显示的尺寸，而且建议 标签中不要带上 width 和 height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；f) 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用来人工干预分段g) 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号h) 为贯彻结构层和表现层分离的原则，严禁使用传统的 HTML3.2/4.0 控制表现的标签，例如,，还有本意用于结构后来被滥用于控制表现的标签，例
11、如：,等。所有的字号都应该用样式表来实现，禁止在页面中出现 标记，? ?标记，严禁在结构页面写表现标签i) 不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent,padding,margin,hspace,vspace 以及透明的 gif 图片来实现。j) 中英文混排时，我们尽可能的将英文和数字定义为 verdana 和 arial 两种字体k) 行距建议用百分比来定义，常用的两个行距的值是 line-height:120%/150%l) 系统中的路径全部采用相对路径m) 为保证系统和浏览器的兼容性，当设置背景图片时，
12、要坚持用双引号。7n) “网页大小”为网页的所有文件大小的总和，包括 HTML 文件和所有的嵌入的对象。页面大小保持在 34K 以下为合适4.1.4.2. 代码规则head 区标识（head 区是指首页 HTML 代码的 和之间的内容）a) 公司版权注释b) 网页显示字符集简体中文：utf-8简体中文：gb2312c) 简介d) 网页的 css 文件定义，所有 css 文件采用外部调用e) 网页标题这里是你的网页标题 8f) 所有的 javascript 脚本采取外部调用head 区可以选择加入的标识a) 收藏夹图标head 区以下的标记a) body 标记为了保证浏览器的兼容性，必须设置页面
13、背景b) table 标记在写 互相嵌套时，严格按照的规范，对于单独的一个来说，各缩进两个半角空格，结束标记和开始标记平齐。 中如果还有嵌套的表格，也缩进两个半角空格，如果中没有任何嵌套的表格， 结束标记应该与 处于同一行，不要换行。这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：于同一个级别 的 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，应该 在 和 之间写一个，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在 DW 中可以通过 command-apply souce
14、formatting 进行重新整理！c) Width 和 height 标记一般情况下只有一列的表格，width 写在 的标签内，只有一行的表格，9height 写在 的标签内，多行多列的表格，width 和 height 写在第一行或者第一列的 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的 height 和 width, 保证任何一个 width 和 height 都是有效的，也就是改动代码中任何一个 width 和 height 的数值，都应该在浏览器中看到变化。A、只一列的表格的 width 标记b、只一行的表格的 height 标记c、多行多列表格的 width 和
15、 height 标记d) table 的 width 属性为遵循页面结构灵活性、通用性原则，table 的 width 属性原则上全部写成 100或者不写width 属性，不推荐写成其他非 100宽度属性。留空显示效果通过其给外部 td 施加style 的 padding 属性实现。需要说明的是这里 td 的 style 虽然是 css 的写法，但不属于表现层的内容，而是属于结构层的内容，所以可以直接写在 html 标记中间。a) 数据列表表格代码写法表格外加上一个，并对赋一个 id，即，然后通过样式表对这个id 下的所有 html 元素进行控制，用表示表头设置每列宽度的位置在表头对应的中，其
16、中列表项中，字数最多或者字数不定的一项不设置宽度。宽度的值依据列表项内容的多少来定，2 个字的 30px，三个字 40px，时间、年月日（比如2004-11-11）80-120px,类似于标题的列表项，表格对齐方式为左对齐（align=left）,时间，人名一般居中对齐，数据一般右对齐（align=right）。对齐页面内容时不要用 div 来对齐，直接在 td 或 th 中调 css 样式10表头文字一般不折行，方法是在的 css 样式中加上 nowrap,或者通过样式表来控制5、 页面模版使用规范页面模版使用规范的目的是统一和约定 UI 设计、界面工程师与不同的程序编码人员的行为方式，光有
17、了书写代码的规范还不能完全解决界面套用的统一性问题。因为不同的编码人员对同一个模版的理解有可能不同，再加上个人工作习惯的不同，界面套用的结果往往很容易出现差异。哪怕是每人一点点差异，都可能使软件的质量收到很大的影响。5.1. 责任分工明确a) UI 设计、界面工程师负责界面风格的设计和软件模版的编写，并监督界面套用的效果。对软件最终的界面负责。b) 编码工程师负责软件业务逻辑的实现，软件模版的套用。对软件的数据和程序负责。c) 现实的情况是个别编码工程师在模版套用出现偏差后，在界面工程师提出修改意见的时候拒绝修改，以开发进度、时间不够为由搪塞，甚至主观认为“这个（界面）不重要”致使界面工程师的
18、作用得不到应有的发挥，影响软件产品质量。d) 解决办法是各负其责。界面问题提高重视程度，并纳入开发流程和进度管理之中。6、 界面模版交界过程a) 模版文件制作完成后，在提交给编码工程师时，要简要说明模版的文件的使用说明和提醒。b) 编码工程师和界面工程师密切合作，完全理解模版使用说明。c) 对界面结构层 html 的 table 嵌套关系理解清楚并明确和程序结合的用意。有和程序不相配合的情况，进一步和界面工程师讨论，获得解决方案。不得在界面工程师不知情的情况下随意修改 table 结构、定位属性和嵌套关系。这样做的坏处是虽然一个人解决了暂时的显示问题，但和其他编码工程师套用的结果出现不同。也不
19、利于界面工程师控制总体界面。d) 对表现层的界面元素和 css 文件选择符的对应关系。做到心中有数，理解一个模版文件，到套用其他文件时就能够举一反三。e) 编码工程师完全理解了界面模版后，就能够顺畅的把数据层的内容放到结构层合适的位置，并指定表现层合适的选择符属性。完成界面套用工作。117、 模版说明的内容a) 总体的界面结构b) 页面板块的布局和定位 table 的写法c) table 嵌套的方式的理由d) 不同功能的界面显示单元说明和使用方法e) css 文件中选择符的使用说明，一般的都能理解，个别特殊的要着重说明。Css 文件的版本控制Css 文件应引入版本控制的机制，项目组中应指定专人
20、负责 css 文件的上传和修改。fwq的 css 文件和界面工程师的 css 文件应该同步更新。不支持编码工程师随意添加选择符修改 css 文件。谁都可以改就没有标准，没有版本控制就做很难做到界面统一。12CSS样式表编写规范13合理的 CSS 编码与组织技巧，能够帮助我们更有效率地写出更清晰高效的代码，自然，样式表大小的缩减还能减少下载的时间。 排版：1. CSS 代码书写样式在设计 CSS 样式表时，我们大多是手写代码，这样很容易造成 class 中的样式排序混乱。比如有几个 class 中用到了 padding、margin 、background 、color 等样式，但是排序的时候，
21、有的 class 是 background 比较靠前，有的是 margin 比较靠前。这样就造成了一定的混乱，容易让思路受挫。我们协定一个大致顺序，这样从个别来说看不出太大差别，但从整体上将更加易于阅读和管理，整体效率会提高不少。默认是根据不同的类型分组：/显示属性* display* list-style* position* float* clear/自身属性* width* height* margin* padding* border* background/文本属性* color* font* text-decoration14* text-align* vertical-align
22、* white-space* other text* content*/ 注释1. 在每个 css 文件的头部要有必要的注释时间戳和签名，包括：文件名;版本号; 作者;生成日期;模块功能描述(如功能、内部各部分之间的关系、该文件与其它文件关系等);本文件历史修改记录等。2. 参考索引虽然不常用，但是也是非常有用的一个注释使用方式就是作为代码的参考索引，比如在文件头部留下使用到的颜色代码：/* COLORSBody Background: #2F2C22Main Text: #B3A576Links: #9C6D25Dark Brown Border: #222019Green Headline
23、: #958944*/3. 注释要简单明了。边写代码边注释。 4. 对每一个样式都要进行注释，注释量要适中。注释的内容要清楚、明了，含义准确，防止注释二义性。保持注释与其描述的代码相邻，即注释的就近原则。5. 对代码的注释应放在其上方相邻位置，不可放在下面。6. 组织1) 在 CSS 文档中使用注释指示不同的区块.例如,如果所有的头部信息被组合在一起,你可以使用注释使它和下面的区块样式区分开来.152) /* HEADER -*/3) 接下来我会就此进行进一步的阐述,现在我们先讨论一下如何 ”分离样式类型”7. 注释标记1) 如果你的 CSS 文件都是按照我上面所说的按照区块进行划分的话,使用
24、注释标记可以配合”查找”功能使你在文档的各个部分之间切换自如.标注一个章节(Chapter),例如使用等号”=”,然后在后面添加一个区块的名称 ,例如”HEADER”,这样就为你的 CSS 文档创建了一个”锚点”.2) /* =HEADER -*/3) 这种方法在内容繁杂的样式表中尤其有用8. CSS Hack 及 IE 条件注释1) 如果使用了条件注释，请在主代码文件中留下注释，提醒自己以及其他设计师，如果修改了此处样式，则需要同时更新其他所有 IE 版本的样式定义。2) 如果使用 CSS Hack，也请留下注释，标明这里使用哪些 Hack，对于什么版本浏览器生效，因为在可以预见的将来，随着
25、浏览器版本的升级，这些 Hack很有可能会失效。 命名1. 常用的 CSS 命名规则：2. id 的命名：1) 页面结构容器：container页头：header内容：content/container页面主体：main页尾：footer导航：nav16侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center2) 导航：导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题:title摘要
26、:summary3) 功能：标志：logo广告：banner17登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的:current小技巧：tips图标:icon注释：note指南：guild服务：service18热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright3. class 的命名：1) 使用类似下面的规则:模块前缀|类型|作用_名
27、称_状态|位置约定模块、类型、状态、位置等的所使用的单词或其缩写，保持上面的顺序，尽量保持在两到三个单词说清用途。例：通用名词缩写设置 set成功 suc提示 hint操作 op密码 pw菜单 menu按钮 bt文本 tx颜色 c背景 bg19边框 bor居中 center图标 icon弹出 pop文本输入框 .input_tx密码输入框 .input_pw登录密码输入框 .input_pw_login日志设置成功提示 .hint_suc_blogset相册弹出的设置层 .pop_set_photo公共提示 .hint_bg文本颜色 .c_tx段落文本颜色 .c_tx_p颜色：使用颜色的名称或
28、者 16 进制代码，如：以下为引用的内容：.redcolor:red;.f60color:#f60;.ff8600color:#ff8600;2) 字体大小，直接使用“font+字体大小”作为名称，如：以下为引用的内容：.font12pxfont-size:12px;.font9ptfont-size:9pt;3) 对齐样式，使用对齐目标的英文名称，如：以下为引用的内容：.leftfloat:left;20.bottomfloat:bottom;4) 标题栏样式，使用”类别+ 功能” 的方式命名，如：以下为引用的内容：.barnews.barproduct4. 文件名命名：主要的：master
29、.css模块：module.css基本共用：base.css布局，版面：layout.css主题：themes.css专栏：columns.css文字：font.css表单：forms.css补丁：mend.css打印：print.css 关于继承性在 CSS 中，要善用继承性。比如在两个嵌套的 div 中，父元素定义了 background-color 属性为黑色，如果子元素的背景同为黑色，则不需重复定义。善于利用 CSS 的继承性可以让代码更有效、更精简。21 缩进、断行、空格在写 CSS 代码的时候，对于缩进、断行、空格，的书写习惯。 当使用联合定义时，将每个选择器单独写一行，这样方便在
30、 CSS 文件中找到它们。在最后一个选择器和大括号之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。最后，关闭的大括号单独写一行。 明确定义单位，除非值为 0忘记定义尺寸的单位是 CSS 新手普遍的错误。在 CSS 中，必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和 0 值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 默认值通常 padding
31、的默认值为 0， background-color 的默认值是 transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin 和 padding 值都为 0，象这样:* margin:0px; padding:0px; 不需要给背景图片路径加引号为了节省字节，建议不要给背景图片路径加引号，因为引号不是必须的。例如:22background:url(“images/*.gif”) #333;可以写为background:url(images/*.gif) #333;如果你加了引号，反而会引起一些浏览器的错误。 组选择器(Group se
32、lectors)当一些元素类型、class 或者 id 都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。例如:定义所有标题的字体、颜色和 margin，你可以这样写:h1,h2,h3,h4,h5,h6 font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif; color:#333; margin:1em 0; 如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如:h1 font-size:2em; h2 font-size:1.6em; 用正确的顺序指定链接的样式当用 CSS 来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是:link :visited :hover :active。如果用户需要用键盘来控制，需要知道当前链接的焦点，还可以定义:focus 属性。:focus 属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover 效果，你就把:23focus 写在:hover 前面;如果你希望聚焦效果替代:hover 效果，你就把:focus 放在:hover 后面。
