《网站重构》读书笔记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中,使用“/*”和“*/”来框选出注释区。参考网站经验来看,注释区是可以使用中文的。

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

发表评论

邮箱地址不会被公开。 必填项已用*标注