《网站重构》读书笔记11(完结):视野开阔

终于把这本书看完了。在第11章之后我有点失望,并没有什么新的实用的内容出现。

“第11章 使用浏览器 第一部分DOCTYPE转换和标准模式中”中谈到了浏览器触发标准模式的几个相关问题,以及个别浏览器向IE看齐的“近乎标准”是怎么回事。反正就是要手工写出完整URL的DTD,以免软件的问题导致发生错误。

“第12章 使用浏览器 第二部分:盒模型、BUG和工作区”中提到“W3C组织建议网页上的所有对象都放在一个盒中”,设计师通过控制盒的属性来进行设计。这本来是一个好的想法,但是不幸的是对“盒”的理解,浏览器们存在误差,导致了盒模型在很多情况下是失效的,除非边距、边界等空间参数都为“0”。文章中提到了“盒模型黑客程序”,“Hack”的定义很广泛,在这里是指利用IE5.X对CSS的解析程序的BUG完成兼容CSS的编写。另外IE还存在“空格BUG”,解决的方法是把HTML标记删减成无回车无空格的一堆代码。这个我是在过去的工作中自行解决了的问题。这样处理后的代码很难看,但是谁叫IE他老人家品味特殊呢。

“第13章 使用浏览器 第三部分:排版”主要讲的是字体问题。按照作者的观点,PX的尺寸设定在浏览器没有放缩功能的前提下是死板而且可能会造成使用问题的。而EM、磅值、字号关键字等方法都存在问题,那不是废话,干脆还是PX好了。然后用DOM解决字号放缩问题。

“第14章 可访问性基础”介绍了可访问性问题的相关背景和法律条款,以及一些对可访问性的错误理解。最耸人听闻的观点是作者认为闪烁的网页会引发癫痫发作,危害生命,所以这些问题在设计的时候也需要考虑到。我的天,外国佬真……真发达,可以去关注这样的小概率事件。但是这个问题确实存在,因为我在初中的时候曾经有一个患有癫痫的同学,不只一次在课堂上发作,样子实在太恐怖了。如果医学上闪烁的页面会导致癫痫发作,那么作为一个有良知的设计者就应该避免去做可能造成访问者伤害的事情。其实我认为提高可访问性最大的优点还是在于“可以加深你对‘设计’的理解”、“能提高你的开发技术、开阔视野”、“提高你作为专业网络设计师的价值,使你更具竞争力”。

“第15章 使用基于DOM的脚本语言”给我描绘了一个很美好的画卷。在不刷新页面的前提下,基于DOM的脚本可以制造类似应用程序的使用体验,比如切换CSS样式表,排序表格数据等等。但是除了这些,没有更进一步的消息是我可以看明白的。

“第16章 CSS重新设计”是对后面所接触信息的一个总结,并把他应用在了作者为完成的示例中。在这一段里我惊奇的发现CSS竟然还有“p+p”、“img+h3”这样的选择器,真是学无止境啊。最后几页的代码,我是带着瞌睡扫描完的。

结尾,作者把所知的浏览器全都拿出来晒了晒,评点了一番,基本上没什么让人感兴趣的东西,因为没有一个浏览器是完美的,即使接近完美,但是如果用的人少,非主流也是个问题。

至此,《网站重构》全部看完。

这不是一本告诉你如何做出符合WEB标准网页的教材,他是一本推广概念的书。除了说服之外,其中包含了很多花边消息,让读者对WEB设计的局面有了个相对深入的了解。如果需要更详尽的指导信息,就要借助于我桌上正放着的《CSS权威指南》和《HTML与XHTML权威指南》了。

概念已经形成,不管我是否有意去彻底执行它,WEB标准一定会影响我今后看待WEB设计的角度和高度。有两句话是我看这本书的最大收获,他的意义不仅仅限于WEB标准本身:

“不要停滞不前,不要拒绝接受全部观点。”“如果不是现在,那会是什么时候呢?如果不是你,那会是谁呢?”

《网站重构》读书笔记10:新知识密集出现

“第8章 XHTML的示例:混合布局”、“第9章 CSS入门”、“第10章 CSS应用:混合布局”,三个章节联合起来就是一个标准入门级网页设计过程的示范。在这个示范的进程中,没有一般教学书籍的那种“先点击XX,然后点XX项目”的傻瓜填鸭式教学,而是一种把握大思路,舍弃小操作的介绍方式。初学者到第8章估计就要昏头了,所以这本书不是写给初学者的启蒙书,而是一本面向老式有多年经验的网页制作者,鼓动他们向标准化前进的宣传手册。

全书到了这里开始闪耀亮点,跟随例子的展开,一个个模糊的概念逐渐被清晰,我也开始接触到一些以前没想过的领域。

首先是用样式表代替JavaScript实现翻转效果。我以前曾见过用CSS编写的很漂亮的翻转菜单,那时候觉得这个利用CSS特点的思路简直太绝了,非常钦佩作者的创意,没想到2-3年前的书中就已经介绍了这种方法,只是因为我老土不知道而已。

本以为即使是制作过渡模式的XHTML,以往那种用TABLE规划版面的方式也是错误的,没想到这个例子的一开始就谈“分割表格”,所不同的是同样是分割,符合标准的做法是放弃表现层标记,加入ID和注释。

然后就是“忽略导航”,这个问题我从来没有思考过。谁在设计规划站点的时候会考虑到盲人怎么通过辅助手段阅读这个网页呢?就以街道两旁上新铺设的彩色道板为例子,那条特殊的盲道,谁又曾真正的在乎他呢?“无障碍方式”,这种对特殊人群的关怀在总体发展程度不高的社会大背景下显得那么的尴尬。作者利用不同浏览器对CSS的理解差别,设计了这个“忽略导航”的功能,目的就是为了方便那些行动障碍或者特殊应用的状态下,为使用者提供更多的方便。其中“ACCESSKEY”的存在是我从来没有关注过的,这确实是一个很炫的使用方式。书上说IE里有一个开启“ACCESSKEY”显示的设置,我找遍了也没有找到,天晓得是怎么一回事,难道SP2的升级把这个功能扼杀了?

标准化中一个最大的麻烦就是适度适量的使用标记,前面提到了DIV和CLASS被滥用的情况,现在我们知道了还存在ID被滥用的问题。作者的意见是,在服务器端包含的情况下,由于基础代码修改容易,所以就没必要“深谋远虑”地写上一大堆暂时用不上的ID。但如果是全靠手工维护的页面集,为了今后维护的考虑还是前瞻性的加入一些可能会用到的标记(其实我觉得借助Dreamweaver的“批量替换”,改代码也比较容易)。至于是不是因为设计思路问题导致ID使用过渡?那就全看设计水平如何了。

作者作为标准组织的发起人之一,在多个段落使用了宽松、甚至是为标准追随者所不齿的“低级写法”。作者对此多次强调:“WEB标准”并非一成不变的法律条款,而是充满选择和判断的道路。一顿饭吃不出一个胖子,所有将标准引入工作的努力,即使是妥协折中的方法都是值得尝试的。

“CSS入门”是让我最感到高兴的章节,在“CSS权威指南”中没有解决的“选择器”概念问题,终于在本书中明确了方向。当年第一次从“动网新闻”中接触到含有选择器标记的CSS文件时,我感觉到一阵头晕:太复杂了,看都看不懂,作用机制都摸不着边……。现在好了,对一些概念明确后,心里塌实了很多。这些全拜书中的例子和作者的描述所赐。

在书的175页倒数第7行提到了0值后要跟百分比符号的问题。看到这的时候我产生了一个疑问:RGB数值中的数字和百分比是否可以混用呢?比如p {color:rgb(255,80%,0);}。我将这段代码放进了Dreamweaver中,在编辑环境下,Draemwerver忽略了80%这个数值,在IE中,数值和百分比可以共存,产生预料中的效果。我不明白究竟是标准错了,还是IE在容错。无论如何,“0值后加百分比符号”不是金科玉律,p {color:rgb(100%,0%,0%);}与p {color:rgb(100%,0,0);}实际应用效果是一样的。即使必须加百分比符号,也就是为了区分数值类型而已,并没有作者说的那么不可理解。

CSS的书写规范中忽略空格,并且不区分大小写,但是类别和名称是有可能区分大小写的。这与XHTML的规则形成了反差,XHTML是全文区分大小写的,但是属性值有可能不区分。为了可再编辑性考虑,所有的属性和属性值都应该以分号结尾。

老外对字体情有独衷,总是在书中不厌其烦地讲述字体选择的规则。对于中文用户来说,除了宋体,没有谁可以在12 PX的极限下保持良好表现,所以字体选择大概是CSS中使用最少的方法了。没有选择会是最好的选择。

选择器我认为是CSS最重要也最难的部分。“#”号、“.”号、HTML元素、嵌套的HTML元素简直可以代替木棒将人搞晕。其实明白过来以后似乎规则很简单:“#”代表ID名称、“.”代表类别名称。选择器的书写遵循嵌套原则。比如“li strong”表示li标签包裹下的strong;“#name p”表示ID名为name中的p元素;“.red p”表示类别red包裹下的p元素,“p.red”则表示p元素下的名字为red的类别。如果一此要声明多个选择器,可以用“,”号分开。当年我曾觉得CSS太天真,实际应用中缺乏可操作性,但是自从知道了选择器有这么多种玩法后,那些顾虑全都消失了。
样式表的使用可以有外联(LINK)、嵌入(@IMPORT)和内联(STYLE)三种方式。由于嵌入式不被许多非主流浏览器所兼容,所以被用来解决样式表兼容性问题。

在CSS文件中使用相对连接是可能出问题的,因为老浏览器会混淆CSS文件里的相对链接。所以最好使用绝对路径。

在CSS的描述中涉及到“四周”的问题可以使用缩写。缩写的规则是:当上下和左右的值相等时,只写代表上下和代表左右的两个数值;如果四个数值分开写,就按照上、右、下、左的顺时针顺序。

声明元素是“块”还是“内联”是很重要的,至少在做菜单的时候。“块”有自己固定的领地,他更象一个按钮;而“内联”通常会发生一些动态变化的问题。

伪类属性是使用非常广泛的属性。以往我认为只要定义四个伪类就可以了,没想到为了照顾某些有怪癖的浏览器,伪类的排序还要按照“LVHA”规则,即连接、已访问的连接、鼠标悬停、激活来排序。否则就可能被忽略一部分样式。

在已知的情况下,IE6会把所有的元素默认为居中对齐(当然,是在有过渡的DTD声明的情况下)。为了解决这个问题,需要特别地声明居左对齐。

在CSS中,使用“/*”和“*/”来框选出注释区。参考网站经验来看,注释区是可以使用中文的。

最后,作者例举了一个他也想不通为什么的菜单做法。让人觉得有些泄气:在技术的领域里,永远有未知的东西。有时候需要换换思路,或者妥协,而这是实际工作中最难做到的。

《网站重构》读书笔记9:回想当年的坏习惯

“第7章 紧凑而坚固的页面保证:以严格和混合的标记组成的结构”首先解释了DIV和ID的概念,然后对一些过去的和现在的坏习惯进行了回顾。

看着作者例举的“坏习惯”,想想当年我也曾把这些坏习惯当做“流行圣经”,并且身体力行。如今虽然觉得那时候有点好笑,但是我知道这是因为环境、关注点都发生了变化造成的。如果回到当年,我依然会选择学习那些现在看来是“坏习惯”的东西。那些技法虽然冗长、拖沓、没有结构性,但是至少在视觉效果上比单调的HTML往前迈了一步,而往前迈一步总比什么都不做强。

在这之前,“SPAN”与“DIV”我一直搞不明白有什么不同,因为对于样式表圈地的作用来说,两者似乎都一样。经过本章的介绍,结合以往看代码的感觉,我发现DIV是用来划分逻辑块来使用的,而SPAN只是用来在恶劣的情况下把某一小段内容与周围的内容区分开来,也就是“内置的内容”。(也许即将到货的那本XHTML的书中会做出权威的解释)。

“id”与“class”其实应该是不容易发生混淆的两个标签,但是由于他们经常都伴随DIV出现,并且在CSS的作用机制中关系微妙,说实话,我也不能肯定地把他们的关系讲明白。本章节的描述中,也许是因为翻译的缘故,两者的界限似乎搅得更加的不清晰。下面我试着给他们下一个更明显一点的定义吧(也许不是很严谨):“id”就是声明特定一段XHTML标签的名字。一个名字只能使用一次;而“class”的值是CSS样式表中的定义的名字。

是表示该块的名字叫做“name”,而

则表示,对该块应用名称为“name”的CSS定义。

id的值必须用一个字母或者下划线开头,在JavaScript中他还不可以带有空格和连字符“-”,如果考虑到兼容性问题,连下划线也最好不用。

作者在文中特别提醒:不管是否结构化,任何元素都必须由清晰、紧凑的标记和干净的CSS组成。接下来他举了几个classitis、divitis的例子说明DIV和CSS的组合也可能产生出垃圾代码。看着这些臃肿的代码混乱的逻辑关系,觉得很好笑,有点耍贫嘴的意思。“表格都是不好的,CSS都是好的”这一流行的观念是错误的。

接下来的“过时方法的展示”带我们回顾了“服务器镜象”(我到现在还是不太明白这种技术)、“图片MAP”、“通过切割图片制作网站”、“HTML中详细的说明注释”、“用style把CSS内嵌到网页中”。这些事情都是我曾热衷的做法,当时只觉得大家都这么干,所以我也这么干,从来没有想过什么才是最重要的。也许我今天热心于想把标准搞明白,明天又有人告诉我其实还有一条更光明的大道。谁知道将会发生什么呢?重要的是,今天的每个接触了解,都不会是毫无用处的。如果我是从今天才接触WEB设计的话,那这本书我也许早以看不下去了,正是因为有了那些落后的坏习惯的经验,才越发感觉标准的重要。

《网站重构》读书笔记8:XHTML的9条军规

“第6章 XHTML:WEB重构”开始涉及到一些具体的操作规范的东西。本章最重要的内容就是描述XHTML执行中的九条清规戒律:

1、以正确的DOCTYPE和名字空间开始

XHTML首先需要你声明,你是遵循什么标准建立此文档。如果你的声明和你实际做的事情不相符,就会导致错误、误解的发生。DOCTYPE是一个XML文档的基础,它应该出现在文档的最开头位置。XHTML 1中有三种可能的声明:

  过渡的(Transitional):最宽松的DTD,它能容忍很多老的不良习惯;
  严格的(Strict):有洁癖的DTD,不允许文档使用表现层的标记和属性,如果要给它找一个星座,那它肯定是处女座;
  框架的(Frameset):在使用元素的文档中必须要使用该声明。我对此存有的疑问是,除了针对frameset的特性,这个声明在对待其他元素的标记和属性上,是更象过渡型还是严格型呢?也许后面会有答案。

“名字空间”可能叫命名空间比较合适,对这个部分我也是心存疑虑的:两个附加属性中的语言属性究竟有什么区别,为什么示例中不用utf-8而用en,如果用错会发生什么后果可能这本书不是可以用来解答这个问题的途径,好在我订购的《HTML和XHTML权威指南(第五版)》已经在路上了。

2、使用META内容元素声明你的内容编码语言

生命编码语言有三种方式,就好象孔已己说的“茴”字有四种写法,而常用的只有一个,那就是用meta标签。这在HTML就已经是流行的写法,所以更容易被广大浏览器接受。但是偏偏这种写法却是个“小老婆”,是不被推荐的。大房太太是“XML prolog”以及利用服务器返回http头部设置编码语言两种方法(在书的第132页有提及)。尽管如此,理想也不得不向现实低头,好用的meta标签成了作者推荐的方式。

3、用小写字母写所有元素和属性名称

在XML的规范中,字母的大小写被认为是不同的,这和HTML的懒散形成了对比。所以XHTML要求元素和属性的名字都必须是小写,但属性和内容则不一定。

4、给所有属性值加引号

加引号的规矩也是XML的严谨体现,虽然HTML也是这么要求的,但是他的脾气太好了,即使不加引号,他也会容忍。

5、给所有属性赋一个值

这一截的示例太简单了,所以没有什么有效的信息让我知道什么情况下,按照什么标准加属性和值。难道碰到无属性与值的参数,就复制他本身,然后建立=关系?看起来似乎是这样。

6、关闭所有标签

7、用空格和斜杠关闭空标签

XML的规则:有开始就要有结尾,不要让我猜(看来我n年前看的那篇XML启蒙文章确实很有用)。遇到独立标签就使用“空格加‘/’”的规则,很好记。

8、不要在注释内容中使用“–”

可能“–”符号已经成为注释开始与结束的标记,所以在注释中不能随意出现他们两兄弟,而只能用其他字符,比如用“==”代替。

9、把所有< 和&符号编码

<和&,这两个符号太重要了,如果滥用很容易导致问题。以前我总以为对这两个字符进行编码是为了避免注入问题,原来严格的XHTML也对他们进行了特别对待。 书中对字符编码也做了大致介绍。这类文章我以前也看过,甚至更晦涩的转换编码都看过,没全看明白,大致的是有了个了解。所以作者号称本书最无趣的部分对我来说不算什么。 章节最后本分作者又老调重谈,强调结构的重要以及用CSS进行设计布局。似乎是没什么新义,也许是作者认为有必要在书的任何地方都强调标准的最基本理念。不过有一点倒是引起了我的关注:“用过度的CSS替换HTML表现是不恰当的,这样做只是用另外一种垃圾代替HTML表现代码垃圾。”看来作者对新技术的滥用还是心存忧虑的。

《网站重构》读书笔记7:初识XHTML

“第5章 现代置标语言”解释了为什么使用XHTML,而不是用HTML来标识网页内容。HTML的名声已经被一大群坏习惯的使用者搞臭,并且不是十分严谨的性格也决定了它不能适应严格的标准要求。好地基是好大厦的基础,作为最基础的部分,目前最好的选择莫过于XHTML。虽然XHTML1.1比1.0要更严格,但是这种“严格”会导致一些浏览器和衍生物的消化不良。也许明天是XHTML1.1或者彻底革命的2.0的天下,不过1.0才是目前最合适的,并且在比较长的时间里也会是最佳的选择。

在这一章节里,初步地对XHTML的特性有了一点了解。比如XHTML不处理表现层的东西,虽然你非要使用表现层,也没有人拦着你,但是不要忘记我们辛苦地学习标准是为了什么。

XHTML是以XML为基础的,所以标签有了开始就一定要结束,否则就是错误的。比如
,也将需要对这个标签进行结束处理。

XHTML有着XML天生的好身板,又结合了老HTML的内容,使得需要学习的内容大大减少,所以是目前最适合的置标语言。作者认为学习XHTML对于一个没有经验的人来说是相对容易的,但是对一个已经熟悉HTML的老鸟来说,传统的观念会是一个障碍。到底这个障碍有多大?下一章也许就见分晓了。

《网站重构》读书笔记6:XML作证

“第四章 XML征服世界”。在揭露了危机之后,作者需要给读者一点信心,告诉大家为什么WEB标准是一条阳光大道而不是一条黑暗的羊肠小道。如果不是以前看过“两只老虎”的XML入门文章,我一定会被这一章催眠的。因为XML被作者说得太神奇、太伟大了,但是书中却没有告诉读者为什么XML会如此伟大(也许后面的章节会有提及)。

对于XML,我也是是因为一篇小文看了点小窍,从理论上大致有了个认识。它其实是一个用来制定规范的规范,内容是一些处理机制和运做方式。在这个规范上可以发展出无数的应用。他的伟大之处在于为数据的迁移和格式化提供了一套标准,而这个标准是天生开放的,面对XML的压力,那些死抓着私有数据标准的产品将面对很大的挑战。(但是我还是有些顾虑,这种纯文本的开放数据存储模式,如何面对安全性的需要?难道编码后存储数据?这些疑问还是等以后去解决吧。)

XML这个为WEB制定的标准,如今却在WEB之外红火得不得了,说明了一套开放免费的规范的威力是如何强大。既然XML可以获得如此的成功,那么又有什么理由怀疑其他的WEB标准不可以取得辉煌的成就呢?

作者有一些理论比较有味道。他认为“联合协作,而不仅仅是竞争”是一个行业发展到成熟阶段的标志。很有道理。联合协作说明竞争已经脱离初级阶段的水平,也只有脱离了低水平竞争,才能联合起来做一些有利于行业发展的事情。在谈到GOOGLE和YAHOO开始跟随小竞争者开始使用标准的时候,作者认为:“小家伙们会涉足危险境地,而大家伙们如果确认这样做是安全的话,也会跟随着做。”确实是很妙的比喻。

本章节还嘲讽了FRONTPAGE。虽然是它带我入门,但是自从我发现它有自以为是改代码的小动作,我就开始对它产生了厌恶的情绪。

书中92页,4.6节的第一行有一处错误,CSS1不可能在1966年被建立,而应该是1996年。

在执行标准的过程中,CMS系统是个难点,如果它是不符合标准的,那么网站拥有者就很难保证自己的站点符合标准。不过好在时间又过去了3年,情况应该好很多了。

从下一章节开始,就要开始谈到真正的实务了。这个写书的老外真是非常谨慎,花了全书将近1/3的篇幅来论述重要性,真让人开始觉得受不了。