UI规范文件

1UI规范文件山东新中天信息技术有限公司制作日期(2008年8月8日)2这个UI模板规范只是为了适应我们现在面对的开发环境和组织流程做的一些权宜的努力，和解决了一些与程序沟通和接口的问题，尽量避免误会和摩擦。1、适用环境和对象2、必要性3、技术原则4、代码编写规范5、页面模版使用规范1、适用环境和对象本规范适用基于浏览器的B/S（）版软件项目开发工作。开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。2、必要性本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，提高沟通和技术协作的3水平，提高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。3、技术原则3.1.代码规范化书写代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通的前提。3.2.数据层、结构层、表现层分离数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。这里强调的“真正”，是指纯粹的数据信息本身。把信息内容以一种合适的方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构(Structure)”虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现(Presentation)”“表现”的作用使内容看上去漂亮、赏心悦目、打动人心！所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”,示意草图如下：对于数据、结构与表现相分离，最早是在软件开发架构理论中提出来的。UI设计师设计出4页面模版，程序员负责内容数据的嵌入，数据可能是从数据库中提取出来，也可能是静态写入的提示性文字，最后形成一个新的页面展示给软件操作者。模版文件的结构利用HTML＋XHTML标签来定义，而所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。数据、结构与表现相分离的好处是：程序员不需要过多的思考页面显示问题，而只需要根据模版效果把数据放入模版相应的位置。界面的结构和表现由UI设计师负责。填入结构的数据自觉套用设计好了的表现效果。最后呈现一个实现功能的完整界面。表现层的分离保持整个软件界面视觉的一致性，使改版也变得非常简单，修改样式表就可以了；由于结构清晰，数据层相对独立，对数据的集成、更新、处理和再利用也更加方便灵活；4、代码编写规范4.1.目录结构及命名规则4.1.1.目录结构规范a)目录建立的原则：以最少的层次提供最清晰简便的访问结构。b)根目录一般只存放index.htm以及其他必须的系统文件c)在根目录中原则上应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片d)所有JS脚本存放在根目录下的scripts目录e)所有CSS文件存放在根目录下style目录f)每个语言版本存放于独立的目录。例如：简体中文gbg)所有flash,avi,ram,quicktime等多媒体文件存放在根目录下的media目录h)temp子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户5陆续提供的资料归类整理。4.1.2.图片的命名规范a)名称分为头尾两两部分，用下划线隔开。b)头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；标志性的图片我们取名为：logo；在页面上位置不固定并且带有链接的小图片我们取名为button；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu；装饰用的照片我们取名：pic；不带链接表示标题的图片我们取名：title依照此原则类推。c)尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpgpic_hill.jpgd)有onmouse效果的图片，两张分别在原有文件名后加_on和_off命名4.1.3.其它文件命名规范js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js4.1.4.html编写规则4.1.4.1.一般原则a)在编写模版文件，排布结构表格之前，要思考一个最佳方案，表格的嵌套尽量控制在三层以内；要考虑程序套用的可实现性、通用性、灵活性、预见性，所有内容均采用积木式组织，可替换和删除，并对总体结构不会造成破坏性影响b)尽量避免colspanrowspan两个标记，经验表明，这两个标记会带来许多麻烦c)一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内。因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用tbody标记，以便能够使这个大表格分块显示6d)排版中经常会遇到需要进行首行缩进的处理，不要使用全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上p标记，注意，一般情况下，请不要省略/p结束标记e)原则上，我们禁止用imgwidth=?height=?来人为干预图片显示的尺寸，而且建议img标签中不要带上width和height两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；f)为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用br/来人工干预分段g)不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号h)为贯彻结构层和表现层分离的原则，严禁使用传统的HTML3.2/4.0控制表现的标签，例如font,b，还有本意用于结构后来被滥用于控制表现的标签，例如：h1,table等。所有的字号都应该用样式表来实现，禁止在页面中出现fontsize=?标记，b??/bh1??/h1标记，严禁在结构页面写表现标签i)不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。j)中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体k)行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%l)系统中的路径全部采用相对路径m)为保证系统和浏览器的兼容性，当设置背景图片时，要坚持用双引号。n)“网页大小”为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。页面大小保持在34K以下为合适74.1.4.2.代码规则head区标识（head区是指首页HTML代码的head和/head之间的内容）a)公司版权注释!—Generator:山东新中天信息技术有限公司CreationData:2008-8-6OriginalAuthor:软件组--b)网页显示字符集简体中文：utf-8metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/简体中文：gb2312metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/c)简介metaname=aacontent=这里填您网站的简介/d)网页的css文件定义，所有css文件采用外部调用linkhref=style/style.cssrel=stylesheettype=text/csse)网页标题title这里是你的网页标题/titlef)所有的javascript脚本采取外部调用SCRIPT.LANGUAGE=javascriptSRC=script/xxxxx.js/SCRIPThead区可以选择加入的标识8a)收藏夹图标linkrel=ShortcutIconhref=favicon.icohead区以下的标记a)body标记为了保证浏览器的兼容性，必须设置页面背景b)table标记在写table互相嵌套时，严格按照的规范，对于单独的一个table来说，tr，td各缩进两个半角空格，结束标记和开始标记平齐。td中如果还有嵌套的表格，table也缩进两个半角空格，如果td中没有任何嵌套的表格，/td结束标记应该与td处于同一行，不要换行。这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：tdimgsrc=”../images/sample.gif”/td于同一个级别的table一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，应该在td和/td之间写一个 ，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW中可以通过command-applysouceformatting进行重新整理！c)Width和height标记一般情况下只有一列的表格，width写在table的标签内，只有一行的表格，height写在table的标签内，多行多列的表格，width和height写在第一行或者第一列的td标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的，也就是改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。9A、只一列的表格的width标记b、只一行的表格的height标记c、多行多列表格的width和height标记d)table的width属性为遵循页面结构灵活性、通用性原则，table的width属性原则上全部写成100％或者不写width属性，不推荐写成其他非100％宽度属性。留空显示效果通过其给外部td施加style的padding属性实现。需要说明的是这里td的style虽然是css的写法，但不属于表现层的内容，而是属于结构层的内容，所以可以直接写在html标记中间。a)数据列表表格代码写法表格外加上一个div，并对div赋一个id，即divid=list，然后通过样式表对这个id下的所有html元素进行控制，用th表示表头设置每列宽度的位置在表头对应的th中，其中列表项中，字数最多或者字数不定的一项不设置宽度。宽度的值依据列表项内容的多少来定，2个字的30px，三个字40px，时间、年月日（比如2004-11-11）