网站建设规范.docx
- 文档编号:12688589
- 上传时间:2023-04-21
- 格式:DOCX
- 页数:22
- 大小:248.49KB
网站建设规范.docx
《网站建设规范.docx》由会员分享,可在线阅读,更多相关《网站建设规范.docx(22页珍藏版)》请在冰豆网上搜索。
网站建设规范
网站建议规范
范普选
一、后台语言2
1、命名2
2、代码布局2
二、前台语言4
1、JAVASCRIPT脚本语言4
2、从HTML过度到XHTML11
3、DHTML给我带来效果11
三、界面展现11
1、界面布局11
2、配色14
3、样式表15
4、默认样式规定16
5、样例界面16
四、数据库16
五、JIRA与VSS16
六、问题与解决方案16
一、后台语言
1、命名
①普通变量命名
命名方式:
前缀(小写字母)+PASCAL命名方式(字符串这间用大写字母分隔)
规定原子类型的有如下几种:
原子类型
前缀
范例
整数
i
iStaffTotal
浮点
f
fPrice
字符串
s
sUserName
布尔
b
bIsShow
字符
c
cChart
句柄
h
hPoint
数组
a
aiAge
日期
d
dCreateDate
以上命名方式是应用到有实际意义的变量里的,但对于一些循环语句,如下
for(i=0;i i的命名方式用上述命名就显得过于臃肿了,对于类似的变量,我们就用简单的命名就行了。 ②对于类的变量命名 属性标记 原子类型 范例 全局变量g_ 整数i g_iStaffTotal 常量c_ 浮点f c_fPrice 静态变量s_ 整数i s_iAge 其它m_ 字符串s m_sUserName ③类名命名前缀C+以PASCAL命名方式(字符串这间用大写字母分隔) 范例: publicclassCUser ④方法或函数命名以PASCAL命名方式(字符串这间用大写字母分隔) 范例: publicstringGetUserName(intiUserId) ⑤接口命名前缀I+以PASCAL命名方式(字符串这间用大写字母分隔) 范例: interfaceIUser 2、代码布局 类的写法 using……… //范例类 publicclassCExample: IExample,CUser { privateintm_iLength=10; CExample() { } //初始化 publicvoidInitExample() { ……. //注释说明 for(inti=0;i { if() { //注释说明 ……. } else { …… } } //注释说明 while() { switch(iFlag) { case1: //注释说明 ….. break; default: …… break; } } try { …….. } catch(ExceptionhExp) { …… } }//InitExample方法结束 } 二、前台语言 1、JAVASCRIPT脚本语言 1JSON JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式 JSON建构于两种结构: 1)“名称/值”对的集合 对象是一个无序的“‘名称/值’对”集合。 一个对象以“{”(左括号)开始,“}”(右括号)结束。 每个“名称”后跟一个“: ”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。 2)值的有序列表(在这里被理解为数组(array)) 数组是值(value)的有序集合。 一个数组以“[”(左中括号)开始,“]”(右中括号)结束。 值之间使用“,”(逗号)分隔。 3)值 可以是双引号括起来的字符串(string)、数值(number)、true、false、null、对象(object)或者数组(array)。 这些结构可以嵌套。 字符串 数值 2面向对象 面向对象设计是基于以下3个主要原理的: 封装,继承和多态。 1)面向对象的基础知识 ⑴JAVASCRIPT内置对象 它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error以及String对象。 ⑵prototype属性 对于所有的内置对象都有只读的prototype属性,可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。 然而,用户定义的对象可以被赋给新的原型。 例子: //父类 functionParent() { this.sName=‘’;//姓名 } Parent.prototype.GetName=function(){returnthis.sName;} Parent.prototype.SetName=function(sName){this.sName=sName;} //子类 functionSon() { } Son.prototype=newParent();//如果是内置对象不能这样做 Son.prototype.constructor=Son; Son.prototype.Run=function(){alert(‘跑’);} ⑶constructor属性 constructor属性是所有具有prototype的对象的成员。 它们包括除Global和Math对象以外的所有JScript内部对象。 constructor属性保存了对构造特定对象实例的函数的引用。 例子: pSon=newSon(); if(pSon.constructor===Son){}//返回真 2)继承 常用的类的继承方法: ⑴类的抄写 functionSon() { varpParent=newParent(); for(varkeyinpParent){this[key]=pParent[key];} } ⑵类的冒充 functionSon() { this.Parent=Parent; this.Parent(); deletethis.Parent; } 或 functionSon() { Parent.call(this); } 补充: call方法: 调用一个对象的一个方法,以另一个对象替换当前对象。 call([thisObj[,arg1[,arg2[,[,.argN]]]]]) 参数 thisObj可选项。 将被用作当前对象的对象。 arg1,arg2,,argN可选项。 将被传递方法参数序列。 说明 call方法可以用来代替另一个对象调用一个方法。 call方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。 如果没有提供thisObj参数,那么Global对象被用作thisObj。 Apply方法: apply([thisObj[,argArray]]) 参数 thisObj可选项。 将被用作当前对象的对象。 argArray可选项。 将被传递给该函数的参数数组。 说明 如果argArray不是一个有效的数组或者不是arguments对象,那么将导致一个TypeError。 如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。 call和apply的作用是一样的,只不过call是将各个参数以“,”隔开,而apply是将所有参数组成一个数组或是arguments对象进行传递。 ⑶原型继承 functionSon() { } Son.prototype=newParent(); Son.prototype.constructor=Son; 3)高级特性 ⑴闭包 闭包简单的解释是,ECMAScript允许innerfunctions(嵌套函数): 函数可以定义在另外一个函数里面。 这些内部的函数可以访问outerfunction(父函数)的local变量,参数,其它内部函数。 当内部函数被构造,并可以在函数外被获得(函数当成返回值),这个内部函数在outerfunction返回后被执行(在outer函数外执行),那一个闭包形成了。 闭包特征: A、作为一个函数变量的一个引用,当函数返回时,其处于激活状态; B、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。 例子: varpMsg=(function() { varsMsg=‘Hello’; returnfunction() { returnsMsg; } })(); ⑵类的静态方法、静态属性与私有属性 DateTime={ varm_dToday=‘’;//私有属性 } DateTime.Now=function(){returnnewDate();}//静态方法 DateTime.s_sFormat=‘Y-m-dH: i: s’;//静态属性 ⑶设计模式 ①创建模式 第一种设计模式将探讨创建模式。 正如其名,创建模式处理的就是在程序中创建对象的问题。 通常在javascript中创建对象的方式如下: varpParent=newParent(); ②工厂模式 对象的属性可在对象创建后动态定义,所以可以编写下面的代码 varoCar=newObject; oCar.color="blue"; oCar.doors=4; oCar.showColor=function() { alert(this.color) } oCar.showColor() 执行这段代码,可以执行oCar对象,但问题是有可能要创建多个oCar实例。 可通过定义"工厂函数来"解决此问题。 functioncreateCar(sColor,iDoors) { varoTempCar=newObject; oTempCar.color=sColor; oTempCar.doors=iDooes; oTempCar.showColor=function() { alert(this.color) }; returnoTempCar; } varoCar1=createCar("red",4); varoCar2=createCar("blue",3); oCar1.showColor();//outputs"red" oCar2.showColor();//outputs"blue" 这样每次调用createCar();都要创建函数showColor();每个对象都共享了同一个函数。 下面的方法解决了重复创建函数对象的问题,但是这个函数看起来不像对象的方法。 functionshowColor() { alert(this.color) } functioncreateCar(sColor,iDoors) { varoTempCar=newObject; oTempCar.color=sColor; oTempCar.doors=iDoors; oTempCar.showColor=showColor returnoTempCar; } varoCar1=createCar("red",4); varoCar2=createCar("blue",3); oCar1.showColor();//outputs"red" oCar2.showColor();//outputs"blue" ③单件模式 作用 保证一个类只有一个实例,并提供一个访问它的全局访问点。 适合于 当一个类只能有一个实例,且客户可以从一个众所周知的访问点进行访问; 当这个唯一的实例应该是可以通过子类化可以扩展的,并且客户无需要修改代码就能使用这个已扩展的实例时。 JavaScript实现单件模式需要一些技巧,如我们定义一个类: functionSingletonObject() { this.methodA=function() { alert('methodA'); } this.methodB=function() { alert('methodB'0; } SingletonObject.instance=this; } 如果想要使这个类只实例化一个类,单靠一般的单件模式是行不同的,因为只要newObject,就会创建一个对象实例. 修改上述代码为单件模式: (function(){ //工厂模式 //创建一个类的创建工厂类 SingletonFactory={ create: function() { if(SingletonObject.instance==null) returnnewSingletonObject(); else returnSingletonObject.instance; } } //私有类 functionSingletonObject() { this.methodA=function() { alert('methodA'); } this.methodB=function() { alert('methodB'); } SingletonObject.instance=this; } })(); //经过以上设置后,只能通过SingletonFactory.create()来创建SingletonObject类的实例,而且是单一的实例. //如用newSingletonObject()就会出错. varinstA=null; try { instA=newSingletonObject();//不能用此方式创建了 alert('试图通过newSingletonObject()构造实例! 成功啦'); } catch(e) { alert("SingletonObject构造函数不能从外部访问,系统抛出了异常! "); } instA=SingletonFactory.create();//通过Factory上定义的静态方法获得 varinstB=SingletonFactory.create(); instA.methodA(); instB.methodA(); alert(instA==instB);//显示"true"则成功 ⑷自执行的匿名函数 在声明函数后立即执行此函数。 例子: (function(){})(); 4)高级应用实例 2、从HTML过度到XHTML 3、DHTML给我带来的效果 三、界面展现 1、界面布局 ①典型界面 ②布局分析 我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: ⑴顶部部分,其中又包括了LOGO、MENU和一幅Banner图片。 ⑵内容部分又可分为侧边栏、主体内容。 ⑶底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图: 根据上图,画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。 DIV结构如下: │body{} /*这是一个HTML元素,具体我就不说明了*/ └#Container{} /*页面层容器*/ ├#Header{} /*页面头部*/ ├#PageBody{} /*页面主体*/ │ ├#Sidebar{} /*侧边栏*/ │ └#MainBody{} /*主体内容*/ └#Footer{} /*页面底部*/ 2、配色 ①原色: ②通用颜色释义: 红色: 热情、浪漫、火焰、暴力、侵略。 红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作。 紫色: 创造、谜、忠诚、神秘、稀有。 紫色在某些文化中与死亡有关。 蓝色: 忠诚、安全、保守、宁静、冷漠、悲伤。 绿色: 自然、稳定、成长、忌妒。 在北美文化中,绿色与环保意识有关,也经常被连结到有关财政方面的事物。 黄色: 明亮、光辉、疾病、懦弱。 黑色: 能力、精致、现代感、死亡、病态、邪恶。 白色: 纯洁、天真、洁净、真理、和平、冷淡、贫乏。 ③配色技巧: ⑴了解你的网站所要传达的讯息和品牌 选择可以加强这些讯息的颜色。 例如,如果在设计一个强调稳健的金融机构,那么就要选择冷色系、柔和的颜色,像是蓝、灰或绿。 在这样的状况下,如果使用暖色系或活泼的颜色,可能会破坏了该网站品牌。 ⑵了解你的读者群 文化差异可能会使色彩产生非预期的反应。 同时,不同地区与不同年龄层对颜色的反应亦会有所不同。 年轻族群一般比较喜欢饱和色,但这样的颜色却引不起高年龄层的兴趣。 ⑶不要使用过多的颜色 除了黑色和白色以外,约选择四到五个颜色就够了。 太多的颜色会导致混淆,也会拉走读者的注意力。 ⑷在阅读的部分使用对比色 颜色太接近无法产生足够的对比效果,也会妨碍观众阅读。 白底黑字的阅读效果最好。 ⑸用灰阶来测试对比 当你在处理黑色、白色和灰色以外的颜色的时候,有时候会很难决定每个颜色的相对值。 为了要确认你的色盘能提供足够的对比,你可以建立一个仿真网站,并将它转换成灰阶即可。 ⑹选择颜色要注意时效性 同一个色彩很容易就充斥着整个市场,且消费者很快的就对流行色彩感到麻木。 但就另外一个角度来看,你可以使用几十年前的流行色彩,引起人们的怀旧之情。 ⑺选择色盘时请考虑功能性的颜色 别忘了将关键信息部分建立功能性的颜色,例如标题和超级链接等。 3、样式表 由于XHTML的结构相对严谨,所以样式表的选择符要注意大小写。 ①样式表常用的选择符: ⑴通用选符 通配选择符。 选定文档目录树(DOM)中的所有类型的单一对象。 假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。 示例: *.div{text-decoration: none;} ⑵HTML标记选择符 以文档语言对象(Element)类型作为选择符。 示例: td{font-size: 14px;width: 120px;} ⑶CLASS选择符 以文档语言对象的class属性作为选择符。 示例: .title{font-size: 20px;} ⑷ID选择符 以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择符。 示例: #note{font-size: 14px;width: 120px;} ⑸伪类选择符 示例: a: hover{font-size: 14px;color: red;} ②样式表的优先级别 Style>ID>Class>缺省的Html元素 ③选择符CLASS与ID的区别 ⑴在CSS文件里书写时,ID加前缀“#”;CLASS用“.”叫做类。 ⑵id一个页面只可以使用一次,class可以多次引用。 ⑶ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;CLASS是一个样式,可以套在任何结构和内容上,就象一件衣服。 ⑷从概念上说就是不一样的: id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。 目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。 4、默认样式规定 5、样例界面 四、数据库 五、JIRA与VSS 六、问题与解决方案
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 建设 规范