10.网页开发规范.doc

网页开发规范 编号：DY-JS-ZW010一、基本要求1、在网站根目录中开设images、inc、database、temp四个子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如标志、banner条、菜单、按钮等等；inc子目录中放css、js、include等公共文件；database子目录放与网站有关的数据文件；temp子目录用于存放网站制作过程中的原始图片、文档等；media子目录中放flash,avi,quicktime等多媒体文件。 2、在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3、temp目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 4、除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂。二、脚本编写1、Html文件的通用模板：文档标题其他meta标记样式表定义客户端javascript函数定义及初始化操作注意：为了保证网站能够与下一代的web语言xml标准兼容，所有的HTML标签的属性都要用单引号或者双引号括起，即应该写而不是. 2、允许全文检索的页面，为了使Internet上的搜索引擎能够有效检索，在频道的首页的html的之间应该加入Keywords和Description元标记，例如： 3、CSS文件的格式样例代码：自定义放最后，便于自己和他人阅读！为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。在写互相嵌套时，严格按照的规范，对于单独的一个来说，对齐，缩进两个半角空格，中如果还有嵌套的表格，也缩进两个半角空格，如果中没有任何嵌套的表格，结束标记应该与处于同一行，不要换行。如注意在源代码中不应有这样的代码：而应该是这样的：这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： 4、属于同一个级别的一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px的单元格应该在和之间写一个如果高度小于12px,则应该在和之间插入一个1*1大小的透明的gif图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command-applysouceformatting进行重新整理！5、Width和height的写法也有统一的规范，一般情况下只有一列的表格，width写在的标签内，只有一行的表格，height写在的标签内，多行多列的表格，width和height写在第一行或者第一列的标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的，也就是你改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。三、一般原则 1、在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免两个标记，经验表明，这两个标记会带来许多麻烦。 2、一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用标记，以便能够使这个大表格分块显示。 3、排版中经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义ptext-indent:2em;然后给每一段加上标记，注意，一般情况下，请不要省略结束标记。 4、原则上，禁止用来人为干预图片显示的尺寸，而且建议标签中不要带上width和height两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给附上width和height属性。 5、为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用来人工干预分段。 6、不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。 7、所有的字号都应该用样式表来实现，禁止在页面中出现标记。 8、请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。 9、中英文混排时，尽可能的将英文和数字定义为verdana和arial两种字体。 10、行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%. 11、网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如不必这样：而应该这样： 12、嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。 13、“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。四、文件命名原则 1、每一个目录中应该包含一个缺省的html文件，文件名统一用index.htm 2、件名称统一用小写的英文字母、数字和下划线的组合。 3、命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便查找、修改、替换、计算负载量等等操作。 4、下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html文件的命名原则：在根目录下开设news目录在根目录下开设news目录第一条缺省新闻取名index.htm所有属于“国内新闻”的新闻依次取名为：china_1.htm,china_2.htm,所有属于“国际新闻”的新闻依次取名为：internation_1.htm,internation_2.htm,如果文件的数量是两位数，请将前九个文件命名为：china_01.htm,china_02.htm以保证所有的文件能够在文件夹中正确排序。 5、图片的命名原则遵循以下几条规范：名称分为头尾两两部分，用下划线隔开。头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。一般来说:放置在页面顶部的广告、装饰图案等长方形的图片取名：banner标志性的图片取名为：logo在页面上位置不固定并且带有链接的小图片取名为button在页面上某一个位置连续出现，性质相同的链接栏目的图片取名：menu装饰用的照片取名：pic不带链接表示标题的图片取名：title依照此原则类推。五、动态网页开发规范 1、单页编写规范：切记页面要分模块来写：第一模块：接收参数。有可能从不同页面提交到同一个页面；也可能出现两个表单项以哪个优先的处理。第二模块：定义全局变量。第三模块：写处理代码(尽量将代码都包含到函数中，详见页面附注一。)。到此asp代码主要部分完成。第四模块：纯html代码，利用储存在全局变量中的值来生成页面。第五(注意)：要在页面头部写清页面逻辑。(如何接收、处理。)优点：便于维护。模块独立，便于重复使用到类似页面。 2、全站文件构建规范：1)工程接手后，先观看静态页，掌握逻辑及浏览顺序。2)抽取页面中被重复利用到的地方做成嵌入文件。3)抽取头文件、尾文件，及左侧菜单栏，做成嵌入文件。4)划分页面结构，做出模板文件。后续开发中可直接复制。5)写注释6)写嵌入文件。7)写大块的ASP代码注意：复杂页面，尽量将不同COM的操作封装在独立的函数里；函数结尾有一句调用，后面页面中直接读取函数处理完的数据(已被赋给全局变量)调用函数前，对页面入口参数进行合法性检验。8)最好不使页面的asp代码和html代码混杂在一起，感觉比较混乱。9)通过获取全局变量的数据得到asp的处理结果。10)关于客户端javascript：表单提交前要进行合法性检验。写在form标签的前面，函数起名示例：frmcheck1()；对下拉框要有和隐藏按钮同步的，写出单独小函数，放在该按钮的下面。对大型innerHTML型的客户端交互操作，将代码集中写在相应对应的div标签前。 3、对网页制作的要求：网页人员完成的页面，为保证在使用时不会出现混乱，请他们作以下处理：1)表格不要嵌套太多；2)表格宽度要用象素规定宽度；3)单页中，一个功能模块要做成一个表格，以便编写页面时，将重复部分提取成嵌入文件。4)其它要注意的：精简代码、注意表格中字符和边框的宽度。5)文件名请用英文小写加数字(和半角下划线)命名。 4、统一VBSCRIPT和ASP程序编写规范：1)变量命名规则：由于在ASP和VBSCRIPT中因为不需要声明变量，同时不能声明变量的类型，但为了提高代码的可读性，养成好的开发习惯，对于本系统开发的变量命名统一规则如下a.使用Dim、Public、Private声明变量；例如：DimiStudentNum2)变量类型的体现：a、整型变量：以小写字母i开头，后面跟变量标示符，英文单词的第一个字母大写。例如：下面声明一个存储数据库记录多少的变量DimiResordsetNumberb、单精度实体变量：以小写字母f开头，后面跟变量标示符，英文单词的第一个字母大写。c、双精度实体变量：以小写字母d开头，后面跟变量标示符，英文单词的第一个字母要大写。d、字符型变量：以小写字母s开头；e、布尔型变量：以小写字母b开头；f、数组变量：数组类型+“_”+“Array”+“_”+“变量标示符”例如：定义一个存储学生成绩的数组(存储单精度实体类型变量)Dimf_Array_StudentMark3)变量标示符要符合标示符标准，同时容易理解，尽量使用英文单词来代替，尽量避免使用缩写或简写。例如：存储校友通讯录的字符串变量定义为：DimsSchoolfellowAddressList;4)在变量定义后面加变量功能定义的注释。 5、常量命名规则：类型体现和上面一样，不一样的地方是，所有后面的标示符全部大写，例如：定义一个存储语言种类的的字符型常量：ConstsLANGUAGE_TYPE=”Chinese” 6、功能函数、过程命名规则：1)使用Function声明函数，用Sub声明过程；2)函数名或过程名的第一个字母大写，且后面的每个单词第一个字母大写。例如：FunctionCheckValidityOfInput(sStuentMark)此处写代码EndFunction3)函数名或过程名要容易读，简单明了。4)在函数前面加注释，说明函数功能、参数说明、创建日期、修改日期、修改原因、创建人、修改人等相关信息。 7、代码缩进标准：为了提高代码的美观型和易读性，在此提出代码编写的版面格式：区间与区间之间以一个为间距。例如：*功能：检测输入字符串中的单引号，如果有则把原来的一个单引号变成两个单引号，两个变成四个，依次类推，从而避免SQL语句执行错误。创建人：XXXX创建时间：2002-7-6修改时间：修改原因：修改人：输入参数说明：sInputString：需要进行单引号检测的字符串*FunctionCheckValidityOfInput(sInputString)DimiCirculationControl控制循环DimsApartString分离字符检测DimiLenOfInput输入字符长度iLen=Len(Trim(sInputString)ForiCirculationControl=1ToiLenIfMid(sInputString,iCirculationControl,1)ThensApartString=sApartString&_Mid(Trim(sInputString),iCirculationControl,1)ElsesApartString=sApartString&EndIfNextCheckValidityOfInput=sApartStringEndFunction 8、统一JavaScript程序编写规范：JavaScript的命名规则和上面大部分相同，唯一不同的地方是：变量使用Var来声明，在声明结束后以分号（；）结束。函数的代码要求层次清楚，该写在下一行的地方尽量往下一行写，不要在一行中完成所有代码，这样看起来不容易，检查错误也特别费时。在写函数的时候记着加注释内容，以便以后维护时快速了解程序功能。下面是一个JavaScript程序：/*/功能：对Form中的Text,Password,TextArea对象进行单引号处理，解决由于单引号/起的系统错误。/创建人：XXXX/创建时间：2002-7-8/修改时间：/修改原因：/修改人：/*functionCheckElement()varsNeedCheck=;/检测属于INPUT标签的内容variControlInput=0;/控制循环variLocationInput=0;/控制位置variLengthInput=0;/存储字符串长度varsCheckingInput=;/正在检测的字符varsReplaceInput=;/替换字符varsHaveCheckInput=;/已经检测的字符varobjInput;/存储INPUT对象；varobjTextArea;/存储TextArea对象variControlTextArea=0;variLocationTextArea=0;variLengthTextArea=0;varsCheckingTextArea=;varsReplaceTextArea=;varsHaveCheckTextArea=;/检测页面中的Text和Password对象中的单引号for(i=0;idocument.all.tags(INPUT).length;i+)objInput=document.all.tags(INPUT);if(objInput.type=text|objInput.type=password)sNeedCheckInput=obj.value;iLengthInput=sNeedCheckInput.length;for(iControl=0;iControliLength;iControl+)sCheckingInput=sNeedCheckInput.charAt(iControl);if(sCheckingInput=”)sReplaceInput=”;elsesReplaceInput=sCheckingInput;sHaveCheckInput=sHaveCheckInput+sReplaceInput;objInput.value=sHaveCheckInput;/检测页面中的TextArea对象中的单引号for(i=0;idocument.all.tags(TEXTAREA).length;i+)objTextArea=document.all.tags(TEXTAREA);if(objTextArea.type=text|objTextArea.type=password)sNeedCheckTextArea=obj.value;iLengthTextArea=sNeedCheckTextArea.length;for(iControl=0;iControliLength;iControl+)sCheckingTextArea=sNeedCheckTextArea.charAt(iControl);if(sCheckingTextArea=”)sReplaceTextArea=”;elsesReplaceTextArea=sCheckingTextArea;sHaveCheckTextArea=sHaveCheckTextArea+sReplaceTextArea;objTextArea.value=sHaveCheckTextArea; 9、系统性能提高，代码规范：1)在ASP页面内，凡是使用CreageObject()创建的对象(Com、Recordset等)，对于这些变量，应当在该页结束进行对象释放：即Set对象变量名=Nothing2)数据库打开以后在不用的时候（通常是本页最后面），需要对连接进行关闭；3)对于SQL语句，存储过程，尽量避免使用*来取所有字段,为了代码的易读性，SQL关键字要求全部大写，字段部分小写。例如：SELECTname,age,birthday,telephone,addressFROMSc