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!

安装Thickbox

登陆官方网站获得最新版本的jQuery和Thickbox的文件，
Thickbox需要jQuery的脚本库，那么首先应该载入jQuery，再载入Thickbox了。
在META标签内加入如下语句：

<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>

这里需要注意的是jQuery的脚本文件必须先于thickbox的脚本文件，同时注意修改文件的路径。
紧接着需要加入Thickbox的CSS文件：

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

当然载入CSS的方法多种多样，这只是一个示范。

使用Thickbox

关于Thickbox的具体使用，可以参考官方网站的示例：http://jquery.com/demo/thickbox/#examples也可以参考legal翻译的文档。由于原来的链接无法访问，这里只给出原文的存档：
http://pagetalks.com/talks/wp-content/uploads/2008/03/thickbox/thickbox.html

定制Thickbox

对于大多数实际使用中，原来的CSS文档设置的样式都无法让人满意（看看连Microsoft的官方网站上的Lightbox都那么炫）。在这里给出Thickbox中CSS档的分析：

• #TB_overlay：覆盖原文当背景层ID
• .TB_overlayBG：背景层的背景元素，也就是背景的实体Class
• #TB_window：Thickbox内容窗口的主体ID
• #TB_caption：Thickbox内容窗口左下角的标题和导航所在DIV的ID
• #TB_closeWindow：右上角“Close”链接所在的元素（不知道是DIV还是Span）的ID
• #TB_closeAjaxWindow：Ajax载入窗口中的“Close”链接所在元素（不知道是DIV还是Span）的ID
• #TB_ajaxWindowTitle：左上角标题所在元素的ID
• #TB_title：Thickbox内容窗口顶端元素（包含标题和“Close”链接的容器）的ID
• #TB_ajaxContent：内容容器ID
• #TB_load：载入进度条的ID
• #TB_iframeContent：iFrame元素ID

最近在用Thickbox做ELFVision首页上的作品陈列室“Works”，可以到ELFVision的首页，点击Works链接看看美化过的Thickbox。不过这个是半成品，还有一些想法要通过jQuery的编程实现，慢慢来吧。

Nol BLOG的顶部图片背景为陈旧的前面，注意看，还有一支苍蝇在飞来飞去哦!

Sroown是一家设计公司，其主页的背景模仿了木质效果，配以绿色植物的环绕，整个页面生机盎然。

已收录到PageShow，快去看看！

几种格式的理论分析

JPG格式

JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。
可以提高或降低 JPEG 文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG 压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。有时，压缩比率会低到 5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG 压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
JPG格式的优点可想而知，它能够在不大量损失画质的情况下实现不同比率的压缩，再加上24位全彩的支持，使他成为目前照片储存的标准格式（在Very High模式下，其质量已经和RAW不分上下，但是体积上JPG有绝对优势）。对于网页设计师来说，当JPG文件以Progressive模式压缩时支持交错，这个特性使它能同GIF一样，有从模糊到清晰的显示过程。
JPG格式的致命伤也正是由于它的有损压缩，它的压缩损失是不可恢复的，而且当一幅JPG文件多次被修改，并再次保存时，它也就经历了多次质量损失，这个过程是积累性的。

GIF格式

GIF(Graphics Interchange Format)的原义是“图像互换格式”，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以 GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
众所周知，GIF主要分为两个版本，即GIF 89a和GIF 87a；前者支持多幅图片组成动态画面，这就是当今网络上流行的动画图片格式。尽管这种格式在网络上流传的很泛滥，它实际上是一种比较过时的格式，因为它仅支持256色，并通过抖动来“模拟”出更多色彩。网页设计师在早期使用GIF的理由大多是为了它的透明背景功能。

PNG格式

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
PNG格式的诞生和JPG与GIF密不可分，它就是为了弥补两个前辈的不足而诞生的。它同JPG一样支持压缩比率、Progressive模式压缩，与GIF一样有256色模式。还有诸多算法上的特性在此就不必指出，作为网页设计师，必须记得的是，PNG同时支持真彩色和16位Alpha通道。

三种格式在照片环境下的对决

选择的图片原件是未经处理的JPG文件，大小在经过25%缩放后为1.7MB。以下我选择了三种格式非常常用的设定来进行横向比较，下面那副图片以PNG格式保存，可以忽略质量的再次损失。

GIF设定：128位抖动，这是一个GIF中非常高的设定。
JPG设定：质量为High（60），这个设定不高不低，通常我压缩图片可能会用95的质量。
PNG设定：24位真彩，PNG的标准设定。

从上图可以看出，GIF格式图片和原图相比已经出现了颗粒感，影响了表现；JPG格式相当接近原画，虽然细节表现上有一定损失；PNG格式文件则通过肉眼无法直接辨别两者的区别。
质量上来看，PNG是毫悬念的冠军，但是文件大小上PNG竟然有964K，相比之下JPG格式的109K、GIF格式的211K是毫无优势可言的。大家如果注意GIF格式的大小和效果，你会发现GIF根本不适合作为照片文件的储存格式。也就是说，如果你的网页上面要讲色彩细节丰富的图片作为背景，那么GIF绝对不可以选，PNG格式则太臃肿，而JPG可以提供非常廉价的折中选择。

简单文件的比较

图片格式和相应参数和上次一样，这次我们来看看这三种格式对简单图案的细节的表现。大家一定会说，”这还用比？肯定是PNG>JPG>GIF“的结果么！”好吧，我们边走边瞧。

你必须得相信你的眼睛，在这种环境下，GIF、PNG与原版设计图片毫无区别，但JPG竟然出现了澡点！如果你仔细阅读了前文对JPG格式的描述，那你应该可以预测到这个结果。
再来看看文件大小，原文件PSD档680K，GIF格式文件15K、JPG格式文件38K，PNG格式文件44K。综合来看，GIF完胜PNG和JPG！希望你的下巴没掉到地上……

谈谈文件的选择

文章到此处，我们已经可以得出这样的结论：1、需要表现丰富色彩的细节，例如照片、CG之类可以选择JPG；2、当想插入简单图案，色调单一的图像（图案）可以选择GIF。
那么我们完全把PNG忽视了？
别忘了我们之前说过PNG文件的两大特点：无损压缩真彩色和16位Alpha通道！光一个“无损”压缩就可以让它成为众多图片处理软件的最佳保存格式，而它的16位Alpha通道则使网页的表达千变万化。你可能又要问，GIF也支持透明啊，我为什么要用PNG？
GIF的确支持透明，但有本事让他搞个半透明？看看下面这副图片。原图是在Photoshop中以较低的硬度用笔刷点下的一个点，相当于一个透明度延半径方向线性降低的一个圆。这其中当然就包括程度不同的透明度。结果很明显，GIF文件当插入白色背景的背景图片中时，无法体现出透明的层次，反而会用灰色来代替有透明度的像素；但PNG文件则不同，它体现出了透明的层次，并且和背景完美融合。

PNG的这种特性使它能够处理网页中的阴影、插入不同层次的背景图片等应用。再另一方面，目前在设计图标时，也多用PNG文件储存，为了这些图标（如各种表情图标）能够完美和背景融合，也直接插入PNG格式的文件(但如果你的浏览着大多数都在使用不支持PNG的Alpha通道的IE6，那么就只能用GIF将就，或者使用相应的Hack）。这便是发PNG在网页设计领域无可替代的应用。可以说，把它作为插入照片的首选格式并不是明智的选择，毕竟人们从有损压缩的JPG格式那里可以得到更快的速度。

剩下的最后一个问题是这图片格式质量参数如何选，这个只能根据原文件的质量通过不同质量参数表较而成。现在Photoshop之类的软件都可以提供“为网页优化”的选择，可以方便的进行设置。

未来图片格式的进化

PNG格式的进一步优化无疑是未来的一大亮点。其他方面，更多全新的图形格式也在不断涌现，其中SVG是最引人注目的一个。

SVG是一种矢量图形格式，SVG提供了GIF和JPEG所不能提供功能优势：

1. 放大　用户可以任意放大图形显示，但不会牺牲锐利度、清晰度、细节等。
2. 文字状态依然保留　文字在SVG图像中保留可编辑和可搜寻的状态。没有字体的限制，用户将会看到和他们制作时完全相同的画面。
3. 小文件　平均来讲，SVG文件比那些JPEG和GIF格式的文件要小很多，因而下载也很快。
4. 显示独立性　SVG图像在屏幕上总是边缘清晰，并且可以使用你打印机的分辨率进行打印。不论是300 dpi，600 dpi还是更高，你都不会体验到难看的锯齿的点阵效果。
5. 超级颜色控制　SVG提供一个16百万颜色的调板，支持ICC颜色描述
   文件，RGB，渐变和蒙版。
6. 交互性和智能化　因为SVG是基于XML的，它提供无可匹敌的动态交互性。SVG图像可对用户的动作通过高光显示、工具技巧、特殊效果、声音和动画进行反应和显示。

虽然SVG的草案已经修订出来了，但是相应的软件支持还相当少，目前主流浏览器都不支持SVG。总之SVG能够带来更多的应用，可目前它离普及还有很远的一段路要走。

顶部的导航栏连同顶部bannar一同凸起，突出了主题，也使网站在使用上更加友好。在代码方面，正确的使用ul元素也为SEO做出了不小的贡献。下部还有三个凸起图片，但明显他们没有导航栏显眼。

回顾一下整个页面的颜色，背景是绿色的渐变和少量阴影效果，其他方面还用到了橙色、深绿、蓝色等颜色的渐变。好吧，你必须承认以上这些颜色都可以在顶部的图片中找到。设计者没有准备让颜色孤立起来！

整体上，如果底部的树叶能处理的更漂亮一些（起码要对得起那漂亮的顶部导航吧），页面毫无疑问会更加迷人。

已收录到PageShow，快去看看！

我们重点要欣赏的是设计上采用的三栏：主要讯息呈现在最左，互动表单放在右侧第一栏，页面链接和杂项讯息放在最右——主次分明。

做这种分割，需要你能在心中想象出标尺，每块内容的间距、大小都要一致。注意页脚遵循的宽度是根据上面的三栏分割而来。

PS 其实这个页面的顶部Flash也很赞……

已收录到PageShow，快去看看！

页面上最给我印象深刻的是色彩的统一、布局的统一、视觉流的统一

这种开PS的人就可以做出来的效果在却显得非常漂亮，这就是统一所带来的力量。

作品展览页下面的页面导航，遵循了顶部导航的风格。
整体来说，是一个很难得的站点，用简单的线条、形状构筑了丰富的内涵。

已收录到PageShow，快去看看！

首先进入视线的是蓝色的朦胧背景，蓝色和白色的对比是相当舒服的。在表单的处理上，订制了背景图片，为什么没有处理提交按钮让我很纳闷。尽管表单的效果看起来很Cool，但是第一次浏览的时候我却不敢把鼠标往那块点，因为看起来像Buttom而非TextArea。

作品列表的设计也相当精致，有悬浮效果，背景图片采用了半透明效果。醒目且美观，总而言之是实用性很强。

也许这个作品并不能算成熟的作品，但是单页布局的设想让我们在构建内容不多的网站时有了另一个思路！

已收录到PageShow，快去看看！

懒人大法——问你的朋友

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