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!

这个文章跟我的关系挺复杂的：几乎每天都在用里面的方法，但是直到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