关于居中布局和IE双倍边距bug
另外一种居中的方法是在使用绝对定位的前提下，用left：50%+margin-left:-375px;的组合方式来居中。两种居中方式如下。
/* 方法一 */
body {
background: #00FF7F;
text-align: center; /* hack for ie center alignlayout */
}
#wrapper{
background: Aqua;
width: 750px;
margin:auto; /* 或者 margin-left:auto;margin-right:auto;*/
}
/* 方法二 */
#wrapper2 {
position: absolute;
width:750px;
left:50%;
margin-left:-375px;
background: Orange;
}
我个人一直使用方法一的方式来居中，因为感觉方法二的区块缺乏必要的刚性，代码也不太好理解。如果你缩小方法二的窗体到一定限度，就会看到整个布局会出现流动的情况。当然有人要的就是这种效果。:)，另外方法二的一个好处是在其他嵌套区块中不必覆盖body元素的text-align: center;的设定，因为大部分文本还是会以左对齐居多。这样一定程度上可以减少一点冗余。不过我觉得这个好处可以忽略不计。总之，大家根据各自喜好各取所需便是。另外一个是ie的双倍边距的bug,解决方法就是加上display:inline;的设定即可。其实这个解析错误的bug会影响很多方面。如果你遇到css布局在ie中间距表现异常的时候，就可以试试看加上display:inline;的属性申明了。而且在一定特定的布局问题问题，需要组合使用display:block;和display:inline;才能让布局如你所愿。我在一个unorder list控制的图片菜单中就遇到过类似的问题。
尽快各种不同的浏览器都有css bug,但是css页面布局方式发展到今天，已经比较成熟了，因为bug而让你抓狂不已的发生机率已经不大了。如果有问题，多查查搜索引擎能够解决你大部分的问题。如果，平时闲着的时候，可以作些试验的话，也许更能够在紧急情况下也能够泰然自若。
下次有机会谈谈，图形、图片、flash、javascript和css的组合布局问题。毕竟，客户要的是更“美”的布局。 由 tristones 于 下午09時43分 所发表 | 永久链接 | | 留言 (7)
css 布局设计的基础：块元素(block element)和 内联元素(inline element)
15号w3c css 工作组放出了三个工作草案一个Last Call:
- 2005-12-15 工作草案: CSS3 advanced layout module（css3高级布局模块)
- 2005-12-15 最后征求意见: Selectors（选择器)
- 2005-12-15 工作草案: CSS3 Multi-column layout module （css3 多栏布局模块)
- 2005-12-15 工作草案: CSS3 cascading and inheritance module（css3 层叠和继承模块)
css3离我们是越来越进了，不知道到时候哪个浏览器厂商会最先跟进?好了，进入正题。
为了提高可用性和加速页面载入速度。把lilina聚合搬到了单独的php页面中。现在的页面已经能够通过w3c html validator校验了。因为使用了flickr和豆瓣的javascript badge的缘故，校验器还是会有警告提示。另外后端使用的fckeditor编辑器也有bug存在。比如我写下如下代码。
<pre><ul><li>条目1</li><li>条目2</li></ul></pre>之后,MT生成页面的时候会变成。
<pre><br /><ul><li>条目1<br /></li><li>条目2<br /></li></ul><br /></pre>
这样的不符合规范且完全多余的br标签。html validator的提示如下。
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").就是说在内联级元素(inline-level element)中试图插入块级(block-level element)元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢？。
块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
ps:关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
深入阅读 "css 布局设计的基础：块元素(block element)和 内联元素(inline element)"由 tristones 于 下午03時21分 所发表 | 永久链接 | | 留言 (6)
为什么要选择CSS界面设计？
什么将推动css成为web界面设计的重要基础？
- 搜索引擎重要性的提升
- 模版技术的流行
- ajax,web2.0技术的流行
- 平台无关性的考虑？
- 基于机器友好的考量？
搜索引擎重要性的不断提升。不管是商业网站还是内容服务提供商，都希望有更多的受众。达成此一基本目标的手段之一就是通过众多的搜索引擎渠道获得尽可能多的潜在受众。良好结构和内容的页面往往更受搜索引擎的亲睐。基于搜索引擎友好的web界面设计，要求web设计和开发者用标准的html,dhtml,xml,css来组织内容。而组织良好的css也自然能达到使用者友好、搜索引擎友好、机器友好的目的。
模版技术的流行并不能成为css发展的直接动力，因为基于表格的界面设计方法也能达到相同之目的。何况css layout的首次开发时间相对表格技术来说要长一些。我们假定web开发的基本流程是designer用photoshop设计好基本界面psd图，然后交给web developer把psd图用html,css来制作成页面毛胚。而web programmer把静态的毛胚用动态语言嵌入的方式制作成模版或动态网页。在此基本流程中，如果是复杂的布局，那么表格的布局方法的开发速度要比css的布局方法高效的多。这个因素也是css layout不能快速流行的一个主要原因（不过大量的css layout设计模版的涌现或可解决这个问题）。不过缺点未必是真正的缺点，优点亦是。如果css layout的设计经验大量积累以后，css layout可以被设计成深具弹性，与内容或程序分离度相当高的独立控制器。如果遇到界面需要反复修改的情况，web界面设计师完全可以用自己的静态页面配合css来独立操作css layout的修改和优化，而不必阻断程序员的开发进度。当然也不必用嵌满脚本的动态页面来修改了。你所要做的只是更新你的css文件和图片。
虽然我的表述不能给刚开始进行css layout的设计师以立竿见影的效果，但是当你有了大量的实战经验后，必然也会被css layout的威力所打动。
ajax技术的流行成了今年web开发领域最热门的一个话题。这个老酒装在新瓶子里的技术让很多技术狂热者心跳不止。不过，我至今没有把这个技术用在任何我接触到的上线网站上去，即不便多说什么。不过这个技术肯定将直接逼迫开发者用更加符合标准的头脑来思考一系列技术问题。作为一种自然演化，会有越来越多网站贴上w3c css validator , w3c xhtml validator的标签，向明日的某一种技术跃进作好准备。
平台无关性的考虑其实也是css的一个相对劣势，浏览器之间的战争就是各路英雄都想当武林盟主，统一标准，统一天下。各门各派的各种招数都用上了。像firefox这种名门正派以坚持实现既有标准为主。像ie这种旁门左道，仗着家里有大把的银子和官府（OS）勾结的背景，下迷药使绊子放暗器诸多手段无所不用其极。害得诸多web开发者苦不堪言。要么放弃兼容性、要么花大力气来实现多平台兼容，这么做的直接后果是开发成本大大增加而客户未必买你的帐。而且据说这IE7也不是什么好鸟，看来这暗无天日的日子还要继续下去了。
闲话不多说了，我现在基本只考虑ie和firefox兼容，如果mac os如期正式出现在pc上的话，估计还要加上safari了。其他入netscape,opera基本就不考虑了。
基于机器（设备）友好的考量，因为css并不是只是为了提升使用者友好度的技术。我们还要考虑对打印机是友好的，对麦克风是友好的，对其他可输出内容的机器都是友好的。暂时想不出什么好词来，就用机器友好来统称其他输出设备的友好度考量吧。其实，除了打印友好外，其他的设备友好估计现在还少人问津，不久的某一天，你可以来听我的blog,来摸我的blog，来吃...我的blog.
大致写了一点关于css layout的东西，感觉思路还没有完全缕顺，先贴出来给大家拍砖，也算是想达到大家共同进度目的的一个楔子吧。
由 tristones 于 下午04時59分 所发表 | 永久链接 | | 留言 (2)css layout 设计中的除错小技巧
在css-p layout设计阶段，为了检验区块是否正确定位，我们一般会临时给区块div设定类似:
border: 1px solid red和backgroud-color:#193071;
这样的的属性。这样的技巧能够让你一目了然的发现layout定位上存在的问题。在发布阶段或者不需要的时候，把border width设定为0px即可.
btw:什么是CSS-P: css-p即为Table-Less Layouts或者positioning attributes of CSS。随便你怎么叫，反正就是无表格定位的CSS技术拉。在术语满天飞的年代，又多了一个P......boooooo....
由 tristones 于 下午03時22分 所发表 | 永久链接 | | 留言 (0)用纯css实现rollover效果的导航
本文档改编自http://www.meyerweb.com/eric/css/edge/popups/demo.html .原文较长。我简化了一下，并且把rollover img的效果合并在一个文档中。只用来说明用纯css实现rollover的效果（见左侧的导航条）。原文是用了popups的字眼。我所理解的popup一般表示弹出框，跟此处的效果不符，故改成rollover来表述。
btw:这种实现的方法其实用在很多地方。
演示页面
首页增加moofx的缩放效果
感觉还是页面太长，把首页收录的最新几篇正文收在一个区块中，按照时间线索（按天）把每天的文章收拢在一起，点击不同的日期，可以看相应日期的文章引用。这个小效果是用moofx这个基于prototype的轻量化javascript效果组件实现的。这个库提供了最常见的几个视觉效果的实现。实现的方法很简单。就像作者说的，不是要替代script.aculo.us这样比较全面的js视觉效果库，只是为喜欢简单的懒人（就是我这种人！）提供一个最最基本的可选方案。 本站标签部分的文字在ie中行距还是太靠近了，需要继续调整。另外也可以把把“最新文章”和“本站标签”也做成展开/收拢的效果。最新消息和标签聚合应该不同于文章区的带互斥效果的展开/收拢，而应该作为两个区块能够单独展开和收拢。如果用moofx实现上述需求是很容易的，只要在控制按钮部分加类似这样的代码:
<script type="text/javascript">
$("code1").style.height = $("code1").offsetHeight + "px"; //i'm automatically setting the height to avoid a flicker
$("code1").h = new fx.Height("code1");
$("code1").w = new fx.Width("code1");
$("code1").o = new fx.Opacity("code1");
</script>
<p>custom method: pass starting value and ending value.</p>
<a onclick="$('code2').h.custom(0, 42)" class="demo" title="Height Effect"></a>
<a onclick="$('code2').w.custom(0, 200)" class="demo" title="Width Effect"></a>
<a onclick="$('code2').o.custom(0, 0.4)" class="demo" title="Opacity Effect"></a><br/>
<div id="code2" class="wrapper">
<code class="long">
something.onclick = function(){<br />
effect<b>.custom</b>(x, xx);<br />
}
</code>
</div>
即可控制上述code1这个区块根据高度、宽度、透明度的消隐效果。不过我刚把这两块归并到了#newArticleBody这一个区块中。等下次再把他们分开加上这个效果吧。 最后谈谈我的Movable Type模版的修改方法。我用的工具。dreamweaver,topStyle, 各种浏览器。当然还需要有一个可用的MT平台来测试。 dw作为基本的界面预览，topstyle作为主要的css编辑工具。虽然dw也可以编辑css，但是经过几个版本的改进，我个人感觉还是差强人意，易用 性并不好。不过dw8总算可以比较准确的在design模式预览pure css的界面了。8之前的版本的话，干脆换成scite就 可以了。 那修改首页模版来说，首先建立一个新的测试用索引模版，把主索引模版和要用到的模块模版的内容全部抽取出来集合到新的测试用索引模版中。各个不同模块模版 都首尾注释好。然后用这个新测试模版去生成一个静态文件后，就可以把这个静态文件放在本地编辑/测试了。当然，需要用到的css文件也要拿回来。css引 用路径最好用相对路径。这样可以用最高效的方式不断测试布局。等改完满意后，即可把相应的内容用mt标签替换掉，还原成测试用索引模版就搞定了。 因为css的布局设计不同于其他软件开发，至今没有一个很理想的版本控制工具能够很高效的管理css layout开发。也许是我没找到这么个玩意儿，而它早就存在了！
深入阅读 "首页增加moofx的缩放效果"由 tristones 于 下午11時27分 所发表 | 永久链接 | | 留言 (0)
修改了自己blog的css样式
自己的blog用了很久了，终于修改了一下，把老的有table混排的布局用纯样式表重新改写了一次。虽然css本身的语法都非常简单，但是因为要兼容各种不同的浏览器firefox,safari,ie等等，所耗费的调整时间会成倍的增加。而且同一个浏览器的不同版本也会有不少差异。这些问题，导致不但要求你有良好的语法书写习惯，而且还要掌握大量的小技巧来尽可能的调和浏览器兼容问题。使自己的布局，能够在不同浏览器上，有基本相同的外观。 而且，要写出完全能够通过w3c css validator和W3C Markup Validation的检测的css+xhtml布局，要费不少的力气。我的首页因为聚合了lilina的rss服务，加上用了不少mozilla专用的css tag和后台cgi生成的代码会自动增加一组p标签，导致标签对不匹配，需要手动调整代码。因此，要通过这两个校验太费时了。 至少ajax的升温，导致写符合规范的css和xhtml的要求会变得很平常。为了css开发过程中兼容性的问题，一段时间的知识储备是很必要的。 链接是我blog用的css，还比较乱，应该还可以去掉一些tag和重复的属性。 正文部分所列源码为本站索引页用的源码。
深入阅读 "修改了自己blog的css样式"由 tristones 于 下午01時26分 所发表 | 永久链接 | | 留言 (0)
利用css动态改变字体大小
在这个可算是页面可用性的基本功能。只要页面的Accesibility和UI都站在用户的角度去考虑，把看似简单的东西都想到、做到。这就是一个合格的UI设计。切入正题。
在页面中用link命令导入需要的两个外部css文件。
[link rel="alternate stylesheet" href="http://www.designbyfire.com/large.css" type="text/css" title="large"/]
[link rel="stylesheet" href="http://www.designbyfire.com/small.css" type="text/css" title="small"/]
深入阅读 "利用css动态改变字体大小"由 tristones 于 下午03時54分 所发表 | 永久链接 | | 留言 (3)
XSLT/CSS不是银弹
曾经一段时间非常追求XML/XSLT/CSS的数据/结构/表现分离的理念。但是XSLT实施成本比较高，所以Resin上开发了基于XHTML的轻量级模板技术，我觉得还挺人性的 ASP .net的实现类似。 可能没有最好的模式，只有最合适的模式：关键还是要看开发本身的复杂程度：100行代码过程性编程效率可能最高，1000行代码可能面向函数开发效率最高。但是超过10000行，可能不得不OO了。刚才看到车东兄在我的BLOG中CSS Oriented Design的留言也深有同感。除了技术狂热者以外，商业应用的第一考量就是成本。我们要做的就是尽量的控制好成本。在我们这个同业无序竞争的环境中，多快好省就是目标。 XSLT/CSS也不是什么新鲜东西了，实际证明他们不是解决所有问题，提高效率的不二法门，不在特定的问题域中考虑问题，只推崇技术的做法，肯定是不明智的。这不等于我不喜欢他们，但是，喜欢他们，还是要把他们用在合适的地方。数据/结构/表现分离技术会继续成长。CSS Oriented Design技术也要继续研究。但是，他们不是银弹。银弹只在你的头脑中。
深入阅读 "XSLT/CSS不是银弹"由 tristones 于 下午12時56分 所发表 | 永久链接 | | 留言 (0)
SciTE 是基于Scintilla的编辑器。这个绿色小软件可以支持as2的语法高量。也有vs.net编辑器的数据层级收放功能。很好用的小东西。希望dreamweaver也能够增加数据层级的收放管理功能。我在做pure css的layout的时候，往往会遇到代码很长，不方便管理的问题。而且，dreamweaver的语法提示功能相对也比较弱一点。mm在规划长远架构的同时，希望也提升一些基础功能的易用性。做出更加强大的IDE工具来。
由 tristones 于 下午12時16分 所发表 | 永久链接 | | 留言 (0)简单的配色工具
在Mark's Place看到的这个基于Web的配色小工具，简单好用。这下子对设计感冒的朋友方便了。对于designer的配色方案的选择也是一个很有用的参考。点这里使用
深入阅读 "简单的配色工具"由 tristones 于 下午09時07分 所发表 | 永久链接 | | 留言 (0)
macromedia终于推出了一个可用的dw2004版本7.01
在我之前的blog有提到过dreamweaver2004这个macromedia推出来的不成熟的产品的评论。终于，macromedia在较短的时间内推出了7.01的update。这个update的推出，让我可以慢慢的把dreamweaver mx淘汰掉了。原先我所诟病的css解析器问题，得到了比较好的解决。解析速度大大提高，也解决了原来解析庞大css结构、切换到设计视图而死机的大问题。 软件启动速度也提高了不少，基本跟dw mx的启动速度差不多了，不知道有没有mm说的，有70%的速度提升，就不得而知了。（多半是mm商业宣传说法 :) ）。
暂时update只有英文版本的，不过也可以用在中文版本上，但是会出现少量的中文文字发生乱码的问题，不影响正常使用。
CSS Once,Not Run Anywhere
微软总是麻烦和事端的制造者。就像一个小孩，表面上听从了大人的话。但是，有不完全遵照大人的吩咐去做。喜欢做精作怪的搞些自己的小玩意儿。表面看，还是在做大人吩咐的事情。:0
要让你设计的CSS布局，在各门各派的浏览器里面有一致的外观，是一件困难、痛苦、乏味的工作。而且，那几乎也是不可能完成的任务。总会有或多或少的差别。特别是使用了复杂结构的CSS layout更加是如此。这些麻烦和事端的制造者，为了各自的利益和希望掌握标准的野心，搞得开发者苦不堪言。大量的时间浪费在了仅仅是为了取得一致的浏览器表现。沿用讽刺java的一句话，CSS Once,Debug Any Navigator
今天天气很不错，过了几天春寒料峭的日子。和煦的春风又回来了。象天气预报一样，我们只能预测未来，不能完全掌握未来。
CSS 良好交互的基础
macromedia关于wired使用css建构良好架构的网站的文章。里面的一些观点，从我的实际经验看，很有遵循的必要。大致归纳如下
第一条就是我原先提到的，先有了成品的客户确认的精确的设计以后，再去建构css。这样，可以减少你大量的不必要的返工。不要只有设计毛胚，就贸然开始css设计。在设计pure css的网站的时候，心里一定要有明确的模块化的概念。根据laytou和function做模块化的设定。
第二条也是我现在遵循的，很有必要的一条原则。良好组织的css文档和详细又明了的注释。在团队协调和以后自我修改的时候也可以节约大量的沟通和再回忆、解读的时间。不要把css的设定都放在一个css文件里面。我现在一般通用的做法是，一个portal css文件作为入口，把其他的css按照不同的功能放在不同的css文件里面，portal css文件import.比如fonts.css专门负责字体设定。themes.css专门负责主题类相关的设定，还有print.css,forms.css,layout.css等等不同的功能css。
第三条是不断的学习新的css技术和概念。多研究其他优秀的pure css站点。理解他们的应用原则。慢慢自己的css设计也会得心应手。
深入阅读 "CSS 良好交互的基础"由 tristones 于 下午02時31分 所发表 | 永久链接 | | 留言 (0)
CSS Oriented Design
如何评价一个站点的好坏，也许没有一个统一的标准。但是，建构在良好组织和结构基础上的网站，肯定也是易于维护和扩展的。我现在的BLOG就应该作为一个bad design&organized得范例。看来还是有必要重新整理一下结构了。我平时的项目中也遇到了很多类似的问题。也不是说CSS就是天下无敌，一定要比table oriented design要好。站点，应该是对于设计者易于设计，编程者容易整合，管理者容易维护的，浏览者容易阅读的四易目标。但是，现行的所见即所得的设计器，比如dreamweaver,frontpage。对于复杂结构的css的支持度还远没有达到让你满意的地步。我想这也是阻碍css大量应用的一个重点。或者应该说是设计一个pure css结构的障碍。web designer的设计模式是基于图形的，而不是一堆恼人的css标签。COD（css oriented design)我暂且把基于css的设计良好结构和易于导航，搜索引擎友好的站点的方法称为COD。
在COD方面，众多的BLOG已经做的很好了。车东兄在google领域的一些见解，有很多值得我们学习。
深入阅读 "CSS Oriented Design"由 tristones 于 下午04時30分 所发表 | 永久链接 | | 留言 (4)
topStyle3.0研究笔记
topStyle作为css编辑器，性能很不错。
css代码解析速度非常快，那个烂dw 2004根本不能比。
css属性面板设计也非常好，比dw 2004那个阳春css编辑器好太多了。
不过TS3.0不支持Utf-8编码。我现在页面大多使用utf-8编码格式，不过这个基本也没有太大妨碍。
深入阅读 "topStyle3.0研究笔记"由 tristones 于 下午02時04分 所发表 | 永久链接 | | 留言 (2)
翻开CSS的第一章---石头原创
网络技术的发展实在是日新月异。这么没学完，那个又冒出来了。
自从开始研究MovableType这些BLOG技术以后，发现CSS在里面扮演了非常重要的角色。
深入阅读 "翻开CSS的第一章---石头原创"由 tristones 于 下午02時03分 所发表 | 永久链接 | | 留言 (0)
