2. 上次更新好像是去年7月份的事了，如果再挺三个月，刚好一年没动静，到时候再更新一下，然后将本站改为”年刊”，想来也算是个交待…

3. 这段日子，应该说Jorux几乎和Web design脱离了关系，虽说没忘CSS语法，但是要想信手拈来一篇文章，已无可能。鉴于原创和少给互联网添垃圾的原则，忍到了现在…

4. 应该说本人对Firefox是有意见的，不然我就不会向我老爸推荐Opera了。

5. Firefox有那么多缺点，我居然也认了，不就是多了那几个插件嘛！加上现在多了个刀枪不入的Safari，我真有种先弃Firefox而后快的冲动。

6. 好在Mozilla CEO不只是发发牢骚，Firefox 3b5应该说在启动速度，系统资源占用率等方面有了长足的进步。

7. 上次那个版本的FirefoxPortable，Liveshare把它弄丢了，所以把它放在以下两个位置，希望这次免费的下载能进行地久一点。

Box: http://www.box.net/shared/49u79vvccc

Fs2You: http://www.fs2you.com/files/ec86b46b-07eb-11dd-8bd5-0014221f4662/

8. 此J版FirefoxPortable共含插件23个，其中有三个被Disable，原因是Jorux没有将它crack成功，暂时用不了，只好等原作者自己更新了。

9. 如果想了解上个版本所用的插件，可以在这里下载插件列表。只是它们大部分在Firefox 3b5上用不了。

10. 此版软件未作去病毒处理，因为本人不使用任意杀毒软件，但以本站的信誉担保，此地无毒，但后果请自负。

11. 既然是beta版，所以难免莫名地崩溃，请不要惊慌和失望，因为明天会更好。

12. Feedburner可能是被”黑了”，请更换Feed地址，或用Email订阅。

13. 得说再见了，Jorux是能力有限，大半年了，就整出个J版FireFoxPortable，实在是羞愧。秉承非原创不发表原则，但也不希望下篇文章会是在2009。祝各位读者鼠年有个好收成！

14. 忘了说一句，希望大家多留几句言，本人回复的速度那是相当…

【End】

在此，举个导航条的例子来说明我的观点。大家应该看见过很多诸如下类的导航结构：

首页 | 关于 | 博客 | 留言 | 相册

它们有着共同的特点，都有分割条“|”将各个条目分开。要实现以上效果的导航栏，其Html/Xhtml有很多种写法，在此仅具几个比较典型的例子：

例1：

<p><a href=”home.html”>首页</a> | <a href=”about.html”>关于</a> | <a href=”blog.html”>博客</a> | <a href=”message.html”>留言</a> | <a href=”album.html”>相册</a></p>

例2：

<ul>
<li><a href=”home.html”>首页</a></li>
<li>|</li>
<li><a href=”about.html”>关于</a></li>
<li>|</li>
<li><a href=”blog.html”>博客</a></li>
<li>|</li>
<li><a href=”message.html”>留言</a></li>
<li>|</li>
<li><a href=”album.html”>相册</a></li>
</ul>

例3：

<ul>
<li><a href=”home.html”>首页</a> | </li>
<li><a href=”about.html”>关于</a> | </li>
<li><a href=”blog.html”>博客</a> | </li>
<li><a href=”message.html”>留言</a> | </li>
<li><a href=”album.html”>相册</a></li>
</ul>

例4：

<ul>
<li><a href=”home.html”>首页</a></li>
<li><a href=”about.html”>关于</a></li>
<li><a href=”blog.html”>博客</a></li>
<li><a href=”message.html”>留言</a></li>
<li><a href=”album.html”>相册</a></li>
</ul>

以上为说明Semantics而举的四个导航条Html/Xhtml例子.
例1使用了段落p作为导航条的语义元素标识(相对于结构元素，诸如div等)。很显然它犯了很典型的错误，错误的把原本是条目(list)的导航栏看成了段落。
例2,3,4都使用了ul/li作为导航栏的语义元素标识，它们的区别进在于分割条“|”的位置，以及是否在Html/Xhtml中出现。
由于CSS的存在，利用其控制表象的能力，可以将以上四个例子的外表变得一模一样，而不被肉眼察觉。但是这只是表象，随着搜索引擎的互联网地位提升，以及XML的使用频率和重要性增加，它们作为Robot，只读Html/Xhml/XML源代码，而不读CSS，也就是说它们更在乎你的网页的实际含义，而不是你的网页好看与否。也就是说让你的网页符合语义规范，就是让这些Robot更好的读懂你的网页，提高你的网站在搜索结果中的排名，获得更大的利益，这只无形的手决定了西方对Semantics的重视，甚至超过网页是否通过W3C的检测的重要性。
我个人认为的Semantics的含义就是：

将CSS去除，你的网页表现依然规范，易懂。

这条法则，能让你的肉眼和Robot的逻辑达到某种程度的统一。利用以上理论，在例1中犯的错误，就比较容易理解，条目中的关键词比段落中的关键词，更具价值。一个原本是条目的内容为什么还要使用段落？！

那么例2,3,4中，分隔条怎么会如此重要。

在例2,3之中只是位置的区别，现在不用任何CSS来控制表象，那么其Html/Xhtml表现的区别是显而易见的，读者可以试试。在例2中，分割条会单独占据四个li，原本五个li变为了九个。打个比方，一个五个人的公司现在变为了九个人的，大家的股份被稀释了一半，每个股东的重要性当然会被削弱。更要命的是有四个股东居然是一模一样的。Robot可能会认为那四个股东(|)更为重要，而降低了其他股东(关键词)的重要性。在例3中，使分隔条成为原来股东的秘书，自然不会影响关键词的重要性。
从表象考虑，也是例3优于例2的表现，例2中分隔条单独占据一行，让人费解。

那么例4中，没有使用分隔条，其在语义学上更优。分隔条的表现，可以在CSS中用图片背景轻松实现，而且像这种类型的单色分隔条，用gif格式的话，只有几个字节，不影响下载速度。

以上是Jorux在跟西方人交流中，结合用户反馈，得到的一些心得体会。大家如有不同观点或是问题，尽管拍砖。

希望以此引起各位大陆朋友的重视，重视使用h1/h2/p/ul/li/blockquote/table等语义元素的使用和规范，不要滥用div等结构元素，Robot是不太亲近此类元素的。比方说，严格意义上说单个网页，只允许出现一次h1，就是你的网页title，h1在Robot中的地位仅次于<title></title>。

注：已经忘了上次更新是什么时候了，如此更新速度，已经让我几乎想放弃。原以为，这种半死状态的网站，会逐渐被遗忘，但是Feed的订阅量却在攀升，这让我怀疑Feedburner的计数器是不是出了故障。
能让我聊以慰藉的就是这篇Write Articles, Not Blog Postings，Jakob Nielsen这位研究交互界面的权威显然找到了其蜗牛式速度的合理性。大家可以订阅一下此人的Alertbox。
毕竟我下星期就开始正式工作了，其内容绝不会和网页搭上边，使我更加怀疑自己的更新能力。但，如果那天真的停止更新了，一定会和大家说声再见。
【完】

但是在现在网页设计中，由于某些原因，我们经常忽略这种基本概念，一些权威网站在使用引号时往往只使用上引号图标，导致大家觉得在技术上很难实现引号图标的成对。

例如在A List Apart的一篇文章中出现如下效果：

再如推行网页标准的著名设计站点SimpleBits也出现类似问题：

但是在另一个本人比较推崇的网页设计站点Digital Web Magazine在这方面就要好的多：

可能也因为该网站的每篇内容都需要用引号引出中心思想有关，马虎不得。该网站在细节方面精确控制的同时，文章质量也是越来越高，大有取代A List Apart之势，希望读者能够重点关注。如此优秀的网站，其技术必然值得我们去研究。

引号图标的成对之所以在CSS上难以实现，主要是因为CSS中关于背景图片的控制度有限造成的，即你不能给任意元素(element)同时赋予两个背景图片。

那么就来看看Digital Web Magazine是如何实现引号图标的成对。还是以上个例子为例：
需要用引号引出的段落即右侧灰色框内文字“An element with……”，查看源文件我们可以看到这段文字实际是嵌套于三个元素之中：因而就可以在元素blockquote使用上引号作为背景，而在元素p中使用下引号作为背景，从而达到双引号的效果，同理，通过这一方法还实现了原角。具体方法不是本篇的重点，所以不再详细叙述，大家可以参看 Rounded corners pull-quote using CSS。

这个方法的缺陷也是显而易见的，即要实现双引号，至少需要嵌套两个元素。偶然的机会看到了这篇文章Pullquotes That Really Pull，其通过我们不太熟悉的CSS语法:first-letter实现了元素的双背景，也就实现了双引号的显示。
例如：

引号(quote mark)顾名思义是用于引起人注意, 区别于一般内容之用的标点符号。分为上引号和下引号，并且是成对出现的，这种概念我们可能在小学就知道了，所以引号应该是成对出现的。
但是在现在网页设计中，由于某些原因，我们经常忽略这种基本概念，一些权威网站在使用引号时往往只使用上引号图标，导致大家觉得在技术上很难实现引号图标的成对。

其HTML源码为：

<p class="pullquote">引号顾名思义是用于引起人注意, 区别于一般内容之用的标点符号。分为上引号和下引号，并且是成对出现的，这种概念我们可能在小学就知道了，所以引号应该是成对出现的。
但是在现在网页设计中，由于某些原因，我们经常忽略这种基本概念，一些权威网站在使用引号时往往只使用上引号图标，导致大家觉得在技术上很难实现引号图标的成对。</p>

对应的CSS源码为：

.pullquote {
width: 86%;
font-family:Georgia, "Times New Roman", serif;
font-size:14px;
font-style:italic !important;
margin:10px 10px 10px 10px;
display:block;
background: url(images/closequote.gif) no-repeat bottom right !important;
background /**/:url(); /* removing quote graphic in IE5+ */
padding:0px 25px 5px 0px;
}
.pullquote:first-letter {
background: url(images/openquote.gif) no-repeat top left !important;
padding:5px 2px 10px 35px !important;
margin:0 0 0 -10px;
padding /**/:0px; /* resetting padding in IE5+ */
background /**/: url(); /* removing quote graphic in IE5+ */
}

至于CSS代码之中的一些HACK，都是针对IE5的，所以大家没有必要深究，在这也不再解释。
对于CSS源码，读者如有不懂的地方，可以在留言中指出，Jorux会尽量解答。

注：本博已有三个月没有更新了，如果你现在还能及时看到本篇文章，并能对您有所帮助的话，Jorux感到无比荣幸。既然没有说再见，Jorux还会继续骚扰大家，即使频率会慢点。

希望大家还能继续留言支持Jorux，不要忘记订阅本站Feed，最好是用邮件点阅，因为本站的更新实在是太慢了。
谢谢大家!

1. 对于Firefox的初级使用者：一个全新的Firefox并不能比IE优越。而安装种目繁多的插件，几乎是初用者的噩梦。
2. 对于Web design的爱好者：web design是本人的爱好，所以对于Firefox的依赖要比一般的网友程度深。而很多初级web designer对本人使用的插件感兴趣。
3. 对于自己：也许某天，本人电脑崩溃或是丢失，在网上留个备份。

明确几个概念：

1. Jorux版—-出自Jorux.com, 准确的讲是Jorux几乎每天使用的版本，包括设置，偏好以及插件。Jorux已经尽自己的能力将使用痕迹清理，例如历史，收藏夹，帐号，密码。老实讲到现在还很犹豫，担心一些过于隐私的东西发布到网上。如果网友发现一些尚未清理完全的信息，麻烦留言通知一声。
2. FirefoxPortable—-即Firefox的移动版，可随身携带的浏览器。不要小看FirefoxPortable，一个设置并调教完全的版本，几乎能在网吧实现在自己家里一样的上网体验，比如收藏夹，历史，密码。
3. 英文版—-对于想使用中文版Firefox的朋友，Jorux只能说声抱歉。

重点插件介绍：（共39个插件, 介绍其中十六种, 均已安装于浏览器中）

1. ScrapBook: 用于网页收藏，离线浏览。优点，利于管理自己喜欢的页面，资料，能保持绝大部分网页的原貌；具有搜索功能。
2. MeasureIt: 测算网页中两点之间的距离，某个范围的面积。
3. ColorZilla: 获得页面内任意一点的颜色。
4. Gmail space: Gmail硬盘的Firefox版。
5. Gmail Manager: 用于提示Gmail的新邮件。
6. FEBE: 备份Firefox的插件，设置等
7. StumbleUpon: 初次使用，需要注册一个帐号，即可获得一些可遇而不可求的站点。
8. Backgroundimage Saver: 保存网页的背景图片。
9. Firebug: 用于解析网页构架，以及纠错。
10. FireFTP: CuteFTP的替代物。
11. Super DragAndGo: 左键拖拽功能。
12. Mouse Gestures: Jorux只使用其一个功能，按住右键往右下拖拽，用于放大网页字体。
13. VideoDownloader: 用于Youtube的视频下载。
14. Sage: RSS阅读器。
15. Image Zoom: 按住右键，滚动滑轮，放大或缩小图片。
16. DownThemAll: 迅雷替代物。

注意事项：

1. 如果读者确实要携带本浏览器，请务必先打包，再上传到自己的U盘，使用时，也是先把压缩包下载到硬盘，解压后使用，以免造成不必要的时间浪费；
2. Jorux未发现本压缩包含任何木马或是病毒，请读者放心使用，但请读者确认是从本站提供的链接下载。
3. 由于Jorux能力有限，无法保证每一个读者下载后都能得到满意的效果，由此浏览器引发的任何问题，请读者自行解决。

下载链接：http://www.live-share.com/files/152479/jorux_FirefoxPortable.zip.html

为什么更新这么慢：

现实中的事都应付不及的时候，很难有灵感在网络上写文章。加之对文章质量有一定要求，只好推迟更新。望关心本站的朋友谅解！

1. 域名Jorux.com是在2005买的，这点可以肯定， 创建日期2005-05-20在时代互联的管理后台有着确实的记录。

2. 2005.05–2006.02这段时间，Jorux.com及其空间只是几个简单的页面而已，没有任何内容可言。但却提供了一个向外界展示我当时的网页技术的机会。

3. 2006.02安装上zblog后，确实想着如何提高流量，刚好一些国外的资源既能满足我的需求，也能充实网站的内容，这种挖掘工作做了大约半年，期间也做过SEO的实验，终于把网站流量提高到了1000IP/日。也做过广告，脉动的100人民币是我的第一桶”金”。

4. 也许你要问，是什么时候跟CSS扯上关系的，我想是从一开始就扯上了，这一扯就是一年半。最开始是用dreamweaver，但从来没用表格布过局，老实讲，让我现在空手写个表格代码都完成不了。所以我只会W3C的东西。

5. 开始的时候，就是没事做个网页，模仿一下别人的设计，然后放在Jorux.com美一下，基本没有人访问，当然，除了我本人。 Jorux几乎以常人不可想象的频率访问Jorux.com。想一下也容易明白，一个不和别的网站做友情链接，又不在论坛宣传的自己的新站，访客几乎只能是你自己。

6. 我也不知道为什么用zblog写(或是copy)几篇经过SEO的短文，就能直冲百度的前几位。直接后果就是来自baidu的流量快冲破空间的并发连接数的上限。这让我乐此不疲了好几个月，直到脉动的结算。

7. 与其说是从脉动赚到了钱，还不如说是用几个月时间从脉动那了解到网络广告的悲哀。尤其是对于广大的小流量站点，按点击量计费的广告只会强暴你的网站，而你可能在漫漫“攒钱”路上迷失自我。包括Google Adsense，不知有多少小网站主为了那遥不可及的$100而把自己的网站搞的生不如死。如果不作弊的话，本人觉得Adsense几乎不可能让你在合理的时间里赚到钱，不管你有多大的流量。

8. zblog是流量的转折点，也是我css技术的转折点。由于在用zblog之前我就有半年多的制作网页的经验，修改zblog的样式模版就成了轻而易举的事。原来的zblog官方论坛非常不错，只是发现zblog的样式实在是太少了，几乎没有人发布新样式，于是我就尝试在论坛发表zblog免费样式，效果出奇的好，第一次看到别人用自己做的样式，那种得意的神情，只能用一句话解释——我这半年的努力终于有了回报。另一个好处就是，给Jorux.com带来的稳定的非搜索引擎的流量。之后我至少做了9-10个免费的zblog样式。其他人发布样式的热情开始高涨，我也渐渐不再登录论坛了。

9. 做多了免费样式之后，你就会发现几个严重的问题，首先那些样式的设计并不是原创的，我只是用XHTML/CSS编编代码；一个更重要的原因就是，大家并不珍惜你的成果，既然安装的成本是零，那么换个样式的成本也是零，看到那些曾使用过你的样式的网站没事就更换style，那种失落感并不比之前的成就感来得小。

10. 一个极其偶然的机会，居然有个美国人愿意为我的工作付钱。这是2006的重大转折，是从免费服务到收费服务的质变。这不仅是对我的技术的肯定，它给我带来了切实的好处。我以为这是上天跟我开了个玩笑。

11. 之后偶然事件并没有停止，我遇到了第二个客户，这时才发现，原来hobby可以变成一个不错的business。但随着台湾南部附近地震的突然发生，切断了与美国的正常网络联络，加之圣诞+元旦的来临，business遇到了寒流。

12. 有人说看一个人就知道他的网站会是什么样，但是在网络上，从网站来推断站主比较切合实际。你看看Jorux.com，看起来比较整洁干净，但你绝不能以此就推断Jorux在现实生活中有洁癖倾向，答案是相反的，我比较邋遢，“整洁干净”是我美好的愿望。

13. 2006是一个充满偶然与奇迹的一年。第一次看到别人使用Jorux制作的style，用网页技术实现了经济上的提前独立，在年终的时候又实现了我的一个心愿—-为大陆人士设计一个完全原创的收费样式，它也是我2006年最后一个作品：

虽说报酬和我的要求有一定差距，但考虑到对方还是大陆的在校大学生，他为这件事和我通了n封email，非常有诚意，其网站的订阅数也很可观，我便放下了原定的收费标准，接下了这个国内项目。

Jorux.com的2007

1. “挖掘国外网络资源”这个副标题可能不会存在很久了，因为它已经不能很好的概括Jorux.com想说的东西。而且介绍web2.0/Google的站点在中国泛滥，我本人也从不看介绍web2.0/Google的站点。

2. 网页设计的局限性(个人观点)：

* 设计的唯一性决定了你几乎不可能向程序员那样——一个作品反复卖。

* 设计的创造性决定了你不可能像麦当劳那样——一个模具流程运行。

* 一个好的设计至少需要一到两周，即使你一个月连轴转，项目不停的接，你一个月也做不了几个。大多数情况下，你不可能单靠接项目生存，最后不得不到一个大的网站打工糊口。

* 如果建筑设计师和网页设计师均属于设计这个行当的话，网页设计师属于金字塔底层的草根，而建筑师属于塔尖的贵族，建筑师可能设计一个名建筑就能够奢侈地活几十年，而网页设计师即使完成一个名站设计，也只不过糊口一年而已。现在还活跃的著名网页设计师，W3C的创始人之一的Jeffrey zeldman曾感叹道：当我看到我的朋友都开着保时捷驰骋的时候，我还在大众上烧油，不禁问自己当初是不是选错了行当。

3. Business需要一个新的发展模式，2007还不可能把它当成一个职业，网页设计依然是我业余的爱好。

4. Jorux.com会有更多的关于网页设计技术的原创和翻译文章和大家见面，敬请期待。

由于一些不可知的原因，导致本网站瘫痪了一星期，万幸的是我有备份数据库的习惯，所以以前的posts和珍贵的留言都得以保存。

如果网友看到此页面，说明Jorux.com还在线上，请立即把你所需要的资料下载备份！

毕竟现在Jorux.com还在一个试用空间上，请大家帮忙测试一下网页加载速度，如果反映不佳，有可能再次更换空间。

Update: 本网站已经安置在九州科技，目前本人对此空间的表现比较满意。感谢参与反馈的朋友：leavic, allen, baiqiang, xiaojiaoya.

Thanks

Jorux

布局的分类,根据对元素宽度的定义不同，布局可分为以下几种：

1. 固定宽度(fixed-width)布局：
即上一篇所用到的布局方法，其特点是主要DIV的宽度都是用固定大小的px值定义的，其宽度不随浏览器及字体大小的影响。多以px作为宽度单位。
优点：宽度固定，最为保真地表现作者的设计意图；简单易学。
缺点：它是这几种布局方法中最为“自私”的，因为其不考虑访客的浏览设备及设置。比方说，在1024宽的浏览器表现良好的布局，到了1600以上的宽屏浏览器就显得较为局限，其可能缩于屏幕一侧或是中央。
现状：由于其简单易用，且基本满足大部分访客的需求，仍是主要的布局方法，尤其在大陆。
趋势：随着液晶屏幕的发展和普及，成本的下降，市面上宽屏显示器已经开始大量涌现，尤其在西方发达国家，1600的宽屏显示器渐成主流，所以在800或是1024下显示良好的，使用固定宽度的布局方法已经开始被边缘化。
站点举例：网易 蓝色理想

2. 自适应(liquid)布局：
即根据用户浏览器的宽度，自动调整宽度显示的布局方法。以%作为宽度单位。
优点：自动适应各种屏幕宽度，轻松实现满屏显示。
缺点：如果屏幕过宽，而内容有不多的情况下，文字可能拉伸得很长，影响美观。而当屏幕过窄时，内容又会被压缩得很窄，可读性下降。
现状：目前很多的web2.0站点使用%来实现布局，即自适应访客的屏幕宽度。
趋势：就目前的情况看来，没有哪一个屏幕分辨率能够统一整个市场，所以800，1028，1280，1600等各种宽度的浏览器会各据一方，并且只会越来越宽，liquid布局以其良好的自适应能力将成为主要的布局方法。
站点举例：Google Cssliquid

3. 弹性（elastic）布局：
所谓弹性，是针对字体大小而言的，当用户调整字体大小时，宽度会随字体大小的变化而变化。以字体高em作为宽度单位。
优点：满足了视力下降人士的需求，不管用户如何调整字体大小，页面布局都不会被打乱；
缺点：当用户不调整字体大小时，其效果和固定宽度布局的效果其实是一样的，即不会随屏幕的大小的变化而自适应；对于初学者不易掌握。
现状：弹性布局方法是目前较为少用的一种。
趋势：由于其能自动适应字体大小，且在用户不调整字体大小时，有固定的宽度，所以它将是固定宽度布局的不错的替代方法。
站点举例：BlueAnvil Designbit(可能需要代理浏览)

4. 混合布局：
即在一个页面内用两种以上的布局方法。比方说对于内容DIV使用%，而在边框DIV则使用em作为宽度单位。

如何选择适合你的布局方法：
在选择布局方法时，你需要考虑以下两个方面：
1.你的原始设计：
当你的原始设计的宽度固定，或是宽度过大会影响美观的话，Jorux建议你使用弹性布局。
2.用户群的分布：
如果你的用户群数量巨大，也就是说使用各种屏幕分辨率的用户都会达到一个可观的数量，那么你在布局时就应该考虑使用自适应的方法布局。并且在设计时考虑到这点，设计出在各种宽度下拉伸都基本保持美观的作品。

你可以看到，固定宽度的布局方法已经不是Jorux的推荐方法。这也是Jorux写这篇文章的原因，大家应该秉持以用户为中心的设计理念，更好地适应各种客户端及其设置。本站也会很快改写CSS。

怎样使用弹性布局的方法实现布局篇(1)中的效果：
1. 在body中设置font-size:62.5%，使得1em=10px；
2. 避免在任何DIV中声明字体大小，这是为了避免em的值因继承父级元素的字体高而不断变化，而在DIV的子元素中声明字体大小。如在p,h1等选择器中声明。
3. 用em作为宽度和高度单位，例如你想设置DIV宽度为760px，那么你需要将其设置为76em。
那么css代码可以为(仅供参考)：

* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 76em;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#MidWrap {
}
#Content {
float:left;
width:56em;
height:40em;
background-color: white;
}
#Sidebar {
float:left;
width:20em;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:76em;
height: 8em;
background-color: blue;
}

你可以尝试调整浏览器的字体大小，可以看到各个DIV也随之变化。

如何用%实现自适应的布局方法：
满足以下条件：
1.满屏显示，及Header，(Content+Sidebar),Footer的宽度均自动适应屏幕宽度，并占满整个屏幕宽度；
2.Content占70%屏幕宽，Sidebar占30%，高度均为400px；
3.Header和Footer的高度均为为80px；
4. 实现如下效果效果(点击看大图)：

读者能在留言中给出你的答案吗？
精彩在留言，请读者踊跃解答，参与讨论关于布局的任何问题，Jorux将在留言中响应大家的提问或是解答。

Important reference:
1. Going elastic with ems, layout techniques
2. Fixed vs Liquid vs Elastic
3. Create a simple liquid layout
4. Elastic Design
[END]

由于本人所在的学校，以及天生的对codes敏感度有限，导致现在的编程能力止于初级。但是目前的Web Design形势已经不是photoshop, css等表面处理就能满足客户的需要。因此Jorux在此向各位读者发出寻找programme合作者的邀请。

Jorux在乎什么:

1. 目前最需要的技术就是网页的后台技术—-PHP/MySQL, Ruby, XML。以及前端技术Javascript/AJAX。PHP/MySQL Programmer是最为迫切的；
2. 你只需在以上例举的语言中至少有一种达到让你自信的水平;
3. 大陆人士，熟练运用简体汉语；
4. 不拒绝对ps，css极为自信的非programmer。

Jorux不在乎什么:

1. 你还是高中生，或是大学没毕业，或是参加工作了。这不重要，要知道你目前的收入越低，你在这获得的酬劳就会让你越满足；
2. 你的技术尚未达到所谓的“精通”，Jorux不要求所谓的“精通”，只要你有自信写出漂亮的codes。没有人从一开始就能“精通”，Jorux可以给于一个合作的磨合期，成长期；
3. 身高，长像没有自信吗？放心，这不是选美。
4. 专业不对口吗？高中生是不会有什么专业的, 大学生也许会被束缚一点, 但你要知道Jorux是一个无聊的医学生, 我没有理由要求你是计算机相关专业的。

工作地点：

很明显我们在北美汇合，请注意这是指网上。虽说本人很想去北美，但考虑到签证难度，强烈的移民倾向，以及收入的不足，我们在local工作，然后在北美的主机(例如Basecamp, Gmail)汇合就好。

酬劳:

1. 非常希望Jorux所付的$能让你满意, 当然也可以用人民币结算；
2. 收入目前不是很稳定，这取决于项目数，以及预算的多少，但可以保证的是，工作量以及难度决定酬劳；
3. Jorux的showcase站点尚未运行，所以项目数没有很多，但可以借此机会让我们的技术储备有一个发展机会。
4. 如果你本人不是程序员，但能推荐给朋友的话，这里先谢了。I will remember your favor!

最为渴求的：

对收入要求不高，但对网页技术有着满腔热诚，Jorux要找的不是employee，最需要的是合作者，如果合作愉快，随着项目数的增多，以及本身技术的成长，Jorux有自信让你摆脱目前工作(状况)的束缚，成为拿着万元月薪的自由工作者。

如果你对那些互联网神话也有幻想的话……

联系方式:

在此留言或电邮joe7419#gmail.com（将#换为@）

[END]

谁对我的网站字体大小有意见？
我老爸，他是第一个向我反映看不清我的网站文字的人。这使我意识到12px，其实只是让我觉得很不错而已，而对于那些视力下降明显的中年以上的人来讲，几乎等于10px对于我的感觉。
于是我告诉他，在“查看”里调整“文字大小”就可以了。但是却发现这是徒劳的。在Firefox能轻易调整的字体大小，怎么在IE就变得如此”坚不可调“？

问题出在哪？
我又试着打开中国的三大门户—新浪，网易，搜狐。它们的字体无一例外的在IE里失去可调性。看来这不是我网站独有的毛病。再看看MSN，Google，A list apart，华盛顿邮报，在IE里却是可调的。难道IE在字体调整上也搞歧视不成？
困扰我的问题直到看到这篇大作：How to size text using ems，才得到彻底的解决。
关键点：
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；
3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。这意味这中国网站的字体大小可以被认为不可调。

95%的中国网站需要重写CSS
在我所观察的中国网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。
而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。
没错，px比em更加容易使用，我也敢打赌大部分读者不知道em为何物或者它相当于多少px。
国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部法律来约束他们—例如美国的Section 508，强制网站达到一定的易用性。所以没有哪个主流站点愿意被那些视力下降或是残缺的人告上法庭。
注: 在中国, 可能把微软告上法庭来的更简单点，为什么IE对于px那么死板。

如何重写你的网站CSS
Jorux.com作为一个对视力下降人士负责任的站点，已经重写了CSS的Font-size部分。在这里，Jorux和各个有人文精神的网站主讨论如何用em重写Font-szie的问题。

em vs. px

em是何物？
em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

重写步骤：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

诡异的12px汉字(原因待查)
本人在完成em转换时还发现了一个诡异的现象，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题我已经解决，你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗？
本现象只发生在12px的汉字，英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm， 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css，看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接

还可以做哪些改进

为什么还需改进：
1. 你的网站css过于复杂，以至于不知道元素的从属关系，很难重写css；
2. 绝大部分人看了本文之后仍然不会重写css；
3. 很大部分人不知道浏览器可以调整页面的字体大小。

所以你需要一个诸如本站信息框中的字体大小调整控件。
相信本站读者的英语能力，这里就不再罗嗦了，请参看：The Text Changer

Important reference:
1. How to size text using ems
2. The Text Changer

备注:
1. 自网站Reboot以来，老爸又反映我整天在”属性一”"属性二”的，看不大明白，已经拒绝访问Jorux.com了;
2. 读者对如何用em重写css，或是对字体大小调整控件有任何疑问，请留言;
3. 本站在加强易用性上做了如下改进:a. 用em重写了css; b. 去除了51.la和文本广告代码，提高了网页加载速度; c. 增加了字体大小调整控件;
4. 重新整理”Other Blogger”链接，请发现被摘掉链接的网站自行摘除链向本站的链接，本站停止交换友情链接。尚保留的网站有如下特点:a. 非日记式博客；b. 内容优秀；c. 原创为主；
5. 本站常规在周一发表post,间隔为一到两周,感谢读者对本站的关注, 以后除星期一以外,您都不需更新本站Feed了。
[END]

平面设计—>页面切割—>布局—>细节控制

1. 平面设计是一个网页的精髓所在，读者直接面对的界面，在本站以后的文章中会涉及此方面内容。也许你会认为在脑子里形成一个网站的大概印象就可以了，那么这种想法直接就给你贴上业余的标签。推荐工具：Photoshop；
2. 页面切割其实可以划分到布局里，因为你的页面切割方式直接影响了布局方式，也体现了你是属于表格布局阵营还是css布局阵营。它是布局(前)的关键步骤。将在本章重点讲述。推荐工具：Photoshop；
3. 如果把布局说简单点，就先得把你的网页简单化。简单到把你的网站分为header，content，sidebar，footer四个部分。
4. 细节控制，将header，content，sidebar，footer的表现细节化。
本章将针对页面切割讲述一些Jorux的私人观点与技术。

首先，我们要有一个被切割的对象，这里以Jorux.com的原始photoshop平面设计图为例。如下,点击看大图(Fig.01):


如果使用表格布局的话，你可能就想到在photoshop里把页面切割为无数个固定宽高的格子。但用css布局的话，你首先要明确的以下几点是：

1. 你是要横着切，还是要竖着切；
2. 第一次切割，只需要把网页中的背景图片切割出来(因为背景图片是在css里声明的)；
3. 切的的图片要尽量小，然后让css去做更多的事情；
4. 设计比较复杂的部分，可以不分割，从而减少css编码的难度；
5.  读者应该根据自己的能力，找出哪些效果css可以轻松实现，而哪些效果用图片更加简单而且size不大，仔细在3.4之间权衡利弊；

现在我们来看Fig.01, 最靠上的部分是个黑色的尺子，遮住了“Jorux记事本”，更遭的是它居然还有黑色的投影。等到要切割的时候，我才后悔当初怎么能设计得如此复杂。但没关系，一切都会好起来的。现在跟着来重温我的切割思路：
1. 整个网页背景色大家应该很清楚，就是深灰色#444，这无需图片，在css里的body选择器里声明就好；
2. 这一步是最关键的一步，请读者仔细体会。对于css布局的网页，Jorux建议你首先给你的原始平面设计来两个横刀(红色)，接着就来个竖刀(蓝色)。实现如下效果(点击看大图Fig.02)：


一定要先横再竖，即先把你的网页分为top，mid，bottom三个部分，然后再把mid分为content和sidebar两个部分。对于单栏样式，只需要两横刀，而对于三栏样式，可能就需要两横两竖刀。

这样你就得到header，content，sidebar，footer四个部分。现在来分析这四个部分的背景图片需要如何切割。
3. header部分的图片非常复杂，但要把那把尺子单独分离出来几乎是不可能的，而且是没有必要的。因为我们还需用这把尺子实现回首页的超级链接，因此它只能是在html文件中<img/>的图片，而非背景，为了减少css编码难度，我们可以把有投影的圆角也和尺子一起切下来以备用，如图(Fig.03):


那么剩下的稍淡的灰色，就是所需要header的背景，我们只需来两竖刀(宽度在4-6px左右为宜)，得到下图(Fig.04):

相信大家知道如何在css里用repeat-x来实现header的背景效果；
4. 接着就是content的背景，很容易看出就是那个带投影的白色背景。马上来上两横刀，高度同样在4-6px为宜，如下图(Fig.05)，在css里用repeat-y就能实现content背景；


5. 还好，在本设计中sidebar无背景，直接继承body的灰色背景就好；
6. footer背景比较简单，就是两个圆角而已，我为了图方便，把那个logo也切了下来，如下(Fig.06)：


这样我们就完成了第一次切割，并且把一切涉及布局的背景图片切了下来。接着就是如何用css布局了，我们的目标是实现以下效果图(Fig.07)：


那么现在就开始编写html代码。既然我们有了一清晰的布局效果图，编写html代码应该是很简单的一件事情。但是越是简单的事，人们忽略的东西就越多。以下Jorux的观点请一定仔细考量：
***对于DIV的使用，请一定从大到小，把那些能在一起的元素划分到一个DIV，然后再在此DIV中继续划分小DIV。所以为实现(Fig.07)的效果图，需要做以下几步：
1. 我们首先把header，content，sidebar，footer归为一个DIV，ID=“AllWrap”；用其实现向左浮动；
2. 接着把header作为一个DIV，ID=“Header”；
3. 把content和sidebar划分在一个DIV，ID=“MidWrap”；然后在其内继续划分为两个DIV，ID分别为Content和Sidebar；
4. 最后把footer作为一个DIV，ID=“Footer”；

最终得到Html代码为：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>My layout</TITLE>
</HEAD>
<BODY>
<div id=”AllWrap”>
       <div id=”Header”>Header</div>
       <div id=”MidWrap”>
              <div id=”Content”>Content</div>
              <div id=”Sidebar”>Sidebar</div>
       </div>
       <div id=”Footer”>Footer</div>
</div>
</BODY>
</HTML>

给读者留一个问题，请有能力的朋友在留言中给出实现效果图样式的css代码。有如下要求：
1. 向左浮动；
2. AllWrap宽为760px；Content宽为560px，高400px；Sidebar宽为200px，高400px；Footer高为80px，宽760px；
2. 在800×600，1024×768，或是宽屏显示器都能正常显示；
3. 在IE6/7, Opera, Firefox均能显示正常；

本篇正文完(答案将在留言中讨论，下篇将讲述如何用css实现最终布局与背景显示)

以上内容涉及某些人的商业利益，出于某些原因大家都不善于把那些能转化为利益的内容泄露出来，于是那些教程总是让人感到不得其所。
我的一个客户曾跟我说在他们的领域(PR)，大家不会免费把任何有价值的东西告诉客户，或是大众。其实在任何领域都是一样的，大部分人宁愿让他的知识在脑中腐朽，也不会透露出半点来。
我知道的东西不多，但碰巧正是我的读者所渴求的。所以，我决定把这些对于我最有价值的知识写出来，即使你们当中会有一些成为我竞争的对手。换一个角度，如果能成为合作伙伴，那是最好不过了。如果本教程没有让你的失望，还请继续支持。

致歉：要对我的读者说声抱歉，这篇教程整整晚了10天。如果一两个星期更新不了一篇post，就有放那80个Readers鸽子的感觉，用一部分乖学生的话讲就是和逃了一整天课一样，颇感沉重。推迟的一个重要原因是因为我在：

Moving to Ubuntu：
1. Ubuntu是一个让我割舍不下的免费系统，自从发现了hacked的iso免安装方法后，它的优势是如此明显：免费，无盗版，免安装，能读取/写入windows分区的文件，无需分区格式化，1分钟重装，没安驱动就识别了我的ASUS laptop上除modem以外的所有硬件。

2. 它有一个优秀的替代Editplus的编程工具–Bluefish，我管它叫胖嘴蓝鱼。编代码时有条胖鱼陪着，气氛能缓和很多。

3. 老实说Ubuntu是个严重依赖网络的系统，如果你的上网条件不佳，建议不要尝试。但一旦上了网，它就不得了了，以下这个信息就很Cool：

4. Firefox与其说是个浏览器，还不如说是个软件库，FTP上传，离线写博，Gmail硬盘，截屏，取色，Debug，网页收藏，多线程下载，Feed阅读器(Sage)，屏幕取词翻译，Gmail邮件提醒；

5. Ubuntu+Firefox+Bluefish+Mplayer+宽带=实现了像我这种不玩游戏，不聊天，以design/coding为乐趣的，无聊80后的理性与感性需要。

免费Paypal小额转账服务：

更新变慢的另一个原因就是因为要完成几个projects。还好，北美人的信誉不错，网络诈骗还没有发生在我的身上，因此收到一些paypal美金。网上订购一台Dell已经不是梦想了。
如果有想买一些线上产品，如国外空间，域名等，因为没有paypal电子现金而苦恼的朋友，而且你还信任Jorux的话，我可以免费把你的人民币转换成paypal的电子美金（单笔不超过100USD）。
[END]