WEB标准和网站重构.docx
- 文档编号：5330398
- 上传时间：2022-12-15
- 格式：DOCX
- 页数：14
- 大小：35.96KB
WEB标准和网站重构.docx
《WEB标准和网站重构.docx》由会员分享，可在线阅读，更多相关《WEB标准和网站重构.docx（14页珍藏版）》请在冰豆网上搜索。
WEB标准和网站重构
《WEB标准和网站重构》
基础知识：
什么是W3C？
W3C（WorldWideWebConsortium，http:
//www.w3.org/）创建于1994年，研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。
大约500名会员组织加入这个团体，它的主任TimBerners-Lee（http:
//www.w3.org/People/Berners-Lee/）在1989年发明了Web。
W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（DocumentObjectModel）。
多年以来，W3C把那些没有被部分会员公司（如Netscape和Microsoft）严格执行的规范定义为“推荐”（Recommendations）。
自1998年开始，“Web标准组织”（www.webstandards.org）将W3C的“推荐”重新定义为“Web标准”，这是一种商业手法，目的是让制造商重视并重新定位规范，在新的浏览器和网络设备中完全地支持那些规范。
其他的标准组织包括EuropeanComputerManufacturersAssociation（ECMA）将ECMAScript定义为“标准JavaScript”。
两个问题
当今过时的网站设计思路的始作俑者
大概1997年的时候，DavidSiegel出版了一本里程碑式的书《CreatingKillerWebSites》，它在当时有限的浏览器功能和W3C标准之下，设计出非常华丽的网页效果。
（Netscape2和3）
这些效果是如此漂亮，以至于到今天，它们还是最流行的网页排版方式。
用一句话概括这本书：
用表格和分隔GIF可以设计出魔鬼般迷人的站点。
WEB标准（WebStandards）的历史
在上个世纪90年代后期，当互联网和web逐渐成为主流时，Web浏览器（包括当时的Netscape4及以下版本，IE4及以下版本。
行话叫Version4浏览器）的开发商还没有完全的支持CSS（层叠式样式表，对于Web开发人员来说，他们可以用CSS来控制Html文档的表现）。
考虑到CSS1是在1996年制定的，而CSS2是在1998年才制定的，所以这种对CSS支持的不足也是可以理解的。
由于浏览器对CSS的支持不够，再加上一些平面设计师的要求（这些要求与他们经常与印刷品打交道有关）导致他们为了控制网页的视觉表现而滥用HTML。
一个典型的例子就是，当设计师可以用border="0"来隐藏表格的边框时，用隐藏表格来控制布局的方法同样被使用。
另一个例子是对“transparent”（透明）的使用，同样是不可见，他们却使用空白的GIF图片来控制布局。
由于HTML从来就没被用来控制一个文档的表现，导致大量混乱代码、非法代码、浏览器的专用代码和属性就被随意的使用了。
“校验”这个词也很少被人问津。
对于这些代码来说，标签大杂烩（tagsoup）是一个很形象的名字。
什么是“WEB标准”？
<1>
网站标准不是某一个标准，而是一系列标准的集合合。
网页主要由三部分组成：
结构（Structure）、表现（Presentation）和行为（Behavior）。
对应的标准也分三方面：
结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。
这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。
我们来简单了解一下这些标准：
美国的多数技术性站点都开始向Web标准转型。
许多大型站点也已经使用新方法重构。
例如就在最近（2005年1月），微软公司的msn站点使用XHTMLStrict+CSS完全重写。
Web标准，近年来在国外已经得到了很大的重视。
尤其是美国颁布了501号法案以后，皆要求站点必须为残障人士提供与普通人士相当的可访问性支持。
要知道，传统的布局方法是很难达到这样的要求的。
什么是WEB标准<2>:
结构标准语言
XHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。
目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http:
//www.w3.org/TR/xhtml1）。
XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。
因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。
简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
XML是TheExtensibleMarkupLanguage（可扩展标识语言）的简写。
目前推荐遵循的是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
什么是WEB标准<3>表现标准语言
CSS是CascadingStyleSheets层叠样式表的缩写。
目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http:
//www.w3.org/TR/CSS2/）。
W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。
纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
什么是WEB标准<4>:
行为标准
（1）DOM
DOM是DocumentObjectModel文档对象模型的缩写。
根据W3CDOM规范（http:
//www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。
简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
（2）ECMAScriptJavaScript的标准化版本
ECMAScript是ECMA（EuropeanComputerManufacturersAssociation）制定的标准脚本语言（JAVAScript）。
目前推荐遵循的是ECMAScript262（http:
//www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。
名词解释：
XHTML
问：
什么是XHTML?
答：
XHTML是一种为适应XML而重新改造的HTML。
当XML越来越成为一种趋势，就出现了这样一个问题：
如果我们有了XML，我们是否依然需要HTML?
为了回答这个问题，1998年5月我们在旧金山开了两天的工作会议，会议的结论是：
需要。
我们依然需要使用HTML。
因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。
问：
为什么XHTML1.0相对HTML4.0独立发展?
答：
并不是这样。
XHTML恰恰就是HTML4.0的重新组织，（确切的说它是HTML4.01，是一个修正版本的HTML4.0，只不过以XHTML1.0命名发行。
）它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML4.0基础上的延续。
问：
XHTML1.0如何实现XML标准?
答：
XHTML就是一种XML应用。
它采用XML的DTD文件格式定义，并运行在支持XML的系统上。
这里要感谢XML的Namespaces功能，浏览器制造商不需要再创造新的私有标签（tags），他们只需要在XHTML代码里包含XML代码片段，或者XML代码里包含XHTML代码片段。
2000年底，国际W3C（WorldWideWebConsortium）组织公布发行了XHTML1.0版本。
XHTML1.0是一种在HTML4.0基础上优化和改进的的新语言，目的是基于XML应用。
XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。
下面是W3C的HTML工作组主席StevenPemberton回答的关于XHTML的常见基础问题。
名词解释：
XML
XML即可扩展标记语言（eXtensibleMarkupLanguage）。
标记是指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。
如何定义这些标记，既可以选择国际通用的标记语言，比如“HTML”，也可以使用象XML这样由相关人士自由决定的标记语言，这就是语言的“可扩展性”。
XML是从SGML中简化修改出来的。
几个容易混淆的概念：
1.XML并不是标记语言。
它只是用来创造标记语言（比如HTML）的元语言。
XML和HTML是不一样的，它的用处途比HTML广泛得多。
2.XML并不是HTML的替代产品。
XML不是HTML的升级，它只是HTML的补充，为HTML扩展更多功能。
我们仍将在较长的一段时间里继续使用HTML。
（但值得注意的是HTML的升级版本XHTML的确正在向适应XML靠拢。
）
名词解释：
CSS
CSS是英语CascadingStyleSheets（层叠样式表）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。
它的定义是由W3C来制定的。
重新检视：
在WEB标准中构成网页的三个主要部分：
结构、表现、行为
表现层和结构层分离的Web标准设计
符合“WEB标准”的浏览器（现状）
是指该浏览器能够理解和支持HTML和XHTML，CascadingStyleSheets（CSS），ECMAScript及W3CDocumentObjectModel（DOM）标准。
所有这些形成的标准，允许我们超越表现层的标记、不兼容的脚本语言，以及它们所造成的永久的淘汰怪圈。
主流的“新版本浏览器”包括下面列出的这些以及它们的更新版本:
Mozilla（Firefox）1.0和更高版本
NetscapeNavigator6及其更高版本
Windows系统下的IE6及其更高版本
Macintosh系统下的IE5及其更高版本
Opera7
新版本的web浏览器的发布，使得对CSS的支持得到了加强与扩展，尽管还没有达到它应有的水平。
虽然浏览器的开发商对CSS支持的步伐很缓慢，但是现在已经有许多浏览器选择了支持CSS，此时，不应该再有任何理由再像以前那样使用HTML了，应该让它恢复本来的面貌：
去描述文档的结构，而不是它的表现。
正因为此，我们现在才能够用CSS来达到其本来的目的了。
创建符合WEB标准的网站已经成为一种可能
按照WEB标准建设网站的目的
符合WEB标准的网站可以：
—在图形桌面浏览器上达到更精确的控制、定位和排版，允许用户使用适合他们的表达方式进行编辑。
—可以开发工作在多浏览器和平台的复杂交互行为。
—遵守可访问性原则和指南，而不需要牺牲美观、性能或者精巧性。
—以前重新设计网站需要几天或者几星期，现在只需要几小时，从而减少成本和避免工作烦恼。
—支持多种浏览器，从而不需要争论和考虑多版本的成本，很少或根本就不需要代码分支。
—支持非传统的设备，从无线设备到孩子们想到的、可以上网的智能手机，以及盲人阅读器、屏幕阅读器等残疾人士使用的设备，都不需要再争论开发特殊版本的费用。
—为任何网页提交适合打印的版本，不需要建立通常的“专门打印页”或者依赖昂贵的私人出版系统来建立类似的版本。
—通过把样式从结构、行为中分离，以及严格的文档结构，易于在高级发布流程中重新设计Web文档。
—从老的Web语言HTML转换到更强大的以XML为基础的置标语言。
—可以在当前符合标准的浏览器和平台上确保正确地工作，也可以在老浏览器中工作。
—保证这样设计的站点将能继续工作在将来的浏览器和设备上，包括那些还没有发明和仍在想像中的设备，这是向后兼容的许诺。
未采用CSS，大量使用HTML进行
CSS，但是未遵循HTML结构化标
准的站点。
让标记回归标记的原本意义。
通过在HTML文档中使用结构化的
标记以及用CSS控制页面表现，
使页面的实际内容与它们呈现的
格式相分离离。
开发工程师
与使用表格相比，有这么一些优势....
UI设计师
定位、布局，或者虽然已经采用
为什么要对网站进行重构？
使页面加载得更快速
降低带宽带来的费用－节约成本
让你在修改设计时更有效率而代价更低
帮助你的整个站点保持视觉的一致性
更利于搜索引擎的检索（符合SEO的规范）
令站点更容易被各种浏览器和用户访问（包括手机、PDA和残障人士使用的文字浏览器）移动互联：
中国的PC保有量约7000万台，但手机保有量已经接近3亿部
兼容不容忽视的Mozilla系浏览器（Firefox份额）
在世界上越来越多人采用Web标准时，它还能提高你的职场竞争实力（事实上也就是降低失业的风险）。
比较优势：
非常节省人力且大幅提高效率
把页面中的外观标记去除以后，重新设计现有的站点和内容将变得非常节省人力（同时便宜得多）。
如果想改变站点的输出，你只需要改动一下样式表就行了，而完全不必改动页面本身。
以XX现有的CMS为例：
–改版需要重新设计模板，然后利用新的模板对所有页面进行重新生成，发布并上传成千上万个文件。
–采用WEB标准之后，改版只需要修改一个CSS文件，无需重新发布、上传上成千上万个文件。
比较优势：
节约带宽且页面下载的更快
运用Web标准来缩减网页文件的大小，这样用户将不必访问每页都下载一次外观的数据。
控制输出效果的样式表（.css文件）是由用户的浏览器自动缓存的。
缩减文件大小意味着更快地载入和更少的流量费用。
网站首页大小
采用WEB标准后保守估计减少10k
10Kx300,000,000pv=3,000,000,000k=2861G
比较优势：
帮助你的整个站点保持视觉的一致性
运用Web标准还能使保持整个站点的视觉一致性变得非常简单。
因为页面使用同样的CSS文档来进行排版，所以它们会被格式化为相同的风格。
这样加深了你的站点给人的印象加深了你的站点给人的印象还能使它更便于使用（userfriendly）。
比较优势：
一次编辑，到处应用，人人皆然
运用Web标准使得你的站点对残疾人和使用手机或PDA的Web浏览者更具亲和力。
使用读屏器*的访问者（或者连接速度比较慢的访问者）不希望在下载了数不尽的表格单元和分隔图片后才获得我们页面的实际内容。
换句话说，把内容与格式分开使得你的内容与设备无关。
注：
读屏器（screenreader）是盲人等无法观看显示器的用户使用的一种把当前屏幕上的内容朗读出来的设备。
比较优势：
更利于搜索引擎的检索（符合SEO的规范）
保持网页的亲和力、尽量减少它的标记、并合理的运用网页头部的标签同样会帮助你提高搜索引擎上的排名（Rank）。
降低代码/内容比、在头部标签中加入关键字，把网页顶部的的标志图片改为文本……这些行为都可以帮助你的站点在搜索引擎中获得更好的搜索结果。
SEO->另外一项很有意思的工作。
矫枉不必过正：
仍然可以运用表格
你仍然可以在需要时运用表格，别用得太多就行了
这对于那些固执于老式的第四代浏览器的浏览者会比较好接受，而在直到他们回心转意之前，其他人至少也能接受。
运用表格的技巧：
后面讲述
传统WEB的弊端：
表格带来的问题
把格式数据混入你的内容中。
这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息。
带宽并非免费。
这使得重新设计现有的站点和内容极为消耗劳力（且昂贵）。
这还使我们保持整个站点的视觉的一致性极难，花费也极高。
基于表格的页面还大大降低了它对残疾人和用手机或PDA浏览者的亲和力。
对网站进行重构需要具备那些知识
策划人员必须提出网页的结构
UI设计师需要对所设计的内容、结构进行充分的理解
程序开发人员也需要了解WEB标准的知识
具备HTML基础
现在开始学习CSS
如何进行网站重构？
结构化HTML<1>
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。
然后我们用Photoshop或者Fireworks画出来、切割成小图。
最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局（是CSS-friendly的），你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
外观并不是最重要的。
一个结构良好的HTML页面可以任何外观表现出来，CSSZenGarden（）是一个典型的例子。
CSSZenGarden帮助我们最终认识到CSS的强大力量。
->DEMO
HTML不仅仅只在电脑屏幕上阅读。
你用photoshop精心设计的画面可能显示在PDA、移动电话和屏幕阅读机上。
但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
结构化HTML<2>
首先要学习什么是“结构（structural）”，一些作家也称之为“语义（semantic）"。
这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
–标志和站点名称
–主页面内容
–站点导航（主菜单）
–子菜单
–搜索框
–功能区（例如购物车、收银台）
–页脚（版权和有关法律声明）
我们通常采用DIV元素（TIPS:
可以把DIV理解为“盒子”或者“容器”）来将这些结构定义出来：
如何打造酒店企业文化2刘田江doc.docx
