在家待了一天,《网站重构-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/>这种方式不兼容)
- 不要在注释内容中使用“--”
- 确保使用<和&表示小于号和与号(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: 作者说“很多人很头痛这个”,我不太明白)
--=阅读快乐=--