Blogger beta新模板

Blogger beta新模板修改起来并没有我预先估计的那样复杂。

今天帮云影把新的Blog基本搭建好了，还有些细节要完善。地址：http://hallenyu.blogspot.com。主要工作就是把原来的CSS搬过去，然后根据布局的需要增加了几个DIV——顺便梳理了一下整个模板的结构，加了一些注释。
我是在Blogger beta提供的现成模板基础上加以修改的。在梳理结构过程中就发现那些高手的coding习惯也不是足够好。比如我的一个好习惯：为DIV加注，如：<div id="idname">...</div><!-- #idname -->在原始模板里就没有见到，于是要定位某些元素非常困难。梳理结构，既是主动了解，其实也是迫不得已。

所谓技术进步，其实都是对最终用户而言。Blogger beta技术进步了，更方便了，是说对不需要像我这样去改代码而言，进步了，方便了。改代码其实要比以前做更多的事。当然设计者也是一个层面的最终用户，Blogger也需要为咱们多多努力。

小心背景的fixed属性

在给标题、列表等做图标的时候，正确的方法是设背景。比如：
h2 {background:url(some.gif) no-repeat left top;}
但我做出来的效果在Firefox里面总是不显示图片，而在IE就正常，很郁闷。后来仔细检查，才发现代码跟上面不太一样：
h2 {background:url(some.gif) no-repeat fixed left top;}
去掉fixed，Firefox就能正常显示了。

no-repeat fixed，是设页面背景时做顺手了的，而在给标题、列表设背景时也没多想，习惯性地就敲出来了。
CSS看似简单，水还是挺深啊。

h#标签的缺省值

h#的margin，在IE里面缺省值为0，但在Firefox和Safari里面top有个大约10px。后者比较奇怪。
所有有些地方需要强制指明h# {margin-top:0;}

里昂：皇家马德里中场休息时发现上述问题。里昂打得不错，皇马整体性太差了，光有大牌是不行的！其实里昂阵中也不乏骁将，尤其是新生代的法国国家队几个核心，只不过名气尚且不大而已。

2：0到70分钟了，继续看。

dp.SyntaxHighlighter

这个页面工具太赞了！

在WebReference闲逛的时候，发现了这个dp.SyntaxHighlighter。其作用是高亮页面内的源代码，效果见WebRef的文章。

更赞的是，dp.SyntaxHighlighter不但支持各种源代码，还是一个免费工具！

我会把这个工具用到本站上。

filter造成页面刷新失败

一直都有发现我的部分页面存在一个问题：页面一些元素在滚动时会消失或破碎，比如Flash或者下拉框。实际上并没有消失，只是在滚动时这些元素刷新失败，所以就看不到了。而这个问题也仅仅存在于IE，或IE内核的比如Maxthon当中，Firefox或Safari就很正常。

本站最近一次更新取消了原来设计的一个很酷的效果：鼠标悬停关闭按钮时，整个页面变成黑白。
这个效果基于CSS之filter特效，但只有IE才支持。而本站首页现在不用弹出新窗口打开，那个关闭按钮意义就不大了。如此等等，那就取消吧。
取消filter特效以后，CSS中定义的filter属性也顺手删除了，这时意外地发现：页面元素刷新失败的问题不存在了！

IE啊IE，让我们说什么好呢？

一些收获

总算把“布局和表现分离”这一思路落实到了云影的Blog上。这几天研究下来，还是有些收获的。

在兼容性方面，应该优先考虑更规范的浏览器。在IE和Firefox之间，更规范的当然就是后者了。所以大部分调试工作应该放在Firefox当中，而不是IE当中进行。

多层背景的放置，有一个小技巧。首先，与内容无关的图片，按WEB规范应该做成背景图，而这并不光是规范问题，把图片做成背景还非常有利于定位。
我在云影的Blog里就是这样做的，有一层真正的页面背景，还有一层背景其实是顶部的Banner。最初我是把页面背景放在body标记里面、居中，而Banner是放在一个Headbox的div层里面、居中。
问题就出现了——在Firefox里面看，一切正常，但在IE里面，Banner比预想的位置偏左了1px！如果把body的左边距设成1px，那么在IE里面看上去就正常了，但在Firefox里面，Banner又会向右偏1px。
基于上面的“在兼容性方面，应该优先考虑更规范的浏览器。”，可以判定这是IE的Bug！但仍然要解决这个问题。
同时，这样的布局还带来别的问题——如果浏览器窗口缩小，在Firefox里面毫无问题，上下两层图片对应的位置保持不变；而在IE里面，body里面的背景边上却会出现一段未曾预料的边距。糟糕的IE！
如何解决？其实不难想到——把页面背景从body里面拿出来放在页面最外层那个定位容器里面就好。于是以上两个问题：偏移和边距，都解决了。

云影的Blog是放在Blogcn的。这是一家极其糟糕的Blog提供商，技术方面乏善可陈。但抱怨归抱怨，问题还是要解决。我在做这个“布局与表现分离”的过程中，遇到最大的问题就是Blogcn的标记兼容性太差。

模板里面没法放!DOCTYPE声明。
这样的后果就是没法让IE和Firefox对BOX的解释取得一致。在没有适当的!DOCTYPE声明时，IE里面的BOX尺寸是含边框、内边距在内的，而按WEB规范，这样是错误的。
那么如何在没有!DOCTYPE声明的情况下，让IE听话一点呢？我想到一个办法：嵌套DIV，让两层div的边框和内边距均为0，而内层div的外边距就充当了如果使用单层DIV时的内边距。
因为这两层DIV当中，边框和内边距都为0，所以不管浏览器加不加这两个尺寸，都没影响了。

这个技巧附带的好处是：在保持布局跨浏览器的兼容性的同时，可以使用一些IE特殊的属性，比如滚动条的自定义。按规范不应当这样做，但其实这样也满有趣。

对于嵌套DIV情况下，如何让外层DIV的高度自适应内层DIV，网上的论述很多了。就是让内层DIV具有float属性，成为浮动层，并在下边加上一个控制DIV，具有clear:both属性。
综合一下，还应该加上两条：
浮动层还应该具有display:inline;属性，以解决IE莫明其妙的边框加倍问题；
控制层为了不影响布局，可以把height、font-size和line-height设为0。

有一个调试中的技巧，可能大部分coder早就在用了，不过对我来说还是一个新的收获，因为毕竟以前还没有切实、全面地采用DIV+CSS。
具体做法是在调试时把各个DIV都加上“border:1px solid #color;”这样的属性。很简单，但很有效。

最后，我发现采用DIV+CSS、布局与表现分离的思路，用文本编辑器来写网页其实更方便、更舒服了。

DIV + CSS 布局的几点体会

这个周末，白天接待彩虹，晚上研究网页设计到很晚，总算搞清楚了几个问题。有点累，倒也值得。

IE计算div的宽度，通常会忽略margin、border和padding的宽度属性，而Safari、Firefox不会。为了保持布局跨浏览器的一致性，必须在网页的head里面加上一段!DOCTYPE声明。

另一个涉及跨浏览器一致性的布局问题是li标记的list-style，在Firefox里面被解释得比较奇怪。务必留意。

学会了嵌套DIV情况下，如果让外层div的高度自适应子div的高度。这种情况经常出现在两列布局情况下。比如一列Blog正文，一列Sidebar。往往这两列都不可能正好等高，所以它们的背景就会出现高差，如果你不希望看到结果，最容易的解决办法就是把这两列div放置到一个外层的div当中，而用这个外层div的背景来替代列背景。但在普通情况下，这个外层div并不会如我们所愿——它并不会自动适应子div的高度。
解决这个问题的关键有两点：
第一：在子div中使用float属性；
第二：不指定浮动层的position属性。

多重Style的问题。虽然目前Firefox已经支持这个CSS官方要求的特性，但实际使用的时候，遇到的问题还是不少。IE和Safari根本就不支持，如果要实现用户选择Style，就得用script来处理。script还不够，比如在一个Blog里面，用户选择了“风格二”，但他在点击链接、评论或存档文件之后，或刷新之后，又回到了缺省页面——那么又得加上Cookie来存储用户选用的那个风格表……真是麻烦啊！
所以如果我要使用多重风格，我就只会简单地在页面告诉用户：如果你想使用多重风格，请使用Firefox浏览本页。
这样算是为Firefox做广告吧？呵呵。

多重风格必须要建立在DIV+CSS基础上。如果靠Table布局，改改颜色、字体什么的没问题，但做不到比如交换左右两列的位置之类的变化。
另外一个要点：把你能想到的所有内容都用div做出来。如果在某个风格里，你不想显示某些内容，很简单，用display:none把它们隐藏就好了。