客户端编码规范.doc

《客户端编码规范.doc》由会员分享，可在线阅读，更多相关《客户端编码规范.doc（10页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、【精品文档】如有侵权，请联系网站删除，仅供学习与交流客户端编码规范.精品文档.客户端页面开发规范第一部分 目的1、确保产品前后课程的统一；2、确保实现方式的专业性、和企业实际开发一致；第二部分 UI界面和编码规范一、网站目录结构的规划 1、网站目录结构规范 1.1目录建立的原则：以最少的层次提供最清晰、最简便的访问结构；1.2每个主要栏目开设一个相应的独立目录；1.3目录的命名以小写英文字母、下划线组成（对于类似VS2008 开发工具，则采用自动生成的结构，保证大小写统一即可）； 1.4通用的目录结构命名规范及存放内容：n 中大型项目（较大的项目案例、阶段项目、毕业设计、贯穿案例） 根目录：只

2、存放网站主页文件（如index.html）及其他必须的系统文件 images：根目录下的images用于存放各页面都使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片； templates：存放为保持风格统一的模板页，例如：header页、footer页等。 include：存放为代码重用的源码文件，例如：通用函数（方法）、类的源码等； css：存放各类样式文件； js：存放JavaScript脚本文件； admin：管理后台文件夹，只存放管理后台的程序逻辑文件，不存放模板。 language：语言文件夹，存放不同语言显示文字与变量对应的文件。 plugins：存放扩展插件

3、文件，每个插件一个子目录； upload：存放用户上传头像等； media：存放flash、avi等多媒体文件n 小型项目（平时章节学习用的小案例或小的项目案例） 根目录：存放组织结构页面，如index.htm，header页、footer页等； js：存放JavaScript脚本文件； images：存放网站图片，其下可再分类存放各类图片； css：存放css文件；说明：以上只规定通用的文件夹，至于网站的各栏目，则需要在根目录下创建相应的文件夹进行单独存放。 2、网页文件命名的规范2.1文件命名的原则：必须具有语义化，在此基础上以最少的字母达到最容易理解的意义；2.2文件名统一采用小写英文字

4、母、数字，用下划线体现层次，层次最多不超过三层；例如：“index.html”、 “search_header.html”；2.3 多个同类型文件加下划线和数字命名，不够两位数用0补齐。例如：news_01.htm、news_02.htm；2.4 通用的文件名及其含义： index.html 首页 header.html 顶部 footer.html 底部 login.html 登录 register.html 注册页 search.html 搜索页 buy.html购买页说明：网页文件名（动态网页则改文件名后缀，例如：buy.jsp）。 3、图片文件命名的规范3.1图片命名的规定：取名必须有

5、意义，并分类存放在对应版块images目录下 ；3.2通用的图片文件名及其含义：（1）网站修饰外观图标： 全局背景图，bg.gif 全局小图标，icon.gif说明：推荐将网站用到的多个小图标放到1个背景图中，然后使用背景偏移量技术截取各小图标进行显示，例如右图背景图和下图的显示效果。源码示例：见附件-导航小图标的流行做法。（2）局部背景图：h_bg.jpg（h为header缩写）（3）网站中内容图片： 网站Logo标志：logo.jpg 登录图标：login.gif 关闭图标：close.gif 只有在紧邻并列图片中使用数字：如首页产品图片用promote_01.jpg,promote_02

6、.jpg等二、网站布局的规范 1、整体布局的规范1.1除个别特殊情况外（需各方向负责人确认），均采用DIV+CSS主流布局，尽量少用表格布局；表格仅用于表单布局、规则的结构化数据显示 ；1.2 网站设计推荐使用如下的基本框架结构，在此基础上进行扩展或精简；说明：（1）推荐在最外层添加整体的容器层container（2）各区块及区块下细分的小块，命名要遵守如下通用命名，因为W3C已将部分命名纳入为HTML5的常用标签了： container：整个页面容器层 header:顶部 main:中间块的内容主体 sidebar：左/右侧栏 content:：内容 footer：底部 logo：公司标志

7、copyright：版权部分完整源码示例：见VSS ：$/ACCP6.0/3.课程设计/3.课程内容/S1/3.HTML+CSS/案例代码-1.3 区域分块使用ID命名；区域中的小块使用class命名，示例如下：区域分块的命名采用ID区域内小块的命名采用clas 说明：（）class和ID推荐的使用场合n ID使用的场合：ID要求命名唯一，推荐使用场合： 页面整体布局的大区块划分DIV用ID标识； 如页面中使用了DIV标签，并希望通过动态改变DIV内的内容（如Tab切换特效、Tips提示特效），则只能使用ID，方便使用JavaScript中的getElementByID方法访问（注意DIV标签

8、没有name属性）； 表单的标识：W3C XHTML1.0推荐使用ID，而不是name； 表单控件的命名，JavaScript的客户端验证时，如希望通过getElementByID方法获得表单控件的值，则必须使用ID；n class 使用的场合：一般用于应用类样式，推荐使用场合： 整体布局中大区块下的小块，样式放到类样式中，然后使用class应用该类样式 多个标签或块有相同样式时，将共同的样式放到类样式中，然后使用class应用该类样式；（）完整的布局源码示例：见附件-贵美首页布局-1.4不能采用top、left等坐标进行绝对定位的方式进行布局，绝对定位的方式仅用于对联广告等特殊场合；1.5页

9、面尺寸的规范：按“1024*768”分辨率制作，首页宽度推荐大小：960 px左右；页面长度不超过2屏，宽度不超过一屏； 2、局部布局的规范2.1页面内容组织原则：层次结构嵌套越少越好，减少多余标签：2.2页面内容组织优先考虑常用的4种局部布局结构： div-ul(ol)-li：常用于导航菜单或分类导航等场合； div-dl-dt-dd：常用于图文混编场合； table-tr-td：常用于显规则的结构数据的场合； form-table-tr-td：常用于布局表单的场合； 说明：源码示例：见附件-典型的局部布局结构三、网页编码的规范 1、HTML的编码规范1.1 HTML编码原则：遵守W3C X

10、HTML 1.0 规范transitional以上（含）级别，并兼容IE6、IE7、IE8和firefox3.5（IE8菜单下“工具”-）“开发人员工具”可模拟IE7和IE8，IE6后续采用其他软件进行测试）；1.2推荐使用DW CS4创建静态页面（新建页面选用XHTML 1.0 transitional过度级别），可以使用DW或安装Firefox插件进行W3C规范检查。 插件地址：$/ACCP6.0/3.课程设计/3.课程内容/S2/5.JavaScript/firebug调试和w3c验证软件1.3 HTML编码遵守W3C XHTML1.0的基本规范： 所有标签都应该关闭，例如：、 所有标签

11、的元素和属性的名字都必须小写 所有的标签应该合理嵌套 所有的属性值必须用引号 所有属性必须有值，例如：； 特殊符号用编码表示，例如：空格用 或 表示； 注释使用，注释内容不能再使用“-”1.4不使用、等不符合W3C标准的标签，可以参考w3教程： 或官方文档：w3c.org；1.5 标签必须有src及alt属性值，alt值给出图片说明；1.6样式和内容分离的原则：标签中不出现风格属性（除宽高属性外），颜色、大小等修饰属性均放到CSS中进行设置； 1.7表单控件的规范： 表单控件的提示文字推荐使用label标签实现，label标签要和对应控件绑定； 表单推荐使用ID而不用name

12、标识，例如： 除单选按钮组外，控件的命名一般同时用id和name属性，两者取值相同。 控件的ID或name命名要求语义化，可以使用单个单词（或常见缩写）或多个单词组合，如多个单词，则第二个单词首字母大写。例如：age、userName等。1.8 注释的规范：对于复杂的HTML组织结构或页面布局，推荐使用添加必要的说明，提供代码的可读性和可维护性。 2、CSS的编码规范1.1采用样式和内容分离的原则，多页面复用的样式必须采用外部样式文件的方式，单个页面使用的CSS采用内部样式的方式；尽量少用行内样式（内联样式）的方式（允许类似ASP.NET中，存在控件自动生成的客户端行内样式，但手写代码则不能使

13、用行内样式）1.2为增加可读性，添加样式尽量按块添加，添加缩进体现层次关系，并添加注释说明，示例如下：/*头部 从logo到服务热线*/#header width:100%;height:136px;margin:0px auto;background:url(./images/h_bg.jpg) no-repeat -22px 0px;logo有缩进，表明位于header顶部区块内容的logo部分.logo width:280px; height:100px; float:left; background:url(./images/h_bg.jpg) no-repeat -22px 0px;

14、/*右上方菜单 购物车 帮助中心 加入收藏 设为首页等，.pic1至.pic4分别为菜单前的小图标，btn为注册登录按钮，h_text为头部文本*/ .upright_menu float:right;padding:15px 20px 0px 0px;.pic等类样式有缩进，表明是.upright_menu顶头右菜单中的pic图标样式 .picwidth:28px;height:26px;background:url(./images/icon.gif) no-repeat; .pic2background-position:-28px 0px; .pic3background-positi

15、on:-84px 0px; .pic4background-position:-112px 0px; .h_textpadding:6px 5px 0px 5px; padding-top:8px0;text-align:center; .btn width:38px;background-position:0px -25px;1.3推荐class的命名使用块名_子块名体现层次感、增加可读性：为各块顶部起名类名，类名数尽量少。以块“.nav”为例，命名时，遵循如下规则： 块内列表项 nav_list 如布局零散则制定具体位置，如 menu_upright_ 共同系列风格定义时，可出现数字，遵循

16、如下规则：共用风格不用加数字，如.pic，如列表第一个与通用风格相同则可略过不命名，但第二个风格必须命名为.pic21.4推荐使用的通用CSS风格：将多个页面公用的风格定义为通用的类样式（如放入到global,css），然后在对应标签中使用 class 引用，提高代码复用，例如： .f_lfloat:left; 左浮动 .f_rfloat:right; 右浮动 .f_nfloat:none; 取消浮动 .a_ltext-align:left; 左对齐 .a_r text-align:right; 右对齐 .a_c text-align:center; 居中 .bfont-weight:bold

17、粗体使用方法：例如：菜单项11.5通用的CSS文件命名规范：n 中大型项目（较大的项目案例、阶段项目、毕业设计、贯穿案例） global.css: 全局样式，存放网站多个页面共用的CSS风格，例如统一的字体、大小、左浮动样式定义等； layout.css：整体布局样式，存放页面整体布局的CSS代码；n 小型项目（平时章节学习用的小案例或小的项目案例） style.css：存放所有的CSS代码1.6推荐先定义多个标签或DIv块的共同样式，然后再分别定义各标签或块的特有样式，增加CSS的代码复用、方便修改维护，例如：#mainMenu，#subMen /*.两个div块的共同样式*/#mainMe

18、nu/*.单独定义#mainMenu块的独特样式*/ #subMenu/*.单独定义# subMenu块的独特样式*/ 1.7推荐采用样式的简写形式，、方便修改维护，例如：常见的背景（background）、边框（border）、边界（marin）、填充（padding）常需要进行缩写，示例如下：/*-背景样式的简写示例-*/.search background-color: #333; background-image: url(./images/icon.gif);background-repeat:no-repear;background-position:50% 50%/*-简写为-*

19、/.searchbackground:#333 url(./images/icon.gif) no-repear 50% 50%/*-边框样式的简写示例-*/.logo border-width:5px; border-color:#666; border-style:solid/*-简写为-*/.logoborder:5px solid #666;/*-边界样式的简写示例-*/.logomargin-top:30px;margin-left:auto;margin-bottom:30px;margin-left:auto;/*-简写为-*/.logomargin:30px auto;/*-填

20、充样式的简写示例-*/.logopadding-top:10px;padding -left:20px;padding -bottom:40px;padding -left:80px;/*-简写为-*/.logopadding:10px 20px 40px 80px;1.8 在定义CSS常用属性时，为方便团队开发和后期维护，推荐使用以下顺序：显示与定位-元素自身-文本外观： 显示与定位常用属性有：display, position, float，list-style 等 元素自身：margin, padding, width, height, border, background 等 文本外观

21、：color, font, line-height, text-align, text-decoration, 其他 同一类属性先后顺序不做要求，如元素自身：width, height, margin, padding, border, background 1.9 网页中通用字体为宋体： 局部可使用 黑体，Arial，Tahoma； 网页字体大小必须使用12px或14px，黑体可使用18px； 网页中需要重点强调或突出的部分可加粗，黑体任何时候都不加粗。3、JavaScript的编码规范3.1原则：尽量遵守ECMAScript-262 标准（可以参考W中的JavaScriot教程） 3.2命

22、名规范 普通变量：除循环变量i,j,k等外，均采用：类型缩写+变量名，第二个单词字母大写。各种数据类型的前缀推荐使用如下： iAge(整型) strMessage(字符串)， fPrice（浮点）， dtDate（日期）， objDiv（对象）， arrTag（数组）， bLogic（逻辑值） 常量：全部大写 函数（方法）的命名：首字母小写； 多个单词间不使用间隔，第二个单词首字母大写。例如： function delTable（） 。3.3注释规范：对于如下情况必须使用注释，包括： 关键性语句(如关键的变量声明，条件判断 等)； 具有复杂参数列表的方法；3.4代码要有缩进，体现层次感。 3.

23、5声明规范 一行声明一个变量 不要将不同类型变量的声明放在同一行 只在代码块的开始处声明变量 方法与方法之间以空行分隔 3.6 语句规范 每行至多包含一条简单语句 一个带返回值的return语句不使用小括号() if语句总是用和括起来3.7 if else swith for while逻辑语句的写法： 如果用到常量判断条件，推荐将常量放在等号或不等号的左边，避免逻辑错误。例如：if ( 6 = iErrorNum ) ；3.8 true/false和0/1判断,遵循以下规则： 不能使用0/1代替true/false； 不要使用非零的表达式、变量或者方法直接进行true/false判断，而必须使用严格的完整true/false判断；例如：不使用if (变量) 或者if (函数() ，而使用if (false != 变量)或者 if (false!= 函数()四、UI界面规范1. 原则1.1界面美观，能够吸引用户1.2内容健康，不涉及政治色彩、暴力、色情内容；2.界面风格规范2.1多个页面的网站风格保持一致，使用统一的CSS；2.2不同界面中的同一功能应该使用同样的图标和图片。图标、图片的色调、风格尽量保持一致；2.3推荐整个网站必须定义统一的字体和字符集。例如：宋体、utf-82.4网站的每个页面均出现logo标志。