标签：web

这本标称2007年6月出版的新书，在经历网上下单、物流送货、粗翻、细看之后，今天已经全部看完了。这大概是我最赶时髦，并且消灭得最快的一本技术书了。之所以这么猴急，是因为自从将XHTML+CSS的模式引入实际工作以来，我就不断遭受信心上的打击。本书的末尾有段比喻非常贴切：深陷于CSS的泥沼中，气愤得只想撞墙，并发誓今后再也不会去做WEB设计，甚至会觉得哪怕是城市规划或者核物理，都要比CSS简单、友好得多。

“禅意花园”其实是个网站，起初我并不觉得它有什么牛B，但是当知道这些五花八门的页面，其HTML源代码都是完全一样的时候，我才感受到震撼。这本书的内容就是该站站长对其中几个典型作品写的点评。

书好不好？这个要分两个“两部分”来看。

从翻译上来看，书的前半部翻译流畅，感觉就象一本“土著书籍”，后半部就开始变得有点晦涩，大概是翻译者的激情已经被前几章消耗得差不多了，到最后只想快快结束这个痛苦的经历。

从内容质量上看，这本书有一半的内容是有意思的，另一半内容是不符合国情的。具体的说，设计、布局、图像和结尾的一些建议是比较有意思的章节，有些信息是在以前没有看到过的。最失败的章节要算“文字排印”了，由于英文和中文的计算机应用存在非常大的差异，所以导致本章节的内容对于中文用户来说几乎毫无意义。比如，用中文字体这么多年，我压根就不知道中文字体是否有系统分类的“字族”属性。虽然汉字字体在客观上存在相似的分类，但是计算机根本不知道怎么去区分，而英文字体天然就具有明显的字体分类方式。另外……我都懒得敲了，总之，这一章略过不看基本不会有什么损失。再加上N多为FIREFOX特制的技巧，和CSS 2.0 3.0的内容，基本上这些“不实用”内容占到了此书的一半页码。

基于我的读后体验，这本书只适合于有标准实践经验的人阅读。通过对作品的解读，可以得到不少收获。我的最大收获就是：绝对定位方式如此重要，以前我认为这是只有菜鸟才用的蠢方法而不敢使用。书最后的那些原则指导太有用了，几乎是每个标准入门者必修的内容。

在此给本书过于夸张的宣传口号加上一些标注，以方便后来的读者选书时参考。

本书内容包括：
36件效果惊人的设计艺术作品
（“惊人”这个词有点夸张了，个人感觉其中效果泛泛的作品占1/3）
来自顶级Web设计师和开发人员的CSS秘诀
（本书是第三人对作品的解读，决不是设计师本人对自己作品的解析，这些“秘诀”都不是来自作者本人。）
文字使用技巧，使作品生气勃勃
（最没意思的文字使用技巧部分，中文读者完全是在浪费时间）
绝妙的CSS使用技巧，轻松适应未来的变化
（技巧确实很妙，但是CSS永远不是轻松的事情。）
高效使用图形，以提高网页的下载速度
（似乎这方面内容只有不到100字的描述。这绝对不是本书编写目的之一）
本书特色：
圈内公认的Web视觉艺术设计的王者之书
（“王者之书”这么严重？……天书好，可也要看得懂啊）
来自36位顶尖网页设计师和开发者的CSS秘诀
（应该是“解读CSS作品”，不是作者本人讲述的就肯定不能算“秘诀”）
Amazon网站五星级图书，全球一致好评抢购中
（美国佬2004年出的书，不能算抢购ING吧？）
全国各大网上书店销售冠军
（CSS类的好像最新的就这本了）
本书适合以下读者阅读：
设计师 迈向完美，走向巅峰
程序员 无设计知识，亦能运用自如
CSS新手 未丧失拓展知识的勇气
（前三项是“痴人说梦”，此书不介绍任何CSS、xhtml基础知识，初学者连入门都入不了）
CSS高级用户 即使了如指掌，亦能受益良多

唯一欣慰的是在阅读本书的过程中，发现书中的CSS代码我基本都能看懂、并且可以用中文解释它的意思了[flower]。但话又得说回来，看电影和演电影完全是不一样的两件事[confused]。所以，路漫漫，其修远兮……

书名：CSS禅意花园
原著书名：The Zen of CSS Design
原书作者：[美] Dave Shea Molly E. Holzschlag 著
译者：陈黎夫、山崺颋
书号：978-7-115-16035-5
定价：49
开本：880×1230 1/20
总页码：290

几年前开始用IWMS的前身DVNEWS，是因为动网论坛的大名。这么几年下来，程序很稳定，特别是发新闻自动下载图片的功能用起来很方便。但是作为一个CMS，其可定制性确实太差了。早几年的时候想改动改动它的样式，却发现密密麻麻的CSS定义，而且没有任何说明该样式是“用在什么地方？”、“是否可以更改？”。那时候发现CSS竟然可以用得这么复杂，也“于是”发现了网页标准化的热潮正在无声的涌动，这可以说是用这套CMS最大的收获。

如今，关于标准的理论知识补习得差不多了，回过头再来看我原来不敢乱动的CSS样式表和那缺乏标签说明的模板，这才发现IWMS有点老态了。标准化进行这么几年来，IWMS虽然很早就加入了这方面的想法，但是从现在的4.5看，仍然在原地踏步。

很多FANS说，IWMS只要稍微改造就能成为一个符合标准的CMS，于是我仔细研究他的标签含义，结果发现，要避免TABLE布局基本是不可能的，这涉及到IWMS的设计思路和流程控制的改变，不是一时半会可以改变得了的，而且由于关键代码都已经编译，外人也无法对他进行改变。这半个月来，我能做的就是对IWMS生成的代码进行隐藏、定位，模仿出一个定制的外观，但是这只是表面现象，IWMS的结构并不由我控制。对它的改造是一个带着镣铐跳舞的工作，而且是一套颇多纠缠的镣铐。我的感觉，简直是一张鱼网。

于是开始寻找其他的CMS系统。PHP的很多系统非常先进，功能也非常牛，可惜我的能力还不足以控制LINUX，而WINDOWS下的APCHE我在试用小蜜蜂采集器的时候是见识过的，效率低，经常出连作者都说不清楚的问题。于是，只有ASP。

ASP中最有影响力的只有动易和风讯。动易的系统安装需要在服务器注册组件，这给维护会带来很大麻烦。比如最近的MS路径问题发生后，如果虚拟主机的站长想升级动易是不可能的，因为对组件的升级一定要IDC的管理人员来做，站长能做的只有等。而且动易的铜臭味也非常足，我见过他连教学、补丁光盘也打包卖钱的“大礼包”，加上从产品线来看，新闻系统只是其业务的N分之一，让我对他的印象大打折扣，于是，似乎只有风讯了。前几天安装了一下，从后台看了看，似乎有点过于强大，强大到无从下手，但是，谁让人家牛逼呢，只能怪自己才疏学浅，落后于时代了。

回头再看看IWMS，免费SQL版本，先进强大的NET框架，丢了似乎可惜。但愿IWMS下个版本可以梳理一下代码结构，不要在可视化编辑模板这种极少用到的功能上下工夫了，这种功能对菜鸟来说依然是“不会用”，对老鸟来说觉得“不舒服”，有这样的精力不如来本标签说明手册和DW8的插件更实惠。

没有选择，麻烦；有选择，也麻烦。

如果按照默认模板，底部导航的TABLE标签中将出现两次：Border=”0″ border=”0″，这个不规范的代码复制到DW做占位编辑的时候会导致局面混乱。
修正方式是将下面这段中的Border=”0″删除

<asp:DataList id=”dlNavList”
Border=”0″
CellSpacing=”0″
CellPadding=”0″
Width=”100%”
RepeatLayout=”Table”
RepeatDirection=”Horizontal”
RepeatColumns=”1″
DataKeyField=”classid”
OnItemDataBound=”dlNavList_ItemBound”
runat=”server”>

真受不了。IMG图片显示用了这么复杂的脚本，其中的结构不是用FIRFOX的开发工具根本开不出来。为了还图片本来面目，去掉拉杂的冗余代码，将显示脚本用的JS进行了瘦身。由于才疏学浅，还不能彻底看懂JS代码，所以能用空格代替的就用空格代替，没有轻易删除，两大浏览器下均没有报告脚本错误。修改后的thumbnail.js如下：
<blockquote>function WriteThumb(img,url,alt,blank,headline)
{
if (blank==null)
blank=false;
if (headline==null)
headline=false;
var str=” “;
str+=” “;
str+=”<a href=&#39;”;
str+=url;
if (blank)
str+=”&#39; target=&#39;_blank&#39;>”;
else
str+=”&#39;>”;
str+=”<img src=&#39;”;
str+=img;
str+=”&#39; alt=&#39;”;
str+=alt;
str+=”&#39; “;
if (headline){
if (thumbHWidth>0){
str+=” width=&#39;”;
str+=thumbHWidth;
str+=”&#39; “;
}
if (thumbHHeight>0){
str+=” height=&#39;”;
str+=thumbHHeight;
str+=”&#39; “;
}
}else{
if (thumbWidth>0){
str+=” width=&#39;”;
str+=thumbWidth;
str+=”&#39; “;
}
if (thumbHeight>0){
str+=” height=&#39;”;
str+=thumbHeight;
str+=”&#39; “;
}
}
str+=”>”;
document.write(str);
}</blockquote>
一层层判断，一层层累加，累加到最后，形成了如幻影般的图片代码。

分类新闻在IWMS里是没有任何参考资料的。但是仔细一看，很多HTML是可以删除修改的，所以想起给他瘦身，尽量使他靠近标准。其中标题前面硬塞个图片的做法期待在下一个版本中有所改善。最终的结果我个人比较满意，实际应用中至少减掉了一半的代码量。

首先来解读一下原版：

<blockquote><%BindAllNew();%>
<asp:DataList id=”dlAll”
RepeatDirection=”Horizontal”
RepeatColumns=”2″
CellSpacing=”0″
CellPadding=”0″
Width=”100%”
DataKeyField=”classid”
OnItemDataBound=”dlAll_ItemBound”
runat=”server”>
<!–指定table的ID，间隙，宽度–>
<itemStyle Width=”50%” CssClass=”alignTop” />
<!–指定列TD的宽度（2列就是50% 3列就是33%，一般不动，和所采用的class样式–>
<itemTemplate>
<!–一个新闻栏目循环的开始–>
<divmframe”)%>”>
<!–获取当前界面风格的样式，如果没有指定，就用class“mframe”–>
<table width=”100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td></td>
<td>
<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr><td>
<%#GetSortPic((System.Data.DataRowView)Container.DataItem)%>
<!–获取标题图片，没有图片就用文字说明–>
</td><td align=”right”>
<a href=”<%#DataBinder.Eval(Container.DataItem,”cUrl”)==DBNull.Value ? GetUrlSort((int)DataBinder.Eval(Container.DataItem,”classid”),DataBinder.Eval(Container.DataItem,”sdir”).ToString()) : DataBinder.Eval(Container.DataItem, “cUrl”).ToString()+”\” target=\”_blank”%>”><img src=”<%=style.PicMore%>” border=”0″ alt=”more”/></a>
<!–获得MORE的图片和链接，其中的html部分可以大胆修改比如图片的alt=”more”，改成“更多内容”–>
 
</td></tr>
</table>
</td>
<td></td>
</tr>
</table>
<table width=”100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td></td>
<td >
<table width=”100%”>
<tr><td valign=”top”>
<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<asp:Repeater id=”rpClass” runat=”server” >
<itemTemplate>
<!–一个新闻条目循环的开始–>
<tr><td height=”20″ align=”left”>
<%#NewsTitle((System.Data.DataRowView)Container.DataItem, 33)%>
<!–获得新闻标题，33是指调用的西文半角字数–>
</td><td width=”35″ align=”center”>
<spandateandtime”)<dateTime.Now.Date ? “gray” : “time”%>”>
<!–新闻时间的的样式–><%#String.Format (“{0:MM-dd}”,DataBinder.Eval(Container.DataItem,”dateandtime”))%></span>
<!–获得新闻时间，其中的时间样式可以试着改改–>
</td></tr>
</itemTemplate></asp:Repeater>
<!–一个新闻条目循环的结束–>
</table>
</td></tr>
</table>
</td>
<td></td>
</tr>
</table>
<table width=”100%” cellspacing=”0″ cellpadding=”0″ >
<tr>
<td></td>
<td> </td>
<td></td>
</tr>
</table>
</div>
<!–一个新闻栏目循环的结束–>
</itemTemplate>
</asp:DataList></blockquote>
明白了意思之后，我的修改版本为：
<blockquote>
<%BindAllNew();%>
<asp:DataList id=”dlAll”
RepeatDirection=”Horizontal”
RepeatColumns=”3″
DataKeyField=”classid”
OnItemDataBound=”dlAll_ItemBound”
runat=”server”>
<itemTemplate>
<div>
<%#GetSortPic((System.Data.DataRowView)Container.DataItem)%><span><a href=”<%#DataBinder.Eval(Container.DataItem,”cUrl”)==DBNull.Value ? GetUrlSort((int)DataBinder.Eval(Container.DataItem,”classid”),DataBinder.Eval(Container.DataItem,”sdir”).ToString()) : DataBinder.Eval(Container.DataItem, “cUrl”).ToString()+”\” target=\”_blank”%>”><img src=”<%=style.PicMore%>” border=”0″ alt=”more”/></a></span></div>
<ul><asp:Repeater id=”rpClass” runat=”server” >
<itemTemplate>
<li><%#NewsTitle((System.Data.DataRowView)Container.DataItem, 33)%><spandateandtime”)<dateTime.Now.Date ? “gray” : “time”%>”><%#String.Format (“{0:MM-dd}”,DataBinder.Eval(Container.DataItem,”dateandtime”))%></span></li></itemTemplate></asp:Repeater>
</ul>
</itemTemplate>
</asp:DataList>
</blockquote>

为“MORE”增加了一个SPAN的样式，以便对其进行控制。在样式中对强塞进来的那个箭头图片用样式表的选择进行了隐藏。

排除相对定位的误解

在狭小的空间挪动UL实在是很痛苦的事情。与其去HACK盒子模型的兼容，不如用相对定位好了。

我起初的理解：“相对定位”都是“相对”于上一个物件的定位方式，似乎很好理解。第一个相对定位标签没有出现问题。我顺利把“1”从红色区域下移20个像素到了他现在的位置。

但是“3”的相对移动却出现了问题。“3”的“相对定位”，应该“相对”于哪个对象呢？相对于整个盒子？不对，相对于“1”的当前位置？设置了一下也不对。整了个把小时，翻了好几本书，在《css权威指南》对相对定位的解释中仿佛看出了混乱的原由，但是还是晕乎乎不能理解，直到重新建立了一个测试模型才反应过来：“3”的相对移动跟前面“1”相对定位后的位置无关，它只关心自己本该在做什么位置，然后根据这个“本该”在的位置为原点相对定位。在此例中，“3”本该紧接在“1”未移动时的位置后面，也就是红色边框的下部。以这个点作为参照，设定移动参数，位置就完全正确了。

正确的感念应该是：相对定位就好像玩拼图，等默认位置排定以后，再把要相对定义的块抠出来，进行相对移动。《css权威指南》中举的例子中，文字被从段落中抠出来相对定位，是一个很经典也很极端的例子，可惜我开始没有静下心仔细领会它。

ID命名不可以数字开头

在测试的时候发现了一个以前没注意的情况，那就是ID选择符的命名不能以数字开头，ID为01、02、03是浏览器不可接受的。我不记得以前在哪似乎看过这样的规则，但是今天翻遍了手头的书也没查出这个禁忌，书上所有提到XHTML规则的地方只提示名字必须用小写字母，名字的值并不受这个规则限制，更没有提到说不能以数字开头。最让人摸不着头脑的是DW8的“所见即所得”可以接纳数字ID，而IE、FIREFOX、OPERA这些冤家在这个问题上立场统一：通通不接受，就当这个数字ID不存在。

也许这是DW8的一个BUG。

背景翻转的一个经验

在做导航菜单常用的背景图翻转时，发现一个经验：横向纵向数值要同时设置，那个0值是不可避免的。否则那个数值会直接写在CSS文件中，没有任何指示，结果实际效果就不可想像了。另外常用的将导航中文字缩进用负值的方法，个人觉得很别扭，在FIREFOX的web developer中查看css信息时拉出一条长长的方框，出于心理原因，干脆加上一个SPAN隐掉它。

20070611补充：SPAN隐藏的方法虽然以前比较流行，但是牵出了图片不可显示时的可用性问题。这个观点是从《CSS禅意花园》中得到的。看来，拉出个长方框就让它拉吧。