代码改变世界

英语阅读推荐:使用样式显示图片 & .NET中的颜色操作

2007-07-03 21:11  Cat Chen  阅读(3957)  评论(3编辑  收藏

本期Random Clippings栏目还是如同往常一样推荐两篇文章。简单的一篇讲述的是如何使用样式取代元素来实现图片的显示,对于熟练的Web Developer来说这是个非常入门级的话题,然而可能还有不少Win Forms转到Web Forms的开发人员是不了解的,因此我们一起来看看如何使用样式来显示图片吧。较难的一篇讲述的是颜色的操作,其实更多的是计算机系统处理颜色的一些模型,例如RGB、CMYK、HSB等,并且辅以C#与VB.NET的代码,如果你对各种颜色模型以及它们之间的转换方式还不了解,那就应该看看这篇文章了。

使用样式显示图片 (Images as Style Attributes)

这篇文章来自Rick Strahl,文章的总体结构良好,符合英语论文的思维模式,开篇先是简单描述问题,然后是解决方案,接着再分析一下这个解决方案的利弊。

文章的第一段当中说道,"when embedding images ... inclined to use ... IMG tag ... ASP.NET image control",当嵌入图片时你经常会拒绝使用img标签或者ASP.NET的图片控件,为什么要拒绝使用呢?我们继续看,"... especially if the image repeats on the page ...",原来当图片需要重复出现时,这时候img标签和ASP.NET的图片控件就显得不是一个很好的选择了。作者就用如此简单的几句话描述了问题的情景,不需要很多言语去让别人信服解决方案有多好,却至少让读者开始思考当他们面临同样困境时应该怎么办。

然后作者挑选了一个实际的例子进行解决方案的解释,这个例子就是他的blog中显示帖子时间前面那个时钟的图标,这个图标他是通过css的background-image属性声明的,同时使用padding-left将文字向右推,就实现了看起来和直接放置一个img标签一模一样的效果。之后在页面中放置一个div引用该CSS类,div的内部就可以使用<%# %>的方式把时间值绑定上去了,就这么简单。在文章中即使你不看英语解释仅看代码也能看明白。

接下来读者应该想问“为什么这就比使用img要好”,而这正是作者接着写的内容,作者分开了3点来说明:

  1. "keep ... formatting information ... in a style sheet",格式化的信息最好保持在样式表中。这是使用css的基本目标,而且你一旦开始习惯了这种内容与样式分离的做法你就会爱上它,不信?看看Rick Strahl自己的说法——"I've been slow to adopt CSS in the past mainly because I've had tons of pre CSS HTML around, but once you start with CSS it's hard to stop <s>."
  2. "repeating images ... reducing page size ...",假如你的页面上有很多重复的图片,你又希望缩减页面的字节数,怎么办?最好对这些相同图片的引用URL不要重复出现啦,一次引用处处使用就最好了,因为URL通常都不短,而通过CSS规则你就可以做到这一点。"~/images/time.gif"很短啊,可惜这个地址要经过ResolveUrl处理,之后它将成为绝对地址而不是相对地址。
  3. "images referenced by CSS files ... relative to the CSS file ... not the page",也就是说CSS引用的图片路径是相对CSS文件而言的,而非相对页面而言,这就无需对图片地址进行ResovleUrl运算,同时图片地址相对CSS文件地址的运算成本也转嫁到了客户端。

通过这思路清晰的三点,作者解释了为什么使用CSS比起img标签要更好。

事实上,推荐这篇文章除了希望对大家的英语阅读有所帮助以外,也希望对大家的英语写作有所帮助。如果有一篇TOEFL作文命题是"Which way would you like to choose when embedding images, by img tag or by css?",那么Rick Strahl的文章就肯定能拿高分了。当然,这完全是开玩笑的,TOEFL作为一个标准化测试要求题目对考生完全公平,不受考生背景知识影响,甚至如果一道题男生比较容易想出来也会被认为是不公平的题目。

.NET中的颜色操作 (Manipulating colors in .NET)

对于使用.NET并且可能涉及颜色操作的开发人员来说,这篇文章非常值得收藏。首先,它解释了RGB/HSB/HSL/CMYK/YUV/CIE X*Y*Z/CIE L*A*B这几种颜色模型,解释了模型中每一个分量的含义,并且通过三维模型让读者更容易去理解模型的特性。其次,每一个颜色模型文中都给出了实现,再加上后面给出的模型间转换公式以及实现代码,你已经可以马上将这些代码投入使用了。即使你近期不需要编写涉及颜色处理的.NET代码,仅仅通过本文了解一下这些颜色模型也是十分有用的,或许将来你需要设计一个结构通过不同分量表示一种事物的特性时,你就能联想到颜色的不同模型构建方法,从而拓宽你的设计思路。

另外需要提醒的一点是,看文章一定要看完整,并且最好看一下评论。在这篇文章的评论中,就有读者就提出了“RGB不是sRGB”的说法,说RGB只是一个笼统的称呼并且包括多种细致定义的RGB标准,文章所说的RGB其实是sRGB,如果有读者误以为只有一种RGB然后就把他手上的RGB数据塞进去处理了那么得出的结果就是错误的。

最后,如果你觉得Random Clipping的推荐不错,可以考虑长期订阅Cat in dotNET,这样你将不会错过将来的任何一篇推荐。