网站建设规范.docx

网站建设规范.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

六、问题与解决方案