论文部分内容阅读
[摘要]为了适应互联网的发展，给用户更佳的使用体验，越来越多的企业网站开始采用WEB标准技术对站点进行重构。给出基于XHTML+CSS的网站重构一般方法，并通过实例加以解释说明。
[关键词]网站重构 web标准 XHTML CSS 可访问性
中图分类号：TP3 文献标识码：A 文章编号：1671－7597(2008)0510007－01
一、引言
为了适应互联网的发展，给用户更好的使用体验，越来越多的企业网站，诸如微软，阿里巴巴，IBM，联想、IBM、摩托罗拉、SONY、Philips、NIKE等均开始采用WEB标准技术对站点进行重构，以提高其站点跨平台性，高可访性，高解析速度等要求日益增强新要求。网站重构已成为新一代互联网应用有待解决的历史遗留问题。面对目前大量存在的表现与结构的站点该从何处入手进行重构呢？本文将通过16个简单步骤，并以实例进行说明。
二、网站重构的规范
网站重构(Website Reconstruction)是把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点‘变成’让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”
基于web标准的重构需要同时使用结构化的HTML和独立的样式。这就需要将网页在逻辑上分为两个方面：结构（Structure）和表现(Presentation）。对应的标准也分别对应为：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS。
（一）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。
（二）CSS
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使文件更小，页面下载速度更快，站点响应时间越断，维护更容易，可访问性更高，以及更好的设备支持性能。
三、网站重构的方法与步骤
从上世纪80年代末至今，Web标准的发展经历由了HTML1.0，HTML2.0，HTML3，HTML4，HTML4.01，XHTML1.0到目前的XHTML2.0几个鲜明的阶段。然而站点对标准的采纳和应用往往是滞后的或无视的，造成了目前比较普遍的三类情况。
对于遵循html4.01的规范的站点，网站重构相对轻松，只要检查并修改以满足以下十点即可：
（一）为页面添加正确的DOCTYPE
DOCTYPE是document type的缩写，用来告诉浏览器当前页面是由哪个版本的HTML语言编写的，浏览器根据DOCTYPE定义的DTD(文档类型定义)解释页面代码。未指定DOCTYPE的情况下，浏览器自动进入Quirk mode，使用低版本的HTML语言解析当前页面。所以，即便当前页面是使用XHTML 2.0编写的，如果未定义或未正确地定义DOCTYPE，对于浏览器而言与HTML无差。
XHTML1.0提供了三种DOCTYPE可选择：
过渡型（Transitional ）
＜！ＤＯＣＴＹＰＥｈｔｍｌＰＵＢＬＩＣ＂－／／Ｗ３Ｃ／／ＤＴＤＸＨＴＭＬ１．０Ｔｒａｎｓｉｔｉｏｎａｌ／／ＥＮ＂
＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｘｈｔｍｌ１／ＤＴＤ／ｘｈｔｍｌ１－ｔｒａｎｓｉｔｉｏｎａｌ．ｄｔｄ＂＞
严格型（Ｓｔｒｉｃｔ）
＜！ＤＯＣＴＹＰＥｈｔｍｌＰＵＢＬＩＣ＂－／／Ｗ３Ｃ／／ＤＴＤＸＨＴＭＬ１．０Ｓｔｒｉｃｔ／／ＥＮ＂
＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｘｈｔｍｌ１／ＤＴＤ／ｘｈｔｍｌ１－ｓｔｒｉｃｔ．ｄｔｄ＂＞
框架型（Ｆｒａｍｅｓｅｔ）
＜！ＤＯＣＴＹＰＥｈｔｍｌＰＵＢＬＩＣ＂－／／Ｗ３Ｃ／／ＤＴＤＸＨＴＭＬ１．０Ｆｒａｍｅｓｅｔ／／ＥＮ＂
＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｘｈｔｍｌ１／ＤＴＤ／ｘｈｔｍｌ１－ｆｒａｍｅｓｅｔ．ｄｔｄ＂＞
（二）声明编码语言
为了被浏览器正确解释和通过标识校验，所有的ＸＨＴＭＬ文档都必须声明它们所使用的编码语言。
＜ｍｅｔａｈｔｔｐ－ｅｑｕｉｖ＝＂Ｃｏｎｔｅｎｔ－Ｔｙｐｅ＂ｃｏｎｔｅｎｔ＝＂ｔｅｘｔ／ｈｔｍｌ；ｃｈａｒｓｅｔ＝ＧＢ２３１２＂／＞
（三）设定名字空间
名字空间是收集元素类型和属性名字的一个详细的ＤＴＤ，允许页面通过一个在线地址指向来识别它的文档。名字空间的设定只要在＜ｈｔｍｌ＞添加ｘｍｌｎｓ，ｌａｎｇ，ｘｍｌ：ｌａｎｇ三个属性即可。
＜ｈｔｍｌｘｍｌｎｓ＝＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／１９９９／ｘｈｔｍｌ＂ｌａｎｇ＝＂ｅｎ＂ｘｍｌ：ｌａｎｇ＝＂ｅｎ＂＞
（四）用小写字母书改写所有标签
XML是区分大小写的，所以XHTML的标签也是大小写之分。XHTML1.0规定，所有的XHTML元素和属性的名字都必须使用小写，否则W3C校验将认为其无效。
（五）添加alt属性
过去我们在书写＜img＞标签时只关心src属性，而XHTML 1.0规定，除src外，alt也将作为img标签的必备属性，以文字的形式描述图片所要表达的内容，以方便使用纯文本浏览器和屏幕阅读机的用户来。
＜img src="contact_me.jpg"alt="联系我们" /＞
（六）为属性值加引号
在XHTML中，对属性值的书写规范要求更为严格，要所有属性值被加引号。
＜a name="top"＞
（七）确保所有标签关闭
浏览器是宽容的，总在试图正确地显示设计者的意图，即便代码存在这样那样的问题，但这不是在给我们犯错误的理由，在XHTML1.0中，更加强调了这点，对标签的闭合性要求十分严格，要求每一个打开的标签都必须关闭。
＜p＞每一个打开的标签都必须关闭。＜/p＞
＜em＞HTML可以接受不关闭的标，XHTML就不可以。＜/em＞
对于那些在HTML 4.01中规定不需闭合的空标签，XHTML 1.0要求在标签内加/表示结束。
（八）用CSS定义外观
经常会看到某些网页中滥用＜font＞定义文本外观，或使用本该用来定义文档结构的标签定义外观。比如使用＜h1＞使字体变大，使用＜li＞生成文字前的圆点等等。XHTML1.0更为严格的要求我们“使用正确的工具做正确的事情”，用于设置页面结构的标签只用于设置结构，外观由CSS统一控制。
（九）去除垃圾代码
由于对HTML标签本身特性的不熟悉，或未意识到HTML是用来设置页面结构的，许多网页都存在使用HTML标签控制页面表现的情况。这些代码需要进行删除和修改。
（十）给每个表格和表单加上id
给表格或表单赋予一个唯一的、结构的标记。可以通过该标记作为选择器，编写CSS规则。
＜p id="cat"＞
# cat {
Background-colr:maroon;
Margin-left:20%;
Margin-right:20%;
Font-family: serif;
（十一）改善可访问性(Accessibility)和交互设计
为了使网站能为更多的用户服务，特别是存有缺陷的用户，提高网站的可访问性就显得格外重要。W3C建立了Web Accessibility Initiative（WAI），给网站建造者提供实现可访问性的方法和策略（http://www.w3.
Org/WAI/GL/）。
对于那些版本更低的页面，则还需要检查以下内容：
（十二）页面代码必须包含在＜html＞＜/html＞间
虽然在低版本的HTML语言中，页面内容不包含在html元素中也能够显示，但XHTML1.0规定了更为严格的书写规范，网页的所有内容，包括页面内容与head内的元素，必须全部被html包含。
（十三）＜html＞元素中只能直接包含＜head＞元素和＜body＞元素
XHTML1.0规定除了head和body以外的所有元素，不得直接包含在html元素内，也就是说，其他元素要么包含在head内，要么包含在body内。
（十四）＜title＞元素，＜meta＞元素和＜style＞元素必须包含在＜head＞元素内
XHTML1.0规定＜title＞元素，＜meta＞元素和＜style＞元素必须包含在＜head＞元素内，不得出现在其他位置。
(十五)＜body＞元素内只能直接包含区块型标签，如＜h1＞＜p＞＜blockquote＞
所谓区块型标签即独占一个自然段落的标签，如h1，h2，h3，h4，h5，p，blockquote etc.，XHTML1.0规定body内只能直接包含区块型标签，也就是说，对于非成一段落的标签，必须包含在区块型标签内，才能保存在body内。
（十六）单行型标签（如＜a＞＜img＞＜em＞＜q＞)
必须包含在区块型标签内
所谓单行型标签即不引起回车换行的标签，如a，img，q，em， etc.，XHTML1.0规定单行型标签必须包含区块型标签内，也就是说，以上标签必须包含在区块型标签内。
四、总结
本文对基于XHTML+CSS的网站重构技术与方法做了简单介绍，总结以HTML4.01为基础的11步重建法，以及以HTML3.0为基础的16步重建法。当然，要实现一套完整的站点重构还要完成许多其他方面的工作有待完成。不仅仅要掌握XHTML与CSS的语法过，还要根据文档的内容合理地设置文档结构，巧妙地利用CSS实现各种分栏，浮动，定位，特效。
参考文献：
［1］Jeffrey Zeldman. 网站重构－应用web标准进行设计［M］傅捷、王守义、祝军译，北京：电子工业出版社.
［2］曹文艳、贾艳梅， Web (XHTML +CSS)标准浅议. 科技咨询导报. 2007 No.18. P37.
[关键词]网站重构 web标准 XHTML CSS 可访问性
中图分类号：TP3 文献标识码：A 文章编号：1671－7597(2008)0510007－01
一、引言
为了适应互联网的发展，给用户更好的使用体验，越来越多的企业网站，诸如微软，阿里巴巴，IBM，联想、IBM、摩托罗拉、SONY、Philips、NIKE等均开始采用WEB标准技术对站点进行重构，以提高其站点跨平台性，高可访性，高解析速度等要求日益增强新要求。网站重构已成为新一代互联网应用有待解决的历史遗留问题。面对目前大量存在的表现与结构的站点该从何处入手进行重构呢？本文将通过16个简单步骤，并以实例进行说明。
二、网站重构的规范
网站重构(Website Reconstruction)是把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点‘变成’让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”
基于web标准的重构需要同时使用结构化的HTML和独立的样式。这就需要将网页在逻辑上分为两个方面：结构（Structure）和表现(Presentation）。对应的标准也分别对应为：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS。
（一）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。
（二）CSS
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使文件更小，页面下载速度更快，站点响应时间越断，维护更容易，可访问性更高，以及更好的设备支持性能。
三、网站重构的方法与步骤
从上世纪80年代末至今，Web标准的发展经历由了HTML1.0，HTML2.0，HTML3，HTML4，HTML4.01，XHTML1.0到目前的XHTML2.0几个鲜明的阶段。然而站点对标准的采纳和应用往往是滞后的或无视的，造成了目前比较普遍的三类情况。
对于遵循html4.01的规范的站点，网站重构相对轻松，只要检查并修改以满足以下十点即可：
（一）为页面添加正确的DOCTYPE
DOCTYPE是document type的缩写，用来告诉浏览器当前页面是由哪个版本的HTML语言编写的，浏览器根据DOCTYPE定义的DTD(文档类型定义)解释页面代码。未指定DOCTYPE的情况下，浏览器自动进入Quirk mode，使用低版本的HTML语言解析当前页面。所以，即便当前页面是使用XHTML 2.0编写的，如果未定义或未正确地定义DOCTYPE，对于浏览器而言与HTML无差。
XHTML1.0提供了三种DOCTYPE可选择：
过渡型（Transitional ）
＜！ＤＯＣＴＹＰＥｈｔｍｌＰＵＢＬＩＣ＂－／／Ｗ３Ｃ／／ＤＴＤＸＨＴＭＬ１．０Ｔｒａｎｓｉｔｉｏｎａｌ／／ＥＮ＂
＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｘｈｔｍｌ１／ＤＴＤ／ｘｈｔｍｌ１－ｔｒａｎｓｉｔｉｏｎａｌ．ｄｔｄ＂＞
严格型（Ｓｔｒｉｃｔ）
＜！ＤＯＣＴＹＰＥｈｔｍｌＰＵＢＬＩＣ＂－／／Ｗ３Ｃ／／ＤＴＤＸＨＴＭＬ１．０Ｓｔｒｉｃｔ／／ＥＮ＂
＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｘｈｔｍｌ１／ＤＴＤ／ｘｈｔｍｌ１－ｓｔｒｉｃｔ．ｄｔｄ＂＞
框架型（Ｆｒａｍｅｓｅｔ）
＜！ＤＯＣＴＹＰＥｈｔｍｌＰＵＢＬＩＣ＂－／／Ｗ３Ｃ／／ＤＴＤＸＨＴＭＬ１．０Ｆｒａｍｅｓｅｔ／／ＥＮ＂
＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｘｈｔｍｌ１／ＤＴＤ／ｘｈｔｍｌ１－ｆｒａｍｅｓｅｔ．ｄｔｄ＂＞
（二）声明编码语言
为了被浏览器正确解释和通过标识校验，所有的ＸＨＴＭＬ文档都必须声明它们所使用的编码语言。
＜ｍｅｔａｈｔｔｐ－ｅｑｕｉｖ＝＂Ｃｏｎｔｅｎｔ－Ｔｙｐｅ＂ｃｏｎｔｅｎｔ＝＂ｔｅｘｔ／ｈｔｍｌ；ｃｈａｒｓｅｔ＝ＧＢ２３１２＂／＞
（三）设定名字空间
名字空间是收集元素类型和属性名字的一个详细的ＤＴＤ，允许页面通过一个在线地址指向来识别它的文档。名字空间的设定只要在＜ｈｔｍｌ＞添加ｘｍｌｎｓ，ｌａｎｇ，ｘｍｌ：ｌａｎｇ三个属性即可。
＜ｈｔｍｌｘｍｌｎｓ＝＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／１９９９／ｘｈｔｍｌ＂ｌａｎｇ＝＂ｅｎ＂ｘｍｌ：ｌａｎｇ＝＂ｅｎ＂＞
（四）用小写字母书改写所有标签
XML是区分大小写的，所以XHTML的标签也是大小写之分。XHTML1.0规定，所有的XHTML元素和属性的名字都必须使用小写，否则W3C校验将认为其无效。
（五）添加alt属性
过去我们在书写＜img＞标签时只关心src属性，而XHTML 1.0规定，除src外，alt也将作为img标签的必备属性，以文字的形式描述图片所要表达的内容，以方便使用纯文本浏览器和屏幕阅读机的用户来。
＜img src="contact_me.jpg"alt="联系我们" /＞
（六）为属性值加引号
在XHTML中，对属性值的书写规范要求更为严格，要所有属性值被加引号。
＜a name="top"＞
（七）确保所有标签关闭
浏览器是宽容的，总在试图正确地显示设计者的意图，即便代码存在这样那样的问题，但这不是在给我们犯错误的理由，在XHTML1.0中，更加强调了这点，对标签的闭合性要求十分严格，要求每一个打开的标签都必须关闭。
＜p＞每一个打开的标签都必须关闭。＜/p＞
＜em＞HTML可以接受不关闭的标，XHTML就不可以。＜/em＞
对于那些在HTML 4.01中规定不需闭合的空标签，XHTML 1.0要求在标签内加/表示结束。
（八）用CSS定义外观
经常会看到某些网页中滥用＜font＞定义文本外观，或使用本该用来定义文档结构的标签定义外观。比如使用＜h1＞使字体变大，使用＜li＞生成文字前的圆点等等。XHTML1.0更为严格的要求我们“使用正确的工具做正确的事情”，用于设置页面结构的标签只用于设置结构，外观由CSS统一控制。
（九）去除垃圾代码
由于对HTML标签本身特性的不熟悉，或未意识到HTML是用来设置页面结构的，许多网页都存在使用HTML标签控制页面表现的情况。这些代码需要进行删除和修改。
（十）给每个表格和表单加上id
给表格或表单赋予一个唯一的、结构的标记。可以通过该标记作为选择器，编写CSS规则。
＜p id="cat"＞
# cat {
Background-colr:maroon;
Margin-left:20%;
Margin-right:20%;
Font-family: serif;
（十一）改善可访问性(Accessibility)和交互设计
为了使网站能为更多的用户服务，特别是存有缺陷的用户，提高网站的可访问性就显得格外重要。W3C建立了Web Accessibility Initiative（WAI），给网站建造者提供实现可访问性的方法和策略（http://www.w3.
Org/WAI/GL/）。
对于那些版本更低的页面，则还需要检查以下内容：
（十二）页面代码必须包含在＜html＞＜/html＞间
虽然在低版本的HTML语言中，页面内容不包含在html元素中也能够显示，但XHTML1.0规定了更为严格的书写规范，网页的所有内容，包括页面内容与head内的元素，必须全部被html包含。
（十三）＜html＞元素中只能直接包含＜head＞元素和＜body＞元素
XHTML1.0规定除了head和body以外的所有元素，不得直接包含在html元素内，也就是说，其他元素要么包含在head内，要么包含在body内。
（十四）＜title＞元素，＜meta＞元素和＜style＞元素必须包含在＜head＞元素内
XHTML1.0规定＜title＞元素，＜meta＞元素和＜style＞元素必须包含在＜head＞元素内，不得出现在其他位置。
(十五)＜body＞元素内只能直接包含区块型标签，如＜h1＞＜p＞＜blockquote＞
所谓区块型标签即独占一个自然段落的标签，如h1，h2，h3，h4，h5，p，blockquote etc.，XHTML1.0规定body内只能直接包含区块型标签，也就是说，对于非成一段落的标签，必须包含在区块型标签内，才能保存在body内。
（十六）单行型标签（如＜a＞＜img＞＜em＞＜q＞)
必须包含在区块型标签内
所谓单行型标签即不引起回车换行的标签，如a，img，q，em， etc.，XHTML1.0规定单行型标签必须包含区块型标签内，也就是说，以上标签必须包含在区块型标签内。
四、总结
本文对基于XHTML+CSS的网站重构技术与方法做了简单介绍，总结以HTML4.01为基础的11步重建法，以及以HTML3.0为基础的16步重建法。当然，要实现一套完整的站点重构还要完成许多其他方面的工作有待完成。不仅仅要掌握XHTML与CSS的语法过，还要根据文档的内容合理地设置文档结构，巧妙地利用CSS实现各种分栏，浮动，定位，特效。
参考文献：
［1］Jeffrey Zeldman. 网站重构－应用web标准进行设计［M］傅捷、王守义、祝军译，北京：电子工业出版社.
［2］曹文艳、贾艳梅， Web (XHTML +CSS)标准浅议. 科技咨询导报. 2007 No.18. P37.