无懈可击的Web设计－前言

2008-05-11 18:23:43

　　我首先要承认一个事实，这世上并不存在什么完全无懈可击的网站。现在，在您

　　合上这本书然后放回售书架之前，请允许我解释一下。如同警察穿上防弹衣保护自己一样，我们也可以采用一些方法来保护我们的Web 设计方案。本书指导读者学会多种策略以保护站点—— 使它们无懈可击：获得增强的灵活性并能适应最恶劣的浏览环境。

　　关于“无懈可击”这个理念

　　在现实世界中，防弹衣并不能够 100% 保证您不受伤害，但人们总是在不断地争取提升其防弹性能。毕竟，穿了防弹衣总是比不穿好。这样的规则同样适用于 Web 设计以及本书中所描述的技术。通过增加网页的灵活性，以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性，我们就给自己的作品带来了一些与众不同的特色。这是一个不断进行的过程，并且当采用了 Web 标准相关技术，例如语义化的 XHTML 和 CSS，将更加容易构建出外观吸引人并且具有良好适应性的设计方案。

　　近几年来，采用基于 CSS 的页面布局这一趋势保持了稳定增长，学习如何正确并有效地运用 CSS 也变得越来越重要。其目标是充分利用这些技术在设计方面的强大能力，比如：更精简的代码，增强的可用性，并且更加容易维护。但是，仅仅是用到了 CSS 和 XHTML 并不一定就意味着一切都变得更好。充分利用将页面核心内容和外观表现分离而获得的灵活性，您才能顺利地创建出适合每个Web用户的更好的设计方案。不过，这里的“灵活性”的确切含义是什么呢？

　　我这里使用“无懈可击”这个词来部分地表示“灵活性”—— 换句话说，即设计方案能够轻松地适应各种不同的文字大小和内容数量，能够随着这些变化自动扩展或伸缩。此外，我们还可以(并且将会) 从编辑、维护或者开发的角度探讨和灵活性相关的话题——修改内容以及更新并维护代码将会更加轻松，并且不会影响设计效果。最后，我们还站在浏览环境的角度讨论灵活性。设计方案会如何影响网站内容和功能的完整性？我们必须确保所做的一切能够适应各种各样的实际场景。

本书重点

　　在我开始思考这本书的主题的时候，我意识到有两项重要内容构成了一个高质量和吸引人的 Web 设计方案。一项是“可视组件”—— 每个人都能在最终页面上明显看到的部分。它是图片设计、颜色和排版的结合体。只需访问 CSS Zen Garden 网站(www. csszengarden.com)，就会显而易见地感觉到使用 XHTML 和 CSS 完全可以实现吸引人的视觉设计效果，并且它们的应用已经相当普遍。

　　第二项( 但是同等重要) 是“无懈可击的实现方式”。这也是本书讨论的焦点：明智地选择使用 XHTML 和 CSS 创建网站，可以享受到它们带来的全部好处。现在，可以开始利用这些 Web 标准，以及一些精妙的技巧，创建出引人注目的，同时具备尽可能好的灵活性、适应性以及亲和力的网站了。

　　对诸如 XHTML 和 CSS 这样的 Web 标准的采用已经在高速增长，讨论如何以最佳的方式利用这些资源也就变得越来越重要。

本书结构

　　本书的每一章都讲述了一种无懈可击的设计指南。在各章节的开始我们会考察一个网上现有的设计例子，并会说明为什么那样做不是无懈可击的。然后我们使用 XHTML和 C S S 重构这个例子，目标就是改善它的灵活性，减少代码量。这些例子大多数都是页面上的特定组件，这样便于讨论如何将它们作为整体而设计得无懈可击。在第 9 章“构成一个整体”中，我们会结合前面章节中讨论的全部技术，创建一个完整的页面模板——复习我们所学的知识，并演示它们能怎样地结合在一起。

　　每章的范例都有一步步的详细过程，能够让您轻松地学习—— 即使您刚刚才开始使用 XHTML 和 CSS。整个过程中，我都将解释为什么使用 Web 标准是有好处的，并会指出各章的这些指南如何改善一个网站使其具备无懈可击的特性。

本书范例的上下文环境

　　所有的范例都建立在一个基本的页面结构之上。换句话说，每章中出现的 XHTML和 CSS 代码都假定位于一个现存 HTML 文档的<body>和</body>标签之间。

例如，本书范例基于的基本框架可以是下面这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Page Title</title>

8" />

... example CSS goes here ...

</style>

</head>

<body>

... example markup goes here ...

</body>

</html>

　　为了方便，我们将 CSS 代码写在页面的<head>中，但是对于老旧的，被淘汰的浏览器(例如 Netscape Navigator 4.x)，这些 CSS 应该被隐去。由于这种隐藏很常见，因此设计师会使用高级的 CSS 技术进行布局(如同整本书中我们所做的)，同时给无法处理 CSS 的老旧浏览器提供一个没有样式但完全可读的文档表现方式。

　　针对老式浏览器隐藏 CSS 一般是通过使用@import 方法引入外部样式表来实现。例如，如果将所有的样式写到一个名为 screen.css 的文件中，就可以用 @import 方法通过该文件的 URL 来引入外部样式表。因为像 Netscape 4.x 这样的老式浏览器并不识别 @import ，所以 screen.css 中包含的样式就对它们隐藏了。

<head>

<title>Page Title</title>

8" />

@import url("screen.css");

</style>

</head>

　　这里我使用的是 XHTML 1.0Transitional DOCTYPE，但是您可以选择任何您喜欢的 X H T M L DOCTYPE。不知道DOCTYPE究竟是什么？不用着急，6.6.4 节我会介绍更多这方面的内容。

本书中的常用术语

　　本书中的许多地方我都将以它们的缩写形式来指代某种浏览器。例如，使用“IE5/

Win”比使用“Internet Explorer version 5 for Windows”要轻松得多。以下是一些浏览器版本 / 系统平台缩写的约定的列表：

n IE5/Win = Internet Explorer version 5.0 and 5.5 for Windows

n IE6/Win = Internet Explorer version 6 for Windows

n IE5/Mac = Internet Explorer version 5 for Macintosh

　　在描述各章节中例子的通常做法时，我经常会提到“嵌套表格”以及“空白 GIF 占位图片”。这指的是在构建网站的传统方式中，会用表格创建每个像素都很完美但是毫无灵活性的页面。在一个表格中嵌套另一个表格，使得精确地对齐图片和文字更加容易，但是页面代码却堆积如山，并且存在大量可用性方面的问题。

　　术语“空白 GIF 占位图片”指的是将单张透明的 GIF 图片拉伸为各种尺寸，以便创建整页中的间隔区域、分栏以及分割线。一个并非无懈可击的网站的 HTML 代码中会包含很多这样的垃圾，使得页面臃肿，也将成为维护人员的噩梦。现在，有更好的方法来实现同样的视觉效果：使用简洁的、富有语法意义的 HTML

　　代码和 CSS。通过使用这些基于 Web 标准的技术，可以创建出既具有吸引人的效果，同时又具有灵活性，能够适应任何情况的设计方案。这就是无懈可击的 W e b 设计。

上一篇：《CSS权威指南》（第3版）选择符
下一篇：无懈可击的Web设计－灵活的文字(1)

发表看法3

>> more 看看其他人的看法
我绝对喜欢你的博客，找到多数人的是什么，我在寻找你的文章。可以提供客人作家为你写的内容？我不会介意创建后或阐述你写在这里涉及的科目很多。同样， Web日志真棒！
1 bad credit payday loan 2012-1-13 00:26 Friday
}
Woah ！我真的爱这个博客的模板/主题。它的简单而有效。很多时候，很难得到“用户友好性和外观的完美平衡” 。我必须说，你已经做了这个出色的工作。此外，博客对我来说非常快，在Chrome加载。优秀博客！
2 search engine optimization vancouver 2012-1-13 14:56 Friday
}
美好的一天！我知道这是有点偏离主题，但我想知道你的博客平台使用本网站？我让生病和疲惫的WordPress ，因为我已经与黑客的问题，我在寻找另一个平台的选项。我想，如果你能点在一个良好的平台的方向，我是非常美妙的。
3 oh canada 2012-1-20 22:39 Friday
}

无懈可击的Web设计－前言

有什么想说的吗？