WEB标准和网站重构Word下载.docx
《WEB标准和网站重构Word下载.docx》由会员分享，可在线阅读，更多相关《WEB标准和网站重构Word下载.docx（14页珍藏版）》请在冰豆网上搜索。
结构化标准语言主要包括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
3>
表现标准语言
CSS是CascadingStyleSheets层叠样式表的缩写。
目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http:
//www.w3.org/TR/CSS2/）。
W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。
纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
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）是盲人等无法观看显示器的用户使用的一种把当前屏幕上的内容朗读出来的设备。
保持网页的亲和力、尽量减少它的标记、并合理的运用网页头部的标签同样会帮助你提高搜索引擎上的排名（Rank）。
降低代码/内容比、在头部标签中加入关键字，把网页顶部的的标志图片改为文本……这些行为都可以帮助你的站点在搜索引擎中获得更好的搜索结果。
SEO->
另外一项很有意思的工作。
矫枉不必过正：
仍然可以运用表格
你仍然可以在需要时运用表格，别用得太多就行了
这对于那些固执于老式的第四代浏览器的浏览者会比较好接受，而在直到他们回心转意之前，其他人至少也能接受。
运用表格的技巧：
后面讲述
传统WEB的弊端：
表格带来的问题
把格式数据混入你的内容中。
这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息。
带宽并非免费。
这使得重新设计现有的站点和内容极为消耗劳力（且昂贵）。
这还使我们保持整个站点的视觉的一致性极难，花费也极高。
基于表格的页面还大大降低了它对残疾人和用手机或PDA浏览者的亲和力。
对网站进行重构需要具备那些知识
策划人员必须提出网页的结构
UI设计师需要对所设计的内容、结构进行充分的理解
程序开发人员也需要了解WEB标准的知识
具备HTML基础
现在开始学习CSS
如何进行网站重构？
结构化HTML<
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。
然后我们用Photoshop或者Fireworks画出来、切割成小图。
最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局（是CSS-friendly的），你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
外观并不是最重要的。
一个结构良好的HTML页面可以任何外观表现出来，CSSZenGarden（）是一个典型的例子。
CSSZenGarden帮助我们最终认识到CSS的强大力量。
->
DEMO
HTML不仅仅只在电脑屏幕上阅读。
你用photoshop精心设计的画面可能显示在PDA、移动电话和屏幕阅读机上。
但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
首先要学习什么是“结构（structural）”，一些作家也称之为“语义（semantic）"
。
这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
–标志和站点名称
–主页面内容
–站点导航（主菜单）
–子菜单
–搜索框
–功能区（例如购物车、收银台）
–页脚（版权和有关法律声明）
我们通常采用DIV元素（TIPS:
可以把DIV理解为“盒子”或者“容器”）来将这些结构定义出来：
divid="
head"
>
<
/div>
content"
globalnav"
subnav"
search"
shop"
foot"
这不是布局，是结构。
这是一个对内容块的语义说明。
当你理解了你的结构，就可以加对应的ID在DIV上。
DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。
内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。
根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。
每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
例子：
表格是CSS布局的对比
.htm
一个看起来不错的表格
过渡性的设计
使用margin和padding来代替多余的表格单元和间隔GIF。
使用link和@import来载入样式。
前者用于早期浏览器，后者给现在的浏览器。
linkhref="
basic.css"
rel="
stylesheet"
type="
text/css"
styletype="
media="
screen"
!
--
@importurl（modern.css）screen;
/style>
一些实例：
SantaCruzMontessoriSchool
http:
//www.scms.org/ycc.html
k10k
FoxSearchlightPictures
想了解更多关于过渡性设计的信息，请阅读EricMeyeronCSS的第一章。
和JeffreyZeldman的DesigningwithWebStandards的大部分内容。
CSS排版：
并没有想象的难
编写CSS代码很简单。
每条CSS规则都有一个选择符和一个声明。
声明是由属性名（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支持，当然它们也有个各自的脾性，不过只要你习惯了它们，就能够处理得很好。
结构化标记：
所写即所想，所想即所写
即便书写CSS很简单，使用CSS来排版却真的需要一种和我们以往有些不同的思维方式思维方式。
我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别信息的类别和信息的结构信息的结构。
我们用<
h1>
标记来标示最重要的头条；
次一级的条目则用<
h2>
来标记，以此类推；
而段落则放在<
p>
标记中。
这就是我们称之为“结构标记”或“语义标记”的东西。
你的内容将不放在表格和表格元素中，取代它们的是div元素。
还要给你的div元素安排一个id或class，不过这是为了描述它们的内容或功能，而非它们的外观。
避免<
b>
ed与<
br>
eakfast标记
且想想为何你希望某个对象按特定的方式出现；
它有什么含义？
你的标记能够也必须表达意思，即便对于那些无法观看页面的人来说也是如此。
语义性的标记使得你的页面对一切受众都更有亲和力，这还包括了搜索引擎。
当你把某个对象设为斜体时，大概要么就是想强调它，要么是想引用某个书中标题吧？
如果是前者，应该用<
em>
；
如果是后者，其实得用<
cite>
如果某个对象被标记为粗体，事实上它应该被标记的是，<
strong>
如果你希望在某处添加一个换行，这大概是开始了一个新的开头。
如果不是开头，会不会是某种在你的站点中出现过的class（类型）？
在上面两种情况下，你都应该用CSS替换<
.foo{display:
block}
如果希望了解更多，请阅读BedandBReakfastmarkup（B&
BR），Tantek?
elik作品。
如何用css做导航条
DEMO
当然，CSS总会有些事情做得不如表格好。
略
瑕不掩瑜☺
从玩弄表格技巧到遵循Web标准：
通盘考虑
检查一下，找出会因为移植而受益的页面和分支。
自然而然地，从首页、新产品通告之类的页面开始检查会比较好。
分析你的站点的内容分别属于下面的哪些类型：
–产品信息
–价格信息
–公司信息
–报表
–服务信息
–投资信息
–购物篮
–用户论坛
–等等
首先，你得考虑好一个移植策略。
是一口气把整个站点移植了呢，还是逐个部分地一步完成？
分解你的页面，找出逻辑结构
如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。
–主导航条
–子导航条
–页眉与页脚
升级会员 