构建好开发环境后，Doking's BLOG数据库规划是第三步，它也是直接关系到数据库以后是否能够有效运行的关键步骤，也是对一个数据库开发人员的规范要求。

3.1 数据库的规范化

　　数据库的规范化主要体现在表与表之间的关系、数据结构及存储两大方面。

　　3.1.1 数据表之间的关系

　　许多初学者常常认为，建立一个表储存所有数据就可以了。如果这么认为，那经常会造成数据冗余的。图3-1-1是一个数据表，可以看到画在红色圈中的数据是冗余的。

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-1-1  一个数据表

　　冗余数据会影响数据库的有效运行，甚至可以把数据库推毁。为减少冗余数据，得把数据分开储存成几个表，并建立表与表之间的连接关系。表与表之间的连接关系，主要有一对多、多对多、一对一三种方式。

　　一对多关系，它是数据库中最普通的关系类型。这种关系双被称为是父表与子表关系或主表与分表关系。图3-1-2就体现了一种父表与子表关系。在这里，专题表与回复表就是一对多的关系。专题表是父表，回复表是子表，专题表中的一行在回复表可有零行、一行或许多与之对应，而回复表中的每一行都与专题表中的相应的专题对应。

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-1-2   一对多关系

　　多对多关系，就是第一张表的每一行可对应第二张表的许多行，同样地，第二张表中的每行也可与第一第表中的许多行相对应。例如，一个专题可以有许多用户回复，一个用户也可以作多次专题回复。这就需要建立第三张表，将专题代码与用户代码连接，这个表就是前两个表的父表。在图3-1-3中，“回复表”就是“专题表”与“用户表”的父表。

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-1-3  多对多关系

　　一对一的关系，就是将一个表中的行与另一表中的行连接来。这种关系非常少见，因为如是有的话，还不如把这两个表合为一张表更为合理。

3.1.2 数据结构与储存

　　数据库的物理结构必须基于逻辑结构建立的，在设计表格、字段和关系时就需记住一些规则。行与列的顺序并不起什么作用，虽然在数据表中，列会有一定的顺序位置，但它们并不以此来代表引用顺序。记录的顺序只有在它们从数据表中取出并送给用时才起作用。SQL会通过参数数据库索引来处理记录的提取顺序。例如，在数据表中，把性别字段放在姓名字段之前，这个错误没什么，只要在采用SQL语句调用这个数据表时，记得把姓名字段调到性别字段之前就可以了。

　　设计数据表时，分配字段大小要慎重，在够用的情况下，能省就省。如果字段用于储存整数，请用整数或长整数，不用单精度或双精度，如果够用的话，最好建立100字符的文本类型字段，而不要采用备注字段。为什么？如果你不怕高昂的服务器费用、不怕网络数据库运行缓慢，你大可不必理会这些，但它最严重会导致数据库崩溃。

screen.width-500)this.style.width=screen.width-500;" border=0>

3.2  Doking’s BLOG数据库的设计

　　基于上述数据库规范化的知识，这节开始规划设计Doking’s BLOG数据库。Doking’s BLOG数据库中设计了五个数据表，分别是LM表（栏目表）、ZT表（学习笔记表）、HF表（回复表）、YH表（用户表）、GLY表（管理员表），并把数据库命名为“dkblog.mdb”，保存在“D:\dat\”目录下。

　　LM表即栏目表，用于网站导航条建立和学习笔记的归类，栏目内容是由网站的管理员设计的，其字段设计如图3-2-1所示

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-2-1  LM表的字段设计图

　　ZT表即学习笔记表，是用于储存用户发表学习心得，其实字段设计如图3-2-2所示：

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-2-2  ZT表的字段设计图

　　HH表即回复表，储存着用户对已发表的学习笔记的回复，其字段如图3-2-3所示：

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-2-3  HF表的字段设计图

　　YH表即用户表，储存着用户的注册信息，方便用户登录发表学习笔记和学习笔记的回复。其字段设计如图3-2-4所示：

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-2-4  YH表的字段设计图

　　GLY表即管理员表，用于管理员登录，管理网站，其字段设计如图图3-2-5

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-2-5  GLY表的字段设计图

3.3 创建Doking’s BLOG数据库连接源

　　（1）启动Dreamweaver MX 2004，在【文件】菜单中，选择【新建】，在【新建对话框】中，选择类别为“动态页”，选择动态页为“ASP.NET VB”，按“创建”按钮，创建一个动态网页。

　　（2）切换到【应用程序】面板，选择【数据库】选项卡，单击“+”号，选择“OLE DB连接”，如图3-3-1所示：

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-3-1 选择OLE DB连接

　　（3）在弹出【OLE DB连接】对话框中，输入连接名称“dkconn”，单击“建立”按钮，如图3-3-2所示：

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-3-2  设置连接名称

　　（4）进入【数据连接属性】页面，选择【选择程序】选项卡，由于要连接的数据库是Access2003的数据库，所以在数据库引擎中选择“Microsoft Jet 4.0 OLE DB Provider”作为驱动程序，如图3-3-3所示：

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-3-3 选择数据库引擎

　　（5）选择【连接】选项卡，选择要连接数据库为“D:\dkblog\dat\dkblog.mdb”，把“用户名”和“密码”的文本框清空，如图3-3-4

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-3-4 选择连接数据库

　　（6）选择【高级】选项卡，在设置访问权限中，选择“ReadWrite”，如图3-3-5所示

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-3-5  设置访问权限

　　（7）返回【连接】选项卡，单击“测试”按钮，出现如图3-3-6对话框，那说明已经把数据库dkblog.mdb连接到站点上了。单击“确定”按钮完成数据库的连接工作。在站点的根目录下面，可以看到增添了一个新文件“web.config”，以后可以在这个文件直接对数据库的连接进行修改。

screen.width-500)this.style.width=screen.width-500;" border=0>

图3-3-6  数据库测试对话框

　　了解Doking’s BLOG功能和开发目的之后，接下来就是构建好开发环境。

2.1  ASP.NET运行环境的构建

　　在开始开发Doking’s BLOG前，应该先构造好开发环境。下面介绍的是在Windows 2000/XP操作系统中的构建方法。

　　2.1.1 安装IIS服务器

　　按【开始】→【控制面板】→【安装/删除Windows组件】，勾选“安装Internet信息服务组件”，如图2-1所示。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-1  windows组件向导对话框

　　2.1.2 在IIS服务器上，给Doking’s BLOG安上新家

　　（1）首先在D:\下新建目录“dkblog”，打开【控制面板】→【管理工具】→【Internet 服务管理器】，打开【Internet信息服务】对话框，如图2-2所示。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-2  Internet信息服务对话框

　　（2）右键单击“默认Web站点”，选择属性，打开【默认Web站点属性】对话框，在对话框中，单击【主目录】选项卡，把本地路径指向“D:\dkblog”，在“执行许可（P）：”下拉菜单中选择“脚本和可执行程序”，结果如图2-3所示。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-3  站点属性对话框

3）现在，电脑终于可以在像网络服务一样提供WWW服务了，默认网址：localhost或电脑的IP地址（如：127.0.0.1）。

　　提醒：大家可不要小看Internet服务器的管理，如果能合理分配好IP地址和站点虚拟目录，也能让电脑真正成为网络服务器，也能让网络上的用户浏览电脑上的网站和数据库。

　　2.1.3 安装.NET框架

　　大家可以在微软的网上下载.NET Framework 2.0和相应版本的SDK工具包，也可以从下面网址下载安装：

　　.NET Framework Version 2.0 Redistributable Package Beta 1 (x86) ? 24M
http://go.microsoft.com/fwlink/?linkid=30093&clcid=0x409

　　.NET Framework 2.0 SDK Beta 1 x86 ? 229M
http://www.microsoft.com/downloads/details.aspx?familyid=916EC067-8BDC-4737-9430-6CEC9667655C&displaylang=en

　　打开IE浏览器，在地址栏上打上“localhost/text.aspx”，假定text.aspx这个文档现在不存在，那么IE浏览器上一定会返回错误信息，如果出现如图2-4所示的错误信息，说明我ASP.NET的运行环境基本构建完毕。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-4  找不着文件错误信息

　　2.1.4 在Windows 2003操作系统中构建ASP.NET运行环境

　　上面介绍的是在Windows 2000/XP操作系统中构建ASP.NET运行环境的步骤和方法。在Windows 2003操作系统中构建ASP.NET运行环境主要有以下两种方法：

　　1．使用【配置您的服务器向导】安装IIS 6.0和ASP.NET

　　（1）从【开始】菜单，单击“管理您的服务器”。
　　（2）在“管理您的服务器角色”下，单击【添加或删除角色】。
　　（3）阅读“配置您的服务器向导”中的预备步骤，然后单击“下一步”。
　　（4）在“服务器角色”下，单击“应用程序服务器（IIS，ASP.NET）”，然后单击“下一步”。
　　（5）在【应用程序服务器选项】对话框中，选中“启用ASP.NET”复选框，单击“下一步”，然后再单击“下一步”。
　　（6）阅读概要信息，然后单击“下一步”。
　　（7）单击“完成”。

　　2．使用【控制面板】安装IIS 6.0和ASP.NET

　　（1）从【开始】菜单，单击【控制面板】。
　　（2）双击【添加或删除程序】。
　　（3）单击【添加/删除Windows组件】。
　　（4）在“组件”列表框中，单击“应用程序服务器”。
　　（5）单击“详细信息”。
　　（6）单击“Internet信息服务管理器”。
　　（7）单击“详细信息”以查看IIS可选组件的列表。
　　（8）选择要安装的所有可选组件。
　　（9）单击“确定”，直到返回到【Windows 组件向导】。
　　（10）单击“下一步”，然后完成【Windows 组件向导】。

　　另外，可以在运行Windows 2003的服务器中的 IIS 管理器中直接启用ASP.NET，具体步骤如下：

　　（1）从【开始】菜单中，单击“运行”。
　　（2）在【运行】对话框中的【打开】框中，键入inetmgr，然后单击“确定”。
　　（3）在IIS管理器中，展开本地计算机，然后单击“Web服务扩展”。
　　（4）在右侧窗口中，右键单击“ASP.NET”然后单击“允许”。ASP.NET的状态变为“允许”。

2.2  建立Doking’s BLOG 站点

　　在构建好ASP.NET运行环境之后，可以开始着手开发Doking’s BLOG网站了。首先，必须在Dreamweaver MX中建立Doking’s BLOG站点。

　　2.2.1 建立Doking’s BLOG站点

　　（1）启动Dreamweaver MX 2004，切换到【文件】面板，单击“管理站点”，单击按钮“新建”，如图2-5所示。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-5  管理站点对话框

　　（2）在其下接菜单中，选择“站点（S）”，在弹出对话框中，输入站点名字“dkblog”，结果如图2-6所示。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-6  定义站名字

　　（3）单击“下一步”，选择“是，我想使用服务器技术。（Y）”，在“哪种服务器技术？（W）”下拉菜单中，选择“ASP.NET VB”，结果如图2-7所示。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-7  确定服务器技术

（4）单击“下一步”，选择“在本地进行编辑和测试（我的测试服务器是这台计算机）（E）”，把文件存储指向“D:\dkblog”，如图2-8所示。

　　（5）单击“下一步”，输入URL地址“http://localhost/”，单击按钮“测试URL（I）”，如果测试成功，会显示如图2-9一样的对话框。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-8  指定网站的目录位置

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-9  测试对话框

　　（6）单击“下一步”，再单击“下一步”，单击按钮“完成”，完成站点的建立。

　　2.2.2 部署Doking’s BLOG站点

　　（1）先来看Doking’s BLOG网站的布局，根目录存放.aspx、.htm文件；bin目录是用于部署DreamweaverCtrls.dll控件；dat目录用于存放数据库；images目录存放有关图片文件。在打开文件面板，在“站点?dkblog”下分别新建目录bin、目录dat、目录images，结果如图2-10所示。

　　（2）在【文件】菜单中，选择【新建】，在【新建对话框】中，选择类别为“动态页”，选择动态页为“ASP.NET VB”，按“创建”按钮创建第一个动态网页。切换到【应用程序】面板，选择【绑定】选项卡，如图2-11所示。

screen.width-500)this.style.width=screen.width-500;" border=0>　　screen.width-500)this.style.width=screen.width-500;" border=0>

图2-10  站点的布局                 图2-11  绑定对话框

　　（3）点击“部署”二字，在弹出对话框中把部署目录指向“D:\dkblog\bin\”，如图2-12所示。

　　（4）点击“部署”按扭，弹出如图2-13的对话框，按“确定”按钮将它关闭。

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-12  部署设置对话框

screen.width-500)this.style.width=screen.width-500;" border=0>

图2-13  部署文件对话框

　　提醒：切记DreamweaverCtrls.dll文件名称及其所在目录bin名称不能更改，并且bin文件夹必须保存在站点的根目录下。

　   1.1 什么是BLOG

　　BLOG，就是“网络日志”。Blog通常是由简短且经常更新的Post所构成；这些张贴的文章都按照年份和日期排列。Blog的内容和目的有很大的不同，从对其他网站的超级链接和评论，有关公司、个人、构想的新闻到日记、照片、诗歌、散文，甚至科幻小说的发表或张贴都有。许多Blog是个人心中所想之事情的发表，其它Blog则是一群人基于某个特定主题或共同利益领域的集体创作

　　1.2 Doking’s BLOG功能简介

　　Doking’sBLOG是Doking公司为加强部门沟通、团队合作而开发的，主要包括了平面设计、3D设计、网页设计、网络编程等方面的技术交流。它是采用Dreamweaver MX+Access+ASP.NET开发，共分为用户系统和管理员系统两大部分。

　　用户系统结构如图1-1所示。

　　screen.width-500)this.style.width=screen.width-500;" border=1>

　　图1-1 用户系统结构图

　　管理员系统结构如图1-2所示。

　　screen.width-500)this.style.width=screen.width-500;" border=1>

　　图1-2 管理员系统结构图

　　1.3 为什么选择Dreamweaver MX

　　因为Dreamweaver MX提供了“不用手写代码”就能创建ASP.NET页面的功能。在Dreamweaver MX中基本不用手写代码就能实现记录的插入、删除和更新，而且DataSet数据集提供了DataGrid、DataList、Repeater等数据显示控件，使数据库的开发更灵活、方便。

　　提醒：每个方案开发之前，应该先画好系统结构图，甚至要做好案例分析，每个模块要画上流程图。

screen.width-500)this.style.width=screen.width-500;" border=0>

　                                                                            　图1  

　　第三步：松开鼠标之后，选中的文字下部就会出现下划线，同时单词的颜色变成蓝色，而且“Link”输入框中也会自动显示目标文件的地址。  

　　提示：在建立链接的时候需要注意URL的两种方式。1．绝对地址：例如www．abc．com/test．htm；2．相对地址：比如download/1．htm，说明页面1．htm在服务器的根目录中。  

　　二、在一张图片上设定多个链接  

　　有些网页在一张大图片上做了多个链接，这样访问者可以通过点击图片的不同位置进入不同的页面，这是应用了图像热区域的概念，我们可以参照下述步骤实现。  

　　第一步：在Dreamweaver MX 2004中可以先选中图像，此时可以在图像属性面板上看见一个“Map”区域，在其下方有三个淡蓝色的工具图标，即矩形、圆形和多边形。

第二步：根据需要用鼠标选中其中的一个，再把鼠标移到图像上拖拽出一块淡蓝色的区域。

　　第三步：在属性面板中的“Link”输入框中填写需要链接的网页地址，这样一个图像热区域就做好了。

　　同样，再对这幅图像设定多个图像热区域，也就可以实现点击图片的不同区域进入不同的页面了。

　　三、定制页面内跳转的链接

　　如果你经常在网上订阅免费的电子杂志，或者浏览超长的页面应该对这种标签链接不陌生，这是通过一个类似目录的列表来方便地跳转到页面内任何部分。

　　第一步：在Dreamweaver MX 2004中先确定链接指向的位置，也就是屏幕跳转后停留的位置，接着选中目标文本并运行“Insert→Named Anchor”命令。

　　第二步：在“Anchor name”输入框中键入标签名称（比如test3），这时在文本下面会自动出现一个锚式标记来区别开普通的文本内容（如图2）。

screen.width-500)this.style.width=screen.width-500;" border=0>

　                                                                               图2

　　第三步：在属性板的“Link”输入框中输入“#test3”，其中test3就是刚才设置的名字，这样即可实现页面内跳转功能了。

　　提示：如果想指向另外一页中的某个位置也可以，把这个锚式标记放过去就行了。

　　四、快速检查网页链接

　　上网冲浪的时候，最讨厌的就是看见“Web Server error 4004:File Not Found”之类的出错信息。由于一个网站中的的链接数量很多，稍有不甚就会导致很多链接出错，不过在Dreamweaver MX 2004中可以很方便地对链接进行检查。

　　第一步：在Dreamweaver MX 2004中运行“Site→Check Links SideWide”命令，此时将会激活链接检查面板。

　　第二步：从面板左上部的“Show”下拉菜单中可以选择Broken Links（断掉的链接）、Extrenal Links（外部的链接）、OrphanedFiles（孤立文件）三种，比如我们选取Orphaned Files之后，Dreamweaver MX 2004将对当前链接情况进行检查，并且将孤立的文件列表显示出来。

　　第三步：对于有问题的文件，直接双击鼠标左键即可打开进行修改。

　　提示：外部链接是链接到外部网站的链接地址，Dreamweaver无法对其正确性进行检查。

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。

1．初级改善

• 为页面添加正确的DOCTYPE

很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：

(1)过渡型（Transitional ）

(2)严格型（Strict ）

(3)框架型（Frameset ）

对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。

Tip:你懒得输入上面过渡型代码的话，可以访问http://www.macromedia.com/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。

• 设定一个名字空间（Namespace）

直接在DOCTYPE声明后面添加如下代码：

一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

• 声明你的编码语言

为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：

这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

• 用小写字母书写所有的标签

XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：

正确的写法是：

• 为图片添加 alt 属性

为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：

正确的写法：

• 给所有属性值加引号

在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。

例：height="100"，而不能是height=100。

• 关闭所有的标签

在XHTML中，每一个打开的标签都必须关闭。就象这样：

这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。例如：

经过上述七个规则处理后，页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务（http://validator.w3.org/）。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址，可以作为W3C校验的补充。当最后通过了XHTML验证，恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧！

2．中级改善

接下来我们的改善主要在结构和表现相分离上，这一步不象第一步那么容易实现，我们需要观念上的转变，以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的，不是吗？诀窍在于边做边学。假如你一直采用表格布局，根本没用过 CSS，也不必急于跟表格布局说再见，你可以先用样式表代替 font 标签。随着你学到的越多，你能做的就越多。好，一起来看看我们需要做哪些事：

• 用CSS定义元素外观

我们在写标识时已经养成习惯，当希望字体大点就用<h1>，希望在前面加个点符号就用<li>。我们总是想<h1>的意思是大的，<li>的意思是圆点，<b>的意思是“加粗文本”。而实际上， <h1>能变成你想要的任何样子，通过CSS，<h1>能变成小的字体，<p>文本能够变成巨大的、粗体的，<li>能够变成一张图片等等。我们不能强迫用结构元素实现表现效果，我们应该使用CSS来确定那些元素的外观。例如，我们可以使原来默认的6级标题可以看起来大小一样：

• 用结构化元素代替无意义的垃圾

许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：

如果我们采用一个无序列表代替会更好：

你或许会说“但是<li>显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。

• 给每个表格和表单加上id

给表格或表单赋予一个唯一的、结构的标记，例如

接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样，不需要对每个<td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记（标记“menu”的id标记），你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善我们这里先列主要的三点，但其中包含的内容和知识点非常多，需要我们逐步学习和掌握，直到最后实现完全采用CSS而不才用任何表格实现布局。

我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。

如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

简单说，网站标准的目的就是：

• 提供最多利益给最多的网站用户
  
• 确保任何网站文挡都能够长期有效
  
• 简化代码、降低建设成本
  
• 让网站更容易使用，能适应更多不同用户和更多网路设备
  
• 当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。

对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。

采用网站标准的好处

对网站浏览者的好处：

• 文件下载与页面显示速度更快；
  
• 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；
  
• 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）
  
• 用户能够通过样式选择定制自己的表现界面
  
• 所有页面都能提供适于打印的版本

对网站所有者的好处：

• 更少的代码和组件，容易维护
  
• 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。
  
• 更容易被搜寻引擎搜索到
  
• 改版方便，不需要变动页面内容
  
• 提供打印版本而不需要复制内容
  
• 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：

1．结构标准语言

（1）XML

XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

（2）XHTML

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言

CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3.行为标准

（1）DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

(2) ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。

　我的博客地址：　　http://fd51.bokee.com