[过年札记]大年初二

在家待了一天，《网站重构-web标准设计》一书也看完了（PS:停停看看，到今天才结束，不是一天看完的噢）。整体看完   了这本书，觉的这本书并不太适合初学者。对于那些在互联网企业工作过，或有过一定工作经验的人，这本书比较好。一是这书本身就不是一本ABC类的书，二是书中很多例子都是作者在实际中碰到的问题，没有过经历的人去看这些有些无法理解，三是书中有些内容是记录了WEB设计的一个发展历程，HTML<br>排版、 Table排版、GIF透明图片排版、CSS排版，以及各浏览器对CSS的支持的发展过程。不是基础书籍，在介绍web发展背景。单从作者对Web发展历程的了解就可以看出作者的实力，（PS:作者本来就是大牛）。

第一章~第四章

都是介绍背景知识的。个人评价不喜欢，看的有些想睡觉。“99%的网站都是过时的”，HTML排版的糟糕，浏览器的兼容，Table嵌套Table的维护成本，CSS布局的好处，一个新时代的到来。反正就是诸如此类的文字。但这些背景知识还是要看的，因为其实为什么互联网会发展到现在这步（简单的说发展到使用CSS进行布局）都是经过了前面这些“痛苦”经历而来的。想起以前在做Shipping系统的时候，公司的顾问就说过，“你要了解业务，很总要的是了解一些背景知识，从这些背景知识你才会明白它为什么会发展成今天这个样子。集装箱的这些箱型箱量的标准这么定是有原因的。”。再概况一下：其实有了这些背景知识，你能把问题看的更清楚。就向新员工不理解我们网站为什么都不用控件，硬要自己去构建HTML代码一样。存在即是合理派 *(^_^)*

第五章

XHTML定义，切换到XHTML的10个理由（P119）。收藏一下几个地址：

http://validator.w3.org    检查网页代码是否符合W3C规范

http://jigsaw.w3.org/css-validator/ CSS 标准效验服务

http://www.htmlhelp.com/tools/validator/  标记语言效验服务

第六章

XHTML的基础知识。（没什么好说的）

XHTML的规则（可以记忆一下）

• 以正确的DOCTYPE的名字空间开始
• 使用META内容元素声明你的内容编码语言
• 用小写字母写所有元素和属性名称（PS:DOCTYPE 必须大写否则浏览器不认）
• 给所有属性值加引号
• 给所有属性赋一个值
• 关闭所有标签
• 用空格和斜杠关闭空标签（PS:空标签最好还是使用<span></span> 结束，实际碰到过<span/>这种方式不兼容）
• 不要在注释内容中使用“--”
• 确保使用&lt;和&amp;表示小于号和与号（PS:可以查看HTML特殊字符记忆）

补充一下：

• 不要使用<font>
• 使用h1 h2 等结构化，有语义的标签
• 使用<strong> 代替<b>

 第七章

div,id 的介绍，这部分都比较基础。重点说一下Divitis 和Classitis ，这种情况其实是过度的甚至是滥用了div和class。看看实际例子（引用原书的例子P149）：

Classitis

<p class="noindent">This is a bad way to design web pages.</p>
<p class="indentnomargintop">There is no need for all these classes.</p>
<p class="indentnomargintop">Classy designers avoid this.</p>
<p class="indentnomargintop">Class dismissed.</p>

Divitis

<div class="primarycontent">
<div class="yellowbox">
<div class="heading">
<span class="biggertext">welcome</span>to the Member page !
</div>
<div class="bodytext"> Welcome returning members</div>
</div>
<div class="warning1">if you are not a member <a href="/gohere/" class="warning2">go here</a>!</div></div>
</div>

这个我是有亲身经历的，刚刚从Table结构转变到DIV CSS的时候根本不知道如何去很好的控制页面显示效果，基本上就是DIV套DIV,然后就是每个DIV定义一个Class。这样的代码也是凌乱的，不好维护的。“在那些被classitis折磨的站点中，所有要处理的标记都被它自己膨胀的、垃圾class所包围。Classitis就是标记的麻痹，这就意味着对任何页面都增加了不需要的内容。这个苦恼最早来自于早期对CSS一知半解的设计师”。“对CSS还是孩童般的误解”。作者的这些观点真是说到了关键处。即使是今天，我们在网站的设计上，还是很难避免这种状况，但我们在进步，我们在改进。这也让我想到了那些“我们的网站不能出现Table”的说法，我想这也是没有理解到精髓的原因。其实无论是Table，还是DIV,还是CSS，我们的最终结果是保证网站页面结构的清晰。不要认为用了DIV + CSS，你就标准化了。

第八章~第十章

这3章开始了具体的技术实现了,看起来不会那么枯燥。我还是把一些我关心的重点列一下

• 请使用绝对路径，不要使用相对路径

原因:

1：引用文件路径的改变造成相对路径无法使用。

2：浏览器解读相对路径方式不同照常相对路径在不同浏览器下不一样。

• 0值后面不要使用px

推荐用法：.Main{width:0;}  不推荐用法：.Main{width:0px;}

• CSS样式结尾请添加分号（详见P176）

推荐用法: .Main{width:0;padding:25px 0;} 不推荐用户：.Main{width:0;padding:25px 0} 结尾没有分号。

• CSS区分大小写吗？

应该这样回答：CSS本身不区分大小写，但和HTML关联时类别和id名称区分大小写。

• @Import链接样式表请不要使用，@Import只在5.0以及上版本有效。
• 块级元素和内联级元素。块级元素存在其自身的“盒”中，后面跟一个暗藏的回车。内联元素是流的一部分，后面不跟回车。
• a.Link等伪类是有顺序的，请书写CSS按一定顺序，否则会出现a显示不正常(详见P197)

这个问题在“二级页面项目”中我就发现了，但一直想不明白。 a.Link a.visited a.Hover a.active  它们在CSS的编写中是按这个顺序出现在CSS文件中的。http://meyerweb.com/eric/css/link-specificity.html 具体可以参考一下这里。作者还提供了一个记忆这个顺序的技巧 LoVe-HA （PS: 作者说“很多人很头痛这个”，我不太明白）

Google 标记: 过年札记, 2008过年, 网站重构

--=阅读快乐=--