内容简介
一个网站，无论视觉上多美观或者内容多丰富，如果它不能适应各种浏览情况并能面向尽可能广泛的用户群，那它就不算是真正成功的网站。本书提供了基于Web标准的网页设计策略，以帮助您创建出具有高度灵活性、可读性以及用户可控性的网站。每一章都以分析一个实例开始，阐述如何使用简洁的HTML和CSS代码取代臃肿的冗余代码以创建具有极快的加载速度和很高的适应性的网站。最后，本书将各章中讨论的所有页面组件合在一起制作了一个单页模版。
我首先要承认一个事实，这世上并不存在什么完全无懈可击的网站。现在，在您 合上这本书然后放回售书架之前，请允许我解释一下。 如同警察穿上防弹衣保护自己一样，我们也可以采用一些方法来保护我们的Web 设计 方案。本书指导读者学会多种策略以保护站点—— 使它们无懈可击：获得增强的灵活 性并能适应最恶劣的浏览环境。 关于“无懈可击”这个理 在现实世界中，防弹衣并不能够 100% 保证 您不受伤害，但人们总是在不断地争取提升其 防弹性能。毕竟，穿了防弹衣总是比不穿好。 这样的规则同样适用于 Web 设计以及本书 中所描述的技术。通过增加网页的灵活性，以 及采用必要的步骤来保证它在尽可能多的场景中 都具备可读性，我们就给自己的作品带来了一 些与众不同的特色。这是一个不断进行的过 程，并且当采用了 Web 标准相关技术，例如语 义化的 XHTML 和 CSS，将更加容易构建出外 观吸引人并且具有良好适应性的设计方案。 近几年来，采用基于 CSS 的页面布局这一 趋势保持了稳定增长，学习如何正确并有效地 运用 CSS 也变得越来越重要。其目标是充分利 用这些技术在设计方面的强大能力，比如：更精 简的代码，增强的可用性，并且更加容易维护。 但是，仅仅是用到了 CSS 和 XHTML 并不 一定就意味着一切都变得更好。充分利用将页面核心内容和外观表现分离而获得的灵活性，您才能顺利地创建出适合每个Web用户的 更好的设计方案。不过，这里的“灵活性”的确切含义是什么呢？ 本书重点 在我开始思考这本书的主题的时候，我意识到有两项重要内容构成了一个高质量和 吸引人的 Web 设计方案。一项是“可视组件”—— 每个人都能在最终页面上明显看 到的部分。它是图片设计、颜色和排版的结合体。只需访问 CSS Zen Garden 网站，就会显而易见地感觉到使用 XHTML 和 CSS 完全可以实现吸引人的 视觉设计效果，并且它们的应用已经相当普遍。 第二项( 但是同等重要) 是“无懈可击的实现方式”。这也是本书讨论的焦点：明 智地选择使用 XHTML 和 CSS 创建网站，可以享受到它们带来的全部好处。现在，可 以开始利用这些 Web 标准，以及一些精妙的技巧，创建出引人注目的，同时具备尽可 能好的灵活性、适应性以及亲和力的网站了。 对诸如 XHTML 和 CSS 这样的 Web 标准的采用已经在高速增长，讨论如何以最佳 的方式利用这些资源也就变得越来越重要。 本书结构 本书的每一章都讲述了一种无懈可击的设计指南。在各章节的开始我们会考察一个 网上现有的设计例子，并会说明为什么那样做不是无懈可击的。然后我们使用 XHTML 和 C S S 重构这个例子，目标就是改善它的灵活性，减少代码量。 这些例子大多数都是页面上的特定组件，这样便于讨论如何将它们作为整体而设计 得无懈可击。在第 9 章“构成一个整体”中，我们会结合前面章节中讨论的全部技 术，创建一个完整的页面模板——复习我们所学的知识，并演示它们能怎样地结合在 一起 。 每章的范例都有一步步的详细过程，能够让您轻松地学习—— 即使您刚刚才开始 使用 XHTML 和 CSS。整个过程中，我都将解释为什么使用 Web 标准是有好处的，并 会指出各章的这些指南如何改善一个网站使其具备无懈可击的特性。 本书范例的上下文环境 所有的范例都建立在一个基本的页面结构之上。换句话说，每章中出现的 XHTML和 CSS 代码都假定位于一个现存 HTML 文档的<body>和</body>标签之间。 例如，本书范例基于的基本框架可以是下面这样： 为了方便，我们将 CSS 代码写在页面的<head>中，但是对于老旧的，被淘汰的 浏览器(例如 Netscape Navigator 4.x)，这些 CSS 应该被隐去。由于这种隐藏很常见， 因此设计师会使用高级的 CSS 技术进行布局(如同整本书中我们所做的)，同时给无法处 理 CSS 的老旧浏览器提供一个没有样式但完全 <body> … example markup goes here … </body> </html> 为了方便，我们将 CSS 代码写在页面的<head>中，但是对于老旧的，被淘汰的 浏览器(例如 Netscape Navigator 4.x)，这些 CSS 应该被隐去。由于这种隐藏很常见， 因此设计师会使用高级的 CSS 技术进行布局(如同整本书中我们所做的)，同时给无法处 理 CSS 的老旧浏览器提供一个没有样式但完全 <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> <style type="text/css"> @import url("screen.css"); </style> </head> 本书中的常用术语 本书中的许多地方我都将以它们的缩写形式来指代某种浏览器。例如，使用“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 设计。
当前位置：首页
\ 网页设计与制作 \ HTML/CSS
