PageTalks » Visual Design http://pagetalks.com Pure Web Development & Design Ideas Thu, 19 Jan 2012 12:06:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 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     20 Amazing Photoshop Light Effects http://pagetalks.com/2008/09/10/20-amazing-photoshop-light-effects.html http://pagetalks.com/2008/09/10/20-amazing-photoshop-light-effects.html#comments Thu, 11 Sep 2008 03:51:06 +0000 Robin http://pagetalks.com/?p=140 好吧，如果我是PS达人而且有N多的时间来写文章，我也会写这些教程的。不过……废话少说，光感相信是数码CG相对于传统CG的一大特色。就光感本身来说，可以说是美术的大部分都牵涉到光与影的描述。古典时期的画派甚至直接用处理光线的方法划分学派……Orz……废话太多了……CG里面，光线基本上是疯狂的，完全考验你自己的想象力。

    教程为英文，过几天我会挑几个最炫的来翻译以下……

    Well, these tutorials are not written by me. Had I had such fine skills and so much time, I have done this already……Believe everyone accept the fact that light and shadow are eternal theme of arts. In the classic times, people even classify the artists by the way they handle it. In Computer Graphics times, there is just no limitation to how we handle light and shadow. Ok, let’s go down to our bussiness…..
    • Create a Space Explosion From Scratch in Photoshop
    • Space Lighting Effects in 10 Steps
    • Magic Lighting Effect
    • Expressive Lighting Effects
    • Basics of Lighting Effects
    • Painting with Light
    • Create Cool Neon Effects
    • MSNBC Style Effect
    • How To Create Brilliant Light Streaks
    • Design a Vista Styled Wallpaper
    • Create a Layered Glowing Effect
    • Create Another Windows Vista Lighting Effect
    • Creating Energy Spheres
    • Lighting Effects
    • Advanced Glow Effects
    • Fantasy Light Effects
    • Intense Solar Flare
    • Space Environment
    • Apple Style Coldplay Ad
    • LifeStream

    1. Create a Space Explosion From Scratch in Photoshop
    2. Space Lighting Effects in 10 Steps
    3. Magic Lighting Effect
    4. Expressive Lighting Effects
    5. Basics of Lighting Effects
    6. Painting with Light
    7. Create Cool Neon Effects
    8. MSNBC Style Effect
    9. How To Create Brilliant Light Streaks
    10. Design a Vista Styled Wallpaper
    11. Create a Layered Glowing Effect
    12. Create Another Windows Vista Lighting Effect
    13. Creating Energy Spheres
    14. Lighting Effects
    15. Advanced Glow Effects
    16. Fantasy Light Effects
    17. Intense Solar Flare
    18. Space Environment
    19. Apple Style Coldplay Ad
    20. LifeStream
    ]]>     http://pagetalks.com/2008/09/10/20-amazing-photoshop-light-effects.html/feed 1     Introduction to CSS3(Updated) http://pagetalks.com/2008/09/10/introduction-to-css3.html http://pagetalks.com/2008/09/10/introduction-to-css3.html#comments Wed, 10 Sep 2008 09: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/2008/09/10/introduction-to-css3.html/feed 4     An Easy Job http://pagetalks.com/2008/08/29/an-easy-job.html http://pagetalks.com/2008/08/29/an-easy-job.html#comments Fri, 29 Aug 2008 08:58:46 +0000 Robin http://pagetalks.com/?p=54 这几天刚想写几篇关于色彩的文章以表我的拙见，不了这几天在Blueidea上面看到了一篇非常好的同类文章，打消了再写这个文章的念头：网页效果图设计之色彩索引作者froglt从色彩倾向和暗示出发，结合实例分析了不同色彩在设计作品中的不同意义。（当然那个色标我怀疑是盗用的别人的资料就是……）对于艺术专业出生的人来说，这些知识可能在高中就知道了；而对于像我这样的业余爱好者来说，一份这样的资料有着很强的参考和教育价值。汗颜一下，我的素描还是很恶心，什么时候才能开始学色彩啊……

    另外一篇是关于一个老生常谈的问题了——可用性。真的没什么好说的，原文基本把所有主流的可用性理论都进行了分析，对于用户体验的设计可谓是一种“纲领”性文章：30 Usability Issues To Be Aware Of小声告诉大家，中文翻译可以在Blueidea上找到……

    ]]>     http://pagetalks.com/2008/08/29/an-easy-job.html/feed 0     Ah! Resolutions! http://pagetalks.com/2008/08/29/ah-resolutions.html http://pagetalks.com/2008/08/29/ah-resolutions.html#comments Fri, 29 Aug 2008 08:51:41 +0000 Robin http://pagetalks.com/?p=50 突然在网上发现了这篇文章，而正巧又在思索最近手上的几个站点该如何取舍框架的宽度，于是乎我笑了……
    其实我曾经分析过自己站点的统计数据，基本也和文中的情形相似，1024*768是主要来源，但偏偏向前兼容的却要是1280*1024以上的分辨率，多数时候我们都是长谈一声，然后以固定宽度的居中布局解决问题……汗~

    下面的文章来自于Taobao的设计团队：
    去年淘宝做了个“胖子”项目，就是把网页的默认宽度从780提升到了950。也就是说，基本放弃了800×600的用户（没有完全放弃，如果你仔细研究一下淘宝的布局，我们还是为800用户做了些优化的）。后来又有很多网站变胖了，当然他们不是跟着淘宝做的，而是显示器市场上，大分辨率显示器占有率持续上升迫使大家做了改变。

    说“迫使”也许有点过了，我相信大多数设计师在做“胖子”项目的时候，都是非常哈屁的：“爽！终于不用管800了！”至少我是这样的。从97年开始做网页，一直在640和800、640/800和1024、800和1024之间不断地痛苦决择。能够在一个单一稳定地环境下做设计是一种真心的期望，除了伟大的浏览器们，分辨率是另一个让无数设计师头痛的设计约束。

    不过这种期望注定是一种奢望，看看下面的“甜甜圈”吧（来自于ued.taobao.com 2007年10月9日的数据）。

    着实有一种“五代十国”、“群雄逐鹿”之感。1280及以上分辨率正在迅速上升，而且由于液晶面板和CRT显像管在工艺和成本控制上的差别，以及宽屏的流行，液晶显示器呈现出“分辨率混乱”的情况。可以预见几年之内，Web设计师将要面对的怎样的复杂局面（说到这里，又让我不由地再次想到伟大的浏览器们）。

    除去PC，手机等移动平台在3G的催动之下，也一定会慢慢扩大它们的领地。虽然对大多数设计师来说，这还是件比较遥远的事情，但是早晚有一天，每个单子的需求上都会写着“（包括适用于移动设备的Mini Site）”。手机上的情况就更复杂了，目前几大智能手机系列，都有着各不相同的分辨率，我大致地把它们整理如下：

    真实的情况要比上面复杂得多，我只是挑了一些比较典型的系统和机型。总而言之，言而总之，几年以后，可能有很多设计师的日子会更不好过了（我又一次又一次地想到，伟大的浏览器们，特别是伟大的手机浏览器们）。

    噢，别忘了，还有IPTV，如果三网合一搞起来了。咱还得考虑电视机，那可是一个从640×480到1920×1080，让人无比敬畏的市场呀！

    ]]>     http://pagetalks.com/2008/08/29/ah-resolutions.html/feed 0     Impact – Make It Impressive http://pagetalks.com/2008/08/29/impact-make-it-impressive.html http://pagetalks.com/2008/08/29/impact-make-it-impressive.html#comments Fri, 29 Aug 2008 08:45:37 +0000 Robin http://pagetalks.com/?p=48 让自己的主体以最醒目的方式呈现出来应该是你的首要任务。也许你该向报纸、杂志的设计学习，他们采用了最简单的方法，即让主体足够的大！
    在Web2.0的感念驱使下，更多的网站为了提供更佳的浏览体验，通常会将页面简洁化，留下醒目的枝干，这就和传统印刷设计有异曲同工之妙了。
    今天向大家介绍的两个比较典型（这种站其实现在有点泛滥）的站点：Life Lab和Miiingle。

    可以观察一下Life Lab的水平的分页比例。在窗口模式下观看这个页面，基本上顶部Bannar占据了二分之一的空间，反而这样有使页面更加开阔的效果（？）。



    Miiingle的布局很简单，美工方面也没多大工夫，但它的Nav设计和LOGO上就是一个“大”字，作为宣传网站，它已经成功了。

    已收录到PageShow，快去看看！

    ]]>     http://pagetalks.com/2008/08/29/impact-make-it-impressive.html/feed 0     Grace and Grand http://pagetalks.com/2008/08/29/grace-and-grand.html http://pagetalks.com/2008/08/29/grace-and-grand.html#comments Fri, 29 Aug 2008 08:41:18 +0000 Robin http://pagetalks.com/?p=46 这是某人的传记站点Judo Klub，不管内容，页面组织的相当不错。另外，这色彩设计真是表达出高贵、庄严的感觉；细节方面也是很用心，看看那些标题的背景吧……没什么特别想要指出的，只是觉得这个页子很棒。

    ]]>     http://pagetalks.com/2008/08/29/grace-and-grand.html/feed 0     Illustration Is Power http://pagetalks.com/2008/08/29/illustration-is-power.html http://pagetalks.com/2008/08/29/illustration-is-power.html#comments Fri, 29 Aug 2008 08:27:05 +0000 Robin http://pagetalks.com/?p=42 好的插图连同网页的其他元素一起会给浏览者深刻的印象。这也是最能体现设计师风格的地方，所以不要吝啬于你的颜料，大胆的挥洒吧。
    今天向大家介绍的Web Design Wall就是相当华美的一个到处都是插图的网站。

    网页由背景所支撑，由于主体和背景分割的很好，也并没有使背景喧宾夺主。

    导航栏的Hover效果也相当有趣。

    至于收集到的其他例子，可以去看看Spoon Graphics、espira。

    已收录到PageShow，快去看看！

    ]]>     http://pagetalks.com/2008/08/29/illustration-is-power.html/feed 2     Texture and Material http://pagetalks.com/2008/08/29/texture-and-material.html http://pagetalks.com/2008/08/29/texture-and-material.html#comments Fri, 29 Aug 2008 08:07:31 +0000 Robin http://pagetalks.com/?p=36 质地和材料看似只有实物设计的时候才会碰到？其实计算机里到处都有材质的问题，PageShow里面有相当多的拥有与众不同的背景的网站；材质的运用正是他们脱颖而出的原因。材质的运用能赋予作品一种风格，准确地说，它能更准确地传达真实世界的感受，同时会带来料想不到的效果。
    之前看过优秀的例子很多，不过目前手头上就两个：NOL BLOG和Sroown。

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

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

    已收录到PageShow，快去看看！

    ]]>     http://pagetalks.com/2008/08/29/texture-and-material.html/feed 0