PageTalks http://pagetalks.com Just another WordPress weblog Mon, 04 Jan 2010 06:59:01 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Choosing a CASE Tool http://pagetalks.com/2010/01/04/choosing-a-case-tool.html http://pagetalks.com/2010/01/04/choosing-a-case-tool.html#comments Mon, 04 Jan 2010 06:59:01 +0000 Robin http://pagetalks.com/?p=298 现在的建模工具在MDA的概念之下发展的非常强劲，我们这次的一个Web项目准备尝试用UML建模并辅助生成代码和数据库。不可避免的，我们需要考虑所使用的CASE工具。经过一番试用，总结出如下内容：

各领风骚

目前流行的CASE工具还是很多的。UML的创始人Booch为首的Rational Rose，Sybase的PowerDesigner，NoMagic的MagicDraw。另外有一些工具和IDE集成紧密，NetBeans的UML工具，Eclipse的UML2Tools、EclipseUML、AmatuerUML、Together等。这其中有开源的，有商业的，让人眼花缭乱。除了基本的画图功能外，一些成熟的CASE工具是支持MDA特性的，即可以生成代码的。

Rational Rose or RSA

这个是老牌OOM的工具了，网上对他的介绍如下：

Rose是当时全球最大的CASE工具提供商Rational的拳头产品，UML建模语言就是由Rational公司的三位巨头Booch、Rumbaugh和Jacobson发明的，后来Rational被IBM收购，所以Rose可谓出身名门，嫁入豪族。

Rose的最新版本是Rose 2003，再之后的版本IBM开发了另一款Rational Software Architect，那是一款基于Eclipse的建模环境。意在替代已经大红大紫的Rose。可惜广大的工程师并不领情，依然习惯于老旧的Rose。
Rose 2003里面，对UML2支持性很差，运行速度较慢。作为一款软件，他的界面显得有些老旧，界面使用不太方便。
Rose的优点是它的教程、文档遍地都是，基本是OOM领域的一个基准点。另外，对于J2EE开发、GoF设计模式支持的非常深入。
由于Rose更注重于项目的逻辑部分，这款软件的使用者，可能是经验丰富的设计师，或是已经相当习惯Rose的一些程序员。对于他们，也许这样一款异常“专业”的工具才是最亲切的。

新版的RSA我没有用过，大家可以到IBM的官网上下着玩下。RSA是基于Eclipse的一套IED，也有针对WebSphere的插件。这个更多的应该是完善IBM的整个Rational体系，因为你选择了WebSphere，那么就必须选择IBM的一系列产品，MDA这块，IBM肯定不会放过。看过Eclipse的UML插件你会发现，他们都大同小异。

Rational Rose： http://www.ibm.com/developerworks/cn/rational/products/rose/
RSA： http://www.ibm.com/developerworks/cn/rational/products/rsa/

PowerDesigner

关于PD（PowerDesigner，以下同样如此简称），我们很自豪他的创始人是个中国人。网上对PD鄂介绍如下：

PowerDesigner有一段好玩的历史，作者王晓昀是一位中国人，在法国SDP软件公司工作时，由于苦觅一个好用的CASE工具未果，干脆自由开搞，整了个AMC Designor出来，居然一炮打响，在法国卖得个“巴黎纸贵”，后来SDP被Powersoft公司收购，同年Sybase这只大黄雀又吃下了 Powersoft这只螳螂，所以PowerDesigner也是惊艳出场，星光四射。

人们对PD的印象是再DBM领域是绝对的王者，毕竟东家是Sybase。这种说法再PD9的时候还尚且说得过去，但是从PD12往后，PD就是一个从需求到部署的一条龙的建模利器。可以说，PD才是真正意义上的RUP流程。
在PD9之后的版本里，Requirements Data Model、Bussiness Process Model、Concept Data Model、Physics Data Model、Object Oriented Model等概念出来以后，就已经树立了PD的未来一站式建模的发展方向。
从本质上讲，PD的数据库建模以及对象建模才是核心力量，其它的功能固然好，但是毕竟有很多选择（例如，用Word＋绘图工具直接做需求描述）。
在PD15里面，跟UML2的关联度越来越大，各种各样的模型基本涵盖了RUP流程的每一个角落。

PD的数据库建模方面，在建立了CPM（类似于领域模型）可以自动生成针对某个DBMS的PDM（也就是数据库表）。这一过程就已经够爽了，想想CPM是数据库无关的，更新数据库这方面是非常潇洒的。
PDM可以导出为SQL，最大限度的节省部署的难度。
如果你决定用PD来做需求、分析、设计，那么你甚至可以从RDM到BPM，再到OOM、再到CPM，到这里实际上你的程序架构和数据库都出来了……
PD的缺点是，它已经细致到了非常深的程度。上手虽然简单，但是真的想要从BPM到CPM一路上都用PD完成，需要一定研究。

PD可以在官网上下载试用版，在试用期内你就可以很容易上手。想想Sybase的PB吧……

PD ：http://www.sybase.com/products/modelingdevelopment/powerdesigner

Magic Draw

认识这个软件的理由很尴尬。号称对设计和开发领域非常友好的Mac上，其实这些程序建模软件少的可怜。除了基于Java的平台的一些本身就是跨平台的建模软件，就没有一个是真正为Mac开发的。
MagicDraw是一个基于Java的独立开发环境，也有Eclipse插件，看你喜欢怎么用了。
使用起来很方便，鼠标的操作占主要部分。目前还没有用这个做出过东西，也不能妄加评论。可能是被PD的易用性惯坏了，感觉比较难以上手，主要表现为一打开那超多按钮的界面就头晕……
最新的16.6，我自己安装的16.5 SP4。这个是支持UML2.x的，图片风格和PD一样非常漂亮。如果使用Eclipse的插件，你可以直接在Eclipse里新建一个MagicDraw文件，然后在Eclipse里面作图，和插件无异。这一点让我比较喜欢。
MagicDraw跟随的是Rose的脚步，强调逻辑建模，对需求建模支持的不是很强大。
另外，MagicDraw的很多功能都是由插件提供的，当然插件大多是付费的……

MagicDraw不失为一个标准的UML解决方案，易用性赶不上PD，但是功能足够强大，感觉替代Rose是足够了的。

MagicDraw：http://www.magicdraw.com/

EclipseUML

这个是地道的Eclipse插件，支持UML2.x的所有图，标准的UML建模工具。我试用的时候感觉很吃内存。
界面交互方式和MagicDraw之类的没有很大区别……
它的主要优势是不断更新，且功能支持比较完整。但没有什么其它亮点。

其它种种

AmaterasUml是个非常简单的UML插件，仅仅支持有限的几种UML图。优势是简便、开源。http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=AmaterasUML
Visual Paradigm，传说中速度最快的UML工具，下载过还没用过。http://www.visual-paradigm.com/product/vpuml/
Eclipse UML2Tools是一个Eclipse的官方插件，是MDT的一个组件。支持的图比较有限，类似AmaterasUML。http://www.eclipse.org/modeling/mdt/downloads/?project=uml2tools

]]> http://pagetalks.com/2010/01/04/choosing-a-case-tool.html/feed 0 Moving UC/SupeSite/Discuz/XSpace http://pagetalks.com/2009/12/02/moving-ucsupesitediscuzxspace.html http://pagetalks.com/2009/12/02/moving-ucsupesitediscuzxspace.html#comments Wed, 02 Dec 2009 13:57:43 +0000 Robin http://pagetalks.com/?p=290 08年的一个客户想要把站点迁移到我们的服务器上，由于是一个大客户，我准备把站点迁移到linode上。以下是整个过程和经历：

站点的原来规模是一个SupeSite＋DZ＋XSpace＋UC的组合，虽然采用了开源代码，但在程序上进行了包括模板定制在内的大规模改动。对方没有IT支持，所以我们的沟通成本也很大。整体来说，是一个不大不小的事情。

这个事情的开端是比较痛苦的，他们站点的所有备份文件我都没有，等要到了FTP、DB的备份，时间也过了一天。可想而知，如果这些资料一开始就准备得当，转换是可以在30分钟内完成的平滑过度。对于一个具有一定规模的站点来说，这节省下来的时间是相当宝贵的。这样证明，企业专有的ADMIN还是很重要的。

排除非人为因素，关于系统的过度，Comsenz有很详细的介绍：

http://faq.comsenz.com/viewnews-539

http://faq.comsenz.com/viewnews-504

对于租用虚拟主机的用户，这些内容已经够了，但是Linode是VPS，我们可以用更简单的方法……

该任务有两种思路可以完成它：
1、架设全新的系统，然后恢复数据库以及相关文件（头像、附件等等）
2、拷贝以前的系统文件，恢复数据库，修改相关参数

由于我手上没有以前系统的版本信息，我无法下载相应的程序，而且我也不知道我们之前到底更改了哪些系统代码；所以采取了第二种思路。

更改域名指向

我们首先应该把域名转向给更改了，因为这个是需要时间刷新的，所以最好放在一开始完成。A记录和泛解都应该指向新的IP。

某些服务商是可以提供WEB在线打包的，那么你的站点可以很迅速的把自己打包为压缩文件，之后通过远程服务器对传文件。登陆到VPS之后，用wget命令取得了原来FTP上的压缩包。
wget可以实现很复杂的下载操作，而利用远程服务器获取FTP上的文件只是杀鸡用牛刀。
详细内容可以通过man查询，或是看看这里：http://airwave.blog.hexun.com/4162966_d.html

如果你无法快速拿到原站点的打包，你可以尝试FTP对传，也就是利用FlashFXP打开两个远程FTP，左右对传。总之，尽量避免传送到你的工作站再上传到新服务器，对于动辄上G的FTP备份，这个办法太脑残了。

至于数据库，得到SQL文件之后，可以上传到VPS，登陆mysql的命令行，用source命令导入。当然还有一些适合生产环境的方法，可是对于大多数使用此类开源系统的企业，短短几秒钟的数据库备份时间应该不会产生太大影响。

至此，还算比较顺利。

确保Zend正常

待DNS已经更新了我的域名解析之后，我打开浏览器进行调试，结果发现它提示我没有ZEND：

Attention:Zend Optimizer not Installed

In order to run this software,please install the latest version of freely available Zend Optimizer
您的服务器尚未正确安装运行本软件所需的 Zend Optimizer 软件，请与空间提供商联系。

自己服务器上应该配置了Zend才对，可是为会这样呢？

在Google上找不到什么有用的内容，我直接进入Comsenz的论坛进行搜索了，果真我不是第一个吃螃蟹的人：

http://www.discuz.net/search.php?searchid=2561&orderby=lastpost&ascdesc=desc&searchsubmit=yes

总结一下关于Zend的安装问题：
1、phpinfo出现zend的图表不代表zend被正确配置，需要后面出现详细的zend参数才行
phpinfo的zend图标

只有有这些参数列表才代表你的zend配置正确

2、注意php和zend的版本对应，zend的安装包里有很多种版本
官方提供的压缩包的内容

3、php.ini需要配置正确
参考http://bbs.zendchina.net/viewthread.php?tid=41，该文档是zend的官方文档。

http://www.xinlei.org/article/jishu/415.htm有相关参数的解释

主要设置如下两个参数：
zend_optimizer.optimization_level=15
zend_extension=”/usr/local/Zend/lib/ZendOptimizer.so”

切忌将zend_Optimizer.encoder_loader设置为0，此选项默认为1，这意味着会开启zend的加密解密功能。SupeSite的程序都是经过加密的，所以需要开启zend的解密。（这也是配置zend的主要目的）

4、保证zend的文件夹具有可执行权限
我用root登陆进行的配置，所以没有遇到问题；如果是非root，应该要chmod设置一下。

调整Gzip

接下来打开浏览器，首页是显示到一半浏览器突然自己刷新然后提示：无法显示您尝试查看的页面，因为它使用了无效或者不支持的压缩格式。

包含GZIP选项的可能文件

这个就比较郁闷了，这个应该是gzip的问题，我的服务器在PHP上已经设置了zlib的压缩。是否是需要禁用supesite的gzip？

在文件里面搜索gzip的选项：

目录下有这么多文件包含gzip，但是很显然只会在一些config文件里面才会有用。
你需要检查这些文件：bbs_settings.cache.php、cache_settings.php、config.cache.php。确保里面的gzipcompress均为0。

再看看系统的配置文件

再测试一下，已经能够正常显示了。就在我以为已经大功告成了的时候，我竟然发现登陆的时候会提示无法链接到数据库！

这就让我郁闷了，因为config.php的数据库信息已经被我更改过了，怎么会无法链接了。再次求助Comsenz的官方论坛，果然我还不是第一个吃螃蟹的人：

http://www.discuz.net/viewthread.php?tid=1370988&highlight=%CA%FD%BE%DD%BF%E2%2B%C7%A8%D2%C6

原因很简单，就是由于是几个组件的整合，你需要更改每个组件的配置文件。
动手搜索文件名包含“config”的文件，需要修改的有三个：
一个是uc的config.ins.php，一个是dz的config.inc.php、最后是ss的config.php。

这些配置文件里面，数据库用户名、数据库密码、数据库名称都是必填的。你还要确保后面的一些域名和IP地址的设置都是正确的，否则整套系统无法整合起来。

修改完后，刷新一下页面，已经可以正常登陆了。其他功能也正常了。

修复死链

这个问题在更换域名之后就会出现。参考了一些网友的意见：http://www.xlbbs.cn/bbs/redirect.php?tid=2685&goto=lastpost。
我发现官方提供了相应的工具来修复：

http://www.discuz.net/thread-618077-1-1.html

注意执行需要事先登陆为管理员，使用完毕候请删除该脚本。
最后一点问题也清除了～呵呵

总结

  • 珍惜生命，善用搜索
  • 确保你考虑到了所有可能性，尤其是在配置文件的问题上
  • 不能忽视日常备份
]]> http://pagetalks.com/2009/12/02/moving-ucsupesitediscuzxspace.html/feed 0 ppk on js http://pagetalks.com/2009/11/21/ppk-on-js.html http://pagetalks.com/2009/11/21/ppk-on-js.html#comments Sat, 21 Nov 2009 09:00:05 +0000 Robin http://pagetalks.com/?p=286 ppk谈Javascript

起初听说这本书是因为淘宝UED的blog上总是在推荐这本书，最后他们甚至自己翻译了这本书。想必愿意花这么大精力在这本书上，一定又一个合理的原因──当然是这书很不错吧。

一天再逛二手书店的时候看到了这本书，二话不说就拿下了，因为基本是4折的价格，为什么不买？

拿起这本书掂量了一下，这本书很注重实战。在讲解各个章节的时候，都是用实际工程中的例子来解说。和大多数老外写得书一样，总感觉废话挺多的。

全书的精彩部分在一开头讲JS的目标、背景以及第六章以后的零零散散的一些内容。
就像作者所说的那样，书中的内容是JS所必须知道的，但远远不是JS的全部。

ppk是同样是世界级大师，他看问题很仔细也很有深度，大概跟他学历史有关吧;更有趣的是，他也同样会一个历史学家的眼光去看待过去浏览器大战所遗留的问题以及对未来问题的预测。但于不是专业出生，他的代码从思想上还是和那些程序员出发的人有区别的。
特别是全书你不会感到一点OO的感觉，甚至也没有考虑大型工程的情况。
不过我也是就书中的代码做出的推测，因为全书都是基于function，顶层对象空间也污染严重。可能他认为直接用function会很方便，也可能他觉得工程规模很小。

但ppk的经验是无庸置疑的，看看quirksmode就知道，毫无疑问的骨灰级人物。
在书中的很多function都十分实用，你再写web应用的时候甚至可以直接copy。

其次ppk受《JS权威指南》的影响比较大，很多位置就是直接从那本书里搬过来的。相比看过这两本书的同学一下子就可以感觉到。

总体来说，这是一本很值得一读的中级JS读物。但具体应该什么时候读，我也不清楚。
如果你上手JS的第一本书是《JS权威指南》恐怕这本书就只能是课外读物了。话说，多看点书绝对没有坏处，如果一定要选，读完《JS权威指南》我倒想去看看《Ajax企业开发》、《JS the Good Parts》。

PS　这学期原计划是深入一下JAVA的，不料被JS迷住，估计要继续研究RIA技术了。

]]> http://pagetalks.com/2009/11/21/ppk-on-js.html/feed 2 slideView and imgDesc Plugins Updated http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html#comments Sun, 05 Jul 2009 08:47:00 +0000 Robin http://pagetalks.com/?p=276 A new version of slideView plugin and imgDesc plugin are avaliable now!
See more detail in http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html
and http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html

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!

slideview插件的新版本出来了！到这里看更多信息：http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html 以及 http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html

我花了一整天时间修补bug以及美化用户界面，这两个插件现在会看起来好很多。

SlideView的演示：http://pagetalks.com/share/slideView
imgDesc的演示在上面的发布链接内
欢迎大家留下意见！

]]> http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html/feed 2 Print Style in Actions http://pagetalks.com/2009/06/28/print-style-in-actions.html http://pagetalks.com/2009/06/28/print-style-in-actions.html#comments Sun, 28 Jun 2009 07:49:51 +0000 Robin http://pagetalks.com/?p=263 Recently I’ve read deeply into some books about web standards, and found out people would be pleased if they can just click the print button in a web browser and get everything they want neatly printed. The books lead me to two excellent articles written by Eric Meyer.
Two articles are: “CSS Design: Going to Print” (www.alistapart.com/articles/goingtoprint) and “Print Different” (www.meyerweb.com/eric/articles/webrev/200001.html).

And this article is the experiences I got during making the print style for PageTalks.com.

Before making a print stlye, the preview is terrible:

Before making a print style

What I’ve been told

Eric Meyer sums three ways to implement the print style on a web page.

  • <LINK rel=”stylesheet” type”text/css” href=”print.css” media=”print”>
  • @import url(paged.css) print,projection;
  • @media print {…}

The principles of building a printer-friendly page always require the designers to bear in mind the general idea of saving ink. To do so, we have to accomplish some simple steps:

  • hide all banners
  • hide all widgets, sidebars, comments and so on
  • use white background
  • assign correct font size for printers

With the font-size properties, point value is doing a better job here and readers will be more comfortable with serif font-family. Eric chose 12pt for font-size, but I think it’s pretty huge value for texts. So I use 10pt instead.
In fact, you need to reset all the properties related to typography using pt. E.g:

body {
font-size: 10pt;
line-height: 15pt;
margin:12pt 6pt;
padding:3pt;
}

body a,body a:link,body:visited,body a:hover,body a:active {
background:#FFF;
color:#000;
text-decoration:none;
}

body h2,body h3,body h4,body h5,body h6 {
line-height:125%;
}

body h1 {
font:bold 10pt/150% helvetica, arial, sans-serif;
letter-spacing:0.3pt;
margin:6pt 0;
text-transform:uppercase;
}

body h2 {
border-bottom:1px dotted #AAA;
font:14pt/150% georgia, times, serif;
margin:18pt 0 6pt;
padding:0 2pt 0 0;
}

body h3 {
font-size:9pt;
margin:18pt 0 6pt;
text-transform:uppercase;
}

body p {
margin:0 0 12pt;
}

body div.entry-date {
border:1px solid #999;
float:right;
font-size:7pt;
margin:0 3pt;
padding:1pt 3pt;
text-transform:uppercase;
}

@import Doesn’t Work

Don’t pannic. Firefox does a good job to load import rule with media type. However, it’s not so lucky with IE6. (I didn’t test IE7 or IE8, since IE6 users overnumbers the total users of IE7 and IE8)
IE6 seems to be unable to parse a @import rule with media type like this:

@import url(paged.css) print,projection;

Without media type, it can obey the import rule as Firefox does. Believe or not! See my test page and play aroud with IE6: Test for Import Rules

Declarations of media is supported by IE6, which means you can add do it like this:

@media print {
@import url("print.css")
}
or just use link tag:
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

What else should be hidden from printers

Beside font properties, making unneccessary contents invisible is also a tiring task. Technically, besides the contents we’ve listed before, we should hide all interactive components like forms, buttons, inputs and so on. That’s because users can’t interact on the papaer and we just save more ink by not printing them at all. E.g:

The comment form is impossible to be used on a paper.

Useless Forms on Papers

Some links that triggers a javascript event or point to actions that impossible to take on papers.

Useless links

Edit link is useless. More often than not, users holding the paper don’t intend to ‘Edit’.

/* Hide unneccessary contents */
body div#blog-description,body div.sidebar,body div#access,
body div#globalnav,body span.archive-meta,body div.entry-meta,body div#footer,
body div.navigation,div#respond,div#trackbacks-list,body div.formcontainer,
body form, body div.serve-bar, .comments .comment-meta * {
display:none;
}

/* Hide contents generated by Javascript and flash */
.lang-select ,body div.entry-content embed, body div.entry-content object {
display: none;
}

Override CSS

It’s ideal to seperate print style and screen style completely. In my case, I don’t want to rewrite the layout in print style. That means I’m bound with the troubles of inheritence.

In the CSS for screen, I specify the widths and postions of containers. It’s time for me to reset it in print style.

You’d better clear the paddign and margin so as to make most of papers
When assigning width values, avoid use px unit; margin of 5% is prefered

/* Override the layout for printer */
body #container {
margin: 0;
padding: 0;
width: 100%;
}
body #container #content {
margin: 0;
padding: 10px;
}

body div.entry-content a.more-link {
position: static;
}

Just watch out if you have to do the similar job.

Where is my LOGO?

Clicked the print preview button and found my logo was gone.
It’s not surprising for you to understand the broswers will hide css background automatically. I use a image replacement technique to display my logo, so the background is just hidden.

The only choice left to me is to use a IMG tag to show the logo.

I re-designed the logo for print and hide it in CSS for screen.

body #header div#blog-description, body #header h1#blog-title {
display: none;
}

body #header {
width: 257px;
height: 58px;
text-indent: 0px;
top: 0px!important;
left: -10px;
z-index: 11111;
}

#blog-logo {
display: block;
}

Final Result

After multiple tweakings, we finnaly got a nice print stlye:

Using a print style

Try to create your own print style!

]]> http://pagetalks.com/2009/06/28/print-style-in-actions.html/feed 0 Digest and Thoughts on Web Standards Solutions – More on Styles http://pagetalks.com/2009/06/26/digest-and-thoughts-on-web-standards-solutions-stlyes.html http://pagetalks.com/2009/06/26/digest-and-thoughts-on-web-standards-solutions-stlyes.html#comments Fri, 26 Jun 2009 15:07:28 +0000 Robin http://pagetalks.com/?p=258 This post follows my earlier post Digest and Thoughts on Web Standards Solutions – Basic Markups. I suggest read that article first and then head to this one.
这篇文章是接着之前的文章写的，建议大家先将之前的文章看看再移步这篇文章。

Applying CSS

I suppose to move this chapter ahead. Lots of ways to apply CSS to a document:

Use <style> tag

  • Browser can’t cache the css content
  • Bad for maintaince
  • Should only be used in development period

Wrap the CSS content with CDATA tag, e.g:

<style type="text/css">
<![CDATA[
...CSS declarations here...
]]>
</style>

External CSS

Insert a link tag inside the head tag:

<link rel="stylesheet"type="text/css"href="styles.css"/>

Now the broswer can cache the file and it’s easy for you to modify.

@import rules

Defining the @import rules in CSS is another good option. Ancient browers such as Netscape doesn’t understant import rule. Therefore they are unable to load CSS assigned in @import rules. We can separate our structured markup from the presentation as much as possible, and then hold design details and styles for browsers that support them. 

<head>
<meta http-equiv="content-type"content="text/html;charset=utf-8"/>
<title>Applying CSS</title>
<link rel="stylesheet"type="text/css"href="lofi.css"/>
<style type="text/css">
@import"hifi.css";
</style>
</head>

Only contemperory bwosers can read hifi.css, while old ones can’t. And then we can fully use the Cascade feature of CSS to override the properties formerly assigned.

Inline style

For temperoray usage only.

CSS can have alternative files to provide users chances to choose which set of stlye to load.

<link rel="stylesheet"type="text/css"href="default.css"title="default"/>
<link rel="alternate stylesheet"type="text/css"href="largetext.css"title="large"/>
<link rel="alternate stylesheet"type="text/css"href="largertext.css"title="larger"/>

It’s a pity that only new brwoser can handle this.

Print Style

CSS is not only for computer screen. It can be used for many types of media. However not every type of media support CSS. Printer and screen readers are just two common clients besides computer screen.

By media property
<link rel="stylesheet"type="text/css"media="screen"href="screenstyles.css"/>

media type:http://www.w3.org/TR/CSS21/media.html。

@media or @import
<style type="text/css">
@import url("screenstyles.css")screen;
@media print{
/* for printers */
}
</style>

Default value for media is all, which means all devices will load this CSS file.

media accept multiple values seperated by blank：

<link rel="stylesheet"type="text/css"media="screen,print"href="screenstyles.css"/>

or

<style type="text/css">
@import url("screenandprint.css")screen,print;
@media print{
/* for printers */
}
</style>

In real world, we need to create another CSS for printers.

<link rel="stylesheet"type="text/css"media="screen"href="/css/styles.css"/>
<link rel="stylesheet"type="text/css"media="print"href="/css/print.css"/>

There are some basic skill you will find useful when making print style:

  • Assigning a value using pt unit as a base font size in BODY, e.g body {font-size: 12pt;}
  • Hide unneccessary contents such as sidebars and widgets, and so on
  • Hide your beautiful background. Just leave some important images such as logo. And take speical care with the color they contain.
  • Make sure users will still distinguish the links and normal text on the paper.
a:link,a:visited{
color:blue;
text-decoration:underline;
}
#content a:link:after,#content a:visited:after{
content:"("attr(href)")";
}

Here we use pesudo-class :after and :content to modify the text content, which is a very controversial method among designers as they regard it’s against the idea of CSS
I think it’s all up to you.

Dan also recommends two articles about print style：

  • http://www.alistapart.com/articles/goingtoprint
  • http://www.meyerweb.com/eric/articles/webrev/200001.html

CSS Layout

Dan demonstrates some basic methods to layout with CSS.
Generally it’s realized by floating and absoulute positioning.
However it’s definitely not sufficient in real world.
I will give another guide about contemperarory css layout.

Dave also make supplements for us:

  • "The Layout Reservoir"(http://www.bluerobot.com/web/layouts/)
  • "From Table Hacks to CSS Layout:A Web Designer’s Journey"(http://www.alistapart.com/articles/journey/)
  • "CSS Layout Techniques:For Fun and Profit"(http://www.glish.com/css/)
  • "Little Boxes"(http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
  • "CSS Zen Garden"(http://www.csszengarden.com/)

Some are already househeld.

Dan also memtions the irritating box model. Box model is vital in layout, for most strange problems that cost your days to solve are caused by them.
Generally speaking, CSS1 compliant browsers will do as written in W3S specs. The conflict arises in (stupid) IE5. For example:

#sidebar{
width:200px;
padding:10px;
border:5px solid black;
}

Correct explaination is as followed:

box-model-1

But in IE5, sad truth is:

box-model-2

The solution is using css hack:

#sidebar{
padding:10px;
border:5px solid black;
width:230px;/*for IE5/Win*/
voice-family:"\"}\"";
voice-family:inherit;
width:200px;/*actual value*/
}
html>body#sidebar{
width:200px;
}

We use voice-family property to mislead IE5 to believe to think this css declaration is ended. However new bwosers will handle the whole declaration nicely. The later width property shall overrides the former one.
The second CSS declaration block is for Opera which unfortunately will be mieled as well. Let’s give a child selector to confuse old browsers such IE5 but pass to the new borsers.

Listamatic- The IE box model and Doctype modes_1246021608084
A chart explaining the behaviours of IE and Doctypes. See more at http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Last part of this chapter, Dan introduces a useful technique – Faux Columns.
In the design of CMS, we hope our sidebar can be high enough to reach the bottom so that we can show the background (probably repeated images). But the elements’ height are assigned according to their real height and assign the fixed height before the content is generated is unrealistic.
We can trace the concept of Faux columns to the Alistapart:
"Faux columns"(http://www.alistapart.com/articles/fauxcolumns).

fauxcolumns

The instructions are easy: wrap the #left and #right in a container div, and use CSS to assign background to the container.
The content in the container div will make it tall enough to display the background properly.

Styling text

In this chapter, Dan discussed some common css properties to style text:

  • line-height, defines the line height. Commonly use a em based value
  • font-family, tells the browser to use which font face to display the text. It accept multiple values; The font name contians blank, use quotation marks to wrap it
  • letter-spaceing, change the space between letters, commonly used in styling the headings
  • :fisrt-letter pseudo-class is not supported in most mordern broswers. To apply drop cap effect, we need to wrap the first letter with additional tag
  • text-align, sets the way the text in a contain align. Can be left, center, right, and justify. Justified text spaces words out so that each line is of equal length, making a tight, defined column.
  • text-transform can modify the capitalization of text. Can be upppercase or lowercase
  • font-variant allows us to render type in small caps (where the text is capitalized with varying character sizes)
  • text-indent indents the first line of paragraphs

Image Replacement

In this chapter, Dan introduces some ususal Image Replacement techniques: FIR, LIR, Phark. These techniques are used to solve the dilema that the fonts chosen by designers are often unavaliable in clients. So we just use images to serve as normal texts.

See more at Using Background Image to Replace Text

sFir is now more and more popular. You can find the examples right here in PageTalks. All titles here are presented by sFir techniques.

Styling <body>

It’s very interesting to assign class to Body tag. View the source of large CMS, you may find body has classes!
Dan explains that by using class in body, we can:

  • Swich the layout
  • Specify the CSS property for special pages, e.g body.index#content{…}, assigining some css property to #content in Index only
  • You can tell users “You are here” in the navi

For example, suppose the navi bar is as followed:

<ul id="minitabs">
<li id="apples_tab"><a href="/apples/">Apples</a></li>
<li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
<li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
<li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>

Assign id property to body, and write in the CSS like this:

body#apples#apples_tab a,
body#spag#spag_tab a,
body#beans#beans_tab a,
body#milk#milk_tab a{
color:#000;
background:url(tab_pyra.gif)no-repeat bottom center;
}

You needn’t server side script to judge which page the user is in. It’s only based on HTML tags and CSS.

Ending

In this chapter, Dan gives us lots of useful resources to go on our study.

Public Organizations

  • W3C – http://www.w3.org
  • Web Standards Project – http://www.webstandards.org
  • A List Apart http://www.alistapart.com
  • CSS Zen Garden http://www.csszengarden.com
  • Dive into Accessibility – http://www.diveintoaccessibility.org
  • css-discuss – http://www.css-discuss.org
  • Web-Graphics – web-graphics.com
  • Digital Web Magazine – http://www.digital-web.com
  • The Weekly Standards – http://www.weeklystandards.com

Inspiration Blogs

  • Jeffrey Zeldman Presents:The Daily Report – http://www.zeldman.com
  • Stopdesign – http://www.stopdesign.com
  • mezzoblue – http://www.mezzoblue.com
  • meyerweb.com – http://www.meyerweb.com/
  • Tantek Celik – tantek.com/log/
  • What Do I Know? – http://www.whatdoiknow.org/
  • Asterisk* – http://www.7nights.com/asterisk/
  • superfluousbanter – http://www.superfluousbanter.org
  • Simon Willison’s Weblog – simon.incutio.com
  • Brainstorms and Raves – http://www.brainstormsandraves.com
  • Living Can Kill You – http://www.saila.com/columns/lcky/

Books

Designing with Web Standards
By Jeffrey Zeldman(New Riders,2003)
Cascading Style Sheets:The Definitive Guide
By Eric Meyer(O’Reilly&Associates,2000)
Speed up Your Site:Web Site Optimization
By Andrew B.King(New Riders,2003)

应用CSS

个人觉得作者应该把这一章提到前面，笑……
有很多方法可以将CSS应用到文档上

在文档内部定义<style>元素

  • 这样做浏览器无法缓存CSS文件，降低了页面性能
  • 不利于后期维护CSS
  • 应该仅仅在开发阶段作为调试手段

应该用CDATA标记包围CSS代码，示例如下：

<style type="text/css">
<![CDATA[
...CSS declarations here...
]]>
</style>

外部样式表

在head标签里面，定义一个link元素

<link rel="stylesheet"type="text/css"href="styles.css"/>

这样做浏览器可以对这个文件做缓存，而且有利于日后维护

@import规则

在CSS文件中定义@import规则，也是一个很好的方法
老的浏览器，诸如Netscape 4.x等不支持import规则，这意味着通过import规则导入的CSS是无法被这些老浏览器看到的。我们可以为不用级别的浏览器指定兼容性方案：

<head>
<meta http-equiv="content-type"content="text/html;charset=utf-8"/>
<title>Applying CSS</title>
<link rel="stylesheet"type="text/css"href="lofi.css"/>
<style type="text/css">
@import"hifi.css";
</style>
</head>

只有较为现代的浏览器才能读取hifi.css，而老浏览器只能看到lofi.css。建立这种方案，我们应该充分利用CSS的层叠特性，即之后的属性可以覆盖先前定义的属性。

行内添加样式

这是最不好的方法，只能用作指定临时样式之用。

CSS的可替换属性可能还很不为人知，其实就是给浏览诸多CSS文件供浏览器加载

<link rel="stylesheet"type="text/css"href="default.css"title="default"/>
<link rel="alternate stylesheet"type="text/css"href="largetext.css"title="large"/>
<link rel="alternate stylesheet"type="text/css"href="largertext.css"title="larger"/>

书中给出了定义了不同字体大小下的各个CSS文件，供浏览器选择。通常这是基于浏览器用户界面的操作，老的浏览器可能不支持这个特性。

打印样式

CSS的不仅仅是为渲染屏幕效果而产生的，他的目标媒介有很多。但是由于各个厂商都不太遵循网页标准，所以CSS的这些高级功能也就是白费了。不过值得欣慰的是，对于打印机和屏幕阅读器，我们是可以单独为他们指定CSS文档的。

通过media属性指定
<link rel="stylesheet"type="text/css"media="screen"href="screenstyles.css"/>

media的可选项你应该去参考一下http://www.w3.org/TR/CSS21/media.html。

@media或@import
<style type="text/css">
@import url("screenstyles.css")screen;
@media print{
/*为打印机指定的样式表*/
}
</style>

其实没有指定media属性时，浏览器默认值为all，也就是所有媒介都会读取这个CSS。

media属性允许指定用空格隔开的多个值，例如：

<link rel="stylesheet"type="text/css"media="screen,print"href="screenstyles.css"/>

或者

<style type="text/css">
@import url("screenandprint.css")screen,print;
@media print{
/*为打印机指定的样式表*/
}
</style>

实际操作中，我们应该分为两个文件为打印机和屏幕提供样式。

<link rel="stylesheet"type="text/css"media="screen"href="/css/styles.css"/>
<link rel="stylesheet"type="text/css"media="print"href="/css/print.css"/>

在定义打印样式的时候，有一些很基本的技巧：

  • 应该在body中指定一个以pt为单位的基准字号
  • 将不必要的内从隐藏，例如侧边栏、文章类表等等
  • 将那些绚烂的背景图片都隐藏起来吧；例如logo之类必要显示的图片，也要注意色彩问题
  • 应该保证在输出纸张上我们依然能分别普通文字和链接文字
a:link,a:visited{
color:blue;
text-decoration:underline;
}
#content a:link:after,#content a:visited:after{
content:"("attr(href)")";
}

这里用了:after伪类以及content属性，实现了通过CSS修改文本内容，有人评论说这样是有悖于CSS的出众的。大家自己定夺吧。
文中推荐了两篇Eric Meyer的关于打印样式的文章：

  • http://www.alistapart.com/articles/goingtoprint
  • http://www.meyerweb.com/eric/articles/webrev/200001.html

CSS布局

这一节里面我们可以看到作者演示了一些基本的布局方法。
浮动实现侧边栏实现双栏布局、浮动双栏实现三栏布局、浮动内容、双浮动、绝对定位侧边栏等等。个人感觉可能由于这本书的限制，介绍的这些布局方法在实际操作中是远远不够用的。我会另外用一篇文章来总结一下对现代CSS布局的学习。
当然文中也给出了一些讲布局的文章：

  • "The Layout Reservoir"(http://www.bluerobot.com/web/layouts/)
  • "From Table Hacks to CSS Layout:A Web Designer’s Journey"(http://www.alistapart.com/articles/journey/)
  • "CSS Layout Techniques:For Fun and Profit"(http://www.glish.com/css/)
  • "Little Boxes"(http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
  • "CSS Zen Garden"(http://www.csszengarden.com/)

有一些是路人皆知的啦……

本节的后半部分作者讲到了盒模型，写的越多对这个东西就会更加熟悉，一开始是相当让人头疼的。大多数莫名其妙的布局问题都是源自于盒模型的兼容性。
总的来说，只要是支持CSS1的浏览器都能够按照W3C所推荐的那样去理解盒模型，主要问题都出现在如IE5这样比较顽固的浏览器上。书中举出了如下的CSS代码

#sidebar{
width:200px;
padding:10px;
border:5px solid black;
}

正确的解释应该如下图所示

box-model-1

但是在IE5中，结果是这样

box-model-2

解决这个问题，目前不叫实用的只有使用hack。

#sidebar{
padding:10px;
border:5px solid black;
width:230px;/*for IE5/Win*/
voice-family:"\"}\"";
voice-family:inherit;
width:200px;/*actual value*/
}
html>body#sidebar{
width:200px;
}

我们用一个不会影响外观的voice-family，传递一个会让IE5误以为这个声明已经结束的符号。但对于新的浏览器，剩下的规则还会继续解析，最后一个width就会覆盖先前的width。而第二个声明，则是因为诸如Opera的CSS2兼容浏览器也会因为那些符号而已为第一条声明提前结束，所以用一个CSS2的子选择符再次写出width属性。

Listamatic- The IE box model and Doctype modes_1246021608084
这是一张了解释IE对于盒模型的行为与Doctype的关系的图标。你可以在这里了解更多：http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

本节最后作者介绍了一种非常有趣的招数——伪栏
在一般的CMS设计中，我们往往希望侧边栏能够和整个页面页面一样高，多半是设计师是希望背景图片能够显示完全。但是CSS在默认情况下，会自动适应高度，内容有多高，容器的高度就有多少；倘若你想手动指定高度，实现计算一个CMS系统文章容器的高度也是不现实的。

fauxcolumns

"Faux columns"(http://www.alistapart.com/articles/fauxcolumns)也是出现在alistapart里面的概念。实现原理很简单，那就是将#left和#right两个div用一个容器div包裹起来，然后把背景图片指定到这个容器div里面，这样图片的延伸高度就和文章高度一样了。

设定文本样式

本节主要介绍了用常用的一些CSS属性来定义文本样式。

  • 用line-height定义行高，使用相对单位em会更有效
  • 用font-family指定字体，可以指定多个字体作为备选；若字体名字里面有空格，就要用引号引用
  • 用letter-spaceing来指定字符间距，这是文章标题上常见的效果
  • 虽然用:fisrt-letter这个伪类可以实现段首字母下沉，可是大多数浏览器都不支持这个伪类，所以还是需要手工在断手字母旁边包围一个span，再来操作span的属性
  • 用text-align设定文本的对其方式，除了left、center、right三个常规属性，还有一个justify这种”两端对齐“的方式，这种方式可能让字符之间的间距不规则，但是页面整体效果是整齐的
  • 用text-transform可以将小写字母变大写，大写字母变小写。可选属性是upppercase、lowercase
  • 用font-variant来实现”小型大写字母“（这翻译够绕口吧？原文“Small Caps”）
  • 用text-indent来实现首行缩进，这个缩进仅仅对每一段的第一行有效

图片替换

这一节讲了FIR、LIR、Phark等常用的图片替换方法
图片替换方法主要是为了解决设计师所用的字体在客户端上不一定存在的困境，往往解决方案是使用图片来代替。
里面讲述的方法在我的另一片文章里面已经都已经涵盖，请自行参考，这里不再赘述。
需要指出的是，现在sFIR技术也很流行，PageTalks的标题都是使用sFIR，sFIR也解决了一些图片替换技术目前无法解决的问题，值得参考。

为<body>设定样式

这一节就比较耐人寻味了。其实翻开大型站点的代码，几乎都会发现他们的body上竟然有class属性，作者在此道出了真意：

  • 用class随时切换分栏等布局特性
  • 在系统的特定页面指定特定的属性，例如body.index#content{…}，这样的语法精确的给首页的#content的元素指定了样式
  • 巧妙的实现导航栏的”当前页面提示“

示例，假设导航栏的代码是这样的：

<ul id="minitabs">
<li id="apples_tab"><a href="/apples/">Apples</a></li>
<li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
<li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
<li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>

在不同的页面给body指定相应的id，那么可以在CSS中这样写

body#apples#apples_tab a,
body#spag#spag_tab a,
body#beans#beans_tab a,
body#milk#milk_tab a{
color:#000;
background:url(tab_pyra.gif)no-repeat bottom center;
}

这样的好处是不需要在服务器端脚本上写判断页面的逻辑，而仅仅是通过设定id属性和修改CSS完成的。

下一步

这节作者给出了很多有用的链接，供大家进一步学习研究

相关组织

  • W3C – http://www.w3.org
  • Web Standards Project – http://www.webstandards.org
  • A List Apart http://www.alistapart.com
  • CSS Zen Garden http://www.csszengarden.com
  • Dive into Accessibility – http://www.diveintoaccessibility.org
  • css-discuss – http://www.css-discuss.org
  • Web-Graphics – web-graphics.com
  • Digital Web Magazine – http://www.digital-web.com
  • The Weekly Standards – http://www.weeklystandards.com

创意博客

  • Jeffrey Zeldman Presents:The Daily Report – http://www.zeldman.com
  • Stopdesign – http://www.stopdesign.com
  • mezzoblue – http://www.mezzoblue.com
  • meyerweb.com – http://www.meyerweb.com/
  • Tantek Celik – tantek.com/log/
  • What Do I Know? – http://www.whatdoiknow.org/
  • Asterisk* – http://www.7nights.com/asterisk/
  • superfluousbanter – http://www.superfluousbanter.org
  • Simon Willison’s Weblog – simon.incutio.com
  • Brainstorms and Raves – http://www.brainstormsandraves.com
  • Living Can Kill You – http://www.saila.com/columns/lcky/

书籍

Designing with Web Standards，《网站重构》
By Jeffrey Zeldman(New Riders,2003)
Cascading Style Sheets:The Definitive Guide，《CSS权威指南》
By Eric Meyer(O’Reilly&Associates,2000)
Speed up Your Site:Web Site Optimization
By Andrew B.King(New Riders,2003)
第三本书讲的是HTML和CSS的代码优化，貌似国内没有出版，其实这本书也不错：
High Performance WebSites，《高性能网站设计》
Steve Souders(O’Reilly)，作者是是YUI的高级工程师，书很薄，很快就可以消化，在这里做个小广告
]]> http://pagetalks.com/2009/06/26/digest-and-thoughts-on-web-standards-solutions-stlyes.html/feed 0 Digest and Thoughts on Web Standards Solutions – Basic Markups http://pagetalks.com/2009/06/26/digest-and-thoughts-on-web-standards-solutions-basic-markups.html http://pagetalks.com/2009/06/26/digest-and-thoughts-on-web-standards-solutions-basic-markups.html#comments Fri, 26 Jun 2009 14:40:00 +0000 Robin http://pagetalks.com/?p=244 web-standards-cn

在图书馆看到这书，早就想拜读一下，考完了伟大的马哲，终于完成我的愿望啦。书的详细信息：http://www.china-pub.com/40160&ref=ps

书拿起来很薄，印刷还算精细。人民邮电出版出版的一系列书顺准都很高，但是翻译的质量参差不齐。这本书翻译质量不敢恭维，很多句子读起来绕口，我只有去查阅英文原版才得以豁然开朗。
原作者是Dan Cederholm，可能这名字没有Dave Shea这些顶级NB人士响亮，但是他的网站Simplebits.com很早就已经被我放到收藏夹里了。

整本书适合懂得XHTML，但是想让自己的页面更接近网页标准的设计师、前端工程师们细读。内容都不是什么新东西，但是算是一个比较实在的小册子。总的来说，是一本优秀的入门级读物。应该与一本《CSS Mastery》相似，大家两者只要收录其一就可以。

本文是我整理的阅读笔记，也是我觉得里面比较精华的内容，供大家参考。如果你发现这些内容已经是烂熟于心，这本书就远远低于你的要求了。（那一定是很N的人了，笑……）

web-standards-en

I met this book in the library months ago. Despite the few glimpses in a hurry, I felt it was a great book and made up a mind to produce some time to read it.
Detail about this book:

http://astore.amazon.com/simplebits-20/detail/1590593812

It’s only a handy book, light and thin. The author is Dan Cederholm, who probably is a nobody in your mind but indeed an expert in Web Standards. Simplebits is his own site and I took it into my favorites long time ago.

On the whole, this book is good enough for those who know the basics about XHTML, but desire to rise into a upper atmosphere of web standards. You may think CSS Mastery is also anther choice. Yes, it’s very similar to CSS Mastery. In my opinion, just buy either of two.

Following are some my digests and thoughts about this book, for you review. Hope you find it useful.

列表元素

  • 不要用br换行
  • 保持标签闭合
  • 使用li和ul

本节中作者讲述了用纯CSS实现一个非常漂亮的导航菜单，值得参考。

标题

  • 使用h1~h6描述标题
  • 注意标题级别，尽量做到递减

本节中描述一种名叫“变色龙效果（The Chameleon Effect）”的技巧。通过运用透明的GIF的IMG元素，并在CSS中设置IMG的background属性，这样可以为透明部分填色。

<h3><img src="http://images.fastcompany.com/icon/first_imp.gif"width="13"height="13"alt="*"/>FIRST IMPRESSION</h3>

仅仅通过更改CSS的属性可以达到更换颜色的目的。这种技巧也可以用来作图像的水影。

表格数据

table并不是万恶的，它是XHTML的一部分，表格型数据都应该用table来写，这些数据可能是：

  • 日历
  • 工作簿
  • 图表
  • 日程表

写表格时应该注意一些细节：

  • 加入caption作为表格标题，明确表格内容
  • 设置summary属性介绍table的内容，提高可访问性
  • 活用th表示表头
  • 利用td的headers属性表明数据之间的关系
  • 在th中设置abbr属性设置该表头的简写或概要，为屏幕阅读器提供便利
  • 活用thead、tfoot、tbody增加表格的语义；同时打印输出时，会在每一个单独的纸张上都输出thead和tfoot，提高可读性

本节中作者演示了如何用CSS创建基于表格的格点：

table{
border-top:1px solid#999;
border-left:1px solid#999;
border-collapse:collapse;
}
th,td{
border-right:1px solid#999;
border-bottom:1px solid#999;
}

这里我们通过设置border-collapse完全消除单元格之间的间隙。

引用文本

这方面是大多数设计师没有注意的问题了，作者也提出了一些网上常见的做法以及他们的缺点。正确的编写引用文本，应该：

  • 用blockquote包围内容
  • 给blockquote添加cite属性，告诉浏览器这段文字来自哪里
  • 如果是行内引用则用q
  • 给q设置lang标签（完整的lang属性可用值，参考http://www.w3.org/TR/html4/struct/dirlang.html#langcodes）

表单

又是XHTML的一大陷阱，看看高手写出来的表单代码和自己写的就觉得自己没学过XHTML。时常可以看到人们这样做：

  • 用br换行
  • 用table布局
  • 使用p和br实现换行

书中是这样建议的：

  • 对于简单的表单尽量不要用table
  • 对于项目的名称，用label包围
  • 简单的表单通过p、label就可以简单的构件
  • 最极端的状态是用dl、dt、dd来写表单，这样的可读性是最高的
  • 设置input等项目的tabindex属性，提高可用性
  • 为常用项目设置accesskey属性
  • 在同一个form下，利用fieldset给项目分组
  • 利用legengd给每个fieldset提供标题

一些实例：

<form action="/path/to/script"id="thisform"method="post">
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input type="text"id="name"name="name"/></dd>
<dt><label for="email">Email:</label></dt>
<dd><input type="text"id="email"name="email"/></dd>
<dt><label for="remember">Remember this info?</label></dt>
<dd><input type="checkbox"id="remember"name="remember"/></dd>
<dt><input type="submit"value="submit"/></dt>
</dl>
</form>

个人的疑虑：这个写法中，dt和dd的个数不匹配，是否完全正确还有待研究。在HTML&XHTML The Definitive Guide中也只是模糊地这样说明：

each item name in a<dl>list is marked with the<dt>tag,followed by the item’s definition or explanation marked by the<dd>tag.

<form action="/path/to/script"id="thisform"method="post">
<p><label for="name"accesskey="9">Name:</label><br/>
<input type="text"id="name"name="name"tabindex="1"/></p>
<p><label for="email">Email:</label><br/>
<input type="text"id="email"name="email"tabindex="2"/></p>
<p><input type="checkbox"id="remember"name="remember"
tabindex="3"/>
<label for="remember">Remember this info?</label></p>
<p><input type="submit"value="submit"tabindex="4"/></p>
</form>
<form action="/path/to/script"id="thisform"method="post">
<fieldset>
<legend>Sign In</legend>
<p><label for="name"accesskey="9">Name:</label><br/>
<input type="text"id="name"name="name"tabindex="1"/></p>
<p><label for="email">Email:</label><br/>
<input type="text"id="email"name="email"tabindex="2"/></p>
<p><input type="checkbox"id="remember"name="remember"
tabindex="3"/>
<label for="remember">Remember this info?</label></p>
<p><input type="submit"value="submit"tabindex="4"/></p>
</fieldset>
</form>

短语元素

这个也是极容易混淆的地方，面试前端，也许人家就会问你：“<b>和<strong>有什么区别？”
事实上目前实现富有语义的XHTML的最大困难就是设计师不愿意浪费时间来设定这些短语元素。
书中简明扼要的指出：

<em>表示强调
<strong>表示更强的强调

  • <b>和<strong>在显示效果上都是粗体，但是<strong>能表达语义上的含义，而<b>仅仅进行了视觉上的格式化。当然，这些位置最好使用CSS的font-weight或font-style实现
  • <i>和<em>和上面同理
Your order number for future reference is:<strong>6474-82071</strong>.
It took me not one,but<em>three</em>hours to shovel my driveway this weekend.

只有上面这两种写法才能正确表示强调。当然不是要求你不用<b>和<i>，事实上有很多位置只需要对其进行视觉上的格式化。
<cite>用来表明引用信息或对其文献的参考说明。示例：

The novel,<cite>The Scarlet Letter</cite>is set in Puritan Boston and like this book,was written in Salem,Massachusetts.
  • <abbr>表示一种简写形式，如WWW、HTTP等，屏幕阅读器将会将其以单个字母地形式读出
  • <acronym>表示取首字母的缩写形式，屏幕阅读器将会将其作为一个单词读出
  • 设置<abbr>和<acronym>的title属性定义其全称
  • 虽然IE只支持<acronym>，但我们还是应该按照规范来写页面，该用什么用什么
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
<acronym title="North Atlantic Treaty Organization">NATO</acronym>

同时，你可能需要设置CSS来让某些不遵从标准的浏览器实现两者的默认行为：

abbr{
speak:spell-out;
}
acronym{
speak:normal;
}

用<code>来展示代码，示例：

<code>
#content{
width:80%;
padding:20px;
background:blue;
}

<samp>用于显示程序或脚本的运行输出结果

<p>When the script has executed,at the command line you will see the message<samp>script was successful!</samp>.</p>

<var>用于指明程序的变量或参数，示例：

<p>I'm going to pass the parameter<var>lastUpdated</var>to my main.xsl file.</p>

<kbd>用于指明那些需要有用户输入的文本，示例：

<p>To quickly change focus to the search input field,Mac users type<kbd>Command+9</kbd>.</p>

锚点

锚点是互联网中最基本的元素，它的产生出现可以追溯到Internet的第一张网页。
锚点的指向页面内部的一个元素，也可以指向网络上的任何一个URL。
当你需要让锚点指向页面内部元素的时候，你可以：

<p><a href="#orange">About Orange</a></p>
.......
<h2 id="orange">Orange are tasty</h2>

如果你想设置一个指向头部的链接，你最好不要用"#top"，因为top是一些浏览器的保留字段。
可能基于某些向前兼容的考虑，会使用name属性，例如：

<p><a href="#orange">About Orange</a></p>
.......
<h2><a id="orange"name="orange">Orange are tasty</a></h2>

但不是每个元素都同时支持name和id属性——只有如下标签是支持的：
<a>、<applet>、<form>、<frame>、<iframe>、<img>、<map>

书中还给出了其他建议：

  • 给链接一个title属性，写出该链接的提示文字
  • 注意链接的全局样式
  • 伪类:link可以帮你找到所有有href属性的链接
  • 应该用CSS定义样式将链接突出
  • 伪类的定义顺序必须是:link,:visited,:hover,:active，记忆诀窍是LoVe/HAte

更多关于列表

这一节作者主要讨论了更多形式的列表，比如有序列表和解释列表。
构造带序号的列表应该使用ol、li，浏览器会自动为li编号
可以定义li的list-style-type来改变编号的类型，可选值为：

  • decimal:1,2,3,4,etc.(commonly the default)
  • upper-alpha:A,B,C,D,etc.
  • lower-alpha:a,b,c,d,etc.
  • upper-roman:I,II,III,IV,etc.
  • lower-roman:I,ii,iii,iv,etc.
  • none:No numeral

注意，不要直接用ol的type属性来改变编号类型。

对于解释列表，我们可以用dl、dt、dd来描述，这样做的好处除了语义性强之外，在默认状态下就有很高的可读性。

<dl>
<dt>CSS</dt>
<dd>A simple mechanism for adding style(e.g.fonts,colors,spacing)to Web documents.</dd>
<dt>XHTML</dt>
<dd>A family of current and future document types and modules that reproduce,subset,and extend HTML,reformulated in XML.</dd>
<dt>XML</dt>
<dd>A simple,very flexible text format derived from SGML.</dd>
</dl>

精简代码

对于CSS新手来说，随意给元素指定class、id会造成日后维护的困难，而且很容易因为CSS的继承而是你无法实现你想要的效果。作者给出了一些建议

  • 不要滥用class
  • 活用选择器来节约id、class
  • 在单个元素，例如form、ul、blockquote等又套一层div是不可取的

Lists

  • Don’t use br to break a line
  • Keep the tag closed
  • Use li with ul

In this chapter, Dan use pure css to create a beautiful navi tab, which may inspire you a lot.

Heading

  • Use h1~h6 to describe headings
  • Use them in the descending order

Here, we get to know The Chameleon Effect, which take advantages of transparent GIF in a IMG tag. When you change the background property of IMG in CSS, you change the background of the image the users will feel.

<h3><img src="http://images.fastcompany.com/icon/first_imp.gif"width="13"height="13"alt="*"/>FIRST IMPRESSION</h3>

See, you just change the background of a “image” through modification of CSS. This will work well when you want add a watermark on your photoes.

Tabular Data

Table is not evil, and it’s part of XHTMl Spec. Tabular data should be described by table tag, e.g:

  • Calender
  • Spreadsheet
  • Charts
  • Schedules

Do with more cautions：

  • Add caption tag to serve as a title of the table
  • Assign summary property to tell users the breif to the table, thus increasing the accessiblity.
  • use th as cell heading
  • use the headers property of td tag to show the relations among the data cell
  • assign abbr property in th to brief the cell heading. This will help screen readers a lot
  • Use thead, tfoot, tbody to make table more sematic. You will be glad to find table heading and table foot will be displayed on every printed talbes.

And the author shows us how to create a grid using table and CSS ：

table{
border-top:1px solid#999;
border-left:1px solid#999;
border-collapse:collapse;
}
th,td{
border-right:1px solid#999;
border-bottom:1px solid#999;
}

Here we set the border-collpase to collpase the gag between cells.

Quotations

It’s a common pitfall to most designers. Dan lists some methods used widely and tell the goods and bads.

For correct quotations:

  • Use blockquote to wrap the content
  • Assign cite property to blockquote, telling us where the quotations come from
  • Use q for inline quotations
  • Assign lang property for q to tell users in which language the quotaions are (Complete list of the availible values for lang: http://www.w3.org/TR/html4/struct/dirlang.html#langcodes)

Form

Just another perilous pitfall. Good forms and bad ones differ tremendously.

Sometiems we find people write some like this:

  • Use br to break a line
  • Use table for layout
  • Use both p and br to break a line

Dave suggests：

  • Nerver use table for simple forms
  • Wrap the title of input item with label tag
  • Use p and label for simple forms
  • For ultimate readablity, use dl, dt, dd to describe a forms
  • Assign tabindex property for input tags and other interactable components
  • Assign accesskey property for frequently used elements
  • Use fieldset to group related form items
  • Use legend in every fildset to give a title for this group of items

    • Some examples：

    <form action="/path/to/script"id="thisform"method="post">
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input type="text"id="name"name="name"/></dd>
<dt><label for="email">Email:</label></dt>
<dd><input type="text"id="email"name="email"/></dd>
<dt><label for="remember">Remember this info?</label></dt>
<dd><input type="checkbox"id="remember"name="remember"/></dd>
<dt><input type="submit"value="submit"/></dt>
</dl>
</form>

    In code above, dt and dd are not equally matched, which I doubtly personally. But I can’t prove this wrong as HTML&XHTML The Definitive Guide give only a dim definition：

    each item name in a<dl>list is marked with the<dt>tag,followed by the item’s definition or explanation marked by the<dd>tag.

    <form action="/path/to/script"id="thisform"method="post">
<p><label for="name"accesskey="9">Name:</label><br/>
<input type="text"id="name"name="name"tabindex="1"/></p>
<p><label for="email">Email:</label><br/>
<input type="text"id="email"name="email"tabindex="2"/></p>
<p><input type="checkbox"id="remember"name="remember"
tabindex="3"/>
<label for="remember">Remember this info?</label></p>
<p><input type="submit"value="submit"tabindex="4"/></p>
</form>
    <form action="/path/to/script"id="thisform"method="post">
<fieldset>
<legend>Sign In</legend>
<p><label for="name"accesskey="9">Name:</label><br/>
<input type="text"id="name"name="name"tabindex="1"/></p>
<p><label for="email">Email:</label><br/>
<input type="text"id="email"name="email"tabindex="2"/></p>
<p><input type="checkbox"id="remember"name="remember"
tabindex="3"/>
<label for="remember">Remember this info?</label></p>
<p><input type="submit"value="submit"tabindex="4"/></p>
</fieldset>
</form>

    Phase Elements

    These are confusing elements in HTML. You may encounter questions about these when you are applying for a front-end engineer:
    “What’s the difference between <b> and <strong>?”

    In fact, most designers are just reluctant commsuming time applying these seemingly insignificant phase elements.
    But, these are the very important steps to build more semantic pages.

    Dave points out：

    <em> means emphasis
    <strong> means stronger emphasis

    • <b> and <strong> both make text bold，but <strong> convery a sematicly emphasizing meaning，while <b> only does the job of formatting visually。Of course you’d better to use font-weight and font-style other to make text bold or italic
    • <i> and <em> are the same story. 
    Your order number for future reference is:<strong>6474-82071</strong>.
It took me not one,but<em>three</em>hours to shovel my driveway this weekend.

    Only the two methods above can show your intended emphasis.

    <cite> is used to contain a citation or a reference to other sources, E.g ：

    The novel,<cite>The Scarlet Letter</cite>is set in Puritan Boston and like this book,was written in Salem,Massachusetts.
    • <abbr>Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
    • <acronym> Indicates an acronym (e.g., WAC, radar, etc.)
    • Assign title properties for <abbr> and <acronym> to tell users the full name
    • Although IE only support <acronym>，we cannot abandon the use of abbr and desert the will of web standards. Just mark the term up according to the specifications. 
    <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
<acronym title="North Atlantic Treaty Organization">NATO</acronym>

    There are also two CSS rules that could be added to an aural style sheet to further reinforce these directives:

    abbr{
speak:spell-out;
}
acronym{
speak:normal;
}

    The element is designed for demonstrating code examples within XHTML pages.

    <code>
#content{
width:80%;
padding:20px;
background:blue;
}

    <samp> is used to show sample output from programs and scripts. 

    <p>When the script has executed,at the command line you will see the message<samp>script was successful!</samp>.</p>

    <var> is used to designate a program parameter or variable.

    <p>I'm going to pass the parameter<var>lastUpdated</var>to my main.xsl file.</p>

    <kbd> Indicates text to be entered by the user.

    <p>To quickly change focus to the search input field,Mac users type<kbd>Command+9</kbd>.</p>

    Anchors

    Anchors are the soul of internet and they are the citizens since the birth of internet.

    Anchors can be pointed to any URL on the web or any element inside the page. If you want to anchor directs to other part of the page: 

    <p><a href="#orange">About Orange</a></p>
.......
<h2 id="orange">Orange are tasty</h2>

    Don't use "top" as a value if you want to make a link that point to the "top" of the page because "top" is often the keyword in a browser.

    Taking the compatiblilty issues into accounts, you'd like to use name property as well：

    <p><a href="#orange">About Orange</a></p>
.......
<h2><a id="orange"name="orange">Orange are tasty</a></h2>

    However, not very elements has both name and id property like the following:
    <a>、<applet>、<form>、<frame>、<iframe>、<img>、<map>

    Dan also suggests：

    • Assign title property whose value can be used in the tooltip when mouse over
    • Beware of global link styling
    • :link pseudo-class can find all the links that have href property
    • You should always highlight the links among the text
    • Ordering the four pseudo-classes mentioned becomes important in order for all of them to behave properly—without one overriding the other. The correct order - :link,:visited,:hover,:active. Maybe this will help you: LoVe/HAte

    More on list

    In this chapter, Dan pays more attentions to ordered list and definition list.
    The browser will automatically number the li with demical number.
    You can change the way thourgh list-style-type property:

    • decimal:1,2,3,4,etc.(commonly the default)
    • upper-alpha:A,B,C,D,etc.
    • lower-alpha:a,b,c,d,etc.
    • upper-roman:I,II,III,IV,etc.
    • lower-roman:I,ii,iii,iv,etc.
    • none:No numeral

    Don't use the type property in a ol tag to alte the list style.

    With definition list, we can use dl, dt, dd to describe it. You will get high readablity in default.

    <dl>
<dt>CSS</dt>
<dd>A simple mechanism for adding style(e.g.fonts,colors,spacing)to Web documents.</dd>
<dt>XHTML</dt>
<dd>A family of current and future document types and modules that reproduce,subset,and extend HTML,reformulated in XML.</dd>
<dt>XML</dt>
<dd>A simple,very flexible text format derived from SGML.</dd>
</dl>

    Simplifing Markup

    For novices, it's too easy to make another class in CSS which will eventually hinder job in the future as you've got too many class to maintaine.
    Some suggestions:

    • Use class wisely
    • Use descendant selectors instead
    • Wraping the lements like form, ul, blockquote with another div is not a wise decision
    ]]>     http://pagetalks.com/2009/06/26/digest-and-thoughts-on-web-standards-solutions-basic-markups.html/feed 1     Most Wonderful Books for Web Developers and Designers http://pagetalks.com/2009/04/28/most-wonderful-books-for-web-developers-and-designers.html http://pagetalks.com/2009/04/28/most-wonderful-books-for-web-developers-and-designers.html#comments Tue, 28 Apr 2009 05:17:16 +0000 Robin http://pagetalks.com/?p=210 There are so many guides and tutorials in the bookstore. However most of them, saddly, really suck!
    Most authors can’t avoid the temptaion to copy words from other books. What we should do to find a really useful book is to find the root of all books.
    Here is a simple list of the books that I’ve read ,at least partly, or I’ve bought and intended to read in the near future.

    PostcardViewer requires JavaScript and the Flash Player. Get Flash here.

    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!

    ]]>     http://pagetalks.com/2009/04/28/most-wonderful-books-for-web-developers-and-designers.html/feed 2     jQuery slideView Plugin http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html#comments Sun, 08 Mar 2009 22:13:17 +0000 Robin http://pagetalks.com/?p=203

    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.

    描述

    小到公司的商业站点，大到文章管理系统，都会有用到幻灯片来展示图片新闻的需求。这里，我提供一种简单、优雅的幻灯片解决方案。在一小段HTML代码的基础上，能够让你无障碍并愉快地实现幻灯片效果。

    Requirements

    • jQuery Libary, just download from jQuery Official Site
    • slideView script file. You can download it from below
    • a little knowledge on xhtml and css

    Features

    This plugin will generate a slideview within the given container based on the data in the HTML document.

    The slideview will consist of a group of thumbs, a navigation tool and of course the original images.

    The main image in the slideview will change in response to the mouse movement on the thumbs and the click of navigation buttons.

    All you have to do is prepare a set of images in porper size and the thumbnail of thoese images.

    Demostration

    Click here to see a demo page.

    Download

    Note: There is a file embedded within this post, please visit this post to download the file.
    Note: There is a file embedded within this post, please visit this post to download the file.

    Usage

    HTML Preparation
    Just a container and an unordered list which has links to the news page or something.

    <div id="slideshow">
<ul class="slideView">
<li><a href="#"><img src="lib/slideView/images/1.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/2.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/3.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/4.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
</ul>
</div>
    Load jQuery Libary
    You can directly add the following code in <head> tag：

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    Load slideView Plugin
    <script type=”text/javascript” src=”slideview.js”></script>
    Assigning the target object
    Use it inside jQuery(document).ready() block:

    $("#slideshow").slideView();

    You can, of course , apply some change, customizing behaviours and appearance by the means of sending parameters to the method and modifying CSS：

    $("#slideshow").slideView({
	thumbPrefix: "thumb_",
	frame: {
		isExist: true,
		color: "#365563"
	},
	speed: 150,
	easeOut: "swing",
	easeIn: "swing",
	easeThumb: "swing"
});

    Code aboce will make slideView to load thumbnails of images, whose filenames match the pattern of “thumb_image-file-name.jpg” and so on. And also, the speed of slide is 500ms.

    New parameters avaliable in 1.1.0:

    frame (object)

    We can define a frame box overlayed on the slide:
    frame.isExist (Boolean) : if it exists or not
    frame.color (String) : Hex value for a color. if it exists, what color is it?
    easeOut (String)
    the easing method used when a large image slides downward
    easeIn (String)
    the easing method used when a large image slides upward
    easeThumb (String)
    the easing method used when thumbnails slide
    CSS Modification
    By default, images in the size of 460*300 will work perfectly, however, if you’d like to use images in different size, you need alter some lines in the css. See the description in the slideview.css. You won’t miss it.

    Change Log

    You can always refer to jQuery Plugin to trace the builds.

    What’s new in 1.1.0
    • Beatify the UI
    • Support easing method in animation
    • Fix some strange behavious during animation
    • 1.1.0 Second Edition
    • 1.0.1 First Edition

    需求

    功能

    该插件会在给定的容器内根据HTML代码生成一个幻灯片。幻灯片将会包含一组缩略图、导航工具以及原始图片。
    幻灯片内的主图片将会根据鼠标动作或导航工具的点击来改变。
    你需要做的仅仅是准备合适尺寸的图片和他们的缩略图。

    演示

    点击这里查看演示页面

    下载

    Note: There is a file embedded within this post, please visit this post to download the file.
    Note: There is a file embedded within this post, please visit this post to download the file.

    用法

    准备HTML代码
    你仅仅需要给出一个DIV容器和一个无序列表，列表内部包含指向文章或其他内容的链接。

    <div id="slideshow">
<ul class="slideView">
<li><a href="#"><img src="lib/slideView/images/1.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/2.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/3.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/4.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
</ul>
</div>
    载入jQuery库
    在 <head> 标签内部直接添加：

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    加载slideView插件
    <script type=”text/javascript” src=”slideview.js”></script>
    指定目标，并运行
    在 jQuery(document).ready() 模块中写入:

    $("#slideshow").slideView();

    你也可以通过给该方法传递参数以及修改CSS玩当来改变该插件的外观和行为：

    $("#slideshow").slideView({
	thumbPrefix: "thumb_",
	frame: {
		isExist: true,
		color: "#365563"
	},
	speed: 150,
	easeOut: "swing",
	easeIn: "swing",
	easeThumb: "swing"
});

    >
    上面的代码将会让该插件载入符合”thumb_iamge-filename.jpg”的文件名的缩略图，并一次只滑过一张图片。滑动将在500毫秒中完成。

    1.1.0里面的新参数:

    frame (object)

    我们可以定义一个线条边框:
    frame.isExist (Boolean) : 这个边框是否存在？
    frame.color (String) : 如果存在，这里给出边框颜色的16进制值
    easeOut (String)
    当大图片向下滑动时的easing方法
    easeIn (String)
    当大图片向上滑动时的easing方法
    easeThumb (String)
    当缩略图滚动时的easing方法
    修改CSS
    默认情况下，该插件可以与460*300的容器和相应尺寸的图片完美运行。但如果你需要使用更大的图片，你就需要手动修改CSS文件了。打开slideview.css，你就明白了，仅仅是修改三个数值而已。

    更改日志

    你可以随时到 jQuery插件主页寻找更新或支持 .

    1.1.0的新特色
    • 美化了用户界面
    • 在动画过程中，支持easing的修改
    • 修改了动画过程中的一些奇怪先行为
    • 1.1.0第二个重要发行
    • 1.0.1初版
    ]]>     http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html/feed 4     Introduction to CSS3(Updated) http://pagetalks.com/2009/03/04/introduction-to-css3.html http://pagetalks.com/2009/03/04/introduction-to-css3.html#comments Wed, 04 Mar 2009 21:00:56 +0000 Robin http://pagetalks.com/?p=110 这篇文章翻译自Design Shack的同名文章，感谢作者的优秀作品。
    The Englishi version of this article is available on Design Shack, and my article is only a tanslation of original text. Thanks to their perfect work.

    这篇文章是目前少数一些介绍即将取代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

    实现代码如下：

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

    盒尺寸(Box Sizing)

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

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

    .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

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

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

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

    ]]>     http://pagetalks.com/2009/03/04/introduction-to-css3.html/feed 3