HTML5-项目实践指南-全-
HTML5 项目实践指南（全）
零、简介
这本书集中讨论了 HTML5 在目前没有很好记录的项目中的实际应用。这本书关注的是那些能增强你的网站的项目；因此，你不会找到 HTML5 的历史，也不会看到对大多数网页设计师不常用的东西的详细讨论，比如 API(应用编程接口)。有几本书是关于 HTML5 的历史和 API 的，所以重复它们是没有意义的。这本书的目的是通过将 HTML5 的优点与以前记录不多的激动人心的技术结合起来，帮助你创建有吸引力的、有用的网站。
这本书的起源
虽然多年来我设计了许多网站，但我经常会对自己说“我到底是怎么做到的？”或者“他们到底是怎么做到的？”这些“究竟如何”的主题我能找到的任何手册都没有涉及到这些技巧。因此，我收集了一套由我的研究结果和实际实验组成的操作技巧。最棒的是，我基于这些技术编译了一系列模板。这些都是非常有用的节省时间的方法。由此产生的书(存储在我的硬盘上)非常有用，所以我决定以书的形式与其他设计师分享。我的模板是在 HTML5 中创建的，在必要的地方，它们包含了使 Internet Explorer 7 和 8 能够理解 HTML5 语义标签的技巧。我对解决方案的探索就像一次考古挖掘。我有证据表明宝藏被埋了。最终出土后，我发现这些珍贵的文物支离破碎，广泛分散；他们的条件也很差。我的任务是把这些碎片组装起来，然后清洗、打磨，以便公开展示。然而，一个问题仍然存在，因为许多碎片丢失了。我不得不通过反复试验来重新创造这些。
这本书诞生于挫折。大多数手册、论坛和网站都给出了本书所涉及主题的代码片段，但是网站设计者需要解决如何在现实世界中应用这些代码的问题。这意味着要从许多来源中筛选出足够的信息。实际应用需要更多的时间进行反复试验。
这些工具的实际的、充分发挥作用的例子通常像母鸡的牙齿一样稀少。忙碌的网页设计者不应该费力地翻阅理论或历史，却发现没有提供实际应用。他们也不应该为了从一个冗长的段落中提取一些意思而去读五遍。
诚然，这本书的五个主题已经包含在厚重的单一主题手册中，但忙碌的设计师可能不希望购买一大堆单一主题的手册，并花时间在它们之间搜寻。在本书中，这些手册都在一个章节中进行了总结，对于希望快速创建 PayPal 页面或可访问网站、针对搜索引擎优化的网站或了解 HTML5 和 CSS3 的设计师来说，这些章节已经足够了。
在本书中，我试图通过提供以下内容来避免这些问题:
这本书是给你的吗？
- Do you want to know and use the enhancements provided by HTML5 and CSS3?
- Are you an IT lecturer or trainer looking for a set of texts to answer students' questions about HTML5, provide you with many ready-made projects and provide valuable resources for students' personal libraries?
- Are you an IT student who wants to surpass the basic principles of HTML4 and CSS2? You may spend many days or even weeks searching online for how to operate it. Would you rather collect examples of the complete work of these hard-to-find tools? Some items in this book can finally be constructed by piecing together some computer textbooks with a single theme and fragments of websites. Do you prefer to describe them step by step in a book?
- Many single-theme web page design manuals are large and lengthy. Searching for them takes time. Do you want to fully summarize the practical content in one chapter? By searching for a technology online or in books, you will find several ways to do the same job. I tested several technologies and chose the easiest way to do the job well. Do you think the tried and tested techniques in this book will save you time in research and testing?
- Do you want a downloadable toolkit consisting of free and easily modifiable templates?
- Do your customers ask you to add enhancements to their websites, but you don't know how to do it?
这本书涵盖了什么，没有涵盖什么
绝大多数网站所有者想要一个网站的原因如下:
- Sell services or products
- information giving
- Promote organizations such as charities, churches or societies.
这本书迎合了绝大多数网站所有者的需求。这本书没有涵盖在现成的资源中充分描述和说明的技术。然而，它确实总结了四个庞大的手册，阅读和提取信息非常耗时。
这本书没有讨论 RSS 提要，也没有太多关于 JavaScript 驱动的 API 的讨论。如果用户可以随意修改他们的网站，绝大多数所有者都会感到震惊。企业主不会有时间或兴趣去审核博客中的条目。本书中唯一涉及的交互元素是真正实用的元素，比如支付方式(例如 PayPal)、安全反馈表单、页面打印按钮、音频和视频控制、返回按钮和辅助功能。
本书不涉及使用 SQL 或 MySQL 的博客或数据库驱动的网站。为了学习如何控制 CMS 博客，我推荐博客设计解决方案 (Apress，2006)。
布局
每一章都是独立的，所以一般来说你可以不用从一章跳到另一章来完成任务。在决定子主题的位置时，我不得不偶尔妥协；例如，我应该将 CSS3 圆角放在哪里:在 CSS3 章节中还是在圆角章节中？我最终把它放在圆角一章里。
这些章节没有特别的顺序，也不必按照特定的顺序阅读。只要一头扎进任何地方，去发现你想学的东西。但是，如果你对 HTML5 一知半解，就从第一章开始吧。它将向你介绍 HTML5，并提供工作的例子来实践。
我避免了无用的细节，比如 HTML5 的历史或者某项技术是如何发展的。相反，我专注于实际应用。有些主题确实需要如何解释——比如屏幕阅读器如何帮助盲人阅读网站——但我的总体目标是“开门见山”(正如电影制片人所说)，也就是说，不要废话，尽快进入令人兴奋的部分。
我的希望是，通过在一本书里收集和展示工具、技术、概要和模板，网页设计者、学生和老师将会省去很多时间的研究和测试。
所需的技能水平
这本书里的说明是中级水平；也就是说，假设您已经掌握了 HTML4 和 CSS2 的工作知识。
HTML5 和 CSS3
最近出版了很多 HTML5 和 CSS3 手册。他们擅长描述新建议背后的历史，他们倾向于关注不常用的项目，比如 API 和新的 canvas 元素。HTML5 中的工作示例很少，而且很少与现实世界相关。大多数手册广泛涉及 API，而绝大多数网站所有者对此一无所知，也不想要。这本书强调了 HTML5、CSS2 和 CSS3 的实用性。我已经切入正题，提供了涵盖所有最有用的新特性的完整项目。
注意 CSS3 和 HTML5 互不依赖；它们是完全不同的建议。
CSS3 的更新
在撰写本文时，Mozilla Firefox、Safari 和 Chrome 需要-mozkit-和-webkit- hacks 来支持一些 CSS3 特性。当这些浏览器的新版本发布时，它们可能不再需要黑客了。
最少使用脚本
我已经尽量减少脚本的使用。如果有 CSS 解决方案，将使用它来代替脚本。HTML5 和 CSS3 为几个新的网站增强功能提供了无脚本解决方案。大多数浏览器的最新版本都支持它们。
服务器端编程语言（Professional Hypertext Preprocessor 的缩写）
两个项目——访问者计数器和表单——使用了一些 PHP，但是不需要 PHP 知识。尽管已经对脚本进行了完整的解释，但是您可以跳过解释，只需在模板中 PHP 标记指示的地方插入您自己的细节。
Java Script 语言
为了使一些 HTML5 功能能够在 IE 7 和 IE 8 中工作，JavaScript 的一个片段是必不可少的。您可以从该书的出版网站下载这个脚本。
本书少量主题使用了一点 JavaScript 比如 CSS2 圆角(第七章)、加密邮箱(第十一章)、音视频(第六章)，但是不需要 JavaScript 知识。JavaScript 文件可以从配套网站下载，并放在您网站的根文件夹中。最终，通过使用 CSS3，不需要脚本就可以实现圆角。一些浏览器已经支持这种技术。通过使用新的 HTML5 <audio>和<video>标签，跨浏览器的音频和视频将最终实现无脚本。同时，提供了一个后备解决方案，使音频和视频能够使用 IE 7 和 IE 8 播放。
本书中使用的约定
本书中使用的词语代码、列表和标记表示同一个意思。应该由读者自己的标记替换的代码以粗体斜体显示。出于教学目的，粗体强调了一些标记。
客户和网站 网站所有者这两个词是同义词，指的是委托你制作网站的人(或组织)。
标签和元素这两个词也可以互换使用。
资源
这本书里提到了许多有用的书籍和免费软件程序。只要有可能，免费软件或开源软件都会被选择并经过全面测试。
提示安装一个文本编辑器，比如 Notepad ++，它比 MS Notepad 有几个增强。
当一段 CSS 标记不能包含在一行中时，使用一个向左的箭头来表示这两行属于同一行；例如:
#header { width:920px; height:180px; padding:0; margin: 20px auto;  border:10px white solid; **background: url(img/**h**eader3.jpg) no-repeat**; }
使用书的标记和模板
大多数工作示例都是实用的模板，读者可以从配套网站上查看和下载。读者可以轻松快速地将这些例子改编为自己的使用。在网站中使用标记或模板不需要权限。如果您在销售媒体(即印刷品或 CD)中包含标记示例，则需要获得许可。如果您在提供网页设计指导的网站中使用标记示例，则需要获得许可，并且会要求您确认代码的出处。归属应该给出出处，如下:实用 HTML5 项目Adrian West 著。版权所有 2012 阿德里安韦斯特。由 Apress Media，LLC 出版。国际标准书号 978-1-4302-4275-8。
如果你认为你对这本书的标记的特殊使用不在本段中，请联系permissions@apress.com。
所见即所得网页设计程序
WYSIWYG 程序是一种快速启动网页的好方法，也是学习 HTML 语法和句法的好方法。但是不要总是相信你看到的。有时，当在所见即所得程序的设计窗格中查看布局时，它并不是您所期望看到的。在 WYSIWYG 程序跟上之前，这尤其适用于使用 HTML5 或 XHTML5 文档类型的页面。不要纠结于所见即所得的布局、图像或菜单栏；相反，在 Internet Explorer、Mozilla Firefox、Safari、Chrome 和 Opera 中测试页面。尽管布局、图像和菜单在所见即所得编辑器中的外观有些奇怪，但您可能会惊喜地发现它们显示正常。
我用 MS Expression Web。它有一个优秀的错误检查器。在“代码”视图中按 F9 键会逐步显示并解释错误。然而，任何 WYSIWIG 编辑器可能需要更新或升级来检查 HTML5 页面的错误。
网页设计程序和内容管理系统
网页设计程序和内容管理系统(CMS)声称你不需要学习 HTML。它们是网站设计世界中的数字绘画工具。
我同意你可以使用这些程序设计网站，而无需使用或理解 HTML 或 CSS 但是，您将被迫使用成千上万其他人正在使用的模板。您调整或微调网站的能力将受到严重限制，因为大多数 CMS 使用专有标记以及 JavaScript 和 PHP。所有的 CMS 网站都会在你的根文件夹中装载大量的行李；这可能会耗尽您的大部分可用主机容量。例如，一个使用 HTML5 和 CSS2 的基本的五页网站只会产生两个文件夹和六个文件。对同一个网站使用 CMS 包会产生 17 个文件夹，每个文件夹平均有 30 个文件，外加 10 个 PHP 文件和几个用于管理网站的附加文件。
如果你需要将一个 CMS 网站转移到另一个网站管理员那里，你可能很难找到愿意学习的人来解决微调 CMS 网站的复杂性。
鼓励初学者使用 CMS(或在线网站生成器)就像对某人说，“那么，你要去法国出差三个月？不用费心学法语，带个翻译就行了。”如果初学者希望微调 CMS 网站，他们最终需要学习 HTML、JavaScript 和 PHP。可以在网上设计的网站会更加严格。这些主要是基于 JavaScript 的，导致设计者控制更少。在线方法和 CMS 网站也使用 JavaScript 导航菜单来防止搜索引擎越过主页。
除非你学习一些 HTML 和 CSS，否则你永远无法完全控制你的网页设计过程。如果你想制作独特、精简、干净、易于管理的网站，那么 HTML 和 CSS 是唯一的方法。HTML 不难，HTML 语言 40 个单词就够了，而且都是英文单词或者英文单词的缩写。几个免费的所见即所得网页设计程序可以帮助你学习语法和文法。公共图书馆的书架上通常都有 HTML 和 CSS 手册。
哪些浏览器？
目前，大多数普通用户用 Internet Explorer 上网，因为它是 Windows 免费提供的。最近的一份计算机杂志民意调查显示，Internet Explorer、Mozilla Firefox 和 Chrome 同样受欢迎。计算机杂志迎合了一小部分人口，所以他们的调查结果比较有偏见。在考虑 IE 的时候，我们需要注意正在使用的四个版本。
我想我们可以驳回 10 岁的 IE 6。任何仍在使用 IE 6 的人都应该得到他们在屏幕上看到的东西。然而，当我为一个支持当地公共图书馆的团体设计网站时，我感到震惊。县图书馆的电脑仍在使用 IE 6，尽管它年代久远且易受攻击。在图书馆的电脑上，这个网站看起来一团糟；我用 IE 条件黑客解决了这个问题，(这些黑客的细节在本书中提供)。现在，我总是查看我的客户正在使用哪些浏览器。
用户惯性确保了旧的浏览器和操作系统将在未来五年内继续使用。至少在 2014 年之前，许多企业和家庭用户将继续使用 Windows XP、IE 7 和 IE 8。他们将继续使用 IE 7 和 IE 8，因为 IE 9 与 XP 不兼容。从 2011 年年中开始购买新电脑的人将会预装 IE 9。未来十年，IE 9 和更高版本可能会越来越多地成为最常用的 Internet Explorer 版本。2011 年 3 月发布的 Internet Explorer 9 将兼容最有用的 HTML5 和 CSS3 新功能。足够精明的下载和使用 Mozilla Firefox、Opera、Safari 和 Chrome 的人通常会继续下载最新版本。因此，设计师应该测试最新的版本。
目前，为了让你的网站拥有最大的受众群，确保它们能在五种最流行的浏览器中运行。按照重要性排序，它们是 Internet Explorer 8 和 IE 9+，Chrome，Mozilla Firefox，Safari for Windows 和 Opera。它们可能不会(也不需要)以相同的方式显示，但是只要它们能够有效地传达网站的信息，微小的差异并不重要。2015 年后，你可能会忘记 IE 8 的黑客攻击。
提示参见附录中的表格，了解浏览器在美国、英国和欧洲的使用情况。如果你的目标是一个特定的区域，这是很有用的。
一、迁移到 HTML5
本书中的项目使用 HTML5。本章将向不熟悉 HTML5 的读者介绍它的基本特性，并了解它与 HTML4/XHTML 的不同之处。您还将了解如何:
- Convert HTML4/XHTML pages or entire websites to HTML5
- Create HTML5 pages that can be displayed correctly in Internet Explorer 7 and 8
- Take advantage of the enhancements of HTML5
自 2000 年推出 XHTML 1.0 以来，HTML5 是 web 开发中最激动人心的一步。HTML5 是网页设计的未来，但现在就可以实现；然而，这并不会使您当前的 HTML4 或 CSS2 知识变得多余。这是一个受欢迎的增强，增加了 HTML 的灵活性和有用性。也解决了一些问题；例如，它可以免除嵌入视频和音频剪辑的插件，视频文件格式的数量也大大减少。大量新的语义标签使得网站的编码和维护变得更加容易。文档类型的数量从六个减少到两个，HTML5 文档类型非常简单，您可以轻松地将它们记住。
HTML5 在浏览器供应商之间达成了一致，因为他们参与了它的制定。这意味着他们处理编码错误的方式现在已经标准化了；所有那些小分歧都解决了。HTML5 规定的浏览器解析规则确保所有现有网站继续像以前一样运行；HTML5 向后兼容。
因为这一章关注的是 HTML5 将增强最常见的网站类型的方面，所以你不会找到关于 API(应用编程接口)的全面讨论；也不会找到 HTML5 的发展史。有几本关于 API 和 HTML5 历史的书。它们很好地涵盖了这些主题；复制它们是没有意义的(参见本章末尾的提示以获得参考资料列表)。
这一章的结尾简要提到了一些 API，但是可以肯定的是，绝大多数的网站设计者和网站所有者还没有在传统的网站上实现它们。CSS Tricks ( [css-tricks.com](http://css-tricks.com))最近进行的一项民意调查强化了这一观点。API 发布两年后，调查向网页设计师提出了以下问题:你在生产网站上实现了哪些 HTML5 特性？
结果如下:
语义标签 58%
表格 36%
音频/视频 30%
其他 16%
“其他”的 16%在九个 API 之间分配:Canvas、Web 工作器、Web Storage、Geolocation、拖放、ContentEditable、History 和 Microdata。总数加起来超过 100 %,因为大多数受访者实现了不止一个功能。
移动到 HTML5
现在是时候利用 HTML5 中的新特性了；通过尝试本章和后续章节中的项目，您将发现新版 HTML 可能带来的好处和增强。这本书的重点是标题中的实用二字；因此，我“开门见山”地提供了涵盖 HTML5 所有最有用的新特性的完整项目。我想你渴望开始，所以让我们继续吧！
html 5 和 XHTML5 文档类型
HTML 4/XHTML 有几种文档类型，但是 HTML5/XHTML5 只有一种文档类型，如下所示:
| **html 5:** | `HTML5 test document *meta details go here* ` | | **XHTML 5:** | `XHTML5 test document *meta details go here* ` |
注意更简单的 HTML5 DOCTYPE 可用于包含 XHTML 标记的页面，它将进行验证。事实上，可以完全忽略 XHTML5 DOCTYPE。HTML5 并不在乎你是否使用封闭标签(比如<br />)。本书中的例子不使用结束标记；但是，如果您一直使用 XHTML，您可能更喜欢继续使用结束标记——html 5 将接受任何一种方式。
HTML5 文档类型用 lang=en 指定英语。对于其他语言，请参见
[wwww.iana.org/assignments/language-tags/language-tags.xml](http://wwww.iana.org/assignments/language-tags/language-tags.xml)。
要将网页改为 HTML5 或 XHTML5，只需更改 DOCTYPE 即可。标记不会被破坏，但您将能够使用更有用的元素，如<audio>和<video>(即使在 IE 7 或 IE 8 中使用了一点 JavaScript ),并且您的页面将会验证。
注意目前的 HTML5 和 XHTML5 验证器是[validator.w3.org](http://validator.w3.org)和[html5.validator.nu](http://html5.validator.nu)。这些仍然是实验性的，你应该知道它们可能会随着时间的推移而改变。
要跟上 HTML5 项目的开发和发布，请访问
[html5doctor.com](http://html5doctor.com)
Remy Sharp 是 HTML5 Doctor 网站的专家之一。阅读他的有用文章
[html5doctor.com/html-5-boilerplates/](http://html5doctor.com/html-5-boilerplates/)
他写道，下面的标记是“完全有效的 HTML5”:
`<!doctype html>
<title>Small HTML 5</title> <p>Hello world</p>`太神奇了！没有<html>，没有<body>，没有语言，没有字符集，没有引号，怎么会这么松懈？它将进行验证，但不支持当前的屏幕阅读器，因此 HTML5 标记保持以下结构:
`<!doctype html>
注意 HTML5 的属性不一定要用引号括起来，许多 MIME 类型现在可以在 HTML5 中省略——但是对于 XHTML5，可以保留引号和 MIME 类型。
一个网站可以包含多个页面，前提是正确指定了每个页面的 DOCTYPE。如果您希望在现有网站的一个或两个 HTML5 页面上使用新的<audio>和<video>标签，这将非常有用。
表 1-1 显示了一个 XHTML 页面的 DOCTYPE 被改成了 HTML5 DOCTYPE。该页面已提交给 W3C HTML5 验证程序。它在所有浏览器中的验证和显示与原始页面完全相同。在表 1-1 中比较了两种文件类型。
表 1-1 显示了我试验过的 HTML5 DOCTYPE。图 1-1 显示了我使用的网页。
图 1-1。我用来试验来自表 1-1T5 的 HTML5 文档类型的网页
在这个实验中，原始的 XHTML 页面 ( starter-page.html ) 在通常的 W3C HTML4 验证器中进行验证。一个相同的页面，但是使用 HTML5 文档类型，在 W3C HTML5 验证器中进行验证。两个页面都是 XHTML 格式的，只有文档类型发生了变化。这些照片是由 Bonehayne 农场假日住宿网站[www.bonehayne.co.uk](http://www.bonehayne.co.uk)的所有者 Sandra 和 Ruth Gould 许可使用的
自己尝试这个相同的实验。
- Use your own verified XHTML or HTML4 webpage, or
- At
[www.apress.com](http://www.apress.com), download the page of Figure 1-1 from the page in the book. Change the DOCTYPE on the page to HTML5 DOCTYPE. Test it on two HTML5 validators.
用户惯性将确保旧的浏览器和操作系统在未来几年内仍会继续使用。HTLM5 中的页面在旧的浏览器中应该是可读的，因为新的 DOCTYPE 向后兼容。所有的浏览器都跟上所有新的增强功能可能还需要一段时间。在上传到主机之前，在各种浏览器中测试您的 HTML5 和 XHTML5 页面。
HTML5 非常宽容，和 HTML4 transitional 一样，它接受未关闭的标签。它也将接受自我关闭标签或混合，目前，网页将验证。虽然您可以在使用 XHTML 的页面上使用 HTML5 DOCTYPE 而不是 XHTML5 DOCTYPE，但是在将来的某个时候，HTML5/XHTML5 验证器可能会更加严格，所以请继续使用实验性的 W3C 验证器来检查更改。
我已经展示了您可以在不采用任何语义元素的情况下利用较短的 HTML5 DOCTYPE。将现有页面更改为新的 DOCTYPE 后，您可能渴望尝试新的语义元素，所以让我们开始吧。
html 5 中的新元素
以下是我想注意的几件事:
- This chapter covers most semantic tags.
- Audio/video Chapter 6
- Form Chapter 10 covers.
关于 JavaScript 和 HTML5:一方面，新的建议消除了对一些 JavaScript 的需求(好)；另一方面，HTML5 有越来越多的 API 需要相当复杂的 JavaScript(不太好)。如果您打算利用新的 API，您应该——或者您应该努力——精通 JavaScript 的使用。
新的语义标签
语义关注单词的意思。新的语义标签描述了标签的内容；它们包括以下内容:
<article>、<aside>、<audio>、<details>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<mark>、
、<nav>、<section>、<summary>、<svg>、<time>、<video>。
提出了一些其他的语义标签。您可以通过以下方式对其进行调查:
[www.w3schools.com/html5/tag_progress.asp](http://www.w3schools.com/html5/tag_progress.asp)。
在那里你可以找到标签的定义:bdi、comment、keygen、meter、output、progress 和 track。W3CSchools 网站上也提供了当前浏览器对这些功能的支持。
注意 CSS 假设元素是*display:inline;*。这需要改变。要确保语义标签在所有浏览器中都像块一样，请通过在链接的 CSS 表单中插入以下行来调整 display 属性。
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display:block; }
不这么做 IE 7 和 IE 8 就会行为不端。
语义标签对谁有利？每个人都有；语义标签让网站开发人员的生活变得更加轻松。标签名称的标准化只会是一件好事，如果设计团队使用无处不在的名称，如nav或header或article等等，他们定位标签就不会有问题。搜索引擎将能够通过<nav>标签找到链接到主页的页面。<div>和id的数量将减少，这简化了开发和编码。我建议您尽可能使用语义标签，即使需要一点 JavaScript 来使 IE 7 和 IE 8 能够识别它们。然后，当这两种浏览器灭绝时，你将会变得擅长使用和设计语义标签。
语义标签旨在消除歧义
有些能消除歧义，有些则不能。一些标签具有表象的内涵，以及指示内容的意义。
- Explicit HTML5 tags include
<article>,<aside>,<audio>,<figure>,<figcaption>,<hgroup>,<mark>,<nav>and<video>.- Semi-ambiguous HTML5 tags include
<header>and<footer>. If there is only one page, then these are very clear. They are not only semantic, but also expressive, because they state the position of elements on the page. However, an HTML5 page can have several headers and footers. Each article can have a header and footer; Therefore, these labels are ambiguous.- Another semi-ambiguous HTML5 tag
<section>is discussed in the section "Debate about<section>and<article>" in this chapter.
自 1997 年以来，建议标签应该与标签的内容相关，而不是与内容的位置或风格相关。只有新的明确标签严格遵守该规则，其他的不遵守。
标题
在 HTML5 中，每页一个<h1>标签的限制已经被放弃了。每篇文章或每节可以有标题<h1>到<h6>。这如何影响可访问性是一个必须解决的问题，因为屏幕阅读器使用标题的层次结构来引导视力障碍者浏览网页。
最佳实践
无论是网站所有者还是普通用户都不会在意你是否使用语义标签，但作为一个网页设计师，你应该在意并尽量在可以的地方使用 HTML5 和语义 HTML5 标签。至少在接下来的五年里，当使用语义标签时，你将需要一个针对 IE 7 和 IE 8 的 JavaScript 解决方案。设计师会变得过分执着于避免描述表示的 id 和类。试着不要被这种强迫症所困扰。例如，考虑一个带有两列内容面板的页面。对于一个设计团队来说，<div id="leftcol">和<div id="rightcol">肯定比<div id="some-content">和<div id="some-different-content">更有意义。希望在"leftcol"改变某些东西的客户会说，“请修改左边的栏。”她不知道这个专栏还有什么别的名字。做任何与客户、设计师和团队成员明确沟通的事情。
搜索引擎和 HTML5
由于新的语义元素，搜索将得到改进；对于<nav>标签来说是这样，或许对于<video>标签也是这样。搜索引擎可以定位页脚并应用较低的权重，因为页脚不太可能包括用户正在寻找的信息。
摘要
受到双重欢迎的语义标签是那些除了语义之外还体现了另一个优点的标签。如果一个新的标签不再需要黑客和 JavaScript 解决方法，那么它将是一个很大的改进。Internet Explorer 7 和 8 不理解语义标签；因此，网页设计者要么在几年内忽略 HTML5 语义标签，要么在 JavaScript 中使用语义标签。
我强烈建议你使用语义标签和 JavaScript hack，直到 IE 7 和 IE 8 不再被广泛使用。
带有语义标签的页面布局的简单例子
本节中的前三个项目展示了使用 HTML5 和语义标签的简单页面布局。这些例子使用了一个 JavaScript 片段来使 IE 7 和 IE 8 能够识别语义标签。
注意接下来三个例子中的导航菜单都是原始的；更复杂的菜单将在本章后面介绍。HTML5 翻转菜单在第四章的中有完整的解释(有工作示例)。
图 1-2 和 1-3 展示了语义标签的效果。
图 1-2。在 IE 9、火狐、Safari、Opera、Chrome 中显示
图 1-3。在 IE 7 和 IE 8 中显示
这个简单的页面使用了语义元素<header>、<footer>和<article>。标记没有使用<div> s。内部样式仅用于指导目的。
清单 1-2 创建图 1-2 和图 1-3；外观上的差异是由不同的浏览器造成的。
清单 1-2。【simplistic-html5.html】在各种浏览器中测试的简单语义页面(??)
`<!doctype html>
header goes here
Article
Are you illiterate? Write today for free course.Another Article
Stock up for Christmas. Limited to one per family.针对 Internet Explorer 7 和 8 的解决方案
IE 9 将支持 HTML5 语义标签，但 IE 7 和 IE 8 需要一个“条件”，强制它们识别语义标签。在标记中使用 Remy Sharpe 的 JavaScript 片段，这样您就可以在 IETester 软件中测试页面是否支持 IE 7 或 IE 8。
提示提示[www.my-debugbar.com/wiki/IETester/HomePage](http://www.my-debugbar.com/wiki/IETester/HomePage)。详见第十九章。除了 IETester，还有其他工具可以用来测试您的页面是否支持旧版本的浏览器。你可以试试 Adobe BrowserLab，微软 Expression 的 SuperPreview，IE NetRenderer ( [netrenderer.com](http://netrenderer.com))。
Remy Sharp 设计了一个任何人都可以免费使用的解决方案。它把语义标签转换成 IE 7 和 IE 8 能理解的东西。它涵盖了大多数 HTML5 标签，包括:-
提示参见雷米夏普在[remysharp.com/2009/01/07//html5-enabling-script](http://remysharp.com/2009/01/07//html5-enabling-script)的 B:log。参见布鲁斯·劳森和雷米·夏普的《?? 介绍 HTML5》。
下载 JavaScript 文件html5.js并在主机文件夹中放一份副本。网站上的页面必须包含一个<body>…</body>标签，JavaScript 才能运行，即使 HTML5 不再需要<body>标签。在每一页的<head>部分，添加一个 IE 条件语句和一个到 JavaScript 的链接，如下面代码片段中粗体部分所示:
`<!doctype html>
Oh no! not another Hello World `
注意 html5.js不是写成“htm 加 15”而是写成 htm 加小写 L 和数字五。
甚至 JavaScript 哑剧类型；type="text/javascript"可以从 HTML5 中省略。默认情况下，新浏览器识别 JavaScript 文件的结尾*.js,并应用适当的 MIME 类型。
注意条件和脚本必须在<head>段中，放在任何一个样式表链接之后，如图图 1-4 所示。
图 1-4。右边的面板显示了使用 JavaScript 的 IE 7 和 IE 8 的显示
清单 1-4 包含了一段 JavaScript 代码，允许 IE 7 和 IE 8 理解语义标签。结果见图 1-4 。
清单 1-4 一个简单的语义页面，带有面向 IE 7 和 IE 8 的 JavaScript 回退功能(simplistic-html5-java.html)
`<!doctype html>
header goes here
Are you illiterate? Write today for free course.
Stock up for Christmas. Limited to one per family
列
在清单 1-4 中显示的简单例子很好，但是假设我们想要一个可读性更好的布局，其中文章块在垂直列中，如图图 1-5 所示。
图 1-5 。垂直并排文章块。语义标签没问题。
清单 1-5 创建了两个垂直的“文章”列，如图图 1-5 所示。关键特征以粗体显示。内部样式表仅用于教学目的。
清单 1-5 。使用语义 <article> 标签创建列(simplistic-side-by-side.html)
`<!doctype html>
header goes here
Article
Are you illiterate? Write today for a free course.Easy payment terms.
Another Article
Stock up for Christmas. Limited to one per family.Free Delivery £2
<导航>标签
网站传统上使用带有许多不同的 id 属性的<div>作为导航菜单；例如，菜单、导航、链接、导航菜单、导航等等。HTML5 引入了语义标签<nav>，对导航菜单进行标准化。<nav>标签必须充当包围无序链接块的容器，也就是说，<ul> </ul>标签必须位于<nav> </nav>容器内。图 1-6 显示了用语义<nav>标签创建的菜单块。
图 1-6。使用 HTML5 < nav >标签创建的一组导航菜单按钮
清单 1-6a 使用 HTML5 语义<nav>标签引入了 3D 按钮
清单 1-6a。使用【html5-nav.html】<nav>标签插入 3D 导航菜单**
`<!doctype html>
header goes here
From a local newspaper:
Are you 
illiterate?
Write today for a Free course. 
Easy payment terms.
Poster in store window:
Stock up for Christmas
Limited to one per family.
Free Delivery £2
Mark Twain said:"Life is one  darn thing after another"
So true, but we can still laugh about it
清单 1-6b 提供了导航菜单的 CSS 表示
清单 1-6b。使用 CSS 中的< nav >标签用于清单 1-6a (nav-style.css)
`#container { width:780px; margin:auto;
}
content { width:640px; margin-left:140px;
}
header, nav, footer, article, section { display:block;
}
header { width:780px; background-color:#FF9966; text-align:center; 
margin:5px auto 10px auto; padding:2px;
}
article { float:left; width:190px; margin:0 0 0 10px; padding:6px;
}
footer { clear:both; background-color:#FF9966; text-align:center;
width:780px; margin:auto;
}
p { margin-top:5px; margin-bottom:5px;
}
/* set navigation menu position and style/
nav { float:left; width:130px; background-color : white; margin: 0 7px 5px -30px;
}
nav ul {float:left; width:130px;}
/ set general side button styles /
nav li { margin-bottom: 3px; text-align: center; list-style-type:none; width:125px;}
/ set general anchor styles /
nav li a { display: block; color: white; font-weight: bold;
text-decoration: none } / specify state styles /
/ mouseout (default) /
nav li a { background:#946055; color: white; border: 5px outset #C96E6B;}
/ mouseover /
nav li a:hover { background: #9F7562; border: 5px outset #C96E6B;}
/ onmousedown */
nav li a:active { background:maroon; border: 5px inset maroon }
}`
使用语义标签的更复杂的例子
下一个例子使用之前在图 1-1 中说明的页面。图 1-7 提供了其外观的提示。
图 1-7。之前在图 1-1 中显示的同一个网页现在包含了语义标签
这里，我们将把之前在图 1-1 中显示的页面转换成 HTML5 语义元素。
在现实生活中，你不需要转换一个已经存在的页面。至少十年内，你当前的 HTML4 或 XHTML 格式的网页可以在所有浏览器中正常显示，而不需要 HTML5 文档类型。但是，如果您希望利用语义标签，下一个项目将描述如何通过修改现有的 XHTML 或 HTML4 页面来合并它们。
注意您当前所见即所得的网站编辑程序可能无法正确显示 HTML5 语义元素。因此，您需要在 web 浏览器中测试每一步。您可以将代码直接写入文本编辑器，比如 Notepad 或 Notepad++，然后在浏览器中进行测试。你也许可以升级你的所见即所得程序，使其与 HTML5 兼容。一些 WYSIWYG 编辑器声称兼容 HTML5，包括[github.com/bordeux/HTML-5-WYSIWYG-Editor](https://github.com/bordeux/HTML-5-WYSIWYG-Editor)的 Bordeux/HTML-5 WYSIWIYG 编辑器、[aloha-editor.org](http://aloha-editor.org)的 Aloha 编辑器和[jejacks0n.github.com/mercury/](http://jejacks0n.github.com/mercury/)的 Mercury 编辑器。无论如何，在[validator.w3.org](http://validator.w3.org)或[html5.validator.nu](http://html5.validator.nu)用验证器检查你的 HTML5 页面
转换步骤
执行以下步骤将页面转换为 HTML5:
-
复制一个现有的(X)HTML4 页面(没有语义标记的页面)，并将其命名为类似于 HTML5-test-page.html 的。我已经将我的副本命名为
starter-page.html，它可以在[www.apress.com](http://www.apress.com)从书的页面下载。
** 复制页面的样式表，并将其命名为类似于 html5-style.css 的名称。我已经将我的副本命名为starter.css，可以在<article>s。逻辑块最终将成为语义块。在本练习中，合适的模块如下:- 带有白色边框的页眉(当前标记为
<div id = "header">)。 - 最右边的列及其菜单块可以替换为
<nav>。 - 语义上的
<footer>可以代替现在的<div id="footer">。* 将文件类型更改为<!doctype html> <html lang=en> <head> <title>Your title</title> <meta charset=utf-8>* 将 HTML 页面中的链接更改为指向您复制并重命名的 CSS 文件的名称。* 为了支持 IE 7 和 IE 8，在<head>部分添加 Remy Sharp 的 JavaScript 片段的链接。<!--[if lte IE 8]> <script src="html5.js"> </script> <![endif]-->* Download and installhtml5.jsin the main folder of the web site. It’s available from[www.apress.com](http://www.apress.com)or from
??
[remysharp.com/2009/01/07//html5-enabling-script](http://remysharp.com/2009/01/07//html5-enabling-script)- Add this line into the CSS file:
header, nav, footer, article, { display:block; }* - 带有白色边框的页眉(当前标记为
*在将我的起始文件转换成语义标签后，我将它们重命名为HTML5-Ch1-7.html和HTML5-style-2.css。下面列出了这些内容，可以从该书的网页上下载。
清单 1-7a。【新 HTML5 上市(HTML5-Ch1-7.html ??)】
`<!doctype html>
Devon's Rural Retreats
Award winning accommodation, self catering or bed and breakfast
Cottages, converted barns, caravans
The superb interior  of one of our cottages * **
Situated in the UK's beautiful Devon countryside
清单 1-7b。修改后的 CSS 工作表 为图 1-7(html 5-style-2 . CSS)
(重点项目用黑体字标出。)
`/equalise for various browsers and change #header to header/
div body header #content { margin:0; padding:0; border:0;
}
body { background:#FFF url(img/green-grad.jpg) repeat-x; margin:auto;
}
/add display attributes for the semantic tags/
header, footer, section, article, nav { display:block;
}
/remove the # from #header/
header {width:920px; height:180px; padding:0; border:10px white solid;
background: url(img/header3.jpg); margin:10px auto;
}
h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px; width:480px;
}
rosette { position:relative; left:750px; top:5px;
}
content { background-color:transparent; border-left:10px white solid;
border-right:10px white solid; border-bottom:10px white solid; width: 904px;
margin-top:10px; margin-left:auto; margin-right:auto; padding:8px;
font-size:medium; color:maroon;
}
h2 { font-size:x-large; color:white; margin:0 0 10px 0;
}
h3 { font-size:large; color:white; margin:0 0 6px 0;
}
leftcol { float:left; width: 310px; vertical-align:top;
}
rightcol { width: 135px; float:right; height: 252px; margin-right:10px;
}
midcol { margin-left:315px; margin-right:145px; margin-top:10px;
vertical-align:top;
}
/set nav block position and width and remove the #menu item/
nav ul { margin:10px 0 10px 0; width:135px; float:right;
}
/Set un-ordered list style within the menu block only. This removes bullets/ nav li { list-style-type:none;
}
/* set general side button styles /
li.btn { margin-bottom: 3px; text-align: center; width:130px;
} / set general anchor styles and include the zoom fix for IE6/
li.btn a { display: block; color: white; font-weight: bold;
text-decoration: none; zoom:1;
}
/ specify mouse state styles /
/ mouseout (default) /
li.btn a { background:#559a55; color: white; border: 5px outset #559a55;
padding-bottom:3px;
}
/ mouseover /
li.btn a:hover { background: red; color:white; border: 5px outset red;
}
/mouse active*/
li.btn a:active { background:maroon; border: 5px inset maroon;
}
br.clear { clear:both;
}
midcol img { margin-left:10px;
}
/*change #footer to footer */
footer { clear:both; color:maroon; text-align:center;
}`
注意语义标签并没有完全免除 id 和类标识符。一个 HTML5 页面可以有几篇文章，分别用它们自己的 id s 和类来标识。
第<节> vs. <篇>论战
您可能想知道为什么到目前为止我还没有在任何例子中使用过<section>元素。当我写这一章的时候，对<section>和<article>的区别有相当大的困惑。这是因为一些手册和网站将<section>元素描述为一本书中的一章。这表明它就像一个包含大量内容的包装器。结果，一个 HTML5 手册和一些 HTML5 论坛使用<section>作为一个风格化的包装器或容器。这围绕着几个<article>元素。另一个 HTML5 手册为容器或包装器使用了一个<div>;这包含了<article>元素，而后者又包含了<sections>。
哪种做法是正确的？我尝试了所有的方法，它们都有效，因为 HTML5 目前相当松散。
甚至我在 HTML5 Doctor ( [html5doctor.com](http://html5doctor.com) ) 最喜欢的 HTML5 专家也发现他们一直在错误地使用<section>元素；他们改版后的网站声明:“……我们意识到我们一直以来都在错误地使用<section>元素。对不起，我们一直做错的是使用<section>包装内容，以便对其进行样式化，或者从<nav>、<header>、<footer>等中划分主要内容区域。这些是给<div>而不是<section>的工作。”
www。whatwg.org`` 规范修改如下:“<section>元素不是通用容器元素。当一个元素需要进行样式设计时，我们鼓励作者使用*<div>*元素来代替。
有关此主题的 W3C 声明的完整版本，请访问
[www.w3.org/TR/html5/sections.html#the-section-element](http://www.w3.org/TR/html5/sections.html#the-section-element)
<section>最适合用作<article>的子部分，应该始终包含并括起标题，如下所示:
<article> <h1>A heading, any level from h1 to h6</h1> <section> <h1>A heading, any level from h1 to h6</h1>some content </section> <section> <h1>A heading, any level from h1 to h6</h1>some content </section> <article>
HTML5 Doctor 给出了以下使用<section>的有用规则:
- Don't use
<section>as the goal of modeling or script; Use a<div>for this purpose.- Don't use
<section>. If you use<article>,<aside>, or<nav>, it is more appropriate.- Don't use
<section>unless there is natural A heading at the beginning of this section.
在[gsnedders.html5.org/outliner/](http://gsnedders.html5.org/outliner/)中查看您的页面。如果你看到一个“无标题部分”的通知提到了一个<section>，这意味着你省略了那个<section>的标题。
<篇>素
一个<article>是一个独立的项目，比如一条独立的信息，可以从页面中提取出来，发布在论坛、杂志、RSS 提要或报纸上。它应该包含一个标题(h1到h6)，并且可以包含两个或多个部分。关键词是独立。这是<article>元素的本质特征。[www.whatwg.org](http://www.whatwg.org)规范声明:“当联合元素的内容有意义时，鼓励作者使用<article>元素而不是<section>元素。”
包含关于该主题的持续有趣讨论的博客位于
[www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/](http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/)
争议仍在酝酿。Standardista 的博客作者/网络开发者 Estelle Weyl 也在 ` `www.standardista.com/html5-section-v-article`` 谈论这个话题
Estelle 用一份包含体育、时尚、美食等栏目的报纸来做类比。每个部分包含包含部分的文章。报纸的版面是“主标题”，文章是副标题。每个子主题本身都是完整的，符合 W3C 对<article>.的定义。然而，如果一个网页只处理一个主题(这是最佳实践)，这种类比就不成立了。每个网页一个主题(文章)可以提供更好的用户体验，并且有助于搜索引擎对网页进行索引。更令人困惑的是，可以说报纸上的一个版面(如体育)本身是完整的，因此是一篇可以联合发表的大文章。
尽管无论你是在文章中有文章，在文章中有章节，还是在章节中有文章，一个页面似乎都可以工作，但是 Bruce Lawson 的模型提供了一个有用的指南。
我自己的解决办法是忘记<section>，使用<div>；毕竟，这两个新标签<article>和<section>是为了浏览器供应商、博客和提供 RSS 提要的网站的利益；它们对于传统网站来说不是特别有帮助。因为<article>定义明确，我有时在 HTML5 页面中与 IE 7 和 IE 8 的 JavaScript hack 一起使用。
注意<section>元素被当作display:inline;。在当前的浏览器中，这可能最终会改变，但同时将<section >元素设置为display:block;。
<抛开>的标签
标签将一段文本从主要内容中分离出来。它可以有边框和/或背景色，使其从周围的文本中突出出来。这意味着<aside>可以包含有趣的摘录来吸引用户阅读正文。一个带边框的<aside>如图图 1-8 所示。
图 1-8。aside 元素可以创建一个引用(显示为带边框的插图)。
清单 1-8 提供了从正文中分离出来的引用。
清单 1-8。展示语义【aside.html】<aside>【标签】**
(为了节省空间，本文采用了缩写形式和内部样式)
`<!doctype html>
Which browser should you design for?
<标记>标记
突出显示某些单词或短语可以通过设置它们的格式或给它们一个彩色背景来实现。在 HTML5 中你可以使用<mark>标签；效果类似于用荧光笔在打印文本上，如图图 1-9 所示。
图 1-9。标记标签可用于突出显示文本。
提示<标记>可以与搜索结合使用，也许可以使用斯图尔特·朗里奇的 searchhi 脚本，该脚本可以从[www.kryogenix.org/code/browser/searchhi/](http://www.kryogenix.org/code/browser/searchhi/)下载
在清单 1-9 的<mark>标签中，标记使用了完整的单词<mark>。一些手册提供了缩写<m>，但是因为缩写版本不能在所有浏览器中表现自己，所以最好使用完整的单词。
清单 1-9。如图图 1-9【mark.html】所示创建带有高亮显示的某些单词的文本
(为了节省空间，清单中的文本已被缩写，并使用了内部样式表。)
`<!doctype html>
A demonstration of <mark>
Which browser should we design for?
<图>标记
标签可以用来将标题连接到插图、图表、照片和代码清单。无论元素在网页上的位置如何，标题都固定在元素上。有关使用此元素的完整解释和示例，请参见:-
[www.w3.org/TR/html5-author/the-figure-element.html](http://www.w3.org/TR/html5-author/the-figure-element.html)
图 1-10 展示了新的< figure>标签如何为照片提供标题。
图 1-10 。新的<图>元素的例子。标题包含在白色边框内，是<图形>块元素的一个组成部分。
在图 1-10 的中，<figure>标签将一幅图像和它的描述性文本组合成一个单独的块元素。像任何其他块，它可以被赋予边界，它可以被定位。无论放置在哪里，描述性文本(标题)都会与图像在一起。如果标记中包含条件 JavaScript，则该元素在所有浏览器中都有效。在清单 1-10 中，你会看到实际的标题包含在一个<figcaption>标签中，这是<figure>标签的同伴标签。为了节省空间，在清单 1-10 中使用了一个内部样式表。
清单 1-10。使用<figure>标签将标题链接到元素的 HTML 标记(figure.html)
`<!doctype html>
**标签
标签<hgroup> </hgroup>是两个或更多标题(h1、h2、h3、h4、h5和h6)的容器。它表明标题是密切相关的，所以它将被用来把标题与副标题、标题和副标题组合在一起。在<hgroup>标签发布之前，对标题进行分组会导致文档轮廓出现问题；这个问题被称为幻象节点。使用<hgroup>可以避免这个问题，因为它将两个标题合并到一个节点中。<hgroup>标签只能包含标题。下面是一个例子:
`
I put our holiday dates and address on a social network
An idiot’s tale
We returned to a ransacked house, even the furniture was taken.
Your friend,
Loopy Lou
<article> </article>标签中。
新的 HTML5 表单控件
HTML5 对表单的推荐已经接近完成。HTML5 表单并不简单，因为其他因素会影响它们。防黑客的表单需要 PHP、ASP.NET 或 Perl 语言的处理程序。处理程序必须匹配新的 HTML5 表单标签。除非非常小心地将新的 HTML5 表单元素与屏幕阅读器的需求相集成，否则可访问性将会受到影响。在一段时间内，IE 条件和替代样式表将不得不被使用，以便使用 IE 7 或 IE 8 的冲浪者可以看到和使用 HTML5 表单。在撰写本文时，IE 9 不支持 HTML5 表单。IE 10 将很可能支持当前的表单以及 HTML5 表单。
只有 Opera 9.5+支持所有编写时的新表单元素。
Mozilla Firefox 5+支持大多数 HTML5 表单元素。Safari 支持除自动完成之外的大多数表单元素。Chrome 支持除自动完成和列表之外的所有元素。
要查看当前哪些浏览器支持表单，请访问:-
[www.w3schools.com/html5/html5_form_input_types.asp](http://www.w3schools.com/html5/html5_form_input_types.asp)。
新的表单输入控件是向后兼容的，因此您可以在诸如电子邮件地址之类的字段中使用新的输入。还不支持<input type=``email``>的浏览器会把它当<input type=``text``>来读。
注意即使 HTML5 内置了格式检查，机器人和罪犯仍然可以输入可疑的网址。因此，对于某些字段，您仍然需要防黑客表单处理程序的保护。
新的 HTML5 输入控件列表包括以下内容:
date (such as date of birth) datetime search email (e-mail address) datetime-local time number (a number) color url tel (a telephone number) range week month
左栏中的前四个输入控件可能是最有用的。右边栏中的url输入控件非常危险，因为它允许用户插入一个链接到恶意网站的地址。我从来没有包括一个网址字段。如果用户希望我访问一个 URL，因为没有提供 URL 字段，他们会给我发电子邮件请求允许发送一个 URL；机器人做不到这一点。
HTML5 表单控件还具有以下新属性:
`autofocus autofocus="autofocus"
required required="required"
maxlength maxlength="25"`
Opera 有一个演示页面，给出了新输入最终可能如何工作的指示。在 Opera 9.5 或更高版本中打开演示，并在以下位置试用:-
[devfiles.myopera.com/articles/4582/html5-forms-example.html](http://devfiles.myopera.com/articles/4582/html5-forms-example.html)。
这些表单在不同的浏览器中有不同的外观，但是它们都以相同的方式运行。歌剧中的出场如图图 1-11 、图 1-12 、图 1-13 所示。
图 1-11。Opera html 5 表单演示展示了点击提交按钮后会发生什么。
在这种情况下，我没有填写必要的字段。因此，该字段被红色双边框包围，并出现一个下拉警告。
在 Opera 中，必填字段有红色边框，如图图 1-12 所示。
如果字段填写正确，会出现绿色边框。
图 1-12。在这种情况下，电子邮件地址包含一个非法空格。
虽然在这个 Opera 演示中没有显示，但其他 Opera 演示显示，在某些字段中，当单击字段时会出现一个下拉选项。其他字段有一个颜色选择器或一个值范围的滑块。点击日期字段，调出日历选择日期，如图图 1-13 所示。
图 1-13。当点击出生日期字段时，会弹出一个日历，允许用户选择出生日期。
正如我在本节开始时所说的，Opera 已经制作了一个演示页面和一些指南，描述了 Opera 浏览器如何应用 HTML5 表单元素。清单 1-13 摘自歌剧指南。创建如图图 1-11 所示的界面，并产生如图图 1-11 至图 1-13 所示的错误信息和下拉列表。
清单 1-13。摘自 Opera 演示页面和指南。在这种情况下，只列出主要元素(new _ form _ features _ in-html 5 . html)。
`
HTML5 forms example
This is an example for the article
` ` ** `移动设备
HTML5 表单控件将改善没有合适键盘的触摸屏移动设备的输入。例如，日期输入控件会弹出一个日历，这样用户可以选择一个日期，以避免从触摸屏上键入日期的繁琐。当电子邮件字段成为焦点时，触摸屏键盘上会出现一个@符号。
SVG 图像
如此多的 HTML5 手册提到 SVG(可缩放矢量图形)图像，以至于你认为这是一个新特性也情有可原。它们不是新的，SVG 图像从 1999 年就已经存在了，现在随着新浏览器的发布，它们正在复兴。此外，HTML5 新元素列表中还包含了一个<svg>标签。可以内联使用；以前，它总是一个棘手的插件——通常需要一个插件才能正常显示。现在它是 HTML5 的原生部分，因此，我在本章中包含了 SVG 以匹配其他 HTML5 资源。除了 IE 7 和 IE 8，所有最新的浏览器都支持 SVG。
SVG 图像可以压缩，顾名思义，它们可以缩放；无论是在手持设备上还是在桌面屏幕上放大到任何尺寸，它们看起来都一样清晰锐利。图像只是图画。它们是通过从点到点的绘制来构建的，不涉及任何像素。
SVG 文件完全是文本。下面是一个彩色方块的代码 ( mysvg.svg)，如图图 1-14 。
<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full"  xmlns=http://www.w3.org/2000/svg width="100px" height="100px"> <rect x="10" y="10" fill="red" width="100px" height="100px" /> </svg> 
图 1-14。一个 SVG 形象
文件必须保存为。 svg文件。我已经把它作为mysvg.svg保存在了伙伴网站上。
只需右击mysvg.svg并在浏览器中打开(但不是 Safari、IE 7 或 IE 8)就可以看到红色方块。双击文件不会打开它。Adobe Photoshop 和 GIMP (GNU 图像处理程序)可以导入和显示 SVG 图像。该文件不能被视为正常图像；比如这个不行，<img="img/mysvg.svg">。
目前 IE 9、Mozilla Firefox 和 Chrome 都支持类似清单 1-14 的内联 SVG 代码(也就是不需要<object>)。
清单 1-14a。【在现代浏览器中使用内嵌的 SVG 图像(svg-inline-square.html)
`<!doctype html>
像<object>这样的项目被称为嵌入元素，它们将文件拖入页面并显示它们。<object>标签可以用来将 SVG 文件嵌入到页面中，如清单 1-14b 所示:
清单 1-14b。【svg-object-square.html】使用<对象>为现代浏览器嵌入 SVG 图像
`<!doctype html>
注意SVG 的 MIME 类型是**type="image/svg+xml"**。
使用 SVG 可以创建各种形状，如三角形、椭圆形、圆角矩形和圆形。我们这里只有展示 SVG 循环的空间。
图 1-15。 SVG 可以画圆
圆的 SVG 文件可以保存如下:
<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"></circle> </svg>
我将该文件保存在伙伴站点中，命名为 svg-object-circle.svg
清单 1-15a 使用内嵌技术在 HTML5 页面中嵌入一个 SVG 圆。
清单 1-15a。【svg-inline-circle.html 创建一个带有 SVG 内嵌圆形图像的页面
`<!doctype html>
SVG
`在清单 1-15a 中，项目 version="1.1" 在现代浏览器中似乎是可选的，只需使用< svg >就足够了。
清单 1-15b 展示了在 HTML5 页面中嵌入 SVG 圆的<object>方法。
清单 1-15b。【svg-object-circle.html】使用<object>嵌入一个圆的 SVG 图像
`<!doctype html>
图 1-14 中所示的彩色方块完全由文本构成；.svg文件只作为代码存在于页面上。如果 SVG 文件很大，最好保存为.svg文件，用<object>导入。否则页面将会充满难以理解的代码，使工作变得困难。
SVG 不适合复杂的图像，如照片，但它可以用于复杂的绘图。图 1-16 和 1-17 是众所周知的蝴蝶和老虎的 SVG 图像的拙劣替代品。一定要在 www.croczilla.com看实物
图 1-16。蝴蝶
图 1-17。老虎
可从
[croczilla.com/bits_and_pieces/svg/samples/](http://croczilla.com/bits_and_pieces/svg/samples/)下载适用于图 1-16 和图 1-17 的 SVG 图像访问该网站，查看组成每张图片的大量代码。可以使用
[inkscape.en.softonic.com](http://inkscape.en.softonic.com)中的免费程序将位图图像转换为 SVG 文件
可以为文本创建 SVG 图像
图 1-18 是创建为 SVG 图像的轮廓文本。
图 1-18 。创建为 SVG 图像的文本
这种技术只适用于大字体，不适用于 IE 6、IE 7 或 IE 8。
下一段代码创建如图 1-18(outine-text . SVG)所示的文本
<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full"  width="500px" height="60px"> <text x="20" y="50" style="font-family:times new roman; font-size:36pt;  font-weight:bold; stroke:black; fill:white; ">Tour Devon</text> </svg>
前面的代码片段生成了图像，但是如何将它合并到 HTML5 页面中呢？清单 1-18 显示了这是如何实现的
清单 1-18。【svg-text-embed-html5.html】将一些文本的 SVG 图像嵌入到网页中
`<!doctype html>
<明细>和<汇总>标签
<details>和<summary>标签提供了隐藏/显示技术，但是在编写本文时只有 Chrome 支持它们。当它最终被完全支持时，你将能够显示一个标题页，当点击时，可以展开显示详细信息。元素对于扩展版权或类似内容的细节也很有用。同时，本书第十三章的中提供了 JavaScript 版本。歌剧显示如图图 1-19 和图 1-20 所示。
图 1-19。这可能是填满页面的一系列标题。为了清楚起见，仅示出了一个。
接下来的图 1-20 显示了点击标题后的扩展文本。
图 1-20。这显示了点击标题旁边的箭头的结果。
< 】 tag must be the first child of the 】 tag, as shown in 清单 1-18 。
清单 1-19。【summary-details-tags.html】创建一个标题，点击后显示扩展文本()**
`<!doctype html>
A COMPUTER FOR £15?
The UK not for profit organization Raspberry Pi is hoping to sell
a computer for 
£15 (or less if the take up is good).
It is no bigger than a USB connector, it 
has an ARM chipset,
a wi-fi chip, a version of the BASIC programming language
and 
it is preloaded with the Linux operating system. The primary purpose
for this ` `innovation is as a teaching tool for UK schools where children
are bored stiff with 
The current curriculum. You can read more about it at 
http://www.wired.co.uk/news/archive//2011-01/20/raspberry-pi-computer
API(应用编程接口)
API 通常与 HTML5 分组；然而，它们实际上是单独的 W3C 推荐标准。绝大多数网站所有者出售或推广一些东西。他们当然不希望用户破坏他们精心制作的网站。因此，在这个时候，客户不太可能在他们的站点上要求 API。以下是一些 API 和简要定义的列表:
Canvas :在网页上提供一个矩形的绘图面。使用 JavaScript，您可以绘制、涂色和填充该区域。目前，它主要用于游戏和图形。
ContentEditable :允许用户在网页的某一部分选择和编辑项目。
拖放:用户可以控制屏幕上任何元素的拖放。如需现场演示，请参见
[html5demos.com/drag](http://html5demos..com/drag)。更多信息，请参见[html5doctor.com/native-drag-and-drop](http://html5doctor.com/native-drag-and-drop)。地理位置:告诉你一个用户的地理位置(在用户允许的情况下)，并且可以跟踪用户是否已经移动。它可以与地图互动来显示位置。反过来，用户可以问你是否允许他知道你的位置。如果你同意，会出现一张地图，上面有一个指示器指向你的位置(或者它会显示纬度和经度)。
微数据:允许在 HTML 文档中嵌入机器可读的数据，以便浏览器和搜索引擎可以从页面中提取数据。
离线和清单:创建和管理本地缓存，以便您可以离线工作。文件、CSS 和图像存储在清单中，以便可以脱机查看网站。
网络存储:这是一种更强大的 cookie。它可以在客户端存储大量数据。它可以存储高达 5MB 的数据，而一个 cookie 被限制在 4KB 左右。
Web 工作器 :允许一个 JavaScript 操作(或多个操作)在后台工作，不干扰用户的浏览。
提示如果您希望了解更多关于新 API 的信息，请尝试以下资源: HTML5:启动并运行，作者 Mark Pilgrim (O'Reilly Media，2010)；彼得·吕贝尔斯、布莱恩·艾伯斯和弗兰克·萨利姆的《专业 HTML5 编程》( Apress，2011)；
Bruce Lawson 和 Remy Sharp 的 HTML5 介绍(新骑手出版社，2010)；Matthew David 著《HTML5:设计富互联网应用》(焦点出版社，2010 年)。
迁移到 HTML5 的策略
网页设计者可以开始尝试新的标签，一次一页。开始使用 HTML5 和它的语义标签的最佳时间是当你在一个当前的网站上添加一个新的页面，或者当你开始一个新的网站的时候。添加新页面时，您只需将该特定页面标记为 html 5——您可以将其余页面标记为 HTML4 或 XHTML。但是，您还需要将该页面链接到修改过的 CSS 表单。如果你在团队中工作，这不是一个合适的策略(除非你喜欢制造混乱)。新的<form>标签不会完全防黑客攻击，一些表单标签仍然需要一个带有过滤器的表单处理程序。在第十一章和第十四章中再次提到了新的 HTML5 表单元素。
总结
本章向你介绍了 HTML4 和 HTML5 的区别。你会明白，IE 7 和 IE 8 不能理解语义标签，除非在标记中包含一些 JavaScript。我希望这篇 HTML5 的介绍已经激发了你开始探索 HTML5 提供的令人兴奋的可能性。在阅读本书的其余部分时，以下规则会很有帮助:
- If an HTML5 page contains one or more semantic tags, use Remy Sharp JavaScript fragments in the page. This will enable users of IE 7 and IE 8 to see the pages you want to see.
- If the page contains one or more semantic tags, use display block settings to support IE 7 and IE 8 in linked CSS forms, as follows:
header,nav,article,section,footer { display:block; }- If the page does not contain semantic tags, Internet Explorer 7 and 8 do not need JavaScript code snippets.
注html 5<视频>和<音频>标签在第六章中有所涉及。*
二、翻转图片画廊
贺卡艺术家或零售商可能会要求您创建翻转图片库。这些画廊也非常适合几乎任何项目，包括有多张产品图片的零售商、有菜单的餐馆、有活动图片的非营利组织等等。当光标悬停在缩略图上时，翻转效果起作用，这导致弹出图像的放大版本。本章演示了如何使用 CSS 实现这一点，而无需借助表格或复杂的脚本。
我非常感谢肖像艺术家安·罗·琼斯允许我使用我为她创建的网站上的图片。所描绘的卡片是基于她出色的绘画。本章中的所有示例都使用了这些图像。
在[www.annroejones-artist.co.uk](http://www.annroejones-artist.co.uk) 访问她的网站。点击菜单中的“卡片”按钮，查看滚动图库。
对技术的介绍
列或行的数量可能会有所不同，照片大小也不可能总是一致的，有些可能会更宽或更短。因此，不可能有一个通用的模板。您可以采用下面给出的解决方案，或者调整缩略图的大小和/或将其裁剪为统一的大小。
为每个图像创建两个版本，一个缩略图和一个大图。我以这种方式标记了对alithumb.jpg和alibig.jpg。缩略图的每一列都是通过一个无序列表实现的。每个列表元素都有一个目标链接<a>…</a>，CSS 样式表指示该链接对悬停在其缩略图上的光标做出响应。
使用 CSS 创建从每个缩略图到其大图的链接，如下所示:
`
需要注意的一些事项包括:
- Two lines containing images are contained in the
<a>tag. This is to enable them to hover over the thumbnail in response to the cursor.- The row of the large graph contains
class="hid"and an empty alt, namelyalt=" ".- CSS indicates that any
class=hidelement remains hidden until the cursor hovers over the thumbnail.- The target columns in the tag will be col-1, col-2, col-3, etc., so that CSS can locate them on the page.
图像尺寸和格式
如果所有的缩略图具有相同的格式和尺寸，并且所有的放大图像具有相同的格式和尺寸，则该技术是最容易的。
然而，生活从来没有那么简单。您可能有一些横向格式的图像，一些纵向格式的图像，一些方形格式的图像。如果您需要使用不同的格式和尺寸，请参见本章后面与图 2-4 和图 2-5 相关的说明。
一个单列的画廊
图 2-1 和 2-2 显示了一个单列廊道。
图 2-1 。一栏三个缩略图
图 2-2。悬停在猫的上方
本例中的清单 2-1a 创建了一列缩略图。每个缩略图都是一个到大图的实时链接。当光标滚动到缩略图上时，会出现较大的图像。它出现在同一页面上，并位于标记为其保留的位置。
清单 2-1a。【gallery-one-col.html】创建一列缩略图
`<!doctype html>
注意大图像不需要“alt”，因为当光标悬停在图像上时，图像会消失。
在 CSS 清单 2-1b 中，MouseOut状态代码的第一个块在页面上保留了一个空间，该空间将被展开的图像占据，但是展开的图像被visibility:hidden;属性对用户隐藏。当鼠标悬停在一个缩略图上时，第二个MouseOver状态块中的 CSS 标记会显示扩展的图像。
清单 2-1b。清单 2-1a 的 CSS 样式表(gallery-one-col.css
`/reset browsers to give cross browser uniformity/
html, body, p, lu, li { margin:0; padding:0;
}
img { border:0;
}
/* Set general thumbnail styles /
/place the column on the page*/
col-1 { position: absolute; top: 0; left: 0;
}
/remove bullets from the list elements/
li { margin: 10px; list-style-type:none;
}
/* MouseOut state (default) - create a space for the larger images and hide them*/
col-1 a img.hid { width: 260px; height:390px; position:
absolute; top: 10px; left: 140px; visibility: hidden;
}
/* MouseOver state (hover)- reveal larger image */
col-1 a:hover { background: white;
}
col-1 a:hover img.hid { visibility:visible;
}`
一个两列画廊
通过添加第二列并为其插入适当的翻转代码，我们可以创建一个两列图库，如图 2-3 所示。
图 2-3 。两列画廊。光标悬停在右上角的缩略图上。
图 2-3 还有一个特点，放大的图像有一些描述性文字。为此，请在您的图像处理软件(如 Adobe Photoshop、Corel PaintShop Pro 或 GIMP)中为放大的图像调整画布的大小。在图像底部添加大约 20 到 30 像素的白色画布区域。使用图像处理软件添加文本，并记下新的图像高度。
添加画布，为较大的图像提供一致的纵横比。在本例中，所有放大的图像都是 260 像素宽。给所有放大的图像添加画布，使它们具有相同的高度；这将确保外观的一致性，也就是说，没有一个放大的版本会看起来被压扁或拉伸。
在这里使用新的<figure> <figcaption>标记似乎是合适的，但遗憾的是，它们失败了，因为标题被附加到缩略图上，而不是大图像上。如果您尝试使用下面的标记片段，用<figure> <figcaption>包围大图像，您就会明白我的意思了:
<li><a href="#"><img src = "img/take-cardthumb.jpg" title="Take a card"  alt="Take a card"> <figure> <img class = "hid" src = "img/take-cardbig.jpg" alt=""> <figcaption>Take a card</figcaption> </figure></a> </li>
清单 2-3a 及其 CSS 样式表清单 2-3b 将创建一个包含两列的翻转图库。
清单 2-3a。创建双栏翻转画廊(gallery-2col.html)
`<!doctype html>
![Ali](“img/alithumb.jpg" "Ali")
![](“img/alibig.jpg")
- 
- 
清单 2-3b 将缩略图呈现为两列，并为展开的图像创建一个空间。
清单 2-3b。清单 2-3a (gallery-2col.css) 的 CSS 样式表
`/reset browsers to give cross browser uniformity/
html, body, p, lu, li {margin:0; padding:0;
}
/set images to have no borders/
img { border:0;
}
/place the column on the page/
col-1 { position: absolute; top: 0; left: 0; width:85px;
}
/* Set general thumbnail styles and remove bullets from the list elements/
li { margin: 5px; list-style-type:none;
}
/ MouseOut state (default) - create and position a space for the larger images
and hide them*/
col-1 a img.hid { width: 260px; height:390px;
position: absolute; top: 10px; left: 250px; visibility: hidden;
} /* MouseOver state (hover)- reveal larger picture */
col-1 a:hover { background: white;
}
col-1 a:hover img.hid { visibility:visible;
}
/--THE 2ND COLUMN STARTS 85 PIXELS FURTHER TO THE RIGHT ---/
col-2 { position: absolute; top: 0; left: 85px; width:85px;
}
li { margin: 5px; list-style-type:none;
}
/* MouseOut state (default) - hide larger picture */
col-2 a img.hid { width: 260px; height:390px;
position: absolute; top: 10px; left: 155px; margin-left:10px; visibility: hidden;
}
/* MouseOver state (hover)- reveal larger picture */
col-2 a:hover { background: white;
}
col-2 a:hover img.hid { visibility:visible;
}`
混合了三列的大小和格式
如果图像都是纵向格式，或者都是横向格式，或者都是方形的，那么缩略图应该以每行相同的高度创建，以给出整齐的行。这样你会有整齐的缩略图行和列，最少的标记，很少的 CSS 麻烦。
然而，每个行的高度可以变化。缩略图的每一列可能会有不同的宽度，但如果宽度变化不是太大，您可能会有一个可接受的显示。列宽可以变化，以适应缩略图宽度几乎相同的缩略图图像组。
如果某些缩略图具有不同的高度，请对它们进行排列，以便每行包含高度相似的图像。例如，如果你有十二个缩略图，其中四个的高度为 80 像素，把这四个放在一行。如果四个缩略图的高度为 90 像素，将这四个放在下一行。如果最后四个缩略图的高度为 95 像素，将它们放在最后一行。这样，你将创建整洁的缩略图行。
不同格式
然而，现实生活从来都不容易:图像有不同的格式，比如肖像、风景和正方形。如果你的缩略图有多种格式，把人像格式放在一栏，风景格式放在另一栏，s 方形格式放在另一栏(如图图 2-4 )。尝试将缩略图高度与行高相匹配，如前一段所述。对于图像的扩展版本，格式(纵向、横向和方形)需要区别对待，以便扩展的图像不会由于将各种格式压缩成一个不合适的尺寸而失真。
图 2-4。三个纵向缩略图、三个横向缩略图和两个方形缩略图。光标悬停在顶部横向缩略图上，显示横向格式的大版本。
图 2-4 展示了形状和尺寸可以混合。每行的缩略图高度略有不同:最上面一行的所有缩略图高度为 103 像素，第二行的缩略图高度为 91 像素，最下面一行的缩略图高度均为 95 像素。
我把第一列底部的缩略图做得比上面的两个略宽一些，以证明你不需要对宽度过分挑剔。
创建了三种格式的扩展图像，以匹配缩略图的三种格式变化(纵向、横向和方形)。提供了三种不同的列宽来采用三种格式。
在第三列中，顶部缩略图是 103 × 103 像素的正方形，第二个缩略图是 91 × 91 像素的正方形。缩略图的最后一行是展示奇数大小的最佳位置，因为读者已经习惯了不规则的右边。将奇数大小放在最后一列可以确保所有其他缩略图之间的间距保持合理的一致。
图 2-5 显示与图 2-4 相同的页面，但是光标悬停在正方形图像上。为扩展图像保留的空间必须能够容纳各种图像格式。
图 2-5。光标现在停留在第三列第二行上，显示一个更大的正方形图像。第一列的大图将出现在图 2-1 和图 2-2 中。
在清单 2-5a 中，对应于图 2-4 和图 2-5 ，第三列底部故意省略了一个缩略图。这表明您不需要用缩略图填充每一列；例如，你的客户可能为她的画廊提供了数量惊人的图片。
清单 2-5a。【gallery-3col-mix.html】用翻转创建三列混合格式图像(??)
`<!doctype html>
- ` `
清单 2-5b 提供了一个三栏图库的 CSS 表示信息
清单 2-5b。清单 2-5a(gallery-3 col-mix . CSS)的 CSS 样式表
`/set images to have no borders/
img { border:none;
}
/place the first column on the page/
col-1 { position: absolute; top: 0; left: 0; width:85px;
}
/remove bullets from the list elements/
li { margin: 5px; list-style-type:none;
}
/* MouseOut state (default) - create and position a space for the larger images and
hide them*/
col-1 a img.hid { width: 250px; height:340px; position: absolute; top: 10px; left:
400px; visibility: hidden;
}
/* MouseOver state (hover)- reveal larger picture */
col-1 a:hover { background: white;
}
col-1 a:hover img.hid { visibility:visible;
}
/----------------------------------------------------/
/* Set 2nd column of thumbnails 85px further over to right*/
col-2 { position: absolute; top: 0; left: 85px; width:135px;
}
li { margin: 5px; list-style-type:none;
} /* MouseOut state (default) - hide larger picture */
col-2 a img.hid { width: 350px; height:265px; position: absolute; top: 10px; left:
315px; margin-left:0; visibility: hidden;
}
/* MouseOver state (hover)- reveal larger picture */
col-2 a:hover { background: white;
}
col-2 a:hover img.hid { visibility:visible;
}
/----------------------------------------------------/
/* Set 3rd column of thumbnails 170px further over to right*/
col-3 { position: absolute; top: 0; left: 230px; width:108px;
}
li { margin: 5px; list-style-type:none;
}
/* MouseOut state (default) - hide larger picture */
col-3 a img.hid { width: 260px; height:260px; position: absolute; top: 10px; left:
175px; margin-left:0; visibility: hidden;
}
/* MouseOver state (hover)- reveal larger picture */
col-3 a:hover { background: white;
}
col-3 a:hover img.hid { visibility:visible;
}`
更多列和更多行
增加列和行的数量只是添加相似的 HTML 代码块和匹配的 CSS 代码块的问题。定位列和隐藏放大的数学变得更加复杂，但是如果你的数学技能很低，如果你有一个好的 WYSIWYG 编辑器，通过试错定位并不太困难。
将图片库放在真实的网页中
图 2-6 显示了一个实际的 HTML5 网页中的三栏图库。
图 2-6。具有三列和三行缩略图的图库的网页。光标悬停在第二行的第一个图像上。
在这个 HTML5 标记中使用了三个语义标签:<header>、<nav>和<footer>。Remy Sharp JavaScript 片段用于确保页面在 IE 7 和 IE 8 中正确显示。此外，在 IE 7 中使用条件来定位画廊块。你会在图 2-6 中注意到，我已经展示了新的 HTML5 验证标识。我已经将我的代码片段合并到清单中，以使用户能够检查页面验证是否真实。关于 HTML5 验证的进一步讨论，参见第十八章。
清单 2-6a 是在图 2-6 中显示的翻转三栏图库的 HTLM 标记。
清单 2-6a。【gallery-page-validated.html 创建带有 HTML5 验证标志的三列翻转图库
`<!doctype html>
A full page roll-over gallery of greetings cards
Hover the mouse over a small picture to see an enlarged version
a href="http://jigsaw.w3.org/css-validator/">
Markup Validated by the World Wide Web Consortium
Web Design by Fred Bloggs
-
` `
清单 2-6b 提供了一个真实页面中 3 列图库集的 CSS 表示说明。
清单 2-6b。清单的 CSS 样式表 2-6a(gallery-page . CSS)
`/set attributes for consistent appearance in all browsers/
html, body, p, ul, li, h1, h2 { margin:0; padding:0;
}
/set images to have no borders/
img { border:0;
}
/add display attributes for the semantic tags/
header, footer, section, article, nav { display:block;
}
/SET FONTS/
span.small { font-size:small;
}
h1 { font-size:x-large; font-family:"times new roman"; text-align:center;
}
h2 {font-size:large; font-family:"times new roman"; text-align:center;
}
/PAGE LAYOUT/
body {margin:auto; width:970px;
}
header { width:970px;
}
nav { float:left; margin-left:10px; width:115px;
}
nav ul { margin-left:0; border:0; width:115px;
}
/set far right column for ads/
rightcol { width:150px; float:right; text-align:center;
}
rightcol p.advert {font-size:small; margin-top:190px;
}
/set middle column for main content/
midcol { margin-left:135px; margin-right:155px;
}
/set gallery block position/
gallery-block { position:relative; left: 30px; top:10px;
}
/set footer/
footer { clear:both; color:black; text-align:center; width:970px;
}
.clear { clear:both;
} /set menu buttons/
li.btn a { display:block; background-color :#66CCFF; color:black; font-weight:bold;
padding:4px; margin-left:0; text-align:center; list-style-type:none;
text-decoration:none; width:110px;
}
li.btn a:hover { background-color:blue; color:white;
}
li.btn { width:110px;
}
/SET THUMBNAIL GALLERY BLOCK/
/* Set general thumbnail styles */
col-1 { position: absolute; top: 0; left: 0; width:85px;
}
/place the first column on the page/
li { margin: 5px; list-style-type:none;
}
/remove bullets from the un-ordered list elements and create the
MouseOut state (default) - create and position a space for the larger images and
hide them/
col-1 a img.hid { width: 260px; height:390px; position:
absolute; top: 10px; left: 330px; visibility: hidden;
}
/* MouseOver state (hover)- this reveals larger picture */
col-1 a:hover
col-1 a:hover img.hid { visibility:visible;
}
/----------------------------------------------------/
/* set 2nd column of thumbnails 85px further over to right*/
col-2 { position: absolute; top: 0; left: 85px; width:85px;
}
li { margin: 5px; list-style-type:none;
}
/* MouseOut state (default) - hide larger picture */
col-2 a img.hid { width: 260px; height:390px;
position: absolute; top: 10px; left: 245px; margin-left:0;visibility: hidden;
}
/* MouseOver state (hover)- reveal larger picture */
col-2 a:hover
col-2 a:hover img.hid
/----------------------------------------------------/
/* set 3rd column of thumbnails 170px further over to right*/
col-3
li { margin: 5px; list-style-type:none;
}
/* MouseOut state (default) - hide larger picture */
col-3 a img.hid { width: 260px; height:390px;
position: absolute; top: 10px; left: 155px; margin-left:0; visibility: hidden;
}
/* MouseOver state (hover)- reveal larger picture */
col-3a:hover { background: white;
}
col-3 a:hover img.hid { visibility:visible;
}`
注 position:absolute;用于画廊内。但是要在页面上定位图库块，就必须对图库块本身使用position:relative;，否则图库块会在大屏幕和大分辨率上与菜单重叠。
清单 2-6c。用于清单 2-6a 的条件 CSS 支持浏览器 IE 7 (gallery-ie7.css)
`/set the gallery block 10px further to the right/
gallery-block { position:absolute; left: 165px; top:50px;
}`
提示 Lightbox 是创建画廊的另一种方法。如果你相当熟练地使用 JavaScript，访问[www.lokeshdhakar.com/projects/lightbox2/](http://www.lokeshdhakar.com/projects/lightbox2/)你会发现一个演示，完整的代码和详细的说明。您还可以下载各种脚本。不幸的是，弹出图片覆盖了缩略图，但是提供了一些控件，使用户能够移动到下一个缩略图，就像幻灯片放映一样。按下 Escape 键，可以返回缩略图。
总结
本章描述的翻转效果优于从缩略图库中放大图片的旧方法。旧的方法是点击一张图片，让你进入一个新的页面——如果你有 12 个缩略图，你就必须创建 12 个页面。在本章中，您探索了一个只需要一个页面就可以显示缩略图和放大图像的翻转图库。这种方法还具有保持缩略图可见的优点，不需要额外的控件或按键。
讨论了缩略图在列中的位置，以及如何适应不同的图像形状和大小。还演示了创建翻转效果的过程。其他展示照片的方式，包括拼贴画和带说明的画廊，在第九章中有描述。
在下一章，你将会发现使用 CSS 渐变来设计背景的视觉可能性。您还将学习如何创建多个背景图像、透明背景、叠加图像和叠加文本。
三、背景
本章给出了使用各种 CSS 背景技术的流行网页增强的工作示例。涵盖了许多类型的背景，包括图像、渐变、多重背景、翻转菜单按钮和水印。我们还将看看如何使用新的 CSS3 背景属性创建多个背景。
概述
CSS 提供了一系列的背景来增强网页。自<body bgcolor=、#00ffff、>时代以来，网络已经走过了漫长的道路。例如，背景可以是:
- Gradient, solid color or image
- Accurate positioning on the page
- Or repeat (tile) vertically to fill a column, a row or a page.
- Covered with text and multiple images
- Set to allow the button background appearance to change in the flip menu (see Chapter 4 for more information)
- Watermarks (these should be used with care; They can make the superimposed text difficult to read)
注意如果一个元素没有背景属性，它将默认为
background-color: transparent; position: top left; background-repeat: repeat;
创建渐变背景
当渐变背景从页面顶部的颜色渐变为底部的白色时，效果最佳。然而，如果网站有一个纯色的背景(比如说，奶油色)，可以在上面叠加一个背景渐变，渐变应该是奶油色。使用 CSS，渐变可以扩展到任何屏幕宽度。
注本章后面会描述几种背景，但是关于 CSS3 背景渐变的信息请参见第五章。
大多数绘画程序(如 GIMP、Adobe Photoshop 和 Corel PaintShop Pro)都可以为彩色渐变创建图像。免费的在线 ColorZilla 渐变生成器生成 CSS 代码供您复制和粘贴。如果你勾选了标有 IE 9 支持的框，它提供了 IE9 条件语句的代码。您需要使用 Mozilla Firefox、Safari 或 Chrome 来访问这个在线生成器，可以在
[www.colorzilla.com/gradient-editor/](http://www.colorzilla.com/gradient-editor/)
ColorZilla 生成器不提供渐变图像；它提供了在选定的 HTML 元素中生成渐变的 CSS 代码。
透明梯度也是可能的；这些可以使用 ColorZilla 在线渐变生成器创建。将光标停留在小尖滑块上，以确定每个滑块的作用。要在 ColorZilla 中创建透明渐变，请点按并调整“预置”部分正下方水平栏上的“不透明度停止”滑块。ColorZilla 界面如图 3-1 所示。
您可以通过在 ColorZilla 中创建一些渐变并保存代码以生成打印输出来创建一个有用的资源。通过检查打印的代码，您可以学习如何生成自己生成的渐变。
图 3-1。ColorZilla 接口。在移动滑块之前,“停止”面板的内容是灰色的。
使用渐变图像
渐变图像适用于所有浏览器，并且可以在大多数画图程序中创建图像。图 3-1 中使用的渐变图像green-grad.jpg宽度为 3 像素，高度为 600 像素。颜色从上到下很快变成白色，因此即使在很短的网页(如主页)上，褪色也很明显。渐变图像可以保存为.gif，。png还是一个.jpg档。CSS 标记repeat-x从左到右展开渐变图像；x 轴指的是水平轴，就像在笛卡尔坐标图上一样。
body { background-color: #FFF; background-image: url(img/green-grad.jpg);  background-repeat: repeat-x; margin:auto; }
这可以用 CSS 简写如下:
body { background: #FFF url(img/green-grad.jpg) repeat-x; margin:auto; }
背景颜色设置为白色(#FFF;，绿色渐变为白色，如图 3-2 中所示。
图 3-2。带有渐变背景的页面
图 3-2 的列表展示了水平重复的 3 像素宽渐变图像的使用。这里使用的白色边框表示我们最终将插入背景图像和一些文本的位置。
下载示例
如果您从本书的网页上下载背景示例，请注意许多示例都有外部样式表。一定要下载样式表。所有的例子都适用于所有流行的浏览器。
注意将 JavaScript 文件html5.js添加到包含以下任一项目的文件夹中。
清单 3-2 产生了图 3-2 中描述的渐变和白框标题。
清单 3-2。【background-ex1.html】创建渐变背景和框架标题
`<!doctype html>
清单 3-2b。【HTML 的 CSS 标记清单 3-2a(gradient-style . CSS)
body { background:#FFF url(img/green-grad.jpg) repeat-x; margin:auto; } header, nav, footer, article, section { display:block; } header {width:920px; height:160px; border:10px solid white ; margin:20px auto; }
背景标题图像
图 3-3 显示了作为背景图像的标题横幅。
图 3-3。背景图像已添加至页眉。
图 3-3 ( background-ex2.html)的 HTML 与图 3-2 的 HTML 相同，除了它链接到一个新的样式表。新的样式表插入一个背景图像，如清单 3-3 中的所示。
清单 3-3。新样式表的 CSS(gradient-pic . CSS)
body, header { margin:0; padding:0; border:0; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } body { margin:auto; background:url(img/green-grad.jpg) repeat-x; } header {width:920px; height:180px; padding:0; border:10px white solid;  **background: url(img/header3.jpg);** margin:10px auto; }
粗体代码将图像添加到标题中。图像header3.jpg被创建得比标题更宽，因为我们可能希望以后使用百分比更改为液体布局。固定、流动和半流动布局的完整讨论可在第十二章中找到。
图像的高度与标题的高度相同，在本例中，图像为 1024 × 180 像素。这一次我们不希望标题图像在整个标题容器中重复平铺，所以 CSS 标记使用了background-repeat:no-repeat;或简写；background: url(img/header3.jpg) no-repeat;。
你可能不希望页眉周围有边框，如图图 3-4 所示。
图 3-4。白色边框移除
要删除边框，只需删除 CSS 标记 border:10px solid white; 。
用文本覆盖背景图像
白色边框用于下一个示例，如图 3-5 中的所示。
图 3-5 。文本已经添加到背景图像中，并通过 CSS 定位。
在清单 3.5a 中，文本被添加到标题中，并通过 CSS 精确定位在标题图像上。CSS 样式表还设置文本的大小、格式和颜色。
清单 3-5a。【background-ex4.html】在页眉背景上添加和定位文本
添加的文本在清单中以粗体显示。
`<!doctype html>
Devon's Rural Retreats
**清单 3-5b。清单 3-5a 的 CSS 样式表 (grad-pic-text.css)
body, header, #content, { margin:0; padding:0; border:0; } header, footer, section, article, nav { display:block; } body { margin:auto; background:url(img/green-grad.jpg) repeat-x; } header {width:920px; height:180px; padding:0; border:10px white solid;  background: url(img/header3.jpg); margin:10px auto; } h1 { font-size:300%; color :white; **position: relative;** left:90px; top:55px; width:480px; }
注意文本是相对于页眉定位的，以防止文本在宽屏上从页眉的左边界突出来。
在页眉上叠加图像
我们现在在页眉背景上叠加一个玫瑰花形图像，如图图 3-6a 和 3-6b 所示。玫瑰花形图像被添加到 HTML 列表中，并占据了它在页眉中的自然位置(图 3-6a )。这个位置不太合适，因为楔在白框和文字之间看起来不舒服。因此，通过增加 CSS 样式表，玫瑰花结将被重新定位，如图图 3-6b 所示。
图 3-6a。这显示了应用相对定位之前玫瑰花结的位置。玫瑰花结添加在<头>标签之间
通过将图像包含在标题标记之间，可以将图像放置在标题上，如下面的代码片段所示。
`
Devon’s Rural Retreats
下一个任务是向右移动玫瑰花结，如图图 3-6b 所示。
图 3-6b。玫瑰花结现在相对定位了。修改了 HTML 列表，使其链接到修改后的样式表。
通过使用 CSS 中的 position 属性，图像可以精确地放置在我们想要的位置。清单 3-6a 的 HTML 类似于前面的例子，但是它链接到一个 CSS 样式表，该样式表包含重新定位玫瑰花结的指令。修改后的样式表的链接以粗体显示
清单 3-6a。链接到修改后的 CSS 样式表(【background-ex5b.html】??)**
`<!doctype html>
Devon's Rural Retreats
清单 3-6b 包括重新定位玫瑰花结的说明，以粗体显示。
清单 3-6b。修改后的重新定位玫瑰花结的 CSS(Rosette . CSS)
body { background: #FFF url(img/green-grad.jpg) repeat-x; margin:auto; } header, nav, footer, article section { display:block; } header {width:920px; height:180px; padding:0; border:10px white solid;  background:url(img/header3.jpg); margin: 20px auto; } h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px;  width:480px; } **#rosette { position:relative; left:750px; top:5px;** **}**
相对定位将项目相对重新定位到原来的位置。有关相对和绝对定位的详细说明，请参见附录。
半液态布局的背景怎么样？
没问题。取同一个 HTML，将其重命名为background-ex6-liquid.html，链接到一个新的样式表liquid.css。CSS 清单 3-6c 将最大宽度限制为 1024 像素，最小宽度限制为 900 像素。
清单 CSS 3-6c。same page 的半流动版本的 CSS 样式表(liquid.css)
`body { background: #FFF url(img/green-grad.jpg) repeat-x; margin:auto;
}
header, nav, footer, article section { display:block;
}
header { width:95%; max-width:1024px; min-width:900px; height:180px;
padding:0; border:10px white solid; background:url(img/header3.jpg);
margin:20px auto;
}
h1 { font-size:300%; color :white;
position: absolute; left:15%; top: 55px; width: 480px;
}
rosette { position:relative; left:85%; top:120px;
}`
标题图像的宽度是 1024 像素；因此，本例中的标题不得超过 1024 像素。对于较宽的图像，标题的最大宽度可以放大以匹配。液态版本可以在这本书的第[www.apress.com](http://www.apress.com)页看到。
透明背景
在下一个例子中，白色边框内的背景是透明的，因此绿色渐变是可见的，如图图 3-7 所示。
图 3-7。在这个布局中使用了几种背景。
图 3-8 展示了一组背景效果。这张截图的问题在于，在渐变的褪色部分的映衬下，底部边框几乎不可见。这个故事的寓意是，如果你想有一个白色边框的布局，就要避免渐变背景；请改用纯色背景。使用纯色背景，页面可以是任意长度，白色下边框清晰可见。
图 3-2 到图 3-7 中使用的照片得到了 Bonehayne 农场度假住宿网站所有者 Sandra 和 Ruth Gould 的许可
注意任何 IE 条件句都必须放在主 CSS 链接之后。JavaScript 跟在条件语句之后。将它们以不同的顺序放置可能会导致 IE 7 和 IE 8 中出现奇怪的行为。
在清单 3-7a 中，透明的 CSS 背景被用在了下方白色边框区域的中。这允许渐变背景显示出来。玫瑰花结(不是背景项目)与标题和下面的内容重叠，就好像它被粘贴在它们上面一样。翻转菜单按钮实际上并不作为图像存在，它们是由一个叫做动态伪样式的 CSS 后台方法产生的(这在第四章的中有完整的描述)。
清单 3-7a。创建一个透明背景的元素(background-ex7-transp.html)
`<!doctype html>
Devon's Rural Retreats
Award winning accommodation, self catering or bed and breakfast
Cottages, converted barns, caravans
The superb interior of one of our cottages
All situated in the beautiful rolling countryside of Devon
CSS 清单 3-7b 包含了创建透明内容框的代码，这些代码以粗体显示。
清单 3-7b。清单 3 的 CSS 样式表-7a****(*transparent . CSS)*
`/equalise all the margins, paddings and borders built into various browsers/
div body #header #content { margin:0; padding:0; border:0;
}
body { background:#FFF url(img/green-grad.jpg) repeat-x; margin:auto;
}
/add display attributes for the semantic tags/
header, footer, section, article, nav { display:block;
}
header {width:920px; height:180px; padding:0; border:10px white solid;
background: url(img/header3.jpg); margin:10px auto;
}
h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px; width:480px;
}
rosette
content { background-color:transparent; border-left:10px white solid;
border-right:10px white solid;
border-bottom:10px white solid; width: 904px; margin-top:-10px; margin-left:auto;
margin-right:auto; padding:8px; font-size:medium; color:maroon;
}
h2 { font-size:x-large; color:white; margin:0 0 10px 0;
}
h3 { font-size:large; color:white; margin:0 0 6px 0;
}
leftcol { float:left; width: 310px; vertical-align:top;
}
rightcol { width: 135px; float:right; height: 252px; margin-right:10px;
}
midcol { margin-left:315px; margin-right:145px; margin-top:10px; vertical-align:top;
}
/* set side menu block position and width/
nav { margin:10px 30px 0 10px; width:135px; float:right;
}
/Set list style within the menu block only. This removes bullets/
nav li { list-style-type:none;
}
/ set general side button styles /
nav li { margin-bottom: 3px; text-align: center; width:130px;
}
/ set general anchor styles and include the zoom fix for IE6/
nav li a { display: block; color: white; font-weight: bold; text-decoration: none; zoom:1;
}
/ specify mouse state styles /
/ mouseout (default) /
nav li a { background:#559a55; color: white; border: 5px outset #559a55; padding-bottom:3px;
}
/ mouseover /
nav li a:hover { background: red; color:white; border: 5px outset red;
}
/mouse active*/
nav li a:active { background:maroon; border: 5px inset maroon;
}
br.clear { clear:both; }
midcol img { margin-left:10px;
}
footer { clear:both; color:maroon; text-align:center;
}`
背景项目符号
图 3-9 和 3-10 显示了如何使用背景图像增强菜单列表。
图 3-8。
图 3-9。
一个简单无序的菜单列表看起来像图 3-8 。图形背景项目符号可以增强菜单列表，如图图 3-9 所示。使用text-decoration:none;删除链接下方的下划线。使用 CSS 代码background-image:url(img/*image*.gif)可以用背景图片替换标准项目符号。
在 CSS 清单 3-9b 中，我使用了一个背景图片(menu-bullet.gif ) 18 ×18 像素。整个区域——即项目符号及其文本——对鼠标做出响应。每个菜单项之间的合理间隔有助于残疾人避免意外点击错误的链接。
清单 3-9a。【bullet-images.html】使用无序列表提供基本导航菜单
`<!doctype html>
每一个href="#"都是一个虚拟链接，当然应该被替换为正确的网页路径。
清单 3-9b。清单 3-9a 用无序列表中的图片替换项目符号的 CSS(Bullets . CSS)
/*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } /*remove bullets*/ nav ul { list-style:none; width:120px; } /*place background image in each menu item. The top margin spaces links 10 pixels apart*/ nav li { height:20px; margin-top:10px; background-image:url(img/menu-bullet.gif);  background-repeat:no-repeat; } /*remove underline. Push text 30px to the right to clear the image*/ nav li a { color:black; text-decoration:none; padding:0 5px 0 30px; }
使用 HTML5 和 CSS2 的多种背景
可以组合几个背景图像。图 3-10 显示了三幅组合图像。
图 3-10。多重背景
使用<div> s，CSS2 中的多个背景不仅是可能的，而且过程也很简单。这种方法适用于所有流行的浏览器。使用 CSS2 的解决方案需要四个<div>,这里使用了三个图像:渐变、剪贴板和甲虫。清单 3.10a 为三幅背景图片创建了<div>。
清单 3-10a。【multiple-css2.html】创建三个 div 来包含三个背景图像
`<!doctype html>
清单 3-10b。将背景图片放入 Divs 的 CSS2(multiple-CSS2 . CSS)
`#wrapper { width:320px; height:420px; margin:auto;
}
background-container { width:300px; height:400px; margin:auto;
background:url(img/blugrad500.jpg) repeat-x;
}
clipboard { width:300px; height:400px;
background: url(img/clipbrd.gif) no-repeat 50% 50%;
}
beetle {width:300px; height:400px;
background:url(img/Beetle.gif) no-repeat 50% 55%;
}`
使用 CSS3 的多种背景
CSS3 仅使用一个 div 就可以提供多个背景图像。在撰写本文时，Mozilla Firefox、Safari、Chrome 和 Opera 都支持这一功能。Internet Explorer 7 和 8 不能理解这种最受欢迎的标记简化。图 3-11 和图 3-10 外观相同，但图 3-11 是使用 CSS3 多图像模块的结果，这不需要三个<div>
图 3-11。使用 CSS3 的多个背景图像
清单 3-11a 只有一个<div>用于三幅背景图像，以粗体显示。
清单 3-11a。【multiple-css3.html】为三个 CSS3 背景图像提供一个 Div
`<!doctype html>
<title>Multiple background with css3</title>meta details go here
</head> <body>清单 3-11b。这个 CSS3 样式表为清单 3-11a(multiple-CSS3 . CSS)提供了三个背景图片
#example {width:300px; height:400px; margin:auto;background:  url(img/Beetle.gif) no-repeat 50% 55%, url(img/clipbrd.gif) no-repeat 50% 50%,  url(img/blugrad500.jpg) repeat-x; }
注意每个背景图片的 URL 必须用逗号隔开。
背景图像必须以相反的顺序列出，即底层(渐变)在最后，甲壳虫在标记中首先列出。使用了背景属性的简写版本。
真实页面中的多个 CSS2 和图像
下一个工作示例结合了前面描述的技术。我选择使用带有三个<div>的 CSS2 解决方案，因为它比使用 CSS3 方法更容易准确地定位方块。为了帮助使用 CSS3 定位，请确保将所有边距、填充和边框归零，如下所示:
body { margin:0; padding:0; border:0 }
三个<div> s 技术的结果如图图 3-12 所示。
图 3-12 。不太可能的产品页面
注意图 3-12 中没有使用 CSS3 方法，因为 IE 7 或 IE 8 不支持 CSS3。
由清单 3-12a 及其样式表清单 3-12b 生成的多重背景图像由天空和三个大小和颜色不同的正方形组成。三个<div>包含三个彩色方块。半液态布局的最大宽度限制为 1200 像素，最小宽度限制为 960 像素。
清单 3-12a。【squares-html5.html 创建带有多个背景图片的页面
`<!doctype html>
Square Deals
Leaders in the creation of squares
- A wide range of squares in many colours always in stock
- Our computerised machines produce squares fast, this ensures prompt delivery  at reasonable prices
- Try our square design service
` `
清单 3-12b。在标题中放置三个方块的 CSS 样式表(squares-html5.css)
`body, header, div, #content, { margin:0; padding:0; border:0;
}
body{background: #39F; color: navy; font: medium Arial;
}
/add display attributes for the semantic tags/
header, footer, section, article, nav { display:block;
}
h1,h2,p{margin: 0; padding: 0;
}
h1 { font-size: 380%; color: #FFF; font-family:Arial; font-weight:bold; color:white;
letter-spacing: 1px; width:560px; position:absolute; top:55px; left:20px;
}
h2 { font-size: 150%; color:navy; margin-top:-10px;
}
.small { font-size:small;
}
.tiny { font-size:x-small; text-align:center;
}
container { position:relative; width:95%; max-width:1024px; min-width:920px;
margin: 0 auto 10px auto; padding:10px; text-align:left; background:#FFF;
}
mainpanel { width:100%; margin:auto; margin-bottom:0; margin-top:-10px;
background:#bad0ff; text-align:center;
}
header { padding-top:0; width:100%; height:156px; margin:0 auto 0 auto;
background-image:url('img/bluepan.jpg'); background-repeat:no-repeat;
background-position:-20px left;
}
#red { position:absolute; right: 15px; top:14px;
background-image:url('img/red-square.png'); width:160px; height:160px; z-index:3;
}
#yellow { position:absolute; right: 120px; top:44px;
background-image:url('img/yellow-square.png'); width:123px; height:125px; z-index:2; }
#white {position:absolute; right: 200px; top:61px;
background-image:url('img/white-square.png'); width:105px; height:109px; z-index:1
}
midpanel{margin-left:160px; margin-right:5px; margin-top:0; padding:0 10px 10px 0;
background:#bad0ff; color:navy;}
midleft { width:45%; float:left; background:#bad0ff;
}
midleft li { text-align:left; margin:0 0 10px 10px; width:330px; list-style-type:disc;
}
midright { float:right; width:350px; text-align:left; background:#bad0ff;
}
footer { clear:both; width:99%; background:#bad0ff; padding:5px; margin-top:10px;
text-align:center; font-size:small}
nav { float:left; width:140px; margin-left:0; margin-top:20px; background:#bad0ff;
}
/* set vertical button menu position /
nav ul { float:left; width:130px; margin-left:10px; padding-left:0;
list-style-type :none;
}
/ set general side button styles /
nav li { width:115px; line-height:20px; margin-bottom: 3px; text-align: center;
}
/ set general anchor styles /
nav li a { display: block; width:115px; color: white; font-family:arial;
font-size: small; font-weight:bold; text-decoration: none
}
/ specify mouse state styles /
/ mouseout (default) /
nav li a { background: #1A9CE0; border: 4px outset #AABAFF;}
/ mouseover /
nav li a:hover { display:block; background: #0A4ADF; border: 4px outset #8ABAFF;
width:115px;}
/ onmousedown */
nav li a:active { background:#AECBFF; border: 4px inset #AECBFF;
}
br.clear { clear:both
}
.lft { text-align:left;
}
.cntr { text-align:center;
}`
CSS 背景图片的规则
这些规则涵盖了正常的、不重复的背景图像，例如横幅标题中使用的图像，以及用于填充页面上某个区域的平铺图像。您可以在<div> s、表格单元格和段落中使用任何背景图像属性。
定位单个不重复的背景图像
背景图像可以放置在容器内，如图图 3-13 所示。
图 3-13。位于容器内不同位置的图像
可以使用关键字、像素、em 或百分比来相对于容器的边缘定位背景图像。清单 3-13 ，使用内部样式和关键字定位图像，如图图 3-13 所示。这里使用内部样式表是为了简化说明，在真实的页面中，您可能会使用外部样式表。
清单 3-13。【image-position.html】相对于其容器定位图像(??)
`<!doctype html>
使用像素或 ems 提供了比关键字更多样的定位。第一个像素或 em 维度将从左侧水平放置图像。第二维将相对于容器的顶部边缘放置图像。
下面的代码将显示距离左边缘 150 像素、距离上边缘 100 像素的图像:
#container1 { background-image: url("tile.jpg"); background-repeat: no-repeat;  background-position: 150px 100px; }
注意如果只指定了一个值，则设置水平位置。如果指定了两个值，则第二个值设置垂直位置。
指定重复平铺的背景
平铺意味着水平或垂直重复图像。典型的瓷砖如图 3-14 所示。
可以使用任何
.jpg、.png或.gif图像进行平铺。平铺整个页面或容器通常是通过一个大约 100 × 100 像素的重复平铺图像来实现的，如图图 3-14 所示。
图 3-14。【典型的瓦(tile.jpg)??
要填充页面或容器的整个背景，平铺在水平和垂直方向重复，如下所示:
body { background-image: url("tile.jpg"); background-repeat: repeat; }
以下代码将背景图像水平平铺在页面上(一个平铺高度):
body { background-image: url("tile.jpg"); background-repeat: repeat-x; }
下面将背景图像垂直向下平铺在页面上(只有一个平铺宽度):
body { background-image: url("tile.jpg"); background-repeat: repeat-y; }
水平或垂直瓷砖条的宽度和深度不必是瓷砖尺寸的倍数。同样，一个只有一个磁贴深的横幅或者一个只有一个磁贴宽的侧边栏也是不现实的。接下来的例子将演示平铺填充任何宽度或深度的<div>或其语义等效物。图 3-15 、 3-16 和 3-17 中显示了三个平铺示例。
图 3-15。一整页
图 3-16。一条横条
图 3-17。一条竖条
图 3-15 有一个装满瓷砖的容器。图 3-16 中的水平横幅填充了 100 像素的方块，但只有 180 像素深；这表明容器不必是图块大小的倍数。类似的，在图 3-17 中，侧边栏的宽度不是磁贴宽度的倍数，而是 150 像素宽。示例中使用了内部样式，但是在网站中，样式表应该是外部的。
清单 3-15 用瓷砖填满一个容器。如果<body>是容器，整个屏幕将被平铺。
清单 3-15。【tile-whole-page.html 往集装箱里装瓷砖
`<!doctype html>
清单 3-16 创建一个水平的平铺条，填充一个<分区>。图块将受到<分区>的边界约束。例如，在高度为 150 像素的水平< div >中使用 100 像素见方的图块，您将看到只有一个半图块高的水平条带。
清单 3-16。创建一个水平的平铺条(【tile-horizontal-strip.html】)**
`<!doctype html>
` `清单 3-17 创建了一个垂直的瓷砖条，它将填充一个<分区>，但不会溢出到<分区>的边界之外。在本例中，垂直栏是导航菜单的侧栏。
清单 3-17。创建一个真正的瓷砖条(瓷砖垂直条)
`<!doctype html>
创建静态水印作为背景图像
水印必须非常微弱，否则会使覆盖的文本难以阅读。背景图像通常会随页面一起滚动。然而，通过使用属性background-attachment: fixed;,，当用户向上或向下滚动时，水印将保持在屏幕上的相同位置。这方面的 CSS 如下:
body { background-image: url("image.jpg"); background-attachment: fixed }
图 3-18 和 3-19 显示了固定水印的作用。
图 3-18 。显示页面顶部
图 3-19。用户已经向下滚动，但是水印没有向下移动。
清单 3-18。创建一个背景水印，但固定它在屏幕上的位置。(watermark.html)
`<!doctype html>
The top heading
` `
The middle heading
The bottom heading
注意背景色填充了框元素的填充和边框区域，而不仅仅是内容区域。如果您选择点或虚线边框，背景颜色将在点或虚线之间可见。
总结
您已经看到了背景是如何将一个普通的页面变成一个视觉上令人兴奋的页面的。使用本章介绍的技术，你现在可以完全控制 CSS 背景的样式和位置。您了解了如何在容器中放置背景图像，比如<div> s 或它们的语义对等物。向您展示了如何将背景与文本相结合，以及如何在背景上叠加图像。使用 CSS2 和 CSS3 演示了多个背景图像。还演示了使用背景图像作为水印。背景将在本书的许多其他章节中出现。
在下一章中，你将会发现如何创建多种类型的翻转菜单，包括水平菜单栏、垂直按钮块和标签菜单。
四、翻转菜单
翻转菜单由超链接组成，当光标悬停在它们上面时，超链接会以某种方式改变。超链接使用户能够访问网站上的其他页面。导航菜单块可以是水平的或垂直的，或者一个页面可以包含两种类型。这一章处理最流行的类型的基本原则。然后，它列出了一些资源，使您能够根据主题进行创作。它处理几个水平菜单，因为这种类型可能很棘手。垂直菜单表现良好；本章稍后将介绍垂直菜单块的工作示例。
所有的例子都使用 CSS 伪类，比如:link、:hover和:active，结合一个display:block属性或display:inline-block;。示例按钮中的整个区域都是可点击的，而不仅仅是文本。脚本只在一个例子中使用，因为搜索引擎忽略了使用 JavaScript 定位链接的导航菜单。使用脚本的一个例子不会影响搜索引擎。CSS 方法比基于脚本的技术更容易掌握。
注意为满足残疾人无障碍标准，选择对比度至少为 5:1 的文本和按钮颜色(有关颜色对比的详细信息，请参见第十四章)。
水平翻转导航菜单
水平菜单适用于每行包含 15 个或更少菜单按钮的页面。显然，这取决于标签的长度和按钮上使用的文本大小。对于非常短的标签，页面上可以容纳更多的按钮(例如，如果标签是页码 1、2、3、4 等。).网站上的水平标签菜单在一行有 14 个标签，另外两行各有 7 个链接。这表明，如果您可以接受几行，一个页面可以容纳更多的链接。需要用分隔线或使用不同颜色的导航栏来清楚地分隔各行。
水平菜单很有挑战性，因为通常提倡的内联或浮动方法都有它们的问题。浮动菜单很难在页面上居中，内联菜单传统上不能有同样大小的按钮。然而，现在所有的浏览器都支持被忽视的属性{ display:inline-block; }，水平菜单并不比垂直菜单更难，尺寸可以很容易地应用于相同大小的按钮，或者自动变化以适应内容的按钮。
横式菜单的菜谱经常使用{ display:inline: }，但是制作出来的按钮却不尽人意。现在所有浏览器都支持{ display:inline-block; }。
属性{ display:inline: }不允许设置宽度、高度、边距或填充。通过使用{ display:inline-block; }，可以内嵌显示按钮并设置其尺寸。这提供了两个世界的最佳选择，如图 4-1 中基本菜单的第二排按钮所示。
图 4-1。该基本菜单的顶行显示了display:inline不令人满意的外观。在第二行中，可以给display:inline-block按钮指定高度、行高和填充。
图 4-1 中所示的非常基本的菜单不是翻转菜单；也就是说，当光标悬停在按钮上时，它们不会改变颜色。此外，他们使用段落代替传统的无序列表。
清单 4-1a 包含两行菜单按钮。顶行不受 CSS 样式表的影响。CSS 样式表 4-1b 只链接到底部的一行按钮，这种样式给了文本足够的水平空间。这展示了与默认display:inline;相比的display:inline-block代码的值。
清单 4-1a。【inline-block.html】创建两行菜单按钮的结构
`<!doctype html>
<html lang=en> <head> <title>Inline-block content</title> *meta details go here*
inline content (default)
Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7
inline-block content
Page 1
Page 2
Page 3
Page 4
Page 5` ` Page 6
Page 7
href项中的#符号必须替换为您自己的页面 URL。
清单 4-1b 是指向第二行菜单按钮的样式表，应用样式display:inline-block;来调整按钮的宽度。
清单 4-1b。将 display:inline-block; 样式应用到第二行按钮 ( inline-block.css)
`/* Set styles to equalise the browser rendition/
html, body, h1, h2, h3, h4, h5, p, ol, ul, li { padding: 0; margin: 0;
}
body { font-size: 100%; font-weight: normal;
}
ul { padding-left: 0;}
/ end of style equalisation */
p { background:white margin:auto; text-align:center;
}
container { margin:auto; text-align:center; width:97%; min-width:800px;
max-width:1200px;
}
a { background: orange; color:navy;
}
.inline-block a { display:inline-block; width:110px; height:30px;
line-height:30px; text-align:center;
}`
横向菜单的类型
水平导航菜单和垂直侧边栏菜单一样常见。与侧边栏菜单相比，它们带来了更多的设计问题，但是通过明智地使用 CSS 可以很容易地解决这些问题。水平导航栏有以下三种形式:
- Simple 2D button
- 3D button
- Label menu
简单的 2D 按钮菜单
前面的例子图 4-1 不是翻转菜单。下一个项目演示了基本的翻转技术。此外，它使用一个无序列表来创建等宽按钮。
图 4-2 显示了一个简单的二维菜单，带有等宽的翻转按钮。
图 4-2。一个简单的水平滚动菜单。光标悬停在第六页按钮上。
当光标悬停在按钮上时，颜色会发生变化，并出现工具提示。清单 4-2a 显示了图 4-2 所示的等宽按钮。它适用于包括 IE 7 和 IE 8 在内的所有浏览器——前提是包含 Remy Sharp JavaScript 代码片段。
清单 4-2a。【horizontal-equal-2d.html】创建一行等宽菜单按钮
`<!doctype html>
This is the header
This content panel can contain several columns
href 项目中的#符号必须由您自己的页面 URL 替换。
注意IE 6 和 IE 7 需要换行符(在清单 4-3 中用粗体显示)。水平菜单上固定宽度的按钮很难在页面上居中。然而，通过在固定宽度的页面上使用百分比或像素定位，或者在有限的流动页面上使用百分比定位，这个问题可以被克服(参见清单 4-2b 中粗体显示的百分比定位)。
清单 4-2b 引入了翻转样式，当光标悬停在按钮上时，按钮的颜色会改变。翻转效果是通过粗体显示的代码nav a:hover实现的。
清单 4-2b 。具有翻转颜色变化的等宽按钮样式(equal-2d.css)
`/* Set styles to equalise browser renditions*/
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;
}
body { font-size: 100%; font-weight: normal; background-color:#99FF66;
font: 100% arial;
}
header, footer, section, article, nav { display:block;
}
wrapper {position:relative; top:0; left:0;width:950px; margin:auto;
text-align:center;
}
header {width:100%; height:80px; color:black; background-color:#FFCC00;
padding-top:10px;
}
h1 { font-size:200%; font-weight:bold; margin-top:20px;
}
main-content {width:950px; margin:50px auto 0 auto; background-color:white;
color:black; text-align:center; font-weight:bold;
}
footer {margin:10px auto 0 auto; width:950px; font-weight:bold;
text-align:center; background-color:#FFCC00; color:black; clear:both;
}
nav ul {position:absolute; top:100px; left:9%; width: 780px;
list-style: none; height: 36px;
}
nav li { float: left; width: 120px; margin:0 5px 0 5px;
}
nav a { color: #000; font-size: 100%; font-weight:bold; text-decoration: none;
text-align:center; border: 1px solid #000; padding: 5px; display: block;
background-color: white; }
nav a:hover { font-weight: bold; background-color:green; color:white;
}
.clear { clear:both;
}`
宽度可变的水平 2D 按钮菜单
在等宽按钮上并不总是能够容纳一些标签。这要求按钮可以扩展以适应标签的大小。图 4-3 显示了一个带有可变宽度按钮的菜单。
图 4-3。主页按钮已经展开以容纳文本。
清单 4-3a 和它的 CSS 清单 4-3b 向你展示了如何创建可变宽度的按钮。按钮将展开以容纳文本。这个项目适用于所有浏览器，包括 IE 6、IE 7 和 IE 8。您可能需要增加菜单块的宽度，以确保按钮中容纳所有文本。
清单 4-3a。【horizontal-variable-2d.html】显示宽度可变的按钮和翻转效果()**
`<!doctype html>
This is the header
This content panel can contain several columns
清单 4-3b。清单 4-3a 给出翻转和可变宽度按钮的 CSS(Variable-2d . CSS)
`/* Set styles to equalise browser renditions*/
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;
}
body { width:960px; margin:auto; background-color:#99FF66; font: 100% Arial;
font-size: 100%; font-weight: normal;
}
header, footer, section, article, nav { display:block;
}
wrapper {position:relative; top:0; left:0; width:950px; margin:auto;
text-align:center;
}
header {width:100%; height:80px; color:black; background-color:#FFCC00;
padding-top:10px;
}
h1 { font-size:200%; font-weight:bold; margin-top:20px;
}
main-content {width:950px; margin:60px auto 0 auto; background-color:white;
color:black; text-align:center; font-weight:bold;
}
footer {margin:10px auto 0 auto; width:950px; font-weight:bold;
text-align:center; background-color:#FFCC00; color:black; clear:both;
}
nav {position:absolute; top:100px; left:78px; width: 785px; padding: 5px;
list-style: none; height: 35px;
}
nav li { display:inline; padding: 5px; padding-top:15px; margin:5px 0 0 2px;
height:25px;
} nav a {height:25px; color: #000; font-size:80%; font-size: 100%;
font-weight:bold; text-decoration: none; border: 1px solid #000;
padding:5px 5px 0 5px; display: inline-block;
background-color: white; zoom: 1;
}
nav a:hover { font-weight: bold; background-color:green; color:white;
}
.clear { clear:both;
}`
注意样式display:inline-block;允许上下填充。如果没有填充，按钮中的标签会碰到按钮的上边缘。如果使用了display:block,按钮将会一个接一个地隐藏起来，它们将会在容器的宽度上蔓延。
3D 翻转按钮菜单
通过添加 3D 效果，可以使前面示例中的菜单栏变得更加有趣。这是通过 CSS border 属性中的一些额外代码实现的，如下所示。
注意必须使用一些试错法来产生好的边框颜色。默认方法为背景和起始边框使用相同的颜色，就像图 4-4 中所示的蓝色按钮方案。
/*mouseout state (default)*/ li.hbtn a { background: **#0080a0;** border: 4px outset **#0080a0;** }
然而，通过使用不同的起始颜色可以获得更好的结果，如下所示(另见图 4-4 ):
/*mouseout state (see Figure 4-4)*/ li.hbtn a { background: **#0080a0;** border: 4px outset **#aabaff;** } 
图 4-4。使用 CSS 伪类生成的菜单按钮。按钮的任何部分都是可点击的。
注意当使用开始和插入属性时，浏览器呈现的边框颜色不同。例如，IE 中好的配色方案在 Mozilla Firefox 中会显示为非常苍白的边框。解决这个问题的一个方法是为 Mozilla 设计好的颜色，然后有一个 IE 条件链接到一个在 IE 中提供好颜色的样式表。然而，这需要大量的试验和错误。更好的解决方案是分别指定四个边框，如下面的代码片段所示。
单独指定边框颜色的代码片段。
(这个简短的 3D 按钮代码片段没有提供可下载的文件。)
/*mouseout state*/ li.hbtn a { background: **#0080a0;** border-top: 4px color-one solid;  border-right: 4px color-two solid; border-bottom:4px color-two solid;  border-left:4px color-one solid; }
注意当然，属性color-one和color-two会被十六进制或 RGB 颜色代码代替。
可变宽度 3D 菜单按钮
图 4-5 显示了之前在图 4-3 中使用的 2D 按钮的 3D 版本。
图 4-5。通过附加样式属性创建的宽度可变的 3D 按钮
清单 4-5a 与清单 4-3a 中的 2D 按钮代码相同，除了它有一个不同的标题，并链接到一个不同的样式表，称为variable-3d.css，如粗体所示。
清单 4-5a。【horizontal-variable-3d.html】创建宽度可变的 3D 菜单按钮()**
`<!doctype html>
**This is the header
This content panel can contain several columns
在 CSS 清单 4-5b 中，粗体显示的代码给出了 3D 效果。样式表还创建可变宽度按钮。
清单 4-5b 。清单 4-5a 的 CSS 给出了具有可变宽度的 3D 按钮(variable-3d.css)
`/* Set styles to equalize browser rendition*/
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;
font-size: 100%; font-weight: normal;
}
img { border: 0; }
ul { padding-left: 0; }
/* end of style equalization /
/ Layout */
body { width:960px; margin:auto; background-color:#99FF66; font: 100% Arial;
}
wrapper {position:relative; top:0; left:0;
width:950px; margin:auto; text-align:center;
}
header {width:100%; height:80px; color:black; background-color:#FFCC00;
padding-top:10px;
}
h1 { font-size:200%; font-weight:bold; margin-top:20px;
}
main-content {width:950px; margin:65px auto 0 auto; background-color:white;
color:black; text-align:center; font-weight:bold;
} #footer {margin:10px auto 0 auto; width:950px; font-weight:bold;
text-align:center; background-color:#FFCC00; color:black; clear:both;
}
nav ul {position:absolute; top:100px; left:3.6%; width: 866px; padding: 5px;
list-style: none; overflow: hidden; height: 35px;
}
nav li { display:inline; padding: 5px; padding-top:15px; margin:5px 0 0 2px;
height:25px;
}
nav a {height:25px; color: #fff; font-size:80%; font-size: 100%;
font-weight:bold; text-decoration: none; background-color: #72b720;
border: 4px outset #5edd51; padding:5px 5px 0 5px; display: inline-block;
}
.clear { clear:both;
}
mainNav a:hover { font-weight: bold; background-color:green; color:white;
}`
注意你可能不得不修改宽度、高度、边框宽度、填充、间距和边距，以解决浮动落差或缺少边框等问题。因为 3D 边框更厚，所以必须增加<nav>的宽度来容纳它们。这意味着必须修改<nav>的绝对位置，使菜单在页面上居中。
具有等宽按钮的 3D 版本
图 4-6 显示了一个带有等宽 3D 按钮的菜单。
图 4-6。通过新的样式表 (fixed-3d.css )从清单 4-3 创建的固定宽度的 3D 按钮
具有等宽按钮的 3D 版本图 4-6 是通过将与清单 4-6 ( horizontal-variable-2d.html)相同的页面链接到样式表、清单 4-6b ( horizontal-fixed-3d.css)而创建的。请确保缩短主页按钮的文本以适合等宽按钮。在清单 4-6a 中，文本 This leads to the Home Page 被缩短为 Home Page 以适合其等宽按钮。
清单 4-6a 提供了具有 3D 等宽按钮的菜单结构，如图图 4-6 所示。
清单 4-6a。创建具有 3D 等宽按钮的菜单结构(*horizontal-fixed-3d.html)*
`<!doctype html>
This is the header
This content panel can contain several columns
清单 4-6b 显示了链接到清单 4-6a 的 CSS，用于显示等宽的 3D 按钮。
清单 4-6b。提供 3D 等宽按钮展示的 CSS(*fixed-3D . CSS)*
/* Set styles to equalise browser rendition*/ html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0; } header, footer, section, article, nav { display:block; } body { width:960px; margin:auto; background-color:#99FF66; font: 100% Arial;  font-size: 100%; font-weight: normal; } `#wrapper {position:relative; top:0; left:0; width:950px; margin:auto; text-align:center;
}
header {width:100%; height:80px; color:black; background-color:#FFCC00; padding-top:10px;
}
h1 { font-size:200%; font-weight:bold; margin-top:20px;
}
main-content {width:950px; margin:65px auto 0 auto; background-color:white;
color:black; text-align:center; font-weight:bold;
}
footer {margin:10px auto 0 auto; width:950px; font-weight:bold; text-align:center;
background-color:#FFCC00; color:black; clear:both;
}
nav {position:absolute; top:100px; left:3.6%; width: 866px; padding: 5px;
list-style: none; overflow: hidden; height: 35px;
}
nav li { display:inline; padding: 5px; padding-top:15px; margin:5px 0 0 2px;
height:25px; width:100px;
}
nav a {height:25px; width:100px; color: #fff; font-size:80%; font-size: 100%;
font-weight:bold; text-decoration: none; background-color: #72b720;
border: 4px outset #5edd51; padding:5px 5px 0 5px; display: inline-block;
}
.clear { clear:both;
}
nav a:hover { font-weight: bold; background-color:green; color:white;
}`
顺便说一下，翻转菜单可以通过使用定义列表来实现
这是创建 3D 按钮的一种有趣的替代方式，尽管不太正统，但仍然有效。下面的代码片段展示了这是如何完成的。
使用定义列表代替无序列表
<nav> <dl> <dt><a title="Page 1" href="page1.html">Page One</a></dt> <dt><a title="Page two" href="page2.html">Page Two</a></dt> <dt><a title="Page Three" href="page3.html">Page Three</a></dt> <dt><a title="Return to the opening page" href="index.php">Home Page</a></dt> </dl> </nav>
定义列表的 CSS 代码片段
/*MENU set horizontal menu and button general style*/ nav {margin-left:-5px; margin-rignt:0; height:35px; text-align:center;  width:710px; margin:auto; } nav dl {display:block; margin:auto; float:left; text-align:center; padding:3px; } nav dt a {display:block; text-decoration:none; color:white;  background-color:#0080a0; font-weight:bold; padding:4px; } /*mouseout state (default)*/ nav dt a { background: #0080a0; border: 4px outset #aabaff; } /* mouseover state*/ nav dt a:hover { background: #0060a0; color:yellow; border: 4px outset #8abaff; } /* mousedown state*/ nav dt a:active { background:#abcbff; border: 4px inset #abcbff; }
定义列表虽然不正统，但有自动删除项目符号和左边距的优点。实现移除不需要额外的 CSS 标记。根据你想要多少个按钮和每个按钮上的文字量，你需要通过在width和margin-left图形上反复试验来处理<nav>项。否则，水平菜单可能不会在页面上居中，按钮可能会跳出一行。
ul/Li 或 dl/dt 选哪个 3D 按键？
两种方法给出完全相同的外观。屏幕阅读器可以访问这两种方法，这两种方法都将被验证。尽管无序列表方法需要额外的 CSS 属性用于<nav>项，但是几乎所有的网站都使用无序列表方法。两个提议的 HTML5 建议，如果被采纳，将劫持<dt>标签，这可能在未来造成混乱。
选项卡式水平菜单
图 4-7 显示了带有可变宽度标签的标签菜单。注意中间标签的宽度。
图 4-7。首页被选中。
图 4-7 展示了主页标签如何成为主页的一部分。图 4-8 显示了当点击不同的标签时会发生什么。在下一节中，我们将使用图 4-7 和 4-8 作为说明的基础，快速浏览一遍教程。
图 4-8。现在，第四页被选中。
选项卡式菜单教程
标签菜单很受欢迎，因为成千上万的知名网站都在使用它们，访问者也很熟悉它们。在图 4-7 和 4-8 中，所选择的选项卡清楚地显示了当前正在查看的页面。选项卡似乎成为内容区域的一部分。
本教程中的菜单是我对 Joshua Kaufman 的 CSS 标签菜单的改编
[unraveled.com/publications/assets/css_tabs/](http://unraveled.com/publications/assets/css_tabs/)
它们获得了[creativecommons.org/licenses/by/3.0/](http://creativecommons.org/licenses/by/3.0/)的许可，可以自由使用和修改。
以清单 4-7a 和清单 4-8a 为基础，创建五个简单的页面，分别命名为index.html、page2.html、page3.html、page4.html和page5.html。
在每一页上，修改页面标题并将项目class=”active”向下移动一行，使其位于相关页面的旁边。在 index.html 标记上，我用粗体显示了class=”active”。
在下面的清单中，为了更改本例中每个页面上的图像，我使用了 Windows XP 中的示例图像。
清单 4-7a。【index.html】为标签菜单创建主页
`<!doctype html>
` `This is a tab menu
清单 4-8 中的中间代码块将会改变，如粗体所示。
清单 4-8a。(【page4.html】??)
`<!doctype html>
This is a tab menu
对每一页重复该过程。完成的页面可以从配套网站上查看和下载。
提示如果一个标签落在其他标签的下面或后面，增加菜单栏的宽度。
所有五个选项卡菜单页面都使用相同的样式表，如 4-7b 所示。这将创建更改选定选项卡的样式，以便它融入内容面板。
清单 4-7b。用于改变五个选项卡菜单页面的选项卡的 CSS 列表(squaretabs.css)
`/* Set styles to equalise browser rendition*/
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;
}
header, footer, section, article, nav { display:block;
}
body {text-align:center; margin: 20px; background: #bee8ff; font: medium arial;
}
container {width:960px; margin:-10px auto 0 auto;
}
header {margin-top:0; height:156px; width:100%;
background-image:url('img/bluepan.jpg'); background-repeat:no-repeat;
background-position:center; border-bottom:0;
}
h1 {font-family:Arial; font-size:320%; color:white; font-weight:normal;
text-align:center; padding-top:35px; margin-bottom:-10px; height: 94px; margin:auto;
}
/set the generic tab style--and move menu upwards so that it overlaps the header/
nav {position:relative; top:-13px; color: navy; border-bottom: 1px solid black;
margin: -25px 0 0 0; padding: 0px; padding-left: 10px z-index: 1; } /* use display:inline to remove IE6 double margin bug/
nav li { display: inline; overflow: hidden; list-style-type: none;
}
/set tab colour/
nav a, a.active { color: navy; background: #81d9f6; font: bold 1em Arial;
border: 1px solid black; padding: 2px 5px 0px 5px; margin: 0; text-decoration: none;
}
/make a 3px wide bottom border on tab the same colour as the page/
nav a.active { background: #cfecf5; color:navy; border-bottom: 3px solid #cfecf5;
}
/hovering over a non-active tab shows an aqua tab/
nav a:hover { background: aqua;
}
nav a:visited { color: navy;
}
/hovering over the active tab shows navy text/
nav a.active:hover { background: #cfecf5; color: navy;
}
/set the position of the content to move it close up to the menu tabs*/
content {margin-top:0; font : 0.9em/1.3em "bitstream vera sans", verdana;
position:relative; top:-13px; text-align: left; background: #cfecf5;
padding: 20px; border: 1px solid black; border-top: none; z-index: 2;
}`
带圆形标签的水平菜单
图 4-9 和 4-10 中的标签菜单有圆角标签；所有浏览器都支持它们。
注 第七章使用 CSS3 覆盖圆形标签。
图 4-9。首页被选中。
图 4-10。现在选择了服务页面。
Alessandro Fulciniti 开发的这个 JavaScript 解决方案可以在所有浏览器上运行，包括 IE 6。该技术可免费用于个人和商业用途，Fulciniti 要求您承认他是作者，并提供他的网址:
[www.html.it/articoli/niftycube/index.html](http://www.html.it/articoli/niftycube/index.html)。
该脚本对搜索引擎优化没有影响，因为 JavaScript 应用于标签角而不是导航本身。
注意包含您的网页的文件夹中必须包含以下文件:niftyCube.js和niftyCorners.css。它们可以从 Alessandro Fulciniti 的网站或本书的配套网站下载。
选项卡和选项卡后面的暗条可以是您选择的任何颜色。选项卡后面的栏不能有已命名的颜色，如绿色或海军蓝；确保使用十六进制表示法。选定的选项卡将自动具有与加载的内容区域相匹配的颜色。在清单 4-9b 中，白色是为内容区域选择的颜色。选定的选项卡变为白色，以匹配内容区域。
这些页面的代码可以从伙伴网站下载。
注意漂亮的角落 JavaScript 不会响应语义目标，因此元素< div >和标识id="nav";。
清单 4-9a 为主页设置结构，它也是所有其他页面的模板。当然，每一页的标题和内容都会改变。“活动”类将被放置在不同的链接上以匹配页面(这将在后面解释)。
清单 4-9a。【home-nifty.html】使用漂亮的边角创建标签菜单的页面
`<!doctype html>
` `This is a tab menu
Based on the technique devised by Alessandro Fulciniti
http://www.html.it/articoli/niftycube/index.html
注activelink类与<a href="#">一起添加到每个页面对应的页面名称中；例如，它出现在下面的标记片段中的服务链接(粗体显示)旁边。
`
`清单 4-9b 提供了 CSS 样式表来创建圆角。它还会更改选定选项卡的颜色，并将该选项卡合并到内容面板中。
清单 4-9b。CSS 使用“Nifty Corners”(Nifty-tabs . CSS)设置页面和标签样式
body { background: #FFF; color:black; padding:0; margin:0; font: 100% Arial; } header, footer, section, article, nav { display:block; } header { padding-top:-10px; margin-top:-10px; height:156px; width:100%;  max-width:1017px; min-width:960px; margin:auto; text-align:center;  background-image:url('img/bluepan.jpg'); background-repeat:no-repeat;  background-position:center; border-bottom:0; } h1 { font-family:Arial; font-size:250%; color:white; font-weight:normal;  margin-top:0; margin-bottom:5px; padding-top:10px; } h2 { font-family:Arial; font-size:180%; color:white; font-weight:normal;  margin-top:0; margin-bottom:5px; } h3 { font-family:Arial; font-size:150%; color:white; font-weight:normal; margin-top:0; } nav { float:left; width: 100%; margin-top:0; padding-top:5px; background:#002455; } ul#nav { margin-left: 60px; width:750px; } ul#nav li { float:left; margin-right: 3px; text-align: center;  list-style-type:none;margin:0;padding:0; } ul#nav a { float:left; width:7em; padding: 6px 0; text-decoration:none;  color: #000; font-weight:bold; } ul#nav a:hover { color: #000; } ul#nav li.activelink a { background: #FFF; } ul#nav li.activelink a,ul#nav a:hover { color: #000; font-weight:bold; } li#home a { background: #FF749C; } li#about a { background: #DF3694; } li#prod a { background: #4D80FF; } li#serv a { background: #80FF4D; } li#cont a { background: #FFCB4D; }
注意如果你希望使用清单 4-9a HTML 和 CSS 标记，显然在每个页面和样式表中名字home-nifty.html都必须改为index.html。文件名home-nifty.html用于避免复制前面例子中使用的index.html文件。
使用图像的水平标签菜单
图 4-11 展示了一个使用标签图像的简单解决方案。翻转效果仅改变文本的颜色。该方法很简单，因为单击选项卡不会导致选项卡与内容面板合并。
图 4-11。为标签页使用图像。活动页面有红色的选项卡文本。翻转也会导致红色文本。由免费 CSS 模板(www.freecsstemplates.org)设计。根据知识共享署名 2.5 许可证免费发布。
此解决方案使用固定宽度的选项卡图像。在图 4-11 中使用的标签图像如右图所示。它是 130 像素宽× 39 像素高。页眉和内容面板背景的黑色背景是从一个 50 像素宽× 450 像素高的矩形创建的；它平铺在页面上。这些图片可以从 http://www.apress.com网站的书中页面下载。选项卡和背景的颜色可以在画图程序中更改。
项目class="current_page_item"><a href="#">必须应用于每页上的相关页面名称。像<li><a href="#">Home</a></li>这样的语句中的项目<a href="#">当然必须更改为目标页面名称，就像下面的照片页面示例:
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="blog.html">Blog</a></li> <li **class="current_page_item">**<a href="#">Photos</a></li> <li><a href="about.html">About</a></li> <li><a href="links.html">Links</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>
清单 4-11a 配置主页的标题。当前页面的类以粗体显示。
清单 4-11a。【yosemite.html】为所有页面创建模板结构()
`<!doctype html>
` `清单 4-11b 是 HTML 标记清单 4-10a 的 CSS 样式表。它使用相同的选项卡图像作为所有选项卡的背景图像。它将它们放置在页面上的正确位置。它还设计了翻转效果的样式，并指示用户已经着陆的位置。
清单 4-11b。本 CSS 样式清单 4-11a 。它还创建了翻转效果(style-yosemite-2.css)
/* Set styles to equalise browser rendition*/ html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0; } `header, footer, section, article, nav { display:block;
}
body { background: url(img/img01.gif) repeat-x left top; font-family: Arial;
font-size: 100%; color: black;
}
h1, h2, h3 { font-weight: normal;
}
h1 { font-size: 2em; color:white;
}
h2 { font-size: 2.4em;
}
h3 { font-size: 1.6em;
}
p, ul, ol { margin-top: 0; line-height: 180%;
}
ul, ol {
}
a { text-decoration: none; color: white;
}
a:hover { color:red;
}
wrapper { width: 980px; margin: 0 auto; padding: 0;
}
header { width: 980px; height: 280px; margin: 0 auto; padding: 0px;
background: url(img/img06.gif) no-repeat left top;
}
logo { float: right; margin: 0; padding: 0; color: #000000;
}
logo h1, #logo p { margin: 0; padding: 0;
}
logo h1 { float: left; padding-top: 210px; letter-spacing: -1px;
text-align: right; text-transform: lowercase; font-size: 3.8em;
}
logo p { float: left; margin: 0; padding: 250px 0 0 10px;
font: normal 14px Georgia, serif; font-style: italic; color: #FFFFFF;
}
logo a { border: none; background: none; text-decoration: none; color: #FFFFFF;
}
nav { width: 980px; height: 90px; margin: 0 auto; padding: 0;
}
nav ul { margin: 0; padding: 50px 0px 0px 0px; list-style: none; line-height: normal;
}
nav li { float: left;
}
nav a { display: block; width: 130px; height: 30px; margin-right: 1px;
padding: 9px 0px 0px 0px; background: url(img/img02.gif) no-repeat left top;
text-decoration: none; text-align: center; font-family: Arial; font-size: 100%;
font-weight: bold; color: #FFFFFF; border: none;
}
nav a:hover, nav .current_page_item a { text-decoration: none; color:red;
}
nav .current_page_item a { padding-left: 0;
} #page { width: 940px; margin: 0 auto; padding: 0px 0px 0px 40px;
background: url(img/img03.gif) repeat-y left top;
}
page-bgtop { padding: 20px 0px;
}
content { float: left; width: 580px; padding: 30px 0px 0px 0px;
}
footer { height: 30px; margin: 0 auto; padding: 0px 0 15px 0; background: white;
border-top: 1px solid #DEDEDE; font-family: Arial;
}
footer p { margin: 0; padding-top: 20px; font-size: small; text-align: center;
color: black;
}
footer a { color: #8A8A8A;
}`
提示标签可以通过 CSS3 设置圆角。参见第七章。
使用标签的按钮图像
按钮可以从网上下载，用于构建类似图 4-12 的菜单。
图 4-12。使用按钮图像。改编自网站:cssportal.com/horizontal-menus/13styles2.htm。
CSS Portal ( [cssportal.com](http://cssportal.com))是一个很好的菜单图片资源。图 4-12 没有公平对待标签的质量。它们是渐变图像，提供了 3D、闪亮的标签，当鼠标悬停在标签上时，标签会变成浅渐变，当被选中时，标签会变成蓝绿色。在大多数图像处理程序中，创建合适的图像没有太大困难。
以下是图 4-12 的按钮图像。
图 4-12a 和 12b 。苍白的按钮图像
图 4-12c 。全彩色按钮图像。
在互联网上可以找到大量的按钮，但是如果你想创建自己的背景渐变，试试[colorzilla.com/gradient-editor/](http://colorzilla.com/gradient-editor/) 。
注意活动页面的属性class="current"在清单 4-12a 中用粗体显示。
清单 4-12a 为图 4-12 中所示的cssportal.com菜单提供了 HTML。
清单 4-12a。【index2.html】使用图像为带有选项卡的页面设置结构
`<!doctype html>
Turquoise tabs
This is the home page
注本例每页中对index2.html的所有引用必须改为index.html。名称index2.html用于防止与本章中的另一个index.html文件混淆。
图 4-13 显示了点击事件选项卡时会发生什么。
图 4-13 。事件页面被选中
创建事件页面的标记与清单 4-12a 中的相同，除了标题变为 Events page 之外，该页面的菜单列表也修改了标记，如下所示:
这段代码片段显示了类 current 现在被放置在事件页面的链接旁边。
<nav> <ul> <li><a href="about.html" title="About Us">About Us</a></li> <li><a href="news.html" title="News">News</a></li> <li><a **href="events.html"** title="Events" **class="current"**>Events</a></li> <li><a href="volunteers.html" title="Volunteers">Volunteers</a></li> <li><a href="services.html" title="Services">Services</a></li> <li><a href="membership.html" title="Membership">Membership</a></li> <li><a href="index2.html" title="Home Page">Home</a></li> </ul> </nav>
当然，中间内容面板的内容会有所不同，因为它与实际事件相关。清单 4-12b 提供了所有页面的 CSS 样式。
清单 4-12b。为所有使用 cssportal.com 菜单的页面提供 CSS 样式(turquoise.css)
`html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;
}
header, footer, section, article, nav { display:block;
}
body { background-color:#bbFFaa; color:black; font-family:Arial;
}
container { width:97%; margin:auto; min-width:800px; max-width:1100px;
}
header { background-image:url("img/panew.jpg"); background-repeat:no-repeat;
height:190px; background-position:top left;
}
nav ul {padding-top:230px;padding:0;list-style-type:none; margin:auto;
display:block;height:36px;text-transform:uppercase; font-size:12px;
font-weight:bold; background:url('img/bgOFF.gif') repeat-x left top;
font-family:Helvetica,Arial,Verdana,sans-serif; border-bottom:4px solid #336666;
border-top:1px solid #C0E2D4; position:relative; top: 70px; left: 0;
}
nav ul li { display:block;float:left;margin:0;padding:0;
}
nav ul li a { display:block; float:left;color:#874B46; text-decoration:none;
padding:12px 20px 0 20px;height:24px;
background:transparent url("img/bgDIVIDER.gif") no-repeat top right;
}
nav ul li a:hover{ background:transparent url("img/bgHOVER.gif") no-repeat top right;
}
nav ul li a.current,ul#main-menu li a.current:hover { color:#fff;
background:transparent url("img/bgON.gif") no-repeat top right;
}
main-content { text-align:center; background-color:white; color:black; margin-top:35px;
border-bottom:4px solid #336666; border-left:4px solid #336666;
border-right:4px solid #336666; border-top:none;
}
left-col { float:left; width: 180px;
}
right-col { float:right; width:180px;
}
mid-col { margin-left:185px; margin-right:185px;
}
h1 {font-family:Arial; font-size:300%; padding-top:60px; padding-left:60px; margin-top:0;
margin-bottom:0; color:white;
}
h2 { font-size:150%; margin-top:0; margin-bottom:5px; color:black;
}
br .clear { clear:both;
}`
所有页面和 CSS 的代码都可以从配套网站下载。
推拉门手法
滑动门技术给出了一个吸引人的水平标签菜单，但是实现起来很棘手。标签可以水平和垂直扩展以适应标签:这是滑动门的主要特征。该方法的另一个优点是，当弱视用户使用浏览器的缩放功能增加文本大小时，选项卡将水平和垂直扩展以容纳更大的文本。
标签可以是平面颜色，也可以是 3D 顶边和侧边(见图 4-14 )。该技术利用了背景图像的两个属性:
- The background cannot exceed the boundary of its containing elements, and the boundary of the label menu is provided by the
lielement of the unordered list.- You can slide one background image on another. The mutually sliding images are the right and left slices of the tab image (see Figure 4-15 and 4-16 ).
这个方法是道格拉斯·鲍曼发明的。详细信息请访问
[www.alistapart.com/articles/slidingdoors](http://www.alistapart.com/articles/slidingdoors)
还有 http/: www.alistapart.com/articles/slidingdoors2
最新动态见[cssportal.com/horizontal-menus/alistapart.htm](http://cssportal.com/horizontal-menus/alistapart.htm)。
图 4-14 是滑动门菜单的一个例子。它显示了添加使活动标签看起来像是页面内容面板的一部分的能力之前的起点(如图图 4-15 所示)。
图 4-14。使用清单 4-14a 创建的起点。请注意选项卡是如何扩展以容纳不同数量的文本的。
可扩展的选项卡是从由单个图像的两个部分组成的图像创建的，一个是左边的切片，比如 6 像素宽× 100 像素高，另一个是右边的切片，294 像素宽× 100 像素高。图 4-15 和 4-16 显示了在画图程序中分割前后的图像。
图 4-15。原始标签图像
图 4-16。切片图像
这些图片的精选可以从
[www.exploding-boy.com/img/menus.html](http://www.exploding-boy.com/img/menus.html)。
获取信息相当棘手。访问网站，选择一种菜单样式(比如选项卡菜单 6)，然后查看源代码。将该菜单的样式和 HTML 标记复制到记事本并保存。下一步转到
[www.exploding-boy.com/img/cssmenus2](http://www.exploding-boy.com/img/cssmenus2)
点击相关的.gif文件，如tableft6.gif、tabright6.gif，右键保存。
清单 4-14a 利用了标签菜单的另一个方面。通常，你不能给一个元素两种样式；例如，您不会期望能够给li元素两个背景图像(左边的切片和右边的切片)。但是li元素也包含一个<a href…>标签；因此，我们可以将左边的切片发送给<a href…标签，将右边的切片发送给li元素。翻转功能通过颜色变化来设置；文本从白色变为红色。
清单 4-14a。【sliding-doors-start.html 提供滑动门标签菜单技术示例
`<!doctype html>
Coly Computer Help
Here is the page's content
清单 14b 对由清单 4-14a 创建的页面进行样式化，并使滑动门标签扩展或收缩以适应标签上的文本。
清单 4-14b。提供控制滑动门标签行为的 CSS(*Sliding . CSS)*
`/add display attributes for the semantic tags/
header, footer, section, article, nav { display:block;
}
body { background-color:#D7FFEB; font-family: 'Trebuchet MS';
font-size: 70%; margin: 20px;
}
container { width:960px; margin:auto;
}
header { background-position:35% top;
background-image:url('img/compbkgcrop.jpg'); background-repeat:no-repeat;
height:160px; padding-bottom:0;
}
h1 { padding-top:110px; padding-left: 310px; font-family :"times new roman";
font-size: 450%; color: #0080a0;; font-weight:bold;
}
h2 { text-align:center;
}
/* Navigation /
nav { height:37px; border-bottom: 2px solid #506BB1; margin: auto; margin-top:10px;
width: 900px;
}
nav ul { margin-left:70px;
}
/THE RIGHT HAND SLICE IS NOW PINNED TO THE TOP RIGHT CORNER OF THE TAB/
nav li {border-bottom: 2px solid #506BB1; list-style: none; float: left;
background: #FFF url(img/right_side.png) no-repeat right top;
margin-right: 5px; height: 37px;
}
/THE LEFT HAND SLICE IS NOW PINNED TO THE TOP LEFT CORNER OF THE TAB/
nav a { display: block; padding: 7px 15px 4px 15px; background-image:
url(img/left_side.png); background-repeat: no-repeat;background-position: left top;
text-align: center; text-decoration: none; color: #FFF; font-weight: bold;
font-size: 1.2em; text-transform: uppercase;
}
nav a:hover { color:yellow;
}
/THE NEXT TWO STATEMENTS ARE INCLUDED READY FOR THE NEXT STAGE #active { border-bottom: none; color:navy; list-style: none; float: left;
background: #FFF url(img/right_side-pale.png); background-repeat:no-repeat;
background-position: right top; margin-right: 5px; height:39px;
}
active a { display: block; border-bottom:none; padding: 7px 15px 4px 15px;
background: url(img/left_side-pale.png); background-repeat: no-repeat;
background-position: left top; text-align: center; text-decoration: none;
color: navy; font-weight: bold; font-size: 1.2em; text-transform: uppercase;
height: 28px;
}
content { width:900px; border: 2px navy solid; margin:-15px auto 5px auto; border-top:0;
}`
清单 4-14b 中的
nav li {border-bottom: 2px solid #506BB1; list-style: none; float: left;  background: #FFF url(img/right_side.png) no-repeat right top; margin-right: 5px;  height: 37px; } 。float:left;项可能被误认为是打印错误，因为它与右侧切片相关联。然而，float:left适用于li(标签)，不适用于右边的背景图像。
完成滑动门菜单剩下的两个步骤是:
- Prepare two more tab charts and modify them;
- Modify the HTML5 tag so that the tag of the selected page is highlighted when the page is active.
修改后的图像是棘手的部分。制作左切片和右切片的副本，并将副本命名为类似于left_side-pale.png和right_side-pale.png的名称。在你的图像处理程序中修改它们，只留下边缘显示，如图图 4-17 和图 4-18 所示。
图 4-17。 left_side-pale.png
图 4-18。 right_side-pale.png
在图 4-17 中，选项卡的背景色被页面的背景色所取代。另一种解决方案是将浅色区域设为透明，这样页面的颜色在标签中就可见了。新图像将用于高亮显示活动页面，如图图 4-19 所示。
图 4-19。术语页面已被选中(它现在处于活动状态),并且选项卡显示为页面的一部分。
为了改变颜色并使选项卡看起来像是内容面板的一部分，必须修改标记，就像前面的选项卡式导航菜单的例子一样。每个页面都必须在该页面的链接旁边添加id="active"属性。
下面的代码片段修改了行话页面上页面链接的标记。行话页面已经通过标识id= " active成为活动页面
`
`垂直翻转导航菜单
垂直的菜单按钮块可以出现在页面的左侧或右侧。
在图 4-20 中，菜单浮动在页面的左侧。
图 4-20 。一个垂直菜单
没有使用图像，因为它是由 CSS 标记绘制的，所以通过 CSS 样式表中的一个简单的改变，可以改变整个网站中菜单按钮的颜色和字体。
垂直侧菜单通常包含在名为<nav>的列中。列宽将决定按钮宽度，但不要依赖于此。在 CSS 标记中，给按钮一个宽度，并使用zoom:1;来防止 IE 6 中出现难看的间隙。下面的垂直菜单按钮代码片段具有语义标签，并且假设 Remy Sharp JavaScript 片段包含在 HTML5 页面的 head 部分中。
`
`带有 3D 按钮的垂直菜单的 CSS 样式表的一部分(图 4-20 )
nav {width:130px; float:left; } ul{ margin-left:0; padding-left:0; } /* set general side button styles */ li { width:115px; list-style-type :none; margin-bottom: 3px; text-align: center; } /* set general anchor styles */ li a { display: block; width:115px; color: white; font-weight: bold;  text-decoration: none } /* specify state styles. */ /* mouseout (default) */ li a { background: #1A9CE0; border: 4px outset #aabaff; } /* mouseover */ li a:hover { display:block; background: #0a4adf; border: 4px outset #8abaff;  width:115px; } /* onmousedown */ li a:active { background:#aecbff; border: 4px inset #aecbff; }
创建一个活动页面按钮
一个活动页面按钮给用户一个他们已经登陆的可视指示。有些客户要求在每个活动页面上有一个活动页面按钮，有些客户为了保持一致，不希望有这个特性。图 4-21 显示了一个看似被按下的按钮，表示当前页面。
图 4-21 中的联系我们按钮看起来是嵌入的。这向用户表明她正在查看“联系我们”页面。不要完全依赖这个。该网页还应该有一个突出的联系我们的标题。
图 4-21。显示按下的联系我们按钮
在清单 4-21a 中，联系我们链接有了一个新类(用粗体表示)。这个类是一个 CSS 样式，使按钮看起来被按下。清单 4-21a 在 3D 菜单上创建一个按下按钮的外观。在此列表中，按下的按钮出现在“联系我们”页面上。通过将代码class="insetbtn"放在页面的菜单链接中，按下的按钮可以出现在任何页面上。参见清单 4-21a 中的粗体示例。
清单 4-21a。【active-page.html】按下“联系我们”按钮(??)
`<!doctype html>
清单 4-21b 是清单 4-21a 的 CSS 样式表。它在选定的页面上创建了一个被按下的按钮的外观，这样用户就知道他已经到达了哪里。
清单 4-21b。让按钮看起来被按下的 CSS 样式表 ( inset-active.css)
`html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;
}
header, footer, section, article, nav { display:block;
}
container { margin-left:20px; margin-top:20px;
}
nav { width:140px;
}
nav ul { width: 115px; float:left;margin-left:0;
}
nav li { margin-bottom: 1px; text-align: center; list-style:none; padding-bottom:3px;
}
nav li a { display: block; color: yellow; font-weight: bold; text-decoration: none; zoom:1;
}
/* mouseout (default) /
nav li a { background: #946055; border: 4px outset #c96e6b;
}
nav li a:hover { background: #9f7562; color:white; border: 4px outset #c96e6b;
}
nav li a:active { background:#aecbff; border: 4px inset #aecbff;
}
/ set general inset button styles */
nav li.insetbtn { border:none; }
nav li.insetbtn a { display: block; color:orange; font-weight: bold;
text-decoration: none; cursor:default; margin-bottom: 0; text-align: center;
list-style:none; padding-bottom:3px; background:#744035; border-top: 4px #5e2100 solid;
border-left: 4px #5e2100 solid; border-right:3px #bfa5a2 solid;
border-bottom:3px #bfa5a2 solid;
}`
注意inset 类中光标的属性被设置为 default 以表示 inset 链接不可点击。
在每一页上，适当的按钮被赋予类insetbtn；例如，在下一个名为links.html的页面上，inset 类的应用如下:
<li class="btn"><a href="contact.html" title="Contact Us">Contact Us</a></li> <li **class="insetbtn"><a href="#" title="Links to related sites">Links**</a></li> <li class="btn"><a href="index.html" title="Return to Home Page">Home Page</a></li>
同一页面上的水平和垂直菜单
水平和垂直菜单的组合需要小心使用。如果水平菜单没有通过更大的按钮变得足够突出，它可能会被用户忽略。图 4-22 显示了两种类型菜单的典型页面。
图 4-22。同一页面上的横向和纵向菜单。主要项目使用水平按钮，并使这些按钮更大，以反映它们的重要性。
提示为了避免设计阶段的混乱，一个菜单使用<div>标签，另一个菜单使用<nav>标签。在图 4-22 的清单 4-22a 中，我选择使用语义<nav>标签用于垂直菜单，使用<div>标签用于水平菜单。
一些用户在一个页面上面对两个菜单时会有困难，水平菜单看起来是看不见的，因为用户习惯于只看垂直菜单。然而，这种技术是一种拥有更多按钮而又不会过度拥挤的好方法。这个缺点可以通过使水平按钮比垂直按钮大得多来克服，就像在清单 4-22a 和 4-22b 中一样。
清单 4-22a。【horiz-vert-menu.html】显示带有水平和垂直 3D 按钮菜单的页面
`<!doctype html>
THE PARISH OF SOUTHBURY
****
Validated by the World Wide Web Consortium
Website design and production by
A West Web Design
CONTACT US
Contact James Miller
Vice Chairman of the Parochial Church CouncilTel: 01234 333 555
Church Office Postal Address:
Church Office, Southbury ParishSunday School Building, The Churchyard
Church Lane, Southbury, SX24 6JM
清单 4-22b。显示水平和垂直菜单的 CSS。(水平垂直菜单. css)
`html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;
}
header, footer, section, article, nav { display:block;
}
body {text-align:center; background: #bee8ff; font-family:"times new roman";
font-size:medium; color:navy;
}
container {width:97%; max-width:960px; min-width:780px; margin:auto;
}
main-content { width:100%; margin:0; padding:0;
} header {width:100%; height:156px; background-image:url('img/header2.jpg');
text-align:center; background-repeat:no-repeat; background-position:center top;
}
img { border:0;
}
creditcol { float:right; width:125px; text-align:center;
}
midcontent { margin:0 135px 0 145px; text-align:center;
}
footer {text-align:center; clear:both;
}
br.clear { clear:both;
}
mid-left-col {width:47%; float:left; text-align:left;
}
mid-right-col {width:47%; float:right; text-align:left;
}
h1 { padding-top:30px; margin:0; text-align:center;
}
h2 { margin:0 0 5px 0; font-size:large; font-weight:bold;
}
p.lft {text-align:left;
}
p.cntr {text-align:center;
}
/set horizontal menu buttons general style/
hnav {display:inline-block; margin:10px auto 10px auto; width:450px; height:42px;
}
hnav li {margin:10px; float:left; text-align:center; padding:5px; list-style-type:none;
}
/set general anchor style to fill the container/
hnav li a {text-decoration:none; color:white; font-weight:bold; width:120px;
padding:5px; text-align:center;
}
/mouseOut state (default)/
hnav li a { background: #1A9CE0; border: 4px outset #AABAFF; text-align:center; É margin-right:5px;
}
/* mouseover */
hnav li a:hover { background: #0A4ADF; border: 4px outset #8ABAFF; width:120px;
}
/* onmousedown */
hnav li a:active { background:#ABCBFF; border: 4px inset #ABCBFF;
}
/* set vertical button menu position /
nav {width:130px; float:left;
}
ul { margin-left:0; padding-left:0;
}
/ set general side button styles /
li { width:115px; list-style-type :none; margin-bottom: 3px; text-align: center;
} / set general anchor styles /
li a { display: block; width:115px; color: white; font-weight: bold; text-decoration: none
}
/ specify state styles. /
/ mouseout (default) /
li a { background: #1A9CE0; border: 4px outset #AABAFF;
}
/ mouseover /
li a:hover { display:block; background: #0A4ADF; border: 4px outset #8ABAFF; width:115px;
}
/ omousedown /
li a:active { background:#AECBFF; border: 4px inset #AECBFF;
}
br.clear { clear:both; }
/various font sizes and colours*/
.tiny { text-align: center; font-family: Arial; font-size: 8pt; color: #000000;
}
p.cntr { text-align:center;
}
p.lft { text-align:left; margin-top: 1px;
}
p.right {text-align:right;
}`
总结
本章为您提供了许多滚动菜单项目。在随后的章节中还会用到一些技巧。列出了滚动菜单的许多资源。它们将帮助您找到进一步的信息，并使您能够下载按钮图像。第七章将展示一个使用 CSS3 在标签菜单上制作圆角的项目。
在下一章，你将会发现 CSS3 提供的增强功能。其中包括 CSS3 渐变、修改颜色不透明度的能力、首字下沉和条纹数据表。下一章还将讨论 CSS3 字体选择器，它提供了服务器端字体，以便更严格地控制网站中使用的字体。
五、迁移到 CSS3
CSS3 是一个独立的推荐标准，而不是 HTML5 的组成部分。CSS3 不仅提供了一个非常令人兴奋的前景，而且浏览器(除了 IE 7 和 IE 8)已经获得了 CSS3 的大部分功能。IE 7 和 IE 8 只是忽略 CSS3 例如，带有 CSS3 圆角的页面显示方形角。
本章包含一系列 CSS3 模块。其他 CSS3 模块将在相应的章节中介绍，如下所示:
- CSS3 Multi-Background: Chapter III
第七章
- CSS3 fillet: Chapter 7
- CSS3 Shadow: Chapter 8
- CSS3 Multi-column: Chapter 15
- W3C's verification of CSS3: Chapter 19
提示以下网站提供了关于 CSS3 的更多信息:[www.cssportal.com/css3-preview](http://www.cssportal.com/css3-preview)是一个必看的资源，它提供了 CSS3 模块的优秀示例、模板和解释。[www.css3generator.com](http://www.css3generator.com)允许你选择一个 CSS3 模块并查看每个例子的标记，你还可以发现哪些浏览器支持它们。
[www.css3.info/preview/](http://www.css3.info/preview/)提供最新消息和例子。
[www.css3.info/modules/](http://www.css3.info/modules/)经常更新，有一个模块及其进度的综合列表。
提供优秀的演示和优秀的代码片段。
[http:/mashable.com/2010/06/04/awesome-css3-techniques/](http://mashable.com/2010/06/04/awesome-css3-techniques/)提供新闻和例子。
CSS3 梯度
在写的时候，CSS3 渐变支持不整洁。CSS3 渐变需要浏览器特有的技巧。本节中的示例展示了当浏览器供应商能够移除他们的黑客攻击时，CSS3 渐变会有多么有用。Mozilla 必须使用一个-moz- hack，Safari 和 Chrome 需要这个-webkit- hack。甚至它们的标记也不同。在撰写本文时，Opera 还没有支持，IE 7 和 IE 8 必须退回到 CSS2 渐变图像。目前，CSS2 渐变图像适用于所有浏览器，因此在未来一段时间内不再需要 CSS3 解决方案。用 CSS2 创建渐变，见第三章。在[gradients.glrzad.com/](http://gradients.glrzad.com/)和[www.colorzilla.com/gradient-editor/](http://www.colorzilla.com/gradient-editor/)有梯度发生器。
我建议你现在就使用这些例子，但是推迟使用 CSS3 渐变，直到不再需要特定于供应商的技巧。对于 IE 7 和 IE 8，使用 CSS2 和渐变图像。
在[dev.w3.org/TR/2011/WD-css3-images-20110908](http://dev.w3.org/TR/2011/WD-css3-images-20110908)和[css-tricks.com/examples/CSS3Gradient/](http://css-tricks.com/examples/CSS3Gradient/)可以看到 W3C 关于 CSS3 渐变的建议
CSS3 渐变可以合并到背景中，而不是使用图像。它们也可以用在新的 CSS3 边框图像中。
线性渐变
图 5-1 和 5-2 显示了 CSS3 在不使用绘画程序的情况下实现的渐变。
图 5-1。CSS3 垂直线性渐变
图 5-2。一个 CSS3 水平线性渐变
清单 5-1 产生一个垂直梯度。内部风格用于教学目的。相关代码以粗体显示，您将看到目前需要-moz-和-webkit-hack。在不久的将来，我们可以期待 Mozilla Firefox、Google 和 Safari 支持渐变，而无需黑客攻击。
清单 5-1。用 CSS3【css3-gradient-vert.html】()创建垂直线性渐变
`<!doctype html>
注-moz-和-webkit-的加价差别很大；同样，Firefox 是自下而上工作的，其他的是自上而下工作的。(另一个好混乱，斯坦利。)
清单 5-2 产生了一个水平梯度。注意，这在任何版本的 IE 中都不起作用，即使是 IE 9 或 IE 10 也不行。
内部风格用于教学目的。相关代码以粗体显示，您将看到目前需要的是-moz-和 - webkit-代码。
清单 5-2。【css3-gradient-horiz.html】使用 CSS3 创建水平线性渐变
`<!doctype html>
在此之前，使用在画图程序中创建的 CSS2 渐变图像。W3C 对未来浏览器的建议将会有类似下面的格式:background:linear(green, white); or linear-gradient(green, white);。有关渐变的最新进展，请访问:dev.w3.org/csswg/css3-img/#linear-gradients同时搜索互联网以跟踪浏览器对渐变的支持，一个很好的起点是:www.css3gradients.com/
径向梯度
图 5-3 和 5-4 显示了 CSS3 在不使用绘画程序的情况下实现的径向渐变。
图 5-3。Mozilla Firefox 中的渐变
图 5-4。Safari 和 Chrome 中的渐变
Mozilla Firefox 提供了最好的渐变，其他浏览器目前将渐变描绘成一个球。
在清单 5-3 中用粗体显示的代码产生了一个径向渐变，同样-moz-和-webkit- hacks 必须在当前支持 CSS3 渐变的浏览器中使用。相关代码以粗体显示。这在任何版本的 IE 中都不起作用，甚至在 IE 9 中也不起作用。
清单 5-3。用 CSS3【css3-gradient-radial.html】()创建径向渐变
`<!doctype html>
W3C 对未来浏览器的建议将类似于以下格式:
background:radial-gradient(green, white);
圆形渐变大概是这样的:
Background:radial-gradient(circle, green, white)
CSS3 不透明度和 RGBA 颜色
这两个模块放在一起讨论，因为它们的区别需要解释。不透明度声明涉及整个元素，包括它的子元素。RGB(红、绿、蓝)声明描述了一个元素的颜色和不透明度；子元素不受影响。但是，使用 RGBA，设计者可以选择哪些子元素是透明的，哪些是不透明的。
提示关于覆盖 RGBA 和不透明度的解释性幻灯片，请参见:
[leaverou.me/2009/03/css3-colors-today-mediacampathens-session/](http://leaverou.me/2009/03/css3-colors-today-mediacampathens-session/)。
在下面的三个示例中，内部样式表仅用于教学目的。
图 5-5 是图 5-5 、图 5-6 和图 5-7 中所示示例的起点。
图 5-5。两个普通的盒子元素使用 CSS3 和 RGB 来设置背景颜色
出于稍后将在图 5-7 中变得清楚的原因，前框被赋予了与背景颜色相同的 4 像素宽的边框，因此在图 5-5 中该边框不可见。
清单 5-5 显示了图 5-5 的 HTML 和 CSS3。粗体代码创建了不透明框。这些框在任何浏览器中都具有相同的外观。因为 IE 7 和 IE 8 不支持 CSS3，所以你会想到会出现问题。然而，因为 IE 7 和 IE 8 的默认设置是不透明，并且因为列表没有指定任何透明度，所以所有的浏览器都会显示不透明框。
清单 5- 清单 5。使用 RGB(css3-opaque.html)创建两个重叠的不透明框
`<!doctype html>
This is the back box
This is the front box
下一个项目显示 CSS3 不透明度/透明度。IE7 和 IE 8 不支持这个。
CSS3 透明度(又名不透明度)的效果如图图 5-6 所示。
图 5-6。使用 CSS3，整个前框元素被赋予 0.5 的不透明度，这个不透明度同样适用于前框的所有元素，包括子元素、不可见的 4 像素边框和白色文本。
透过透明的前盒可以看到后盒。前框的白色文本中可以看到后框的背景色。
在清单 5-6 中，CSS3 属性opacity:0.5;与整个#front-box元素相关，包括任何子元素，如边框和段落。不透明度可以设置为 1(完全不透明)或 0(完全不透明；即完全透明)和介于两者之间的任何值，例如 0.5 表示半透明。
清单 5-6。【css3-opacity.html】创建一个透明度为 0.5 的前框()**
`<!doctype html>
This is the back box
This is the front box
下一个项目展示了 CSS3 RGBA 元素的灵活性。“A”代表 alpha，这个特性允许设计者选择哪些子元素具有不同程度的不透明度。
图 5-7 显示透明/不透明可以选择性地应用于子元素。
图 5-7。 RGBA 已经被选择性地应用于前箱。这一次，只有前框的背景色是透明的。
四像素边框和白色文本这两个子元素保持完全不透明。4 像素的边框在前面已经包含了，但是在前面的例子中是看不到的。
注意通过将 RGBA 应用于单个子对象，可以使边框和文本的颜色变得不透明或透明，例如边框颜色和文本。这提供了很大的灵活性，因为设计者可以选择元素的哪些位应该被赋予不透明值。
在清单 5-7 中，选中的元素是透明的前框的背景色。子元素，如边框和段落，不受背景不透明度的影响。不透明度可以从 1(完全不透明)设置到 0(完全不透明；完全透明)。在图 5-7 中，前框背景颜色设置为background-color: rgba(255,0,0,0.5);。
清单 5-7。【css3-rgba.html】对前框选择性应用 CSS3 不透明度
`<!doctype html>
This is the back box
This is the front box
注意RGBA 和不透明模块令人兴奋和期待已久。遗憾的是，IE 6、IE 7 和 IE 8 都不支持它们。因此，必须使用 IE 条件来呈现这些 IE 版本的替代显示。条件 IE 样式链接必须放在 HTML 标记中主样式链接之后，它可以提供统一的颜色或通过平铺渐变图像产生的渐变。
新增 CSS3 选择器和元素
CSS3 中提供了许多新的选择器。这些可以在本章末尾提到的可下载的备忘单中找到。
下面的例子是一些最有用的伪类选择器和伪元素。在图 5-8 中显示了一个下降资本。
::第一个字母
图 5-8。使用 CSS3 的降资本
图 5-8 中所示的首字下沉是由清单 5-8 中粗体显示的伪类选择器产生的。在每种现代浏览器中，首字下沉的高度各不相同。Mozilla Firefox 提供了最好的显示效果。
清单 5-8。【对段落的第一个字母应用首字下沉(CSS3-drop-cap.html)
`<!doctype html>
Drop capitals are possible in CSS3
The first letter is targeted by the
first-letter pseudo-element. The first
letter is enlarged and dropped to
span more than one line.
注意你可能需要稍微调整一下字体大小和行高来获得想要的效果。第一个字母可以被赋予不同的颜色。你不太可能希望整个网站都使用首字下沉，因此<div id=``dropcap-section``>只选择需要首字下沉的段落。
::第一行
::first line影响整个段落的第一行；然而，这似乎比在第一行使用一个<span>更麻烦。
::之前
::before伪元素可以在某些段落的开头生成一些内容；然而，这也可以在 CSS2 中实现(参见附录)。
:第 n 个孩子()
:nth-child()样式列表或表格中的选择性项目。如果交替行是彩色的，表格形式的信息更容易阅读和理解；在宽的多列表格中尤其如此。
属性简化了交替颜色行的创建。例如，ul :nth-child(even)将对项目的列表中的每第二个、第四个、第六个、第八个等项目进行样式化。注意ul和:nth-child之间的空格；这在列表中很重要。
括号中可以包含各种关键字，如奇数、偶数、或号来选择特定的项目。
在图 5-9 中，第二、第四和第六行已经用nth-child(even)着色。
图 5-9。使用 CSS3 n-child(偶数)添加条纹
使用交替条纹可以使宽表格更容易阅读。在清单 5-9 中，粗体代码产生了如图图 5-9 所示的交替条纹。IE 7 和 IE 8 不支持 CSS3 分条表。
清单 5-9。【table-1.html】在表格的偶数行中创建彩色条纹
`<!doctype html>
` `| Place | Hotel | Cost |
|---|---|---|
| London | Kingfisher | £200 |
| Colyton | Leofric | £30 |
| Coventry | Ritz | £150 |
| Charmouth | Palace | £100 |
| Daventry | De Luxe | £150 |
| Rugby | Royal Grand | £180 |
图 5-10 显示了使用 CSS3 从第三行开始的交替条带行的表格。
图 5-10。使用 CSS3 和 n-child(2n+3)添加条纹
在清单 5-10 的中，条纹的公式更加复杂，但是非常合理。标记 table tr:nth-child(2n+3) 的意思是:从第 3 行开始，每隔一行应用一个样式。
清单 5-10。【table-2.html】使用 CSS3 创建一个从第 3 行开始的条纹表
`<!doctype html>
` `| Place | Hotel | Cost |
|---|---|---|
| London | Kingfisher | £200 |
| Colyton | Leofric | £30 |
| Coventry | Ritz | £150 |
| Charmouth | Palace | £100 |
| Daventry | De Luxe | £150 |
| Rugby | Royal Grand | £180 |
字体选择器
CSS3 @font-face模块可以指示浏览器使用特定的字体，即使它没有安装在用户的计算机上。然而，它在下载速度和可能的版权侵权方面存在困难。如果用户的计算机上没有安装该字体，就必须从网站的服务器上下载，并存储在那里。因为字体集可能非常大，所以下载速度会受到影响，并且在下载完成之前，文本在页面上是不可见的。除非你得到许可使用这种字体，否则未经许可下载拷贝会被指控为盗版。IE 6、IE 7 和 IE 8 不支持@font-face模块，除非您执行以下操作:
使用 JavaScript，
Use. Eot (embedded open) font, or
试试
[jontangerine.com/log/2008/10/fontface-in-ie-making-web-fonts-work](http://jontangerine.com/log/2008/10/fontface-in-ie-making-web-fonts-work)的技巧
假设你希望你的站点使用一种叫做mickealmouse.ttf的字体，并且你也有一个.eot版本的字体。您的标记可能如下所示:
@font-face { font-family: ‘mickealmouse’; src: url(‘mickealmouse.ttf’) format(truetype’); src: local(mickealmouse’), src: url(‘mickealmouse.eot’); } body { font-family: mickealmouse; Arial, Helvetica, sans-serif; font-size: medium; color:black; } h1 { font-family: mickealmouse; Arial, Helvetica, sans-serif; font-size: x-large;  color:black; } h2 { etc…
如果用户的浏览器不支持@font-face，它可以回退到 Arial、Helvetica 或 sans-serif。如果用户已经安装了 mickealmouse 字体，src: local(mickealmouse')项将指示浏览器使用已安装的版本，这样就不必下载字体。.eot字体不需要格式。
WOFF 文件格式是另一种适合于@font-face的字体，W3C、微软、Opera 和 Mozilla 期望它成为所有浏览器支持的“单一的、可互操作的(字体)格式”。这种文件格式似乎比同等的 TTF 文件小 40%。
提示关于这个主题的有用资源，请参见 Michael Bowers、Dionysios Synodinos 和 Victor Sumner 合著的《Pro HTML5 和 CSS3 设计模式一书的第十章(a press，2011)。
虽然不是 CSS3，但是 Google 提供的替代方案非常值得一试；
访问:[google.com/webfonts](http://google.com/webfonts)可以选择免费的开源字体，下载其代码。该代码将是一个在线样式表的链接，该链接必须是一个页面的第一个项目<head>部分。然后将该字体样式添加到 CSS 中的字体样式列表中；假设你下载了 Diplomata 字体，CSS 字体家族可以是这样的:h1 { font-family: 'Diplomata '，' times new roman '，serif}
使用当前、未来和其他模块
记住 CSS3 不是 HTML5 的一部分；因此，它可以与 HTML4 和 XHTML1.0 一起使用。但是，目前最新的浏览器仅部分支持它。IE 7 和 IE 8 不支持以下 CSS3 模块，并且 IE 9 当前不支持所有 CSS3 模块:
- Outline : Provide various border appearances, such as ridge, beginning, embedding and groove. (There is a good equivalent of CSS2. )
- Border picture : A block element is surrounded by a border made of tiny pictures (not very useful. )
- Grid layout : A short CSS method for creating a page layout grid.
- Template layout : Copy grid layout appears.
- Media inquiry : The media types used by CSS 2 are screen, voice and print; CSS3 module will expand the use of media types.
- Subtitle Style : Handling overflow text presented in the form of moving subtitles.
- Speech (this module defines the improved way to convert documents into speech and the auditory recognition using voice commands)
- Transition and animation (improved animation control)
提示参见[www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf](http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf)处的 CSS3 备忘单
总结
CSS3 有令人兴奋的可能性，但它们被 IE 7 和 IE 8 无法利用的事实所破坏。然而，你现在知道当 IE 7 和 IE 8 被 IE 9 取代时，CSS3 将提供的优势。请务必查看第三章、 7 、 8 和 15 中涵盖的其他 CSS3 建议。
在下一章，你将了解 HTML5 提供的新的音频和视频标签。这是 HTML5 最激动人心和最有用的增强之一，尤其是视频在现代网站中如此重要。您还将了解到新标签如何大幅减少视频格式的数量。后备提示使 IE 7 和 IE 8 能够利用新的标签。还描述了创建幻灯片放映的两种方法。
六、音频、视频和幻灯片放映
本章的第一部分讲述了音频和视频在网站中的使用和误用。本章还提供了在网页中嵌入音频剪辑和录制语音剪辑的说明。简要介绍了当前的视频文件格式，然后是关于 HTML5 <video>标签的信息，它使用的文件，以及将视频剪辑嵌入 HTML5 网页的说明。
IE 7 和 IE 8 中缺乏对<video>标签的支持所带来的问题通过各种回退方法得到了解决，提供了完整的回退示例。其中包括 YouTube 和 Vimeo，因为它们提供了一种相对简单的向网站添加视频的方式。你会发现这两个在线视频商店可以单独使用或作为备用。
然后这一章提供了另外两种使用免费下载的 JavaScript 文件来处理 IE 7 和 IE 8 的 HTML5 视频的方法，Flowplayer 和 OS FLV。
本章最后介绍了创建和嵌入幻灯片的各种方法。
何时使用音频和视频(AV)
应特别注意不要无偿使用音频和视频。一些网站设计者插入视频只是因为他们可以，因为它很有趣。创建和嵌入视频可以让无聊的一天变得活跃起来，但这可能不会让委托网站的客户满意。以下是在网站中包含反病毒软件的一些正当理由:
假如没有背景音乐淹没演讲者的评论，一个 AV 剪辑有时可以比文本或图像更好地解释一些东西。* If the customer is a film/TV production unit, a video clip can explain the quality of the product.* If your page gives instructions for programming, making, installing or repairing something, then an AV clip may be helpful. However, most users will not remember the instructions on the video when they put it into practice (unless they have two computers, one for displaying the video and the other for executing the instructions). In addition to the video, provide a set of printable instructions. If your website sells ringtones or doorbells of various sounds, audio can play a very good role. Potential customers can listen to these options and then choose one that satisfies them. A video can show a product or service, but be careful: poor video will have negative effects. Avoid inappropriate background music, because this is the biggest obstacle. It's a mystery why video and documentary producers want to drown out the host's comments.* Slides or videos are ideal for showing hotel accommodation, real estate or tourist attractions.* Pop bands, folk bands and choirs looking for fixtures can give short samples of their stage display and music style by using video clips; Or the website can only play audio clips of music. As an example of useful use of AV, a bird watching website can contain a video of birds and birdsong.
使用他人的视频、音乐或声音
不要偷 AV 剪辑。您将需要一个真正的许可证(或来自非商业来源的许可)来将 AV 合并到您的网站上。音乐家和电影制作人肯定会起诉你，你可能不得不卖掉你的房子来支付罚款。拥有录像带、CD 或 DVD 并不意味着你有权使用其中的音乐或视频。下载的剪辑不能在没有正版许可的情况下使用，除非它们是免费提供使用的。所谓的“免版税剪辑”名不副实，通常需要付费。
如果使用来自另一个 URL 的视频(当然，经过许可)，视频源的所有者会向您提供指向其网站上的视频文件的 URL。
测试你的 AV
一些 AVs 可以在互联网上工作，但是在你的本地计算机上测试时，它们会失败或者行为失常。总是在网上上传和测试。
应该避免什么
如果在错误的时间或错误的地点使用视频，会非常烦人。
- Strongly resist the temptation of putting videos on the front page. It will determine the focus and divert the viewer's attention from more important items on the page, such as your navigation menu. In addition, video or audio clips may cause MIME type problems or coding errors; These two problems will hinder the normal access to your most important homepage.
- Do not use automatic start. Auto start makes the sound or video automatically start when the page is loaded. This is a particularly bad practice on the homepage and a bad idea on any page. Sudden sound will scare users, especially blind users. Users will either leave your website immediately or frantically look for ways to close AV clips. They may never come back to your website.
- Video and audio clips must have user controls. Ensure that AV can only start when the user clicks the start button on the video control. It may be acceptable if you start to load a short and quiet arpeggio automatically. Maybe a quiet and soothing background music is acceptable in the video, as long as it doesn't repeat endlessly, as long as it is appropriate. When there is a thumping or disco background for the first time, most users will click the mute button, or more likely, give up this website.
- Do not use
onmouseoversound or video. If the blind or the visually impaired accidentally put the mouse on a sound link, she will be frightened. Even people with normal eyesight will accidentally hover the mouse over the sound link, and they will not be satisfied with the sudden sound. For the benefit of users, please always useonmousedownor the console to start audio or video.
非语义 HTML5 页面的音频
音频剪辑可以嵌入到非语义 HTML5 页面中，以避免将音频文件转换为其他格式。然而，我鼓励你尽快开始使用语义标签，以跟上现代网页设计技术。
图 6-1 显示了 Internet Explorer 8 中三种声音的控件。
图 6-1。三、非语义 HTML5 页面截图
清单 6-1 使用了曾经被否决的<embed>标签。这三种.wav声音在 Internet Explorer、Mozilla、Safari 和 Chrome 中都可以听到；因此，大约 95%的电脑用户将能够听到声音。不幸的是，要在 Opera 11.5 中启动声音，用户需要点击两次 starter 按钮。
清单 6-1。【example-sound1.html】在一个非语义页面中创造三个声音()**
`<!doctype html>
Three Sample .wav Sounds
The users have complete control. They can choose whether to listen to the sound or  not.The sounds work in IE, Mozilla and Safari.
Opera 11.52 misbehaves and needs two clicks of the mouse.
A loud beep beep sound.` `
Listen to a First World War aeroplane
This is a speech clip: `
语义 HTML5 页面的音频
下一个项目演示了如何使用带有语义标签的 HTML5 页面来播放这三种声音。图 6-2a 和 6-2b 显示了 IE 7 和 IE 8 以及 Mozilla Firefox 中显示的控件。
提示该。在[media.io/](http://media.io/)使用在线转换器将 wav 文件转换为.mp3和.ogg文件。为了获得最佳效果，请先将文件转换为。 mp3然后转换。mp3文件改为.ogg 。这两种文件格式是使 HTML5 音频标签支持 IE 7 和 IE 8 以外的浏览器所必需的。
那个。文件到达时会附带大约半英里长的数字和字母，如下所示:
beep-beep.ogg;jsessionid=0113CF8JM5SD16M37…等等。重命名文件并删除.ogg之后的所有内容
图 6-2a。IE 7 和 IE 8 中显示的控件
图 6-2b。火狐浏览器中的控件
在清单 6-2a/2b 中，三种声音及其控制包含在三个<div>中，每个<div>包含一个语义音频段和一个 IE 7 和 IE 8 的后备。最新的 HTML5 规范似乎暗示 autobuffer 将被preload="auto"取代。有些设计师很谨慎，两者兼而有之，如下所示:
<audio controls autobuffer preload="auto">
清单 6-2a/2b。用语义标签在页面上创造三个声音(【example-sound2a-and-2b.html】)**
`<!doctype html>
LOUD Beep-Beep
First World War Aeroplane
Adrian's Poem
制作语音剪辑
Windows 有内置的录音机软件。笔记本电脑有内置麦克风，但台式电脑通常需要一个便宜的麦克风。麦克风/耳机套件附有两个插头；仅使用粉色插头。将粉色插头插入电脑上的粉色插座。如果计算机的插座没有颜色标记，请查找插座旁边的麦克风符号。一些内部拨号调制解调器有彩色插座，但不要插入这些插座。
开始录音
要在 XP 中开始录音，请执行以下操作:单击开始
所有程序附件娱乐录音机。
要在 Windows 7 中开始录音，请执行以下操作:单击开始所有程序附件录音机。
对于任一操作系统，单击停止/开始按钮并说出您的信息。您的消息最长可达一分钟。自然清晰地说话，让麦克风离你的嘴大约六英寸。单击带有黑色矩形的按钮停止录制。
在 XP 中，单击带有向右三角形的按钮来收听您的消息。
然后，点击文件另存为...给文件命名并保存。
在 Windows 7 中，用适当的名称将文件保存在适当的文件夹中。找到文件并双击它来试听。
视频概述:昨天的视频格式
视频是网页设计师的噩梦。十四种视频文件格式，四种流行的媒体播放器，五种带有四个插件的主浏览器，最好的描述应该是“一只狗的早餐”。就个人而言，视频和音频比网页设计和制作的任何其他方面都更让我挠头和沮丧。以下是撰写本文时的几种常见视频格式:
- The
.flvformat is Adobe's Flash file. It must be in a.swfcontainer.- The
.movformat was developed by Apple. These files are called QuickTime movies. To play these movies on Windows computers, you must install free QuickTime player.
.rm
ram
.swfformat (Shockwave Flash) is a container for playing.flvflash video or animation files.- This. Microsoft's format is very universal and can be highly compressed. It can adapt to any download speed. It can be of any size for streaming broadcast and video. Microsoft's
.wmvformat is very popular, but it can only be played on Windows computers using Windows Media Player.
但是事情已经有所改善了！
现在有以下四种嵌入视频的方法:
- The new HTML5
<video>tag.- Online video hosting (YouTube or Vimeo). HTML5 uses new video tags, only three file types, and supports IE 7 and IE 8.
- javacriptāākepneurs flv。
文件类型为 HTML5 语义视频标签
HTML5 引入了一个<video>标签，它将不再需要插件和 JavaScript。它在所有最新的浏览器中都受支持，但在 IE 7 或 IE 8 中不受支持。HTML5 视频标签只使用三种视频格式；14 种文件类型的可喜减少。要播放视频，浏览器会解压缩视频文件。
提示要获得有用的资源，请阅读 Silvia Pfeiffer 撰写的html 5 视频权威指南(Apress，2010)。
HTML5 视频使用新的视频容器(文件).webm、.mp4和.ogv)。视频容器有几个组件；视频成分、一个或多个音频轨道、指定各种维度的一些元数据、标题和文件语言。视频播放器使用编解码器，使视频播放器能够解码容器中的信息，以便可以看到和听到它。
支持 HTML5 视频的浏览器使用以下一种或多种文件类型:
- Safari、Chrome 你好九号何如
.mp4(你好啊页:1。- Mozilla(Mozilla)吴经玲铬(铬)何如
.webm。- IE 9 uses plug-ins (WebM Media Foundation components) to play
.webm, which is equivalent to defeating the purpose of HTML5 video tags, because it aims to eliminate the need for plug-ins.- 浏览器名火狐、Chrome、戏曲
.ogv。
HTML5 视频非常简单，但是你需要一些视频文件转换程序。
转换文件格式
在.flv和之间转换。 swf，从[www.foxtab.com](http://www.foxtab.com)下载免费的 FoxTab 视频转换器。这是我最喜欢的转换器，因为它可以转换几乎任何格式。
将文件转换为。 webm，。 ogv和.mp4，在[mirovideoconverter.com](http://mirovideoconverter.com)下载免费的米罗视频转换器显然，米罗最终将提供他们的转换器的 iPad 版本。
将文件转换为。 wmv格式，从[freemake.com](http://freemake.com)下载免费程序 Freemake 该网站还提供了一个有用的声音文件转换器。
将文件转换为.mp4、。 webm，.ogv格式，从[handbrake.fr](http://handbrake.fr)下载手刹，免费程序。
前面提到的三个视频转换器很容易使用。最后一个比较棘手，但是它提供了对转换过程的完全控制。到目前为止，我没有手刹。要获得一套关于手刹的出色、详细且有插图的说明，请访问 Mark Pilgrim 的网站[diveintohtml5.info/video.html](http://diveintohtml5.info/video.html)。你也应该看看马克·皮尔格林的书，《HTML5:启动并运行》(O ' Reilly Media，2010)。
基本 HTML5 视频编码格式
新的<video>标签现在就可以使用，前提是你有一个后备方案来让 IE 7 和 IE 8 用户观看你的视频。当用户最终停止使用 IE 7 和 IE 8 时，HTML5 视频标签将使网页设计师的生活变得更加轻松。那么可以放弃 IE 的后备，只需要三种文件格式。在本章的后面，你将学习如何使用各种回退。下一段代码演示了在没有回退的情况下使用 HTML5 视频标签时标记的简单性。
<video width="320" height="240" controls> <source src=somevideo.mp4 type='video/mp4; codecs="avc1, 42Eo1E, mp4a.40.2" '> <source src=somevideo.webm type='video/webm; codecs="vp8, vorbis" '> <source src=somevideo.ogv type='video/ogg; codecs="theora, vorbis" '> </video>
我发现编解码器可以省略，因为它们似乎嵌入在浏览器中，但为了完整起见，它们显示在前面的代码片段中。因此，源代码可以写成:
<video width="320" height="240" controls> <source src=somevideo.mp4 type='video/mp4;'> <source src=somevideo.webm type='video/webm;'> <source src=somevideo.ogv type='video/ogg;'> </video>
最终，IE 7 和 IE 8 会逐渐减少并消亡；当这种情况发生时，您可以从前面的代码片段中看到，嵌入视频将像向 web 站点页面添加图像一样简单。让我们希望很快有一天，媒体播放器的创作者们会聚在一起，同意只使用一种音频格式和一种视频格式。
以下项目中使用的马车和蝴蝶视频剪辑由英国德文郡科利顿海豚馆的艺术家罗杰·劳顿和他的女儿海伦娜好心提供。他们的网站在[www.dolphinhousegallery.co.uk](http://www.dolphinhousegallery.co.uk)
您可以通过从本书的页面 www下载本章的文件来试用新的 ，然后用 IE 7 或 IE 8 以外的任何浏览器加载video-tag.html。图 6-3 显示了使用新的<video>标签并由清单 6-3 创建的视频截图。
图 6-3。html 5
Mozilla Firefox、IE 9、Chrome、Opera 和 Safari 支持新的<video>标签，每个浏览器都有用户熟悉的控件。清单 6-3 是图 6-3 的标记，视频文件被假定在一个名为video的文件夹中。
注意列表行中的尺寸<video width="480" height="385" controls="controls">很重要。生成三个视频文件时，视频必须具有相同的帧大小，并且帧尺寸必须包含在标记中，否则视频可能无法播放。
清单 6-3。【为 IE 7 和 IE 8 使用 HTML5 视频标签而没有回退(video-tag.html)
`<!doctype html>
HTML5 video tag with embedded YouTube fallback
`混合页面
仅仅因为发布了一个新的 W3C 标准，并不意味着您必须改变整个网站来满足该标准。如果正确指定了每个页面的 DOCTYPE，网站可以包含 HTML、HTML5、XHTML 和 XHTML5 的混合页面。如果您只想在现有网站的一个或两个页面上使用新的<audio>和<video>标记，这将非常有用。只是在视频页面上使用 HTML5，直到你准备好将其他页面改为 html 5。与此同时，在下一节我们将调查允许 IE 7 和 IE 8 用户观看你的视频的临时解决方案。
IE 7 和 IE 8 的问题呢？
Internet Explorer 7 和 IE 8 不理解 HTML5 <video>标签；因此，已经开发了各种解决方案，使用称为回退的变通方法。在接下来的几年里，因为 IE 7 和 IE 8 被 IE 9 取代还需要一段时间，所以你应该继续确保视频在 IE 7 和 IE 8 中播放。
同时，不要惊慌！您当前使用 HTML4 和 XHTML 1.0 页面中的<object>和<embed>标签的页面将在未来十年甚至更长时间内继续发挥作用。
接下来的两个项目提供了使用 YouTube 和 Vimeo 作为唯一的视频播放器以及使用 HTML5 <video>标签时作为后备解决方案的说明。
在线解决方案:使用 YouTube 或 Vimeo
在 YouTube 或 Vimeo 上在线存储短视频剪辑很有意义，因为当视频的代码被添加到 HTML5 页面时，视频可以在所有主要的浏览器上观看。我们可以肯定的是，出于商业原因，YouTube 和 Vimeo 将会跟上任何新的网络标准。YouTube 和 Vimeo 代码现在使用<iframe>标签，这适用于所有浏览器，包括 IE 7 和 IE 8。
注意定期查看 YouTube 和 Vimeo 网站，了解注册和上传/下载程序的变更，尤其是使用这些产品的条款和条件的变更。在销售商品或服务的网站上使用这些视频可能会收费(或改变成本)。视频文件的允许大小也可能改变。
接下来的两个项目描述了如何创建 YouTube 或 Vimeo 帐户，如何将视频上传到 YouTube 或 Vimeo，以及如何将 YouTube 或 Vimeo 代码嵌入到网页中。
使用 YouTube
上传你的视频文件时，YouTube 首选 MPEG-2 或 H.264(又名 MPEG-4，又名.mp4)。YouTube 也将接受。 wmv文件。视频应该每秒 30 帧，大小为 640 × 360(纵横比为 16:9)或 480 × 360(纵横比为 4:3)。首选音频格式是 MP3 或 ACC。
对视频大小的托管限制
网站宿主限制网站的大小。一个基本的低成本网站托管包可能允许总共 1GB 的上传(包括所有其他网站文件)。最昂贵的主机包将允许高达 20 GB。视频文件可能非常大；因此，将视频存储在其他地方，如 YouTube 上，可以将网站保持在主机指定的限制范围内。
警告潜在客户，YouTube 上的每个视频的最大容量为 1 GB，最长播放时间为 15 分钟(最好是 1 到 3 分钟)。为了了解这些限制的最新情况，请访问[www.youtube.com](http://www.youtube.com)并寻找帮助按钮，因为谷歌完全修改了 YouTube 网站，帮助链接似乎已经被降级到一个非常长的主页的底部。访问谷歌主页并点击顶部菜单上的 YouTube 项目可能会更容易。同样，你需要向下滚动到一个很长的页面的底部来找到帮助按钮。
注册一个 YouTube 帐户
如果你有一个谷歌帐户，使用谷歌登录详细信息登录，因为谷歌拥有 YouTube。否则，在 YouTube 主页上，单击创建帐户并填写所需的详细信息。给出你的客户的电子邮件地址(或者你自己的电子邮件地址，如果这个视频是为你的网站准备的)，这样你的客户(或者你)就可以收到验证账户详细信息的电子邮件。您将被要求发明一个用户名和密码。当您收到电子邮件时，单击验证链接激活您的新帐户。
注意你不能复制你已经上传的内容；即使您更改了文件名，这也适用。Google/YouTube 倾向于偶尔改变一些东西，所以下面的过程可能会过时。在写这篇文章的时候，谷歌已经把一个用户友好的网站变成了一个神奇的神秘之旅。所有的配置技巧都消失了。最令人恼火的遗漏是，当你自己的视频播放时，用户可以拒绝显示相关视频的图库。这让我的客户对 YouTube 望而却步。
要使用 YouTube 托管视频，请登录at [www.youtube.com](http://www.youtube.com)，点击顶部菜单上的上传项目。在这一点上，以前的，更加用户友好的版本允许你在上传之前配置视频，遗憾的是，这个功能现在已经被删除了。
点击顶部菜单栏上的上传后，点击标签为的按钮从您的计算机中选择文件。一个小窗口将允许您导航到视频在硬盘上的存储位置。单击视频，然后单击打开按钮。在下一个屏幕的右边选择未列出，任何有链接的人都可以查看。过一会儿，视频将完成上传，您会看到一条消息，提示您的视频上传完成。记下视频的 URL 以供将来参考。点击嵌入按钮。一个小窗口将以蓝色突出显示代码。将代码复制并粘贴到您的网页中。您可能需要等待几分钟才能观看视频。
自 2012 年初以来，YouTube 代码片段已被简化，可以进行验证。以下是 YouTube 可下载代码的新<iframe>格式示例:
`<iframe width="420" height="315" src="http://www.youtube.com/embed/xxxxxxxxxxx?rel=0"
frameborder="0" allowfullscreen>
虽然这在所有的浏览器中都可以工作，但是当你试图验证它的时候会发生一些奇怪的事情；W3C HTML5 验证器发现的错误会让严格的 HTML4 和 XHTML 爱好者感到震惊。如果您想要验证代码，您必须移除一些项目，如下所示。当我注释掉这些项目使其生效时，它仍然可以在所有浏览器中工作。
修改后的清单 6-4b 有一些项目(粗体显示)被注释掉，以使文件有效。
清单 6-4b。【wagon-YT-validated.html】一个嵌入的 YouTube 视频验证了(??)
`<!doctype html>
