ALA 4.0非专业分析
最近觉得怎么A List Apart没动静了，在Web4C了解到，原来它Redesign（重构？已经不是第一次了）了，升级为ALA 4.0。由于DNS解析问题（jjgod说的，我不知道）新版可以通过http://alistapart.textdrive.com/来访问。
ALA 4.0布局十分简洁：（点击看大图）
基本上就是一个static的一栏（navbar），float定位的三列（content、secondary和sidebar），外加一个absolute定位的masthead。因为使用到float，为保证布局的稳定，三列都定了宽度，即这并非是流动（fluid）的设计，最佳浏览分辨率是1024*768。
navbar定义了min-width: 750px;，但IE并不买帐，所以还有了overflow: hidden;，很可怜，分辨率小的IE用户会损失后面的导航。
但是，分辨率小并没有影响到你的浏览体验，请看图：（点击看大图）
ALA的三列content、secondary和sidebar的宽度加上相应的padding值明显经过精确算计，在小分辨率下对浏览体验的影响很小（我是指1024*768跟800*600是目前主流的情况下）。
最后，发现一个很酷的效果：
想知道怎么做吗？显然，你要对我嗤之以鼻了，呵呵，这么简单的效果你也敢来显摆？在此我提示一下，字体必须为serif字体，行高必须为1，这样在放大缩小时，效果才不至于改变。
显然，ALA 4.0的CSS并没有什么出众之处，但这并没有妨碍她设计的优秀。学院派的风格，易用的导航，易读的文章等等，在web标准之外，我们还需要学习更多东西。
August 24th, 2005 at 17:05
我不太喜欢ala的风格，它在保证效果的前提下尽量压缩了代码，比如常用的div id=”header”它并没有。但是我觉得div id=”header”虽然不是任何时候都有用，但是可以更好的区分页面的结构。
August 24th, 2005 at 17:24
原则是，能不用就不用。
例如，通常会有人这样写：
<div id=”nabvar”>
<ul>
<li>…</li>
…
</ul>
</div>
但ALA这样写，我也是赞同的，因为我也是这样写：
<ul id=”navbar”>
<li>…</li>
…
</ul>
August 24th, 2005 at 18:14
对，就是这样，我认为div标签就是区分页面结构的，既然navbar是一部分，就应该用div括起来。而且还留下了修改添加效果的余地，何乐而不为呢。
每个人有不同理解，的确这样更节省代码。
August 24th, 2005 at 18:16
对了，今天看到你在BI上询问studio8发布会的事情，不知道你接到电话了没有？可不可以去？
August 24th, 2005 at 19:14
我的思路跟宇义比较接近
以前还从没想过
…
…
当然这样的确省代码
但结构不够明显
August 24th, 2005 at 19:19
以前还从没想过第二种
尽然直接显示源码
August 25th, 2005 at 09:13
div本身就是 一个“无意义”的标签，除非有特殊需求，否则我们没有必要加上额外的东西，因为，ul跟div一样，都是block。
August 25th, 2005 at 10:33
nonono~~
division
n.分开, 分割, 区分, 分界线
你说呢？
August 25th, 2005 at 12:05
其实，我认为，div是一个替代品，代表一些未在html中能够定义的元素。
你所说的division没错，但它原本的意思应该是，块（block），既然ul/ol也是块，那么何苦再加上一个多余的div？你所说的区分页面结构，那么ul id=”header”就不能区分？
当然，这要看设计，加上div当然有更大灵活性。
所以，我一再强调的原则：能不用就不用。
August 25th, 2005 at 21:04
这几天认真看＜网站重构＞觉得有些翻译怪里怪气的，不知道在说啥．
至于是否用div更像是兴趣的问题，俗语说兴趣无争辨～～
August 25th, 2005 at 21:07
另：顶部的导航中文可以改得大点，在firefox中有点小，默认的是英文字体用的～～许多wordpress的模板当中文用都存在这个问题
August 26th, 2005 at 12:00
我同意Neo的，能不用就不用。div和span是无意义标签，只是为了扩充html不足的标签使用。不过很多时候为了效果也没办法，只好加些冗余代码。
August 27th, 2005 at 01:50
to neo:
我对字体这方面没什么了解：为什么必须是serif字体，行高必须是一？
btw,在JJGOD那帖子之前，我这边的DNS一直都很正常，可以直接打网址上ALA新版
to chen:
呵呵，是，我当初看《网站重构》是，也感觉，它有些地方确实翻译的怪里怪气的，另外它主要说的就是一个理念，重在领会精神~~~
August 27th, 2005 at 07:02
上面你说的下滑线效果为什么不行呢？
能否给出代码？
我是这么写的。
#div{
width:250px;
text-align: center;
background-color: #F5F5DC;
}
a{
text-decoration: none;
font-family: serif;
color: #633000;
line-height: 1;
}
a:hover {
border-bottom: 1px solid #F7F3E7;
color: #000;
}
h3{
padding: 0;
margin: 0;
}
Facts and Opinions About PDF Accessibility
August 27th, 2005 at 07:06
哎呀！有的代码它给吃掉啦
页面代码：
[div id=”div”>
[a href=”#”>[h3>Facts and Opinions About PDF Accessibility
August 27th, 2005 at 07:32
搞定啦。
哈哈！！ 原来是没制定背景色。真是色盲，，，
August 27th, 2005 at 08:43
恩，DNS 的运作原理，可以看 O’Reilly 出的 DNS & Bind。
近来发现尽量用标准的标记 (比如我要显示代码的时候用 code 而不是 span class=”code”) 有这么个好处，RSS Reader 读的时候，(比如 FeedDemon) 有预设的 Style 可以自动套用上去，这一点比较方便。
August 29th, 2005 at 09:49
没有看ala的源代码，那个下划线应该是利用文本居中和margin-top:-1px;做的。
test
alistapart alista
August 29th, 2005 at 09:50
body {line-height:1; text-align:center;}
a {
background-color: #CCCCCC;
margin-top:-1px;
text-decoration:none;
}
a:hover {text-decoration:underline}
#testlink {width:100px;}