《Web设计艺术精髓》

这本书，是我和boy在图书城里看见的，我看了它的设计，很好的进行艺术进行提升，不过，前提是你对css和div有了基础的了解和使用，也就是一个技艺提升过程的一个很好的参考书。

我准备在四月份买来好好看看，按照上面的例程进行一个一个实践，这样就会越来越将代码与艺术结合起来了。

包含大量世界级网站实例、摄影作品和其他灵感素材，传授视觉化代码的思想
带领您体验新的Web浏览器中组成CSS3规范的先进技术。

对于普遍缺乏编程经验的Web设计师来说，语义标记和CSS无疑是实现自由设计的障碍。如果没有高效工作流的支持，快节奏的工作环境和较高的客户要求都将意味着巨大的压力和挑战。
国际著名Web设计师Andy Clarke对这种情况有着切身的体会。在本书中，Andy将与您分享他的“超越CSS”方法，引导读者从设计的角度来使用CSS，来创建富有艺术性并且可用、易用的站点。
在这本开创性的著作中，作者通过可视化的范例来展示标记和CSS的创造性，带领您掌握实现创意的设计方法。您将学会：
 如何使用新的工作流来创建对所有团队成员——特别是，包括设计师在内——都非常好用的原型；
 有效地使用网格；
 设计标记的视觉效果；
 如何把握优秀设计过程的每一个阶段——从使用最新的浏览器到在团队协作中高效地运用CSS3，等等。

本书系统、深入地阐释了网站的设计与实现，帮助读者从设计的角度来使用CSS以达到完美的效果。作者通过使用标记和CSS的形象的创造性示例，帮助读者掌握实现创意设计的方法。读者将学会如何使用新的设计流程，创建对包括设计师在内的所有团队成员都很好用的原型，有效地使用网格，设计标记的视觉效果，并了解优秀设计过程的每一个阶段——从使用最新的浏览器到在团队协作中高效地应用CSS3。.
本书适合Web设计师和开发人员研读，对那些客户要求高、工作节奏快的设计师有着尤其重要的指导作用。本书也适合有一定基础的Web设计爱好者阅读。

作者简介：
Andy Clarke 国际著名Web设计师，W3C CSS工作组特邀专家，Web标准项目组成员。正是他在2006年重构了Web标准项目组的网站。Andy长期担任首席设计师和创意总监，多次与企业、慈善团体与政府机构合作。此外，他还为英国心脏基金会、英国迪斯尼商店、拯救儿童组织和世界野生动物基金会等组织进行设计。
Andy长期热心于培训Web设计师的动手能力和对Web标准的创意应用，指导Web设计师创建美观、易用的网站。本书正是他多年工作和培训经验的结晶。

“Andy Clarke拥有一种神秘的能力，能让你重新思考你所熟知的事物，并奇怪为什么以前一直没有按他的方式做。”

序：
Web设计师与开发者面对的一个很大挑战是跨越纯视觉思考者和纯线性思考者之间的交流鸿沟。只有少数的人才有能力平衡精巧而有创意的设计与日益进步的复杂技术间的关系。正因为如此，Jeffrey Zeldman，DouglasBowman和Dave Shea都为这个行业做出了具大的贡献，不仅因为他们的工作兼顾各方面，更重要的是他们把这种能力传授给别人。

数年前，我在New Rider出版了一本叫作IntegratedWeb Design的书，在这本书中我就试图解决上述问题。我们怎样才能让设计者具有符号和结构的思考能力？如何让逻辑分析型的思考者喜欢和理解美学？还有更为复杂的沟通与管理、市场营销等领域。而更大的难题在于创建真正强大的平台来实现高效的工作流程、有力的技术和奇妙的设计，让我们这个行业持续发展，并不断追求卓越。

这使我想到Andy Clerke。几年前我第一次注意到Andy的工作是因为他的博客。他在博客中发表一些关于标签命名规范和CSS的帖子，这个主题在很长的一段时间里吸引了我。通过深入研读他的文章和他的设计作品，我意识到这个博客的主人是一个拥有把想法付诸实践的激情的家伙。2005年著名的“Britpack Invasion”期间，我们相会在SXSW大会上。我们开始讨论一些问题。之后的几个月里，我们开发了一系列深受欢迎的内容，包括“设计师的CSS”和“开发者的CSS”，旨在通过我们互补的技术和经验来教育和启发我们的同行。

当写一本书的主意顺理成章地进入我们的会谈时，我非常热情地把Andy介绍给了Peachpit和New Riders的出版人Nancy Aldrich-Ruenzel，我知道如果有什么印刷品能把握Andy的思想的话， 那一定是New Riders的“Voices That Matter”系列。后来我们三个人在旧金山会面。有趣的是，我坐在他们旁边，却没能在这次促膝长谈中插上几句嘴。显然，他们是棋逢对手了。我们坚决认为这本书将是恰到好处，尤其是鉴于Dave Shea和我设计的The Zen of CSS（禅意花园）的成功。我参与这本书的编辑工作，和Andy一起调整书的观点和内容。而Dave也将参与，为这本书撰写前言，让本书成为任何想成为更好的设计师或更好的开发人员的读者的资源。

正是这本书所面临的挑战，促成了它的完善。你看，由于Andy技术上的成就，他是而且将一直是一个视觉型人才。而我在设计领域可能受过大量的正规的美学的训练，我是一个逻辑、线性思维的人。Andy跟所有的视觉型思考者一样，生活在一个充满想象力和创造力的世界，而我喜欢秩序、交流与过程。在写作本书的过程中，有许多的挑战是我们必须面对和解决的，而这种种问题在我们的领域与我们这种类型的人之间是到处可见的。这本书，其不可思议的美感、扎实的技术和如真实的梦境，正是我们最初的设想：进一步证实只有当人们致力打破那些难以逾越的鸿沟时，真正的创新才会发生。今天我可以带着自豪、尊敬和荣誉将这段经历的结果分享给努力工作想要超越职业挑战的您。但愿本书像我们希望的那样帮助您让Web工作的每件事情都如我们所想所愿那样完成。

献上我所有爱，
Molly E. Holzschlag
2006年10月于伦敦

译者序：
界面重不重要？
我在一次做顾问时，这样跟开发人员阐述，重视界面其实是事半而功倍的事情。
你做了一个很不错的产品，有很强大的功能，代码规范，架构设计堪称典范，唯一的不足在于界面流于庸俗。

为了将产品推向市场，你做了非常详细的说明，一一介绍产品的设计和功能，然后你的业务员手捧宣传材料努力地向客户介绍这款产品。但很多客户都心不在焉地听着，一过打着电话，一边看着手表，最后非常有礼貌地告诉你的业务员，他们还要“研究研究”。好不容易有一个客户比较有兴趣地听完了功能介绍，但后来一看产品的界面，又呶起了嘴—因为他觉得让他的客户看到界面如此落伍的软件，是一件很没面子的事。

后来，你做了一个功能很简单的产品，它专注于一件事情，甚至用一句言简意赅的话就能清楚地说明。但是这个产品有着简单易用的操作方式，界面也美观大方，处处闪动着灵感，显得非常精致。你为这个产品做了一个布满界面截图的精美的使用说明书。你的业务员只是把这个很薄的小册子放在客户的办公桌上，也没有打扰他们的工作，就回家睡大觉了。然而这一次，你反而接到了很多客户打来的订购电话，因为他们觉得这个产品一开始就深深吸引了他们，而且产品功能也一目了然，极具价值。通过这个故事，深陷于逻辑与秩序的代码开发者也许能明白，只注意功能和架构并不能成为“Heros”。Web 2.0思潮的涌动，AJAX技术的炙手可热，让很多人认识到了客户端技术的重要。但恶补了一番Javascript和CSS后，心中仍感觉不到一丝踏实—因为从一开始就没有了解Web 2.0思想的核心，“为了技术而技术”，照着书本写几个Demo又怎能驾驭这个更加“苛刻”（海量信息时代，用户找信息已经变成了信息主动找用户，如何在众多竞争者中脱颖而出、吸引用户变得困难重重）和“变化多端”（客户访问终端也在发生很大的变化，拿着手机、PDA或你想都想不到的终端看网页也大有人在）的时代。

从2005年CSS类书籍的热销的情况来看，估计很多人都学会了float和clear，也理解了什么是盒模型。但刚刚学会使用@import指令来使浏览器能够导入高级CSS设计，学会了几个CSS hacks、“山顶角”和“滑动门”的你，不得不马上面对Andy又为我们提出更高的目标的现实。

阅读这本书是很享受的，掠过一幅幅精美的图片，最先进的Web设计思想已深深地印在你的脑海中，开发人员得以理解什么是设计，设计人员也学会了摆脱从视觉的角度去思考设计的旧习，何乐而不为呢？而每每想到我再也不用花费大量口舌去纠正别人“Web标准就是用DIV而不用Table”的论调，则更是心中暗爽。

本书由谭振林、何颍、桂冠、于飞、田少雄合作翻译。由于这本书的语言非常活泼，增加了我们翻译时理解和表达作者本意的难度，但我的合译者们坚强地走过了这段艰难的旅程，相信我们每一个人都在这个过程中成长了。

最后，谢谢你们。
任何语言在这本漂亮的书的面前，都显得那么苍白无力，大家还是赶快翻开书页吧！
谭振林
2007年5月于深圳罗湖

前言
为了介绍这本书，我建议您先不要去阅读它，而是花点时间好好欣赏它。
希望通过粗略地翻阅书页，您已经在某种意义上领会了它的设计风格。它太漂亮了，不是吗？图片和截屏俯拾皆是。亮点在于它巧妙地利用图像而不是一行接一行沉闷的标记和CSS。引入真实的例子说明具体的Web议题。太不可思议了，关于代码的书居然可以看上去这样漂亮！

这就是我要提醒您的。正如您可能已经从书名中推断出来的，这不仅仅是另一本代码书籍，它的内容远远不止于此。它阐述了代码和设计的精妙配合、代码如何很好地支持设计创意以及如何打破枷锁，让我们不必过于顾忌实现。正如您将从这些页面中学到的那样，庞大的在线空间，比如Yahoo，已经开始使用向下兼容老浏览器的技术，但更重要的是，很多公司正在使用新的技术充分发挥新型浏览器的优势。而这些技术全都是我们需要实践并应用到自己的项目中产生效果的。Andy Clarke向我们展示如何做到这些。

某种意义上，这本书让我想起了2005年早期的一些事情。也许您读过《CSS禅意花园》（已由人民邮电出版社翻译出版），一本我有幸和MollyHolzschlag合著的书，她也是本书的编辑。

在《CSS禅意花园》中，我们首次讨论CSS不仅放在面向结构化代码的风格中讨论，还应结合设计理论和精心设计的例子来解释、说明和启发。而本书让我想到了一个很好的下一步。完成了《CSS禅意花园》，然后呢？Clarke先生走过来，告诉了我们所有的答案。

在《CSS禅意花园》中我们领会到基于CSS的设计并不一定丑，在技艺高超的视觉设计师的手中，CSS可创造无限可能。现在我们通过学习本书明白Web现在的情形仅是一个起点，是时候展望未来了。

更重要的是理解。本书不仅仅是一本指南，只介绍那些众多技术手册已经讲解得很充分的内容。您面临这本书的理念的挑战，启发您把Web从现在的情况带入一个新的高度。本书不仅是一本解决问题的手册，更是一份宣言：超越今日之Web。不要只是关注过去，把您的目光转向更广阔的未来。Clarke先生告诉了您如何去做。
Dave Shea
2006年10月

专家评书：
《超越CSS》，我听到这本书名时充满了无限期待，由于标准化WEB页面制作的热捧，市面上关于CSS的书籍也雨后春笋般的热销开来。《超越css》到底如何超越呢？

当W3C提出结构与表现分离的思想开始，CSS这项技术就开始在WEB领域得到了广泛应用,页面设计师开始尝试使用CSS来控制页面的展示效果，使用符合标准的XHTML标签来构架网页基本结构，设计师们也逐渐发现在页面结构标准化框架下，使用CSS可以随心所欲控制页面中内容的布局、定位、字体大小及所有内容展现的表现形式，也帮助我们更好的协调页面内容组织与关系。CSS+DIV的排版布局方式可以说推动了网页发展的一场革命，web中越来越多页面结构更加合理化，页面中数据可以更好的被搜索引擎检索到，合理的页面框架也很好的被程序开发人员认可。CSS广泛应用从2001年到现在，已经不再单纯是一种技术，而更加带有了艺术气息。WEB页面可以由CSS控制其所展现的样式，通过改变某个CSS文件来做到页面在瞬间发生结构和颜色的变化而满足不同环境的需求。

《超越CSS》这本书中，作者向我们介绍了如何将CSS技术与艺术美妙结合起来,使用大量范例来论证如何更加艺术化展示CSS技术,而不再单单是纯粹CSS技术应用的知识推广。

它不仅教会我们如何更好的使用CSS来控制页面布局和页面表现效果，并且它引导我们如何去使用合理的XHTML标签。XHTML作为一种优秀的结构化语言，更好的使用XHTML标签，页面的结构才更加合理、规范。合理化选择XHTML标签加之CSS及CSS高级技巧的灵活运用，我们的WEB页面才会更加的完善。在本书中，作者以Cookr项目为主题，用结构和表现分离的手法，逐步去实现Cookr项目的制作过程。对于Cookr项目首页，合理的使用<h1>-<h6>标签，然后配合使用<ul>及<p>标签，完成了首页的结构布局，没有冗余的不必要的标签，作者还应用了类似<cite>及<blockquote>辅助标签来配合使用以控制实现预先设计的效果，启发我们对辅助标签应用的灵感。如果能灵活使用<cite><dfn><var><code>等标签，会带来事半功倍的效果。页面主体结构之后就是使用CSS完成表现层的制作。作者详细声明浏览器默认样式的定义，可以说对于默认的样式定义考虑非常充分，涵盖了常用的标签的全局定义，为之后使用这些标签做好了铺垫。通过Cookr项目的实战，作者介绍了布局、定位、字体弹性控制、颜色控制等CSS技巧，在CSS的使用中，作者应用z-index,position等技巧处理版式表现效果，值得我们效仿、思考。最后作者为我们展示了排版样式的定义，使其Cookr项目的交互原形的最终完成。在《超越CSS》中，学习CSS不再枯燥，因为艺术与技术得到了结合。

1.1 超越CSS简介
1.1.1 需要什么样的工具来开始学习
1.1.2 为什么需要超越CSS
1.1.3 尽情地发挥创造力
1.1.4 辅助功能本身就是设计，而不应仅把它当
1.1.4 成一个特性
1.1.5 向超越CSS进发
1.2 超越CSS原则
1.2.1 不是所有的浏览器都显示相同的设计
1.2.2 运用所有有效的CSS选择符
1.2.3 CSS3：展望未来
1.2.4 运用JavaScript和DOM来弥补CSS的不足
1.2.5 避免运用Hacks和滤镜
1.2.6 使用富含语义的命名规范和微型格式
1.2.7 分享你的想法，与他人协作
1.3 什么使超越CSS变得可能
1.3.1 意想不到的CSS用途
1.3.2 浏览器分级支持
1.3.3 发现，过程，灵感，超越
1.4 突出内容的设计
1.4.1 突出内容的途径
1.4.2 一个典型的没经过优化的CSS布局
1.4.3 优化内容顺序而不管有还是没有样式
1.5 语义就是含义
1.5.1 “CSS 裸体日
1.5.2 将含义翻译成标记：这个标记是正确的
1.5.3 内容告诉你了什么
1.5.4 语义的前行
1.6 标记这个世界
1.6.1 整个世界是一个列表；每一项都扮演着它
1.6.1 自己的角色
1.6.2 环视四座皆列表
1.6.3 给我寄一张旧金山的hCard
1.6.4 学会拓宽视野
1.6.5 从“内容”开始工作
1.7 是时候整理一下你所学的知识了
2.1 寻找最佳工作流程
2.1.1 寻找更好的方式
2.1.2 遵循基于内容的过程
2.2 搜集内容
2.3 使用框架图来工作
2.3.1 传统的框架图在哪里会失效
2.3.2 框架图有商业价值吗
2.3.3 传统框架图以及交互脚本
2.4 使用灰盒方法改进
2.5 创建静态设计
2.5.1 更快地通过设计流程
2.5.2 把标签指南加入静态设计
2.6 使用交互原型
2.6.1 交互原型使梦想成真
2.6.2 创建可重用的代码
2.6.3 框架图和原型的模型
2.6.4 所见即所得：你看到了什么？
2.7 遵循交互原型最佳实践
2.7.1 选择用于开发的浏览器
2.7.2 使用浏览器插件
2.7.3 尽可能少地使用<div>元素
2.7.4 确保标签是有效的
2.7.5 选择定位优先于浮动
2.7.6 组织CSS
2.8 过程的实践
2.8.1 着眼于组成部分
2.8.2 编写分离内容的标签
2.8.3 用CSS实现静态设计
2.8.4 构建布局
2.8.5 从body开始
2.8.6 继续向前还是移交
2.8.7 基本颜色样式
2.8.8 创建商标
2.8.9 加上Logo
2.8.10 导航条样式
2.8.11 设计页脚样式
2.8.12 理解元素的排版样式
2.9 汇总
3.1 引入基于网格的设计
3.1.1 设计师与网格
3.1.2 黄金比例和三分之一规则
3.1.3 纯粹的弹性布局
3.1.4 合理的网格设计
3.2 当今Web设计中的网格
3.2.1 减法
3.2.2 Airbag Industries
3.2.3 Jeff Croft
3.2.4 Veerle的博客
3.3 寻找Web之外的网格
3.4 为Web设计带来新的网格
3.4.1 打破新闻
3.4.2 以网格作为指导
3.4.3 揭穿小秘密
3.4.4 着迷于新闻手法
3.4.5 保持你的画面
3.5 在意想不到的地方发现灵感
3.5.1 把主页改头换面
3.5.2 引入基调板
3.5.3 拥有一个设计剪贴簿
3.5.4 要获得界面灵感去看杂志吧
3.5.5 获得版式灵感
3.5.6 重新审视Flash设计
3.5.7 使用图片与相片
3.6 精美的艺术活动
3.6.1 设计不仅仅是创建引人注目的视觉效果
3.6.2 不要把焦点放在技术上
3.6.3 提升基调
3.6.4 寻找不同观点
3.6.5 带着目标剪贴
3.7 Web设计的美术
4.1 卓越的CSS
4.1.1 绝对定位
4.1.2 相对定位
4.1.3 浮动的创意
4.1.4 创建侧边栏
4.1.5 结合多种技术
4.2 CSS3（三倍好运）
4.2.1 各部分的汇总
4.2.2 开发新的标准
4.2.3 回到未来
4.2.4 使用CSS3选择符模块进行设计
4.2.5 使用斑马纹提高可读性
4.2.6 使用背景和边框模块进行设计
4.2.7 使用多幅背景图片进行设计
4.2.8 设计多栏布局
4.2.9 使用多栏布局模块
4.3 高级布局
4.3.1 回到网格（Grid）
4.3.2 使用高级布局模块进行设计