WEB标准和网站重构Word下载.docx

1、结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：美国的多数技术性站点都开始向Web标准转型。许多大型站点也已经使用新方法重构。例如就在最近（2005年1月），微软公司的msn站点使用XHTML Strict+CSS完全重写。Web标准，近年来在国外已经得到了很大的重视。尤其是美国颁

2、布了501号法案以后，皆要求站点必须为残障人士提供与普通人士相当的可访问性支持。要知道，传统的布局方法是很难达到这样的要求的。什么是WEB标准:结构标准语言XHTML是The Extensible HyperTextMarkup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http: /www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML

3、的目的就是实现HTML向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的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。（1）XML （2）XHTML 3表现标准语言CS

4、S是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http:/www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。4行为标准（1）DOMDOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http:/www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，

5、DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。（2） ECMAScript JavaScript的标准化版本ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript262（http:/www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。名词解释：XHTML问：什么是XHTML?答：XHTM

6、L是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势，就出现了这样一个问题：如果我们有了XML，我们是否依然需要HTML?为了回答这个问题，1998年5月我们在旧金山开了两天的工作会议，会议的结论是：需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。为什么XHTML 1.0相对HTML 4.0独立发展?并不是这样。XHTML恰恰就是HTML 4.0的重新组织，（确切的说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。） 它们在XML里的解释会有一

7、些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续。XHTML 1.0如何实现XML标准?XHTML就是一种XML应用。它采用XML的DTD文件格式定义，并运行在支持XML的系统上。这里要感谢XML的Namespaces功能，浏览器制造商不需要再创造新的私有标签（tags），他们只需要在XHTML代码里包含XML代码片段，或者XML代码里包含XHTML代码片段。2000年底，国际W3C（World Wide Web Consortium）组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语

8、言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton 回答的关于XHTML的常见基础问题。XMLXML即可扩展标记语言（eXtensibleMarkup Language）。标记是指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如“HTML”，也可以使用象XML这样由相关人士自由决定的标记语言，这就是语言的“可扩展性”。XML是从SGML中简化修改出来的。几个容易混淆的概念：1.XML并不是

9、标记语言。它只是用来创造标记语言（比如HTML）的元语言。XML和HTML是不一样的，它的用处途比HTML广泛得多。2.XML并不是HTML的替代产品。XML不是HTML的升级，它只是HTML的补充，为HTML扩展更多功能。我们仍将在较长的一段时间里继续使用HTML。（但值得注意的是HTML的升级版本XHTML的确正在向适应XML靠拢。） CSSCSS是英语Cascading Style Sheets（层叠样式表）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。它的定义是由W3C来制定的。重新检视：在WEB标准中构成网页的三个主要部分：结构、表现、行为表现层和结构层分离的Web

10、标准设计符合“WEB标准”的浏览器（现状）是指该浏览器能够理解和支持HTML和XHTML，Cascading Style Sheets（CSS），ECMAScript 及W3C Document Object Model（DOM）标准。所有这些形成的标准，允许我们超越表现层的标记、不兼容的脚本语言，以及它们所造成的永久的淘汰怪圈。主流的“新版本浏览器”包括下面列出的这些以及它们的更新版本:Mozilla（Firefox） 1.0和更高版本Netscape Navigator 6及其更高版本Windows系统下的IE 6及其更高版本Macintosh系统下的IE 5及其更高版本Opera 7新版

11、本的web浏览器的发布，使得对CSS的支持得到了加强与扩展，尽管还没有达到它应有的水平。虽然浏览器的开发商对CSS支持的步伐很缓慢，但是现在已经有许多浏览器选择了支持CSS，此时，不应该再有任何理由再像以前那样使用HTML了，应该让它恢复本来的面貌：去描述文档的结构，而不是它的表现。正因为此，我们现在才能够用CSS来达到其本来的目的了。创建符合WEB标准的网站已经成为一种可能按照WEB标准建设网站的目的符合WEB标准的网站可以：在图形桌面浏览器上达到更精确的控制、定位和排版，允许用户使用适合他们的表达方式进行编辑。可以开发工作在多浏览器和平台的复杂交互行为。遵守可访问性原则和指南，而不需要牺牲

12、美观、性能或者精巧性。以前重新设计网站需要几天或者几星期，现在只需要几小时，从而减少成本和避免工作烦恼。支持多种浏览器，从而不需要争论和考虑多版本的成本，很少或根本就不需要代码分支。支持非传统的设备，从无线设备到孩子们想到的、可以上网的智能手机，以及盲人阅读器、屏幕阅读器等残疾人士使用的设备，都不需要再争论开发特殊版本的费用。为任何网页提交适合打印的版本，不需要建立通常的“专门打印页”或者依赖昂贵的私人出版系统来建立类似的版本。通过把样式从结构、行为中分离，以及严格的文档结构，易于在高级发布流程中重新设计Web文档。从老的Web语言HTML转换到更强大的以XML为基础的置标语言。可以在当前符合

13、标准的浏览器和平台上确保正确地工作，也可以在老浏览器中工作。保证这样设计的站点将能继续工作在将来的浏览器和设备上，包括那些还没有发明和仍在想像中的设备，这是向后兼容的许诺。未采用CSS，大量使用HTML进行CSS，但是未遵循HTML结构化标准的站点。让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离离。开发工程师与使用表格相比，有这么一些优势.UI设计师定位、布局，或者虽然已经采用为什么要对网站进行重构？使页面加载得更快速降低带宽带来的费用节约成本让你在修改设计时更有效率而代价更低帮助你的整个站点保持视觉的一致性更利于

14、搜索引擎的检索（符合SEO的规范）令站点更容易被各种浏览器和用户访问（包括手机、PDA和残障人士使用的文字浏览器）移动互联：中国的PC保有量约7000万台，但手机保有量已经接近3亿部兼容不容忽视的Mozilla 系浏览器（Firefox 份额）在世界上越来越多人采用Web 标准时，它还能提高你的职场竞争实力（事实上也就是降低失业的风险）。比较优势：非常节省人力且大幅提高效率把页面中的外观标记去除以后，重新设计现有的站点和内容将变得非常节省人力（同时便宜得多）。如果想改变站点的输出，你只需要改动一下样式表就行了，而完全不必改动页面本身。以XX现有的CMS为例：改版需要重新设计模板，然后利用新的模

15、板对所有页面进行重新生成，发布并上传成千上万个文件。采用WEB标准之后，改版只需要修改一个CSS文件，无需重新发布、上传上成千上万个文件。节约带宽且页面下载的更快运用Web 标准来缩减网页文件的大小，这样用户将不必访问每页都下载一次外观的数据。控制输出效果的样式表（.css 文件）是由用户的浏览器自动缓存的。缩减文件大小意味着更快地载入和更少的流量费用。网站首页大小采用WEB标准后保守估计减少10k10K x 300,000,000pv =3,000,000,000k = 2861G运用Web 标准还能使保持整个站点的视觉一致性变得非常简单。因为页面使用同样的CSS 文档来进行排版，所以它们会

16、被格式化为相同的风格。这样加深了你的站点给人的印象加深了你的站点给人的印象还能使它更便于使用（user friendly）。一次编辑，到处应用，人人皆然运用Web 标准使得你的站点对残疾人和使用手机或PDA 的Web 浏览者更具亲和力。使用读屏器*的访问者（或者连接速度比较慢的访问者） 不希望在下载了数不尽的表格单元和分隔图片后才获得我们页面的实际内容。换句话说，把内容与格式分开使得你的内容与设备无关。注：读屏器（screen reader）是盲人等无法观看显示器的用户使用的一种把当前屏幕上的内容朗读出来的设备。保持网页的亲和力、尽量减少它的标记、并合理的运用网页头部的标签同样会帮助你提高搜索

17、引擎上的排名（Rank）。降低代码/内容比、在头部标签中加入关键字，把网页顶部的的标志图片改为文本这些行为都可以帮助你的站点在搜索引擎中获得更好的搜索结果。SEO - 另外一项很有意思的工作。矫枉不必过正：仍然可以运用表格你仍然可以在需要时运用表格，别用得太多就行了这对于那些固执于老式的第四代浏览器的浏览者会比较好接受，而在直到他们回心转意之前，其他人至少也能接受。运用表格的技巧：后面讲述传统WEB的弊端：表格带来的问题把格式数据混入你的内容中。这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息。带宽并非免费。这使得重新设计现有的站点和内容极为消耗劳力（且昂贵）。这还

18、使我们保持整个站点的视觉的一致性极难，花费也极高。基于表格的页面还大大降低了它对残疾人和用手机或PDA 浏览者的亲和力。对网站进行重构需要具备那些知识策划人员必须提出网页的结构UI设计师需要对所设计的内容、结构进行充分的理解程序开发人员也需要了解WEB标准的知识具备HTML基础现在开始学习CSS如何进行网站重构？结构化HTML DEMOHTML不仅仅只在电脑屏幕上阅读。你用photoshop 精心设计的画面可能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。首先要学习什么是“结构（structural）”，一些作家也

19、称之为“语义（semantic）。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：标志和站点名称主页面内容站点导航（主菜单） 子菜单搜索框功能区（例如购物车、收银台） 页脚（版权和有关法律声明） 我们通常采用DIV元素（TIPS:可以把DIV理解为“盒子”或者“容器”）来将这些结构定义出来：div id=head contentglobalnavsubnavsearchshopfoot这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的I

20、D在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素-标题、段落、图片、表格、列表等等。根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。例子：表格是CSS布局的对比.htm一个看起来不错的表格过渡性的设计使用margin 和padding 来代替多余的表格单元和间隔GIF。使用link 和import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。link href=basic.css rel=stylesheet t

21、ype=text/cssstyle type= media=screen!-import url（modern.css） screen;/style一些实例：Santa Cruz Montessori School http:/www.scms.org/ycc.htmlk10k Fox Searchlight Pictures 想了解更多关于过渡性设计的信息，请阅读Eric Meyer on CSS 的第一章。和Jeffrey Zeldman 的Designing with Web Standards 的大部分内容。CSS 排版：并没有想象的难编写CSS 代码很简单。每条CSS 规则都有一个选

22、择符和一个声明。声明是由属性名（property）和属性值（value）组成的。属性名一般使用连字符（-）连接。body margin:0; padding:0.related float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue#footer color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0大部分用户使用的浏览器都有很好的CSS 支持，当然它们也有个各自的脾性，不过只要你习惯了它

23、们，就能够处理得很好。结构化标记：所写即所想，所想即所写即便书写CSS 很简单，使用CSS 来排版却真的需要一种和我们以往有些不同的思维方式思维方式。我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别信息的类别和信息的结构信息的结构。我们用标记来标示最重要的头条；次一级的条目则用来标记，以此类推；而段落则放在标记中。这就是我们称之为“结构标记”或“语义标记”的东西。你的内容将不放在表格和表格元素中，取代它们的是div 元素。还要给你的div 元素安排一个id 或class，不过这是为了描述它们的内容或功能，而非它们的外观。避免ed 与eakfast 标记且想想为何

24、你希望某个对象按特定的方式出现；它有什么含义？你的标记能够也必须表达意思，即便对于那些无法观看页面的人来说也是如此。语义性的标记使得你的页面对一切受众都更有亲和力，这还包括了搜索引擎。当你把某个对象设为斜体时，大概要么就是想强调它，要么是想引用某个书中标题吧？如果是前者，应该用；如果是后者，其实得用如果某个对象被标记为粗体，事实上它应该被标记的是，如果你希望在某处添加一个换行，这大概是开始了一个新的开头。如果不是开头，会不会是某种在你的站点中出现过的class （类型）？在上面两种情况下，你都应该用CSS 替换.foodisplay:block如果希望了解更多，请阅读Bed and BReak

25、fastmarkup （B&BR），Tantek?elik 作品。如何用css做导航条DEMO当然，CSS 总会有些事情做得不如表格好。略瑕不掩瑜从玩弄表格技巧到遵循Web 标准：通盘考虑检查一下，找出会因为移植而受益的页面和分支。自然而然地，从首页、新产品通告之类的页面开始检查会比较好。分析你的站点的内容分别属于下面的哪些类型：产品信息价格信息公司信息报表服务信息投资信息购物篮用户论坛等等首先，你得考虑好一个移植策略。是一口气把整个站点移植了呢，还是逐个部分地一步完成？分解你的页面，找出逻辑结构如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。主导航条子导航条页眉与页脚