超越CSS：WEB设计艺术精髓

　　(英)克拉克 著，谭振林 译

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

专家评书：

　　《超越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项目首页，合理的使用 -标签，然后配合使用及标签，完成了首页的结构布局，没有冗余的不必要的标签，作者还应用了类似及辅助标签来配合使用以控制实现预先设计的效果，启发我们 对辅助标签应用的灵感。如果能灵活使用等标签，会带来事半功倍的效果。页面主体结构之后就是使用CSS完成表现层的制作。作者详细声明浏览器默认样式的定 义，可以说对于默认的样式定义考虑非常充分，涵盖了常用的标签的全局定义，为之后使用这些标签做好了铺垫。通过Cookr项目的实战，作者介绍了布局、定 位、字体弹性控制、颜色控制等CSS技巧，在CSS的使用中，作者应用z-index,position等技巧处理版式表现效果，值得我们效仿、思考。最 后作者为我们展示了排版样式的定义，使其Cookr项目的交互原形的最终完成。在《超越CSS》中，学习CSS不再枯燥，因为艺术与技术得到了结合。

没有最好、只有更好，《超越CSS》值得拥有。

——CSDN UI组组长,首席页面架构师武悦

1. 发现

1.1　超越CSS简介　
1.1.1　需要什么样的工具来开始学习　
1.1.2　为什么需要超越CSS　
1.1.3　尽情地发挥创造力　
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.2　环视四座皆列表　
1.6.3　给我寄一张旧金山的hCard 　
1.6.4　学会拓宽视野　
1.6.5　从“内容”开始工作　
1.7　是时候整理一下你所学的知识了　

2. 过程　

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. 灵感　

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. 卓越　

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　使用高级布局模块进行设计　
4.4　结束语