网站建设规范Word文档格式.docx
《网站建设规范Word文档格式.docx》由会员分享，可在线阅读，更多相关《网站建设规范Word文档格式.docx（22页珍藏版）》请在冰点文库上搜索。
h
hPoint
数组
a
aiAge
日期
d
dCreateDate
以上命名方式是应用到有实际意义的变量里的，但对于一些循环语句，如下
for（i=0;
i<
iStaffTotal;
i++）
i的命名方式用上述命名就显得过于臃肿了，对于类似的变量，我们就用简单的命名就行了。
②对于类的变量命名
属性标记
全局变量g_
整数i
g_iStaffTotal
常量c_
浮点f
c_fPrice
静态变量s_
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;
m_iLength;
i++）
if（）
//注释说明
…….
else
……
}
//注释说明
while（）
switch（iFlag）
case1:
…..
break;
default:
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];
⑵类的冒充
this.Parent=Parent;
this.Parent（）;
deletethis.Parent;
或
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对象进行传递。
⑶原型继承
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（）
};
returnoTempCar;
}
varoCar1=createCar（"
red"
4）;
varoCar2=createCar（"
3）;
oCar1.showColor（）;
//outputs"
oCar2.showColor（）;
这样每次调用createCar（）；
都要创建函数showColor（）；
每个对象都共享了同一个函数。
下面的方法解决了重复创建函数对象的问题，但是这个函数看起来不像对象的方法。
functionshowColor（）
functioncreateCar（sColor,iDoors）
oTempCar.doors=iDoors;
oTempCar.showColor=showColor
③单件模式
作用
保证一个类只有一个实例，并提供一个访问它的全局访问点。
适合于
当一个类只能有一个实例，且客户可以从一个众所周知的访问点进行访问；
当这个唯一的实例应该是可以通过子类化可以扩展的，并且客户无需要修改代码就能使用这个已扩展的实例时。
JavaScript实现单件模式需要一些技巧,如我们定义一个类:
functionSingletonObject（）
this.methodA=function（）
{
alert（'
methodA'
）;
this.methodB=function（）
methodB'
0;
SingletonObject.instance=this;
如果想要使这个类只实例化一个类,单靠一般的单件模式是行不同的,因为只要newObject,就会创建一个对象实例.
修改上述代码为单件模式：
（function（）{
//工厂模式
//创建一个类的创建工厂类
SingletonFactory={
create:
function（）
if（SingletonObject.instance==null）
returnnewSingletonObject（）;
else
returnSingletonObject.instance;
}
//私有类
functionSingletonObject（）
this.methodA=function（）
{
alert（'
this.methodB=function（）
}
SingletonObject.instance=this;
}）（）;
//经过以上设置后,只能通过SingletonFactory.create（）来创建SingletonObject类的实例,而且是单一的实例.
//如用newSingletonObject（）就会出错.
varinstA=null;
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:
⑸伪类选择符
a:
hover{font-size:
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
六、问题与解决方案
升级会员 