应用WEB标准进行网站设计－－《网站重构》读书笔记

议题一：为什么要根据web standards来制作网页？

书中用了几十页的内容说明“99.9%的网页都是过时的”，总结起来，要应用web standards的原因如下：

1、一次编写，到处正常显示。（摒弃原来的为不同浏览器写不同版本的CSS/HTML/Script的做法）

2、向后兼容。（使你的网站在很少更新下，活得更久）

3、节约成本。（重构表现与数据代码混杂在一起的页面设计，减少页面的大小，节约带宽）

议题二：怎么做是应用了web standards？

1、对心爱的HTML语言说Bye bye!你的新欢是XHTML。

A、为什么要使用XHMTL？

a)XHTML是当前用来代替HTML4置标语言的标准；

b)XHTML是XML的一个分支，天生可以与其它XML数据进行良好的交互；

c)XHTML比HTML有更好的一致性，因为它是汲取HTML不一致教训后的产物；

d)XHTML是发展趋势。（好弱的一句话）

e)老的浏览器能像HTML一样适应XHTML；

f)XHTML能很好的在无线设备、屏幕阅读器上工作，就像运行在桌面浏览器上一样。所以，良好的设计后，你的网站可以不需要WAP版本就能满足手机访客的需求。

g)它是web standards的一员

h)可以帮助你表现和数据写在一起的习惯

B、从HTML到XHTML要怎么做？

a)用DOCTYPE和Namespace。XHTML要这个东西做它的DTD，因为以上我们说了，XHTML是XML的后代。不同的DOCTYPE，定义不同的标准，直接影响浏览器对页面代码的解析。现在我们有三种DTD：

Strict---不能使用任何表现层的标记和属性，包括width;

Frameset---适应框架页面;

Transitional---过滤型的标准，很大程度上容忍你一直以来的坏毛病。其实这个东西是我们最熟悉的，打开一个你用VS.net生成的asp.net页面生成的代码，你会看到这样的一个头



<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"





"http://www.w3.org/TR/html4/loose.dtd"
>



<
HTML
>



<
HEAD
>



..

这个头就是我现在编辑本文所用的博客园的页面生成的（偷懒一下）。我们可以看到Transitional这个关键字，所以，VS.net
IDE在默认情况下让我们使用过滤型的标准。不过可惜的是，VS.net 2002生成的代码是不完整的，就是说，并没有真正使浏览器应用XHTML标准



<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>



<
html
>



<
head
>

不过，真正保险的是到http://www.webstandards.org/learn/templates/xhtml10t.html
这个页面去拷，因为不管怎样，它都没有帮你把Namespcace加上去。



<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>





<
html
xmlns
="http://www.w3.org/1999/xhtml"
>

　


<
head
>

　　


<
title
>
Conforming XHTML 1.0 Transitional Template
</
title
>

　


</
head
>

　


<
body
>







　</
body
>



</
html
>

b)用小写字母书写所有的标签；

　 c)给所有的属性值加上引号，属性中的单引号和双引号用'和"来代替，属性之间必须要有空格分开；

d)所有的属性都要有值，例如：<td nowrap = "nowrap"> <input ...... checked="checked" />;

e)所有的标签都需要关闭，例如：<p>一定要有</p>,甚至<br />,<img /><input />(注意/前要有一个空格)

f)不要在注释的内容中使用"--",它只能用于注释的开始和结尾；

g)< 用< 代替，& 用 &代替，> 用 ≷代替

2、意识到<center><font><embed>等标记是非法的，而<br />是无意义的。正确的使用CSS控制字体、颜色、空白等。

3、尽量少使用表格来控制布局，通过CSS来避免表格的多层嵌套。并应用结构化标签来代替表格。

　　很沮丧的是，我以前也一直用表格来做控制布局的事，甚至我在写一个页面之初都习惯先table一下，但是问题是表格并不能表达所以有数据结构，比如一下
Menu，其实用<ul><li>Menu1</li><li>Menu2<
/li></ul>更能体现其数据的组织结构，而且，合理使用CSS样式，我们一样可以做出各种炫目的效果。

　　再比如，以前我用表格来控
制文本之间的间隔，用透明的小GIF图片来达到边续空白的效果，是的，这些代码确实方便的达到了我想要的效果，不过，这些代码本身不能代表什么意义，它只是使你的页面代码混乱无章，臃肿宠大。

　　现在，我们可以考虑定义好合理的P,H1,H2等等段落的样式，就能达到一样的显示效果，同时，你的页面中的数据的结构清晰明了，文件也瘦身不少----对了，这叫做结构化元素代替数据与表示混杂。

　　如果这些结构化元素不能满足你的要求，那你就用DIV吧，用float
属性来控件DIV之间相互的排列关系，这样做最显著的效果就是你要改变两个“块”的位置时，非常方便，不用迷失在一个个嵌套的表格中，爽啊！

　　还有，给你的每个元素加上有意义又很简短的ID，“有意义”的意义，地球人都知道，简短还是为了节省带宽，给你的老板省钱，然后，你就可以在CSS中用#yourelementid{...
...}来精确的定义一个元素的样式了。

　　最后，提醒大家，不要过多使用DIV和CSSCLASS。（终于可以不用Fireworks做图片切片了，笑！）

4、使用基于DOM的ECMAScript精确的控件页面对象，可惜的是，如果你要适应Navigator4.0这个还有些人在用的老东西，可能还是要写代码分支，因为它不支持DOM。

5、可访问性。（在有法律规定网站必须要照顾盲人访问之前，我可能还是不会为这一点做一些工作）

议题三：CSS的一些细节
。

1、能用CSS的地方，就不用JS（因为，这样做符合抽离表现代码的原则）,如：

　<
img
src
='a.gif'
onmouseover
="this.src='b.gif'"
onmouseout
="this.src='a.gif'"
onclick
="window.location='xx.htm'"

/>

改成

　<
a
href
='xx.htm'
id
="mya"
>
 
</
a
>

　<
style
>



　a #mya
{


}
{
width
:
100px
;
height
:
25px
;
background
:
url("a.gif")
;
background-repeat
:
no-epeat
;
;
}

　a#mya:hover
{


}
{
background
:
url("b.gif")
;
background-repeat
:
no-repeat
;
}

　</
style
>

2、不同版本的浏览器对CSS的支持程度是不一样的，我们可以用外联和导入做一个分级。

　　因为外联的方式，只要浏览器支持CSS，就会支持，所以，把一般的CSS效果放在外联样式表中，供所有的浏览器使用，把一些要高版本的浏览器才支持的CSS效果写在导入样式表中。代码如下：

　<
link
rel
="stylesheet"
href
="/allstyles.css"
type
="text/css"
media
="all"

/>



　<
style
type
="text/css"
media
="all"
>



@import "/advstyles.css";
</
style
>

3、盒模型（像TABLE这样的像一个盒子一样的页面块）BUG

　　IE5.X/WINDOW和我们大部分的人都有这样的一个BUG，我们在考虑如何往一个大盒子里装很多的小盒子时，我们只关心每个盒子的大小，不关心盒子里的东西的大小，这本没有错，不过在CSS标准中，这是一个BUG，因为，在CSS中width指的是盒子的内容的宽度！！！

　　就是说，你指定一个DIV的
WIDTH是100PX，这个DIV的BORDER宽是1PX，MARGIN和PADDING都为0的话，这个DIV在IE5/WIN下的最终占的地方的宽度是100px，而在其它如IE6/WIN,IE5/Macintosh,NS6、7,Mozilla,Safari,Opera5、6、7上它最终占地宽度是102px，这下你晕了吧，解决办法就是，这样写你的CSS表：



div.boxclass1{



border:20px solid;



padding:30px;



background:#ffc;



width:400px; /* False value for IE4-5.*/Win */



voice-family:"/"}"/"";



voice-family:inherit;



width:300px;/* Actual value for conformant browsers */



}



html>body.boxclass1{



width:300px; /* Be nice to Opera */



}

　　原理是：IE4-5.*/win和Opera7读到声音属性时不能理解，所以停止读下去，使width值被设成400px，但Opera对盒模型的理解和CSS标准双是相符的，所以，后面的那一段专门针对它设值为300px。

4、IE/WIN的空格BUG

在IE/WIN环境下，

<td><img src="a.gif" /></td>

和

<td>

<img src="a.gif" />

</td>

产生的效果是不一样的，第二段XHTML代码会生成多余的空白。解决的办法很简单，把多余的空格去掉！

5、IE6/WIN上的float BUG

　　应用float属性排版的块在IE6/WIN下会出现计算高度错误，如果块中的内容过高，IE6会删减减其中的内容，滚动条也会消失，要按两次F11才能恢复滚动条。可以用以下这段JS修复



if
(document.all
&&
window.attachEvent)



window.attachEvent(
"
onload
"
,fixWinIE);



function
fixWinIE()



{



if
(document.body.scrollHeight
<
document.all.YOURFLOATBOX.offsetHeight)



{



document.all.YOURFLOATBOX.style.display
=
'block';



}



}

　　不过最好是不用float,试试

　position:absolute;left:0

组合

6、CSS2中的相对设值







p+p
{


}
{



text-indent
:
2em
;



}





img+h3
{


}
{



margin-top
:
15px
;



}

什么意思呢，P后面再加的P的第一行缩进2个字，图后的H3上留15px的空白。

7、滑动门技术

http://www.alistapart.com/articles/slidingdoors/

议题四：其它

嵌入多媒体对象

W3C提倡用<object>不过我们却习惯用着<img><embed>。<embed>到现在都不是有效的HTML和XHTML标准标签。XHTML标准的flash语法是



<
object
type
="application/x-shockwave-flash"
data
="movie.swf"
width
="400"
height
="300"
>



<
param
name
="movie"
value
="movie.swf"

/>



</
object
>



可惜这个符合标准的写法在IE/WIN下有不能连续播放的问题，于是，又有了以下标准和正常使用折中的办法：



<
script type
=
"
text/javascript
"
>



//
<![CDATA[



if
(navigator.mineTypes
&&
navigator.mimeTypes[
"
application/x-shockwave-flash
"
])



{



document.write('
<
embed src
=
"
movie.swf
"







==================================================================
另一位读者对本书的评价：

我不得不说，总体上来说这是一本糟糕的书——当然，也有有价值的东西，一分为二地看待比较公平。

1、该书花了大量的篇幅讲述了W3C的起源和背景、WEB标准的提出和推进历程，字里行间掺杂了大量可能影响/打断
读者思路的口头语和一些并无必要的比喻，内容中经常会出现“你会在某处看到更详细的内容……”之类的打扰，加上不少文字错误和大量英文式的中文，致使读起
来颇为拗口。2、书的后半部分有连续的拼写错误，比如“URL”被写成“URI”等等（当然这是编辑的失误）。

3、就“如何应用Web标准来构建一个网站”这一中心议题来说，该书讲述得可以说不够全面、具体和深入。

4、如果读者对于HTML和Web本身的理解基础不够的话，看了这本书以后不太可能获得顺利重构一个网站的能力。

5、书中的一些内容与中国目前的实际也不是很对路，比如花了大量篇幅讲述Netscape4浏览器的兼容代码方法。

6、中国目前的主流浏览器仍然是IE，而且是IE6，因此基本没有必要讨论低版本Navigator浏览器的问题（不知冰寒这个意见是否恰当，诸君可以讨
论）。

7、个人认为我们构建的（面向国内中文用户的）网站完全可以一步到位，直接上DIV+CSS，而不需要采用表格+DIV+CSS的过渡结构，也算是一种
“后发优势”吧。

该书中值得赞扬的部分包括：

1、详细阐述了使用结构性XHTML标签的重要性：

2、XHTML
的标签都是有意义的，因此当我们尽可能使用结构性标签的话，网页内容对于机器（不同平台的浏览器、搜索引擎蜘蛛）更易理解，即使是在没有样式的情况下，浏览者也能够无障碍地理解网页中的内容。

　作者给出的测试方法是：去掉网页中的样式来浏览网页，看看是不是能有条理、有顺序地看懂。

　冰寒已经就此作过测试，发
现这个方法非常管用，能够非常清楚地看到在无样式的情况下网页内容的结构是否合理，而且非常利于发现一些代码中的错误（在加载样式的情况下，有一些错误可
能被IE强大的容错能力所掩盖，当剥掉样式这层皮，问题就浮出来了）。

3、另外，作者比较详细地讲述了XHTML的规范，可以说比较全面和深入的。

小结：如果是要获取用CSS重构网站的能力，这本书是不适合的，还是《CSS网站布局实录》来得更详细、实用和具体。基本上，这本书可以列为“可不读”一类。