应用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)给所有的属性值加上引号,属性中的单引号和又引号用&apos;和&quot;来代替,属性之间必须

要有空格分开;
            d)所有的属性都要有值,例如:<td nowrap = "nowrap"> <input ...... checked= "checked" />;
            e)所有的标签都需要关闭,例如:<p>一定要有</p>,甚至<br />,<img /><input />(注意/前要有一个空格)
            f)不要在注释的内容中使用"--",它只能用于注释的开始和结尾;
            g)< = &lt; & = &amp; > = &gl;
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'" />

改成

<href='xx.htm' id="mya">&nbsp;</a><style>a #mya {width:100px;height:25px;background: url("a.gif"); background-repeat: no-repeat;;}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"   
posted @ 2005-08-19 15:48  Think  阅读(8797)  评论(23编辑  收藏  举报