Read More

I Spent a whole day fixing bugs and beautify the UI. They now works much better than the previous versions.

See a demo of slideView at http://pagetalks.com/share/slideView;
A demo of imgDesc is accessible in the original post.

Comments are welcome!

Javascript and JQuery

JavaScript: The Good Parts

It serves as a breif guide to javascript and tells us a lot of does and donts in javascript. I think it’s right the book a beginner should own.
See also: http://oreilly.com/catalog/9780596517748/

JavaScript: The Definitive Guide

This is the bible of javascript, but definitely not a good choice for novices.
See also: http://oreilly.com/catalog/9780596000486/

Learning JQuery

First book to talk about jQuery. It contains lots of soulutions to some typical applications with jQuery. Good for starts in jQuery.
See also: http://www.packtpub.com/learning-jquery-1.3/book/mid/1802090m1d2r

jQuery in Action

A little deeper than the earlier. Indeed I only bought this one, and lend a copy of Learning jQuery form libarary.
See also: http://www.manning.com/affiliate/idevaffiliate.php?id=648_93

XHTML and CSS

Words about XHTML and CSS

I don’t think we need a book to learn XHTML and CSS. First it’s very simple; Second there are comprehensive tutorials online everywhere. So I didn’t collect any books on XHTML and CSS for beginners. Following websites will be helpful:

• http://www.w3schools.com/
• http://www.w3.org/

CSS Mastery: Advanced Web Standards Solutions

Don’t be intimidated by the ‘Advanced’. It’s not only a quite praticle guide to solve lots problem, but also a starter for novice to learn css systemetically.

HTML & XHTML: The Definitive Guide

Bibble in xhtml. Again this Definiteive Guide is not a good start for beginers.
See also: http://oreilly.com/catalog/9780596527327/

CSS: The Definitive Guide

Bibble in css. Needn’t to tell you this is not for beginers.
See also: http://oreilly.com/catalog/9780596527334/

Design and User Interface

CSS Zen Garden

I believe most people that can find this site own this book.
See also: http://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474

Transcending CSS

Althoght CSS is a key word in the title, this book doesn’t talk too much on CSS and turn its attention to the layout and coloring. Good for starters.
See also: http://transcendingcss.com/

The Principles of Beautiful Web Design

A brief guide to design a beautiful web site. Good for starters.
See also: http://www.sitepoint.com/books/design1/

Designing Web Interfaces

A really new book I just found. Haven’t read yet. Judging from the menu, it’s a good guide to master web interfaces desgin. Good for intermedia readers.
See also: http://oreilly.com/catalog/9780596516253/

Designing Interfaces

I own this book indeed. Since we have Designing Web Interfaces which mainly focuses on web design, this book seems to be inapproximate for learning web interfaces. However most design patterns in interfaces are common, so we can still gain a lot in this book.
See also: http://oreilly.com/catalog/9780596008031/

JAVA

I’d like to focus on Java Language as a solution for server-end application. So these books are mainly for Java.

Thinking in Java

I wish I had this book when I started programming. Still I ordered this book online. It’s full of examples on J2SE\Design Pattern\Common Issues and so on. Definitive introduction to java.
See also: http://mindview.net/Books/TIJ4

Core Servlets and JavaServer Pages

Actually this is the book used in my university. It’s a good book to introduce many development artitectures from small-scale personal sites to large-scale production applications.
See also: http://www.amazon.com/Core-Servlets-JavaServer-Pages-JSP/dp/0130893404

Data Structures and Problem Solving Using Java

Data structures are important for programing. This book provide a comprehensive introduction of data structure in JAVA5.
See also: http://www.amazon.com/Data-Structures-Problem-Solving-Using/dp/0321322134

Practical Apache Struts 2 Web 2.0 Projects

Struts is nice and widely support by most service provider. I just bought this book, and manage to read it in my vocation.
See also: http://www.apress.com/book/view/9781590599037

Beginning Hibernate: From Novice to Professional

Hibernate is a light framework to provide solutions for java object persistence. Although it’s pervelent in large-scale applications, it’s quite cool when you cope with your own medium-scale sites. This book is a comprehensive introduction to Hibernate. Easy to learn. Good for beginners.

Database

Database Systems: Design, Implementation and Management

Concepts about database and SQL. Very important for developing real application with database.
See also: http://www.amazon.com/Database-Systems-Design-Implementation-Management/dp/061921323X

The Definitive Guide to MySQL

MySQL is the lovable database and easy to learn. This book works as a comprehensive guide to this free and powerful database system. Good for both beginners and professionals.
See also: http://www.apress.com/book/view/9781590591444

SQL Hacks

Smart hacks for many applications. You will find insprired by these skills! I like this book very much.

http://oreilly.com/catalog/9780596527990/

Web Sites Related

High Performance Web Sites

A guide for front-end engineers. Very pratical!
See also: http://oreilly.com/catalog/9780596529307/

To my amusement, I dream of becoming a ActionScript or Flex Develper, but I haven’t finished reading a single book on ActionScript yet!

Description

From small-scale commercial public sites to large-scale CMS, there are needs of slideshow. Here is a simple and graceful to implement a slideshow based on a short piece of HTML Code in a both unobstructive and pleasant way.

Demo

Inside dev pack, there are two fully functional demos.
A live demo is also available on http://www.elfvision.com. The slide in portfolio makes use of this script.

演示

在dev pack里面有两个可以运行的完整演示。在http://www.elfvision.com也有一个在线的演示，作品展示所用的幻灯片就是使用了该脚本。

书的前半部分是十分玩味的，它将重点放在(X)HTML语言上，讲解网页的语义性实现。当然这少不了Microformats。准确的说它用了四分之一的容量来讲述HTML，讲解如何将设计稿转换为HTML文档。

之后，你会高兴地看到作者开始介绍一种设计流程。这个流程的确被大多数设计师采用，好吧，应该叫做“被公开的秘密“吧。作为设计师，你可能读过很多关于平面设计的文章，你会发现里面任何一篇都比这书上写的好……

再之后，就到了这本书我最喜欢的部分，虽然这些内容依旧不是讲CSS的……这部分在于如何延伸、拓展设计师的思维，如何将自己的作品放得更开。他介绍了一些很有趣的方法，比如看看杂志、电影、摄影之类，收集一些具体的小物件，等等。我个人觉得这是这本书最值钱的地方了。

后半部分？拜托，它终于在讲一些定位和CSS3的问题了，不过现在谁在乎了？大概大多数读者都已经忘记这本书的标题里有”CSS“这个词了……

这就是这本书，一本将布局、设计原理、HTML、CSS混在一起的书，它的售价是69元……
如果你真的想了解一下优秀的CSS是怎么达到的，也许拥有一本《CSS Zen Garden》是更加实际的选择，再说网上还有N多的文章给你做扩展阅读。忘了告诉大家，《CSS Zen Garden》价值49元，但是已经出版有一段时间，所以都在打折。

这篇文章是目前少数一些介绍即将取代CSS2的新标准——CSS3的文章。我们将从非常基础的东西开始讲解，即使你对CSS3毫无了解，读完了之后相信也能很好的介绍这些将被广泛使用的一些功能。

什么是CSS3

CSS3带来的一些改变，为你在创造新的具有冲击力的设计提供更多方法。这篇教程提供了一些关于这个新标准带给我们的一些可能性。

模块

CSS3的开发被分为不同的“模块”。之前的划分方法太过于庞大、复杂，以至于更新十分困难，所以它被打散，并且有所增添。其中的一部分模块包括：

• 盒模型
• 列表模型
• 超链接的表现
• 语音模块
• 背景以及边框
• 文字效果
• 多栏布局

察看模块的完整列表

开发日程

包括SVG（可缩放矢量图型）、媒体查询和命名空间的一些模块已经完全开发完毕。其他的也会很快跟进。但是预测众多浏览器合适才能支持CSS3的新功能确实无比的困难。Safari的新版本已经支持了一些。

准确的说想在近两年内完成对CSS3的大范围支持是不太可能的事情，因为微软向来不太支持标准化。FF和Safari的支持加起来也不到一半的用户量，对CSS3的推广不是决定性的。但是IE支持若干CSS3属性确实相当有可能的，例如IE8已经支持一些选择符语法。长期之内，我们还会和hacks打交道。

CSS3将如何影响我？

CSS3能完全的向后兼容，这样我们就不用更改先用得设计。浏览器也会继续支持CSS2。

主要的冲击来自于新的选择符使用方法以及新的属性。这些能帮助我们实现一些新的功能（比如动画或渐变效果），或者改良现有设计（比如说使用列）。

这一系列文章的之后部分会介绍CSS3的一些模块以及他们的新功能。

CSS3模块——边框

用过CSS的人都知道border属性——它是一个构建内容结构、创造图片相框以及改善页面结构的好方法。CSS3将border属性提升到另一个高度，它允许使用渐变、圆角、阴影或图片来创造边框。我们来一一解说。

圆角边框

使用现在的CSS2完成圆角边框很困难，虽然有很多种可用的办法，可是没有一个是直接了当的。往往都涉及额外的图片。

用CSS3创建圆角边框则非常简单，代码如下：

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

渐变边框

渐变边框用起来可以让内容看起来很显眼。

这些代码有些复杂，要求你定义渐变中的每个颜色：

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

容器的阴影

目前来说给一个元素添加阴影是相当苦难能的。

但在CSS中：

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

边框图片

边框图片是最有用的新增功能之一，我真的对人们将如何使用这个功能而感到好奇。CSS将有能你为你重复、伸展你选择的边框图片。

CSS代码会和下面的这些类似（目前这些代码根据不同的浏览器将有所不同）：

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

CSS模块——字体

字体无疑是设计排版时的一个重要方面。文字能引导读者穿越整个页面，留下某种印象，产生冲击力，或者其他一些微妙的效果。
CSS目前已经在文字显示方面具备很多功能，但还是在某些方面限制了设计。CSS3正朝着减少这些限制的方向而努力。

文字阴影

字体阴影听起来并不是那么好，但这要看你怎么运用它。当我在为这篇文章做测试的时候，我发现有一些组合看起来很具有吸引力。阴影用在标题上是很不错的。Matthias Kretschmann的BLOG上面有一些很好的例子。

.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

文字换行

目前，如果一个词太长以至于一行都装不下，它就会跨越边界，造成溢出。这个现象不是很常见，但偶尔也能遇到。新的文字换行功能将会强迫文字去换行，即使这会造成词语分裂。

实现这个的代码是很简单的：

.text_wrap {
word-wrap:  break-word;
}

在线字体

虽然这个严格地说不算是“字体效果”，但我们还是打算包含这一条。在线字体的使用能让浏览器自动的下载你指定的字体。这个改变对于网页设计将是革命性的，因为之前的设计都仅限于10到15种被广泛支持的字体。但是，这个新功能有可能造成一些版权的争议。

目前Safari的最新版本（3.1）是唯一支持在线字体的浏览器。Opera马上也会支持这个功能，其他的浏览器也会马上跟进。下面是实现这个功能的代码：

@font-face {
font-family: 'Name of the new font';
src: url('http://www.designshack.co.uk/fonts/font.ttf');
}

目前已经有一些页面使用了这个功能。下面的例子就是CSS Zen Garden里面的页面，其作者是A List Apart。当然这个页面只能在某些浏览器里面正常显示：

CSS模块——用户界面

CSS3增加了很多关于用户界面方面的新属性，例如元素的尺寸伸缩、光标手势、轮廓(Outlining)、盒状布局(Box Layout)等等。我们将关注其中三个最重要的增强属性。

缩放

最新版的Safari是能够允许元素的缩放的。CSS3允许你将这个属性应用到任意元素，这将使缩放这个功能拥有跨浏览器的支持。

实现代码如下：

.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

盒尺寸(Box Sizing)

关于CSS3的盒模型已经是属于本文的扩展领域了，完整的信息你可以到官方站点找到。就单独盒尺寸这个方面来说，它能够让你定义元素以何种方式填充一个容器。举例来说，如果你想将两个有边框的盒子（译者注：即通常概念下按照盒模型计算的容器）毗邻的紧紧的卡在另一个容器内，你就可以通过设置”box-sizing”为”border-box”。这个值将强迫浏览器把padding和border的宽度放在盒子的内部（译者注：即不会向外”扩张“了）。

目前，可能需要使用一些私有属性才能让所有浏览器都支持这个功能。这里给出一个很基本的例子：

.area {/* 放置这两个盒子的容器  */
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}
.boxes {/* 应用属性的盒子 */
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}

轮廓

在CSS2里面我们已经能通过设置border属性给一个元素设置轮廓边框了，但是在CSS3我们可以通过设置一个数值而更方便地设置边框的偏移。同时，它和border属性有两点不同：

• 轮廓是不占用控件的
• 轮廓不一定是矩形的

你可以通过如下代码创建：

.ui_outline {
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}

这篇文章并完成，近日将有更新！

深奥？看仔细点……这简直就是顾弄玄虚啊！不就是XHTML加了一群Class标签么？非也，此乃Microformat……

秉承以人为本，机器为其次的理念，微格式是一套构建于已经广泛接受的标准之上的，简洁、开发的数据格式。

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

官方是如此定义的。如今Microformat已经成为了标准之一，可它就像众多其它标准一样，不为人知。尽管Microformat的技术仅仅是通过定义一套合法、合理的Class属性来进一步“格式化”HTML文档，但如今并没有并广泛使用。除了Yahoo、微软、Goolge的诸多服务中已经应用此项技术，众多网站还未加入这一行列。

Microformat的产生，直接原因大家都清楚，那就是HTML（XHTML）的弱语义性。什么是语义？简单解释，遵循一定语义，通过关系模型的再利用，处理程序能快速、便捷的从Web上获取可用性数据。例如，拥有强语义性的社区网络站点（SNS），可以轻易的让开发者创建一套应用程序从页面本身抓取用户信息、建立联系卡片（并非认为通过阅读来操作）。尽管有OL（有序列表）、UL（无序列表）、P（段落）等具有一定语义的标签，可是HTML面对当今越来越多的网络应用，已经毫无招架之力。结果是，DIV可能装载着几幅风景图片，也可能装载着这个景区的介绍文字。这些东西，靠人类的大脑，可以很轻易地重新建立起关系模型，可是对于计算机来说，目前来说是“Mission Impossible”。
大家都知道，XML可以定义namespace，那么自由地创建自定义标签是轻而易举的啊！问题解决了？怎么可能……XML是一种当今Web当之无愧的数据装载标准，可绝不是用来装载、组织内容的！你无法用XML重现你使用HTML实现的内容，谁来告诉我你怎么在XML中装载Flash和脚本？

迄今为止，微格式是向着导出 Web 上的结构化数据这一方向迈进的一小步。理念非常简单。获得一个包含某些事件信息的页面：开始时间、结束时间、位置、主题、Web 页面，等等。过去的方法是将这些信息放置在页面的超文本标记语言（HTML）中，微格式摒弃了这种做法，而是添加一些标准化 HTML 标记和层叠样式表（CSS）类名。页面依然可以保留您选择的任何外观，但对于寻找这些格式化的（或者应该说，是微格式化的）HTML 片段的浏览器来说，变化无处不在。

使用 microformats 分离数据与格式一文中如此说道我们为什么要使用Microformats。
如今已经存在的几种Microformats定义，包括hCalendar,hCard,rel-license,rel-nofollow,rel-tag,VoteLinks,XFN,XMDP,XOXO。你可以到Microformats的官方Wiki里面查找详细的定义标准。PageTalks实际上已经使用了Microformats，这主要归功于这套界面的骨架来自Sandbox，一个良好的模板框架。

再来回到文章开头的那串代码。它没有破坏内容的表现，没有加入额外的信息，也没有对客户作出额外的软件要求，它就是安静的躺在一堆HTML代码之间。通过XPath或者jQuery的选择器，我们能够轻易获取相应的数据：我在2008年9月5号写了这篇文章，它有相关url以及tag……
意义在哪里？加入大部分都按照Microformats进行页面编写，那么在Web上利用程序寻找可用数据将是一件非常容易的事情，也许到时候每个程序员都可以做个“Google”出来……
好吧，人要有梦想才好嘛……

在网上碰巧发现一篇写Microformats的文章，这样尴尬的说道：

1.目前支持microformat只有Firefox的Operator插件。
2. Firefox市场占有率对于中国，即便它在发展壮大，还是奇低。平均高估一下：FF占有率10%吧。 3.使用Firefox的人群能有几个人知道Operator？连我都一直不知道，更不要说其他人了，更不要说人民群众了。再平均高估一下：1%吧（100个Firefox中有1个装了Operator）
4.装了Operator的人已经处于领域浪尖了，好了，有几个人真正在使用，而不是看着Operator上出现的识别数字YY？坦白的说，我装了Operator后，行为上属于后者，纯粹YY。去导出hCard？然后干嘛呢？我疯了，我有病！……继续高估：1%（100个安装了Operator的人中有1个人在真正使用） 5.好了，你突破了上述种种关卡，成为了浪尖上冒泡的水花，精英中中奖的英雄，骄傲吧……请问你访问100次网站，能用几次？你雄心壮志的以为中奖，结果是什么都没有，安全期……TT，最后的结局是：1%。

好吧，Microformtas达到像XML的普及程度都要N年吧……但是如果告诉你，规范一下你相关元素的标签就可以使你的网页支持未来的应用，那不是很好么？

垂直对齐

目前CSS难以实现的一项功能是旧式垂直居中。也许CSS3的到来可以解决这个问题，不过我相信在长期一段时间内IE是不可能支持CSS3的。目前有两种方法解决垂直对齐的方法。
第一种办法就是用一个DIV来做“垫底”，把装载内容的DIV推到水平的中央。下面的示例中，ID为wrap的DIV内为主要内容，ID为shim的DIV是“垫底”的……

<div id="shim"/></div>
<div id="wrapper">
Content
</div>
html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/
div#shim {
display: none;
}

html, body {
height: auto;
}
/* end hack */

/* ]]> */

<div id="wrapper">
<div id="cont">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt, sapien sit amet semper molestie, diam justo ullamcorper tortor, at aliquam neque est eget lacus. Etiam sit amet odio. Maecenas vulputate malesuada lectus. Morbi vestibulum.</p>
</div>
</div>

#wrapper {
	display: table;
	height: 300px;
	width: 300px;
	background: #aaa;
	_position: relative;
	overflow: hidden;
}

#cont {
	_position: absolute;
	_top: 50%;
	display: table-cell;
	vertical-align: middle;
}

#cont p {
	_position: relative;
	_top: -50%;
}

selector {
min-height:500px;
height:auto; !important
height:500px;
}

.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
 

html {
      background : url(null) fixed no-repeat;
     }

#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
 

@charset "UTF-8";
/* ----------------------------------------------------------------------
	WinIE7
---------------------------------------------------------------------- */
*:first-child+html selector{property:value;}

/* ----------------------------------------------------------------------
	WinIE6 & Mac IE
---------------------------------------------------------------------- */
* html selector{property:value;}

/* ----------------------------------------------------------------------
	WinIE6
---------------------------------------------------------------------- */
/*\*/
* html selector{property:value;}
/**/

/* ----------------------------------------------------------------------
	MacIE
---------------------------------------------------------------------- */
/*\*//*/
selector{property:value;}
/**/

<div id="shim"/></div>
<div id="wrapper">
Content
</div>
html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/
div#shim {
display: none;
}

html, body {
height: auto;
}
/* end hack */

/* ]]> */

<div id="wrapper">
<div id="cont">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt, sapien sit amet semper molestie, diam justo ullamcorper tortor, at aliquam neque est eget lacus. Etiam sit amet odio. Maecenas vulputate malesuada lectus. Morbi vestibulum.</p>
</div>
</div>

#wrapper {
	display: table;
	height: 300px;
	width: 300px;
	background: #aaa;
	_position: relative;
	overflow: hidden;
}

#cont {
	_position: absolute;
	_top: 50%;
	display: table-cell;
	vertical-align: middle;
}

#cont p {
	_position: relative;
	_top: -50%;
}

selector {
min-height:500px;
height:auto; !important
height:500px;
}

.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
 

html {
      background : url(null) fixed no-repeat;
     }

#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
 

@charset "UTF-8";
/* ----------------------------------------------------------------------
	WinIE7
---------------------------------------------------------------------- */
*:first-child+html selector{property:value;}

/* ----------------------------------------------------------------------
	WinIE6 & Mac IE
---------------------------------------------------------------------- */
* html selector{property:value;}

/* ----------------------------------------------------------------------
	WinIE6
---------------------------------------------------------------------- */
/*\*/
* html selector{property:value;}
/**/

/* ----------------------------------------------------------------------
	MacIE
---------------------------------------------------------------------- */
/*\*//*/
selector{property:value;}
/**/

这个文章跟我的关系挺复杂的：几乎每天都在用里面的方法，但是直到CSS Zen Garden的那本书里面提到这篇文章我才知道这个方法的来源和特点。尽管是一篇03年的文章，但是目前还有人在使用这种方法，而且是那种可访问性非常差的做法。所以看看这件事情的来龙去脉还是很有趣的。正文如下：

注意

文章中原来介绍的FIR图片替代法已经不再被推荐使用了，因为它使文字完全无法被屏幕阅读器使用。请看看在“重要说明”中提到的其他替代方法
这个教程需要CSS的基础知识，但不需要太多。除了那些，也需要你能够合理、正确地和标记语言配合使用。

介绍

你还在渴望用装饰性的图片而不是纯HTML代码进行标题的排版马？即使CSS已经提供了那么多的修饰选项，有时候我们还是忍不住打开Adobe Photoshop，然后在里面设置我们喜欢的字体、大小、间距等。你认为只要你将它储存为图片文件，然后插入到Web页面，任何一个具有图片显示能力的浏览器都可以显示它，对么？
但当我们知道我们不能使用图片作为标题字体的时候，我们就好像受到了当头一击。没有办法，我们只能降低我们的审美标准，放弃使用图片来美化标题的念头。事情就是这样，直到CSS的下载能力在许多年后能够更完善一些。
我们都知道图片的可访问性没有纯标记语言好。这一点在辅助性浏览器中更为突出。我们真该为使用图片做为文字而感到罪恶。图片不会在像Lynx这样的纯文字浏览器中显示，还有一些浏览器开启了禁止图片功能。尽管我们提供了alt属性作为补充，但搜索引擎的机器人总会以不平等的方式对待alt、 title和HTML文字。这是可以理解的，思考一下诸如H1、H2之类的标记在逻辑上的意义吧！当我们将他们恰当的组合起来，我们也不用为文件大小问题而伤脑筋。
好吧，让我们把脑袋里的知识先放一下。图片真的这么坏吗？配合一些简单的风格技巧和细心的编码，网页上的字体可以即漂亮又“无罪”，而且具有可访问性，同样也可以被索引收录。是时候在把图片搬出来了！

概念

总的来说概念是很简单的。我们写了一串段的HTML字符（例如“Hello World”），并且将其用两组HTML代码包围。然后我们用CSS来隐藏文字，并显示一个同样含义的图片。就是这么简单——用图片换文字就是这么点东西。
在我们写CSS之前，让我们写一些基础的标签。假设我们现在有一些如下所示的HTML代码：

<div>
<span>Hello world!</span>
</div>

当然，我们可以直接将样式应用到文本上。但我们想让它们比使用font-family或text-trasform更漂亮一些。我们想要更花哨一些的字体！毕竟当我们想向世界问号的时候，我们要说的华丽一些。
在我们像世界问好的文字中，我们挑选出Shelley Allegro作为字体。这是一个在设计界很有名气的书写字体，在我们说“hello”的时候，它有能力赢得千万人的心。不过我们认为这个字体只在世界上 1.65%的机器上可用。所以我们特地用图片做出了这个字体的“Hello”。这个图像会显示Shelley Allegro字体下的“Shelley Allegro”。这样不管别人的机器上有没有这个字体，他都能看到这种包含Shelley Allegro字体下的文字内容。
我们先记下图片的高度（35PX），之后会用到。
我们现在有一些HTML代码，一个漂亮的文本讯息，一副华丽的图片。我们该怎么使用它们？让我们卷起袖子来用一点CSS代码来用图片代替文字吧！

Fahrner图片替代法

这个图片替代的方发是以Todd Fahrner，想出这个主意的人来命名的。你可以想象得到有有两组HTML代码包围了文字——一个是div，一个是span。严格的来说，这两个标签可以有多种可能。事实上，你自定义的解决方案可能需要语义上更加恰当的标签。但在这里我们选择这两个通用的框架来举例。
进行图片交换的CSS代码主要包括两条规则。首先使用background属性来把图片带入div之内：

div {
background-image:url("hello_world.gif");
background-repeat:no-repeat;
height:35px;
}

注意height那个属性，它的值就是图片的真实高度。这样就确保div有足够的高度来显示图片。background-repeat属性是确保图片只显示一次。
现在唯一剩下的事情就是HTML内部的文本。现在就该Span标签上场了。我们需要第二个元素来特别的定义它。隐藏这段文字很简单

span {display:none;}

配合我们之后写的HTML代码，组合这两条规则就完成了一个简单的实力。这么简单，都让我想不通为什么会花费这么多文字来解释它。
当然我们决不能就这么简单把代码丢在那。我们也不能就这样直接使用基于元素的样式，否则页面的每个Div都会显示那个图片；而且任何放置在<span>Hello world!</span>标签内部的内容将会被隐藏。
让我们来看下更实际的例子。

[译者略过原文中的实际举例部分，由于废话太多，而且原理本身已经不再被推荐使用]

可靠的替换方法

这个替换方法在使用时应该小心。你要仔细的将图片和原文本一一对应。否则那就是对于浏览者来说就是不公平了。这个替换方法中，文字的字体、大小、颜色、大小写、间距等树形是可以调整的，但这个是设计阶段的事情，不能直接通过调整HTML代码来实现。但HTML本身要保留可读性，例如应加上适当的空格、大写字母等。
下面有必要提一下使用这个方法的缺点和警示：

1. 尽管这个方法比直接插入图片的好，但对于搜索引擎来说这个昂法妨碍了他们索引的能力，用户也无法使用浏览器的“在页面内查找”功能找到你替换的文本。
2. 尽管图片被禁用，但CSS仍有效的情况很少，但如果真的是这样，那么标题上就是一片空白。
3. 替换后的文字将不可被用户操控，他们不能放大、修改颜色等。（纯HTML文本是可以的。

在一些特定环境下，使用这个替代方法需要有仔细的考虑。当真的要用这个方法，以上的那些告诫你必须记好了。狭小、对比度底的文字是不可靠的。定义字体或背景颜色时，色盲患者的问题必须考虑进去。
有时候好东西用得太多也会有副作用。当我们试验这个方法的时候，我们一定要小心。

浏览器兼容性

Mac: Camino .7+, IE 5+, Mozilla, Netscape 6+, OmniWeb 4+, Opera 5+, Safari
Win: Firebird .6+, IE 5+, Mozilla, Netscape 6+, Opera 5+, Phoenix .5+

重要说明

这个方法已经被证实在多数流行屏幕阅读器中失效。大家可以查阅Joe Clarks在A List Apart上发表的一篇内容详细、研究彻底的文章Facts and Opinion About Fahrner Image Replacement。
Joe在文中展现出来的结果表明FIR的做法本身就违背了它的初衷——创造一个更灵活、可访问性的解决方法，而不是直接用img标签和alt属性。这个方法的失策在于它完全没有预料到屏幕阅读器会无法读到带有display： none属性的元素。这是大多数屏幕浏览器的现状，就算我们设定了“screen”的media type情况也毫无好转。因为屏幕阅读器也会注意screen类型的media type，他们本身就是“阅读”屏幕嘛。大多数屏幕阅读器都不支持arual的media type，所以定义speark属性根本没有。

[译者注：CSS文档有对象类型的设置，平常我们用的最多的是对应电脑屏幕的media type，还有print、arual等类型对应不同应用。]

有人提议说用visibility：hidden来代替display：none；但这个同样会会阻止绝大多数阅读器的阅读。只有一个浏览器Jaws可以读出，但我们不能让别人只依赖着一个浏览器。
对于内容替代方法，仔细的权衡利与弊永远是对的。在这篇文章写完的时候，已经有不少其他替代方法了，每个都有它们的长处和短处。但不论哪种方法都没法完美的解决图片、文字的替代问题。已存在的FIR可替代方法如下：

Leahy/Langridge 图片替换法（FIR）

这个方法通过将父元素的height属性设定为0、overflow属性设定为hidden，可以省去span的存在。然后它使用padding- top去强制将元素变长，来显示图片。 这个方法几乎同时被Seamus Leahy和Stuart Langridge想到。
[译者注：例如div高度为0，但有padding，浏览器还是会产生padding的高度，就可以显示图片而文字在padding距离之外，也就是被“隐藏”了]

Rundle的Text-Indent方法

Mike Rundle创造了一个简单的方法——通过使用text-indent属性来将包含的文字跳出可视元素范围之内。
[译者注：text-indent即缩进属性，就相当于把文字推到右边去，自然露出背景图片。]

覆盖方法

另一种Petr Stanicek和Tom Gilder发明的方法用一个空白Span元素来定位一个图片在文字的顶部。这个也让当图片被关闭时，文字可以被显示出来。
[译者注：将span元素绝对定位到父元素的正上面，设定背景图片就相当于把父元素div内的文字给盖住了；理论来说这个是比较完美的解决方案。]
想进一步阅读关于FIR的主题，可以去看看之前提过的文章 Facts and Opinion About Fahrner Image Replacement和In Defense of Fahrner Image Replacement。

[译者注：恕本人的懒惰，那两篇文章吵来吵去就那几个内容，没必要掺和。本来就是03年发起的讨论，如今提起只是希望把其中的概念，和解决方法的思维学习一下。]

懒人大法——问你的朋友

如果你有同样做网页设计的朋友，可以和他一起研究，也许他早就你想要的答案。至于在论坛论坛求助，就要看你RP了。

提前预防——看清楚IE、Mozilla下的CSS支持

最踏实的方法就是在此之前就熟悉CSS在主流浏览器里的支持情况，有时候拿着CSS手册看，看到里面说的属性或选择赴多么多么的NB，结果没一个浏览器支持。这方面的讯息网络上已经积累了不少：

• IE7的官方BLOG，总结了IE7的CSS修正和已知错误
• PIE-Position is Everything，IE6时代就存在的怨念群体，总结了很多IE的错误以及解决方案
• 也许你没有想到，Mozilla有专有属性，可能在兼容性问题上你会用到
• 分析显示问题的好文章

乖孩子的做法——有时间多读读书

如果你有幸从头到尾读下任何一本XHTML教程，你写出来的叶子就算无法正常显示，你也可以问心无愧。写书的，再菜也是这方面有过研究的学者。当然有一本好教材，那才叫如虎添翼。
这方面的书籍，基本没有悬念的指向O‘Reilly出版社，就两本：《XHTML权威指南》6TH Edition（EN）5TH Edition（CN）、《CSS权威指南》1ST Edition（CN）2ND Edition（EN）。第二本书的有第三版，但是改动不大，而且只有英文版，不必求新。这些书EM上可以拖到，临时解馋，拥有一本实体书才是最重要的。CSS方面还有一本一定有的书，电子版的CSS2手册。
另外最让人想不到的一点是W3C文档，那上面很多东西都是宝!

坏孩子的做法——我用hack我怕谁

一般来说是不推荐hack的，但是hack用起来真的很方便，而且如果真的成功了有种解脱了的感觉……汗~下面是我保存下的hack资源：

• IE7的!important hack
• 少量CSS Hack
• CSS Hack图表

做个细心人——关注页面可访问性

很多时候就算一般浏览器显示正常，也不意味着所有浏览者都能正常阅读。可访问性——这是一个很大的课题，有的人会研究得很BT，往往也和SEO挂上钩，有时候读别人的文章，我会头晕。对于一般网站，我觉得能做到如下一些就好，其他事情可以自行Google：

• 选择合适的DOCTYPE
• 标记恰当的语言
• 构建具有意义并且独特的标题
• 提供完整的导航工具
• 把你的主要内容提前
• 理性地使用颜色
• 使用真实链接
• 将链接写上title属性，图片上写上alt属性
• 设置键盘快捷方式
• 不要打开新窗口
• 学会使用arconyms
• 表格头TD标签如果要加粗，请换Caption
• 别为了布局而用spacer imgaes
• 使用水平标尺
• 恰当使用Header
• 用label标签组织表单
• 为每个页面提供搜索选项

如果通过以上途径都没有改善问题，那么你能做的只有两件事情：

1. 更换你的思路，实现另一种效果
2. 等待hack或浏览器更新

Let’s Fvck That Page