原文：Practical HTML5 Projects
协议：CC BY-NC-SA 4.0
六、音频、视频和幻灯片放映
本章的第一部分讲述了音频和视频在网站中的使用和误用。本章还提供了在网页中嵌入音频剪辑和录制语音剪辑的说明。简要介绍了当前的视频文件格式，然后是关于 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.
语义 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>
制作语音剪辑
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下载本章的文件来试用新的标签。apress.com`` ，然后用 IE 7 或 IE 8 以外的任何浏览器加载video-tag.html。图 6-3 显示了使用新的<video>标签并由清单 6-3 创建的视频截图。
***图 6-3。*html 5标签显示了 Mozilla Firefox 中的一段视频。请注意，没有显示任何徽标或其他不需要的标记。
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>
图 6-4 显示了一个典型的 YouTube 托管视频。
***图 6-4。*典型的 YouTube 托管视频。注意 YouTube 的标志。
清单 6-4a 和 6-4b 包含在本章的可下载文件中，但出于安全原因，YouTube 视频不会播放。列表中的身份号码已被替换为xxxxxxxxxxx。但是，您仍然可以在 IE 7 和 IE 8 之外的任何浏览器中查看视频。此外，如果您将自己的 YouTube 托管视频插入文件，您将能够在包括 IE 7 和 IE 8 在内的任何浏览器中查看结果；只要确保代码片段是<iframe>格式的。
您可以单独使用 YouTube 剪辑，也可以在使用 HTML5 <video>标签的页面中使用 YouTube 剪辑作为后备。
要单独使用 YouTube 剪辑，只需删除清单 6-4a 中粗体显示的代码。无论哪种方式，当使用你自己的 YouTube 托管的视频时，它将在所有浏览器中显示，包括 IE 7 和 IE 8。
清单 6-4a。【wagon-YT.html 创建包含 HTML5 视频和嵌入 YouTube 视频的页面
`<!doctype html>
虽然这在所有的浏览器中都可以工作，但是当你试图验证它的时候会发生一些奇怪的事情；W3C HTML5 验证器发现的错误会让严格的 HTML4 和 XHTML 爱好者感到震惊。如果您想要验证代码，您必须移除一些项目，如下所示。当我注释掉这些项目使其生效时，它仍然可以在所有浏览器中工作。
修改后的清单 6-4b 有一些项目(粗体显示)被注释掉，以使文件有效。
清单 6-4b。【wagon-YT-validated.html】一个嵌入的 YouTube 视频验证了(??)
`<!doctype html>
使用 Vimeo
Vimeo 界面比新的 You Tube 界面更容易理解和使用。对于这两种在线服务，代码很容易下载并嵌入到页面中。他们的表现似乎没有什么不同。
Vimeo 视频的基础版是免费的，但不能用于商业广告，比如销售产品或服务。允许个人使用、非商业和小规模生产单位。对于商业用途，pro 版本的费用为每年 60 美元或每月 9.95 美元。
无论你注册哪个，Vimeo 都会提供一个简单的上传程序。首先阅读网站上的三条规则，然后点击顶部菜单上的上传项目。您将看到一个窗口，该窗口允许您浏览硬盘以找到该视频。嵌入代码很简单，只需将鼠标悬停在视频上或单击它，然后单击视频开始帧上的嵌入按钮(右边第二个)。代码将会出现。将代码复制并粘贴到您的网页中。你可以选择播放器的颜色和大小。Vimeo 可能是最容易使用和定制的服务。
清晰的建议见[vimeo.com/faq#what_is_embedding](http://vimeo.com/faq#what_is_embedding)。
就在我写完这本书的时候，Vimeo 发布了一个更新的网站。该网站的所有细节都不太完整，但注册和上传过程似乎与前面的说明类似。
图 6-5 显示了使用清单 6-5 嵌入的 Vimeo 托管的蝴蝶电影。
***图 6-5。*Vimeo 主持的视频。请注意 Vimeo 徽标。
图 6-5 的嵌入式 Vimeo 代码可以在清单 6-5 中找到(为了安全起见，我修改了一些细节)。和 YouTube 一样，在没有语义视频标签或后备的情况下，单独使用 Vimeo 代码时，视频页面可以非常简单。这是一种将视频放到网站上的简单方法，因为它避免了将视频文件转换成三种文件格式.mp4、.webm和.ogg。
该文件不会在 HTML5 验证器中进行验证，因为有些不推荐使用的属性(如webkitallowfullscreen)不允许与<iframe>标签一起使用。然而，只要视频在播放，您的客户可能就不会关心它是否有效。
清单 6-5 包含在本章的可下载文件中，但是视频不能在 IE 7 或 IE 8 中播放。出于安全考虑，清单中的 Vimeo 身份号码已被替换为xxxxxxxx。然而，使用包含<video>标签的版本，你仍然可以在 IE 7 和 IE 8 之外的任何浏览器中观看视频。此外，如果您将自己的 Vimeo 托管视频插入到该文件中，您将能够在任何浏览器中试验和查看结果。
您可以单独使用 Vimeo 剪辑，也可以在使用 HTML5 <video>标签的页面中使用 Vimeo 剪辑作为后备。
要单独使用 Vimeo 剪辑，只需删除清单 6-5 中粗体显示的代码。无论哪种方式，使用您自己的 Vimeo 托管的视频，该视频将在所有浏览器中显示，包括 IE 7 和 IE 8。
清单 6-5。使用 HTML5 视频标签嵌入 Vimeo 视频(【video-tag-and-vimeo.html】??)
`<!doctype html>
html5 video tag with vimeo fallback
**** **** **** ****Butterfly and orange from Fred Bloggs on Vimeo
**** `下一节描述了两个简单的 JavaScript 方法，允许视频在任何浏览器中观看，包括 IE 7 和 IE 8。他们都需要一两个小的 JavaScript 文件，这些文件可以从本书的页面[www.apress.com](http://www.apress.com)下载
Flowplayer 和操作系统 FLV 在 IE 7 和 IE 8 上有所退步
如果您的客户不希望使用 YouTube 或 Vimeo，接下来将介绍另外两种解决方案。这些使用 HTML5 视频标签和一小段 JavaScript:
- Adobe Shockwave Flash 在 Flowplayer 和每个人的视频技术的一点帮助下播放
.mp4视频文件。- Free JavaScript player OS FLV (with or without
<video>tag).
Adobe 声称 98%的 Windows 电脑都安装了 Adobe Flash 视频播放器。因此，Shockwave Flash 文件可以用作 IE 7 和 IE 8 的后备文件。只有当浏览器无法播放任何 HTML5 源文件时，Flash 视频播放器才会被激活。IE 7 和 IE 8 不理解 HTML5 视频标签；因此，它们将忽略 HTML5 源元素并播放回退视频。
使用人人视频(VfE)解决方案
IE 7 和 IE 8 的后备文件是一个*。借助 Flowplayer 中的 JavaScript 片段，在 Shockwave 播放器中启用的* mp4文件。这个解决方案是由 Kroc Camen 设计的，他将其命名为人人视频。他发明了 VfE 来鼓励开发者使用 HTML5 和 IE 7 和 IE 8 的后备，并阻止他们依赖 Flash 和在 Flash 容器中包装.mp4(又名 H.264)。引用卡门的话:“令人震惊的是，这么多网站已经有了他们想展示给你的 H.264 视频文件，却坚持将它们包装在一个不可靠、缓慢的 Flash 外壳中，没有任何退路。”
他发明 VfE 的第二个原因是 iPhones 和 iPads 的出现，它们不使用 Flash。他还敦促开发者提供链接，作为下载视频文件的最后手段。VfE 非常成功，但正如 Kroc Camen 所说，“视频对每个人来说都是一个正在消失的媒介。它的存在是为了弥合 Flash 和 HTML5 之间的差距。”
不幸的是，在写作时，他的网站只显示 HTML 代码，而不是网页。他的网址是[camendesign.co.uk/code/video_for_everybody.html](http://camendesign.co.uk/code/video_for_everybody.html)。
视频将出现如图图 6-6 所示。
***图 6-6。*视频出现在 IE 7 和 IE 8 中。请注意图片下方列出的可下载视频文件。
Jonathan Neal 为每个人制作了一个有趣且内容丰富的在线视频代码生成器。它在[sandbox.thewikies.com/vfe-generator/](http://sandbox.thewikies.com/vfe-generator/)
以下是 Kroc Camen 解决方案的要求:
Poster : Create a picture or title page as the opening picture of the video. To use the still image in the video, run the video and stop at the appropriate point. Right-click it to save the picture as a
.jpgfile.Three video files : Use your file converter to make three versions of videos and generate files in
.mp4,.ogvand.webmformats. Listing 6-5 assumes that the poster and three video files are located in a folder namedvideo.Flowplayer 文件:到 flow player 网站
[flowplayer.org/download/index.html](http://flowplayer.org/download/index.html)或者在本书的页面
[www.apress.com](http://www.apress.com)从配套网站下载免费版的 Flowplayer .免费版本可用于商业用途。还提供更全面的商业版本。将两个文件flowplayer-3.2.7.swf和flowplayer.controls-3.2.5.swf放在最终包含该网页的文件夹中。(当您阅读本文时，FlowPlayer 版本号可能已经更改)。
网页 : 清单 6-6 是为大家改编的 Kroc Camen 的视频。它创建了一个典型的 web 页面，但是为了清楚起见，该页面只包含视频。该页面在 W3C HTML5 验证器中进行验证。
清单 6-6。【camen-flowplayer-wagon.html 使用 VfE 创建嵌入视频的页面
`<!doctype html>
注意视频适用于 IE 7 和 IE 8，以及所有现代浏览器。然而，当 Adobe 更新 Flash 播放器的安全设置时，我有时会在 IE 7 和 IE 8 中遇到一个问题。这可能会导致一条错误消息，指出它找不到*。* mp4文件，它建议您应该尝试“放松安全设置”这意味着访问:
*www . macromedia . com/support/documentation/en/flash player/help/settings _ manager 04 . html # 117502*在那里您会找到一个在线安全管理器面板。选择总是允许单选按钮，然后单击编辑位置。添加一个位置(即保存视频文件的文件夹)，然后等待，直到下方窗口中出现一个带有白色勾号的绿色圆圈。这意味着您的安全设置被重置。这也是我会很高兴和 Flash Player 说再见的原因之一。
我们现在来看看另一个 JavaScript 解决方案，让 IE 7 和 IE 8 用户欣赏你的视频。该方法可以在有或没有语义视频标签的情况下使用。
OS FLV 免费视频播放器
免费的开源播放器 OS FLV 由 Jambo Media 制作和赞助。这是一个完整的代码生成器。生成的代码可以很容易地嵌入到网页中。这工作没有任何麻烦，也没有显示出品牌标志。但我的兴奋是短暂的，因为我最终发现了一些错误。此外，网站管理员似乎不再回答问题。作为一个自由程序和开源软件，制作者没有义务维护他们的论坛，直到反馈解决了大部分的错误。
最烦人的 bug 导致重播按钮被点击后还留在视频上。另一个错误是音量控制需要双击才能关闭。此外，进度指示器在到达其槽的末端之前突然停止。
找到了。然后我偶然发现了一个来自意大利网页设计师 Gianluca Guarini 的 RSS feed。他已经修复了漏洞，并向任何人免费提供修改后的代码。这个解决方案开箱即用。它也可以在任何浏览器和 HTML 版本 4 和 5 中运行。
Gianluca Guarini 已经友好地允许我在本书的第[www.apress.com](http://www.apress.com)页将 OS FLV 文件包含在伙伴网站中。当您下载本章的 zip 文件时，这些文件将被包含在内。詹卢卡·瓜里尼的网站可以在[www.gianlucaguarini.com](http://www.gianlucaguarini.com)找到，原来的 OS FLV 项目可以在找到，http:// www.osflv.com
注 Gianluca Guarini 不为他的代码提供任何支持；这本书的配套网站也没有。不过，这应该不是问题，因为代码很容易应用，而且运行起来没有任何障碍。
图 6-7a 和 6-7b 展示了这位玩家的行动。它有一套类似 Chrome 的控件。
***图 6-7a。*OS FLV 播放器的开屏
***图 6-7b。*显示进度条
程序
对于这个视频播放器，您需要将一些脚本文件插入到包含您的视频代码的 HTML 页面的文件夹中。它们是 FLV 操作系统的 JavaScript 文件，将为你的视频提供动力，让每个人都可以观看，包括 IE 7 和 IE 8 的用户。遵循这些步骤并不困难，但是你需要从本书的第[www.apress.com](http://www.apress.com)页的配套网站下载本章的文件
- 在网站的根文件夹中创建一个名为
osflv-folder的文件夹。 - 在本章的下载中，您会发现一个名为
osflv-player的文件夹。 - 打开名为
osflv-player的文件夹，将其文件复制到您的osflv-folder中。 osflv-folder的内容现在应该如下所示:- 两个 JavaScript 文件:
AC_RunActiveContent.js和rac.js - 三个显示文件:
Osplayer.as、Osplayer.fla、Osplayer.swf - 代码生成器:firefox_codegen.html
- 两个 JavaScript 文件:
- 将您的视频文件转换为
.flv格式，并将其放在osflv-folder中。 - 在名为
images的文件夹中创建并放置海报，并将该文件夹放置在osflv-folder中(可选)。我的列表中的海报是butterfly.jpg。 - 使用 Mozilla Firefox 查看
firefox_codegen.html*。*填写表单生成代码。 - 或者，一个更快的方法是从配套网站下载我的代码，并插入你自己的文件名来替换清单 6-7a 中粗体显示的项目。只有两个文件名需要替换。
- 将生成的(或下载的)代码嵌入到您的网页中。
- 将您的网页及其 CSS 文件添加到
osflv-folder。
清单 6-7a 显示了嵌入到 HTML5 页面中的生成代码。我已经将生成的脚本的第一部分移到了<head>部分(生成器将它放在了<body>部分)。清单 6-7a 在每个浏览器中都提供了相同的控件。
清单 6-7a。使用 OS FLV 脚本播放视频(【osflv-butterfly-identical-controls.html】)
`<!doctype html>
注意为了方便起见，我把所有相关的文件都放在了一个文件夹里。设置连接到视频页面的菜单按钮，使其链接到正确的文件夹。
OS FLV 播放器会覆盖每个浏览器中包含的播放器。这导致每个浏览器中的控件完全相同。一些网站设计者更喜欢这样；但有些用户可能不会。一些用户在使用他们喜欢的浏览器时更喜欢看到他们习惯的控件。IE 7 和 IE 8 显示操作系统 FLV 播放器控件，但是为了确保用户的传统控件在其他浏览器中显示，请在 HTML5 页面中使用生成的代码，就像这样。
清单 6-7b 使用 IE 9、Mozilla Firefox、Chrome、Safari 和 Opera 保留浏览器的原生控件。在 IE 7 和 IE 8 中，外观将与图 6-7a 和 6-7b 相同。将视频的.mp4、.webm和.ogg版本放在一个名为video的文件夹中，并将该文件夹放入您的osflv-folder 中。
清单 6-7b。使用操作系统 FLV 脚本作为带有视频标签的后备(【osflv-butterfly-native.html】)
`<!doctype html>
在 HTML5 页面中使用清单 6-7b ，视频将在所有主流浏览器中播放，包括 Internet Explorer 7 和 8。Opera 11 有一个阻止控件工作的 bug，但是这个已经在 11.5 版本中修复了。它也可以在 iPhones 和 iPads 上运行。Mozilla Firefox、Chrome 和 Safari 的用户不再需要安装 Flash。最终，当用户停止使用 IE 7 和 IE 8 时，我们可以省去后备元素(哦，快乐的一天！).
提示还有其他几个免费玩家可用，包括 Kaltura([www.kaltura.org)](http://www.kaltura.org))jwp player([www.longtailvideo.com/players/jw-flv-player/](http://www.longtailvideo.com/players/jw-flv-player/))和 SWFObject。JS ( [hubpages.com/hub/-MP4-Flash-Video](http://hubpages.com/hub/Embed-SWF-FLV-MP4-Flash-Video))。
测试您的视频和 MIME 类型
测试视频时，请确保您的 Flash 播放器和 QuickTime 播放器运行正常，并且在您的服务器上设置了适当的 MIME 类型。
哑剧类型 ？这意味着多用途互联网邮件扩展。你不高兴你问了吗？
尽管 MIME 类型最初是作为邮寄项目出现的，但它已经发展成为一种在互联网上传输非 HTML 格式文件的方法。浏览器使用它们来确定媒体内容类型。除非在服务器中设置了正确的 MIME 类型，否则视频不会播放。
我读过的每一本计算机手册都强调了 MIME 类型的重要性，但是它们没有告诉读者如何应用 MIME 类型。MIME 类型进入页面标记了吗？或者它们以某种方式被添加到服务器中？还是两者都有？经过大量的搜索，我发现答案各不相同。这取决于 MIME 类型的类别。
注意为网站提供 HTML5 视频时，请务必联系您的主机服务器，请求为.ogv、.mp4、.flv和.webm视频文件设置 MIME 类型。如果你忽略了这一点，你的视频将无法在某些浏览器上播放。一些开明的主机允许网站设计者给服务器添加 MIME 类型的权限。有关 MIME 类型的更多信息，请参见附录。
下面的笔记是从.htaccess和 MIME 数据的宝库中摘录的(见[tomraftery.com/2005/01/15/creating-an-htaccess-file/](http://tomraftery.com/2005/01/15/creating-an-htaccess-file/))。
MIME 类型是大多数主机用来在其服务器上设置 MIME 类型的代码片段。它存在于一个名为.htaccess的文件中，该文件可以包含以下部分或全部AddType:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm AddType video/x-flv .flv AddType application/x-shockwave-flash swf
编辑客户端的视频
如果客户的视频需要剪辑，你该怎么办？例如，它可能太长，需要缩短。它可能包含必须删除的剪辑，因为您不希望在您的网站上看到它们。有些剪辑可能需要删除，因为它们质量很差，例如模糊或抖动。客户可能希望添加或删除声音。客户端甚至可能会将摄像机交给您，并要求您下载和编辑内容。客户可能希望您添加一个带有叠加标题的静止图像，或者添加一个滚动的演职员表来结束视频。
如果您以前编辑过视频，您将能够接受客户端的视频剪辑并进行编辑。当然，你会提供一个成本的估计，并解释你需要做什么，使视频可以接受。
如果您以前从未编辑过视频，您有以下选择:
- Ask the customer to let others edit the video.
- It means that you have not edited the video before, but you are willing to give it a try.
后者要求你有一个视频编辑器，并能熟练使用它。你需要在硬盘上有足够的空间(或者你可以连接一个外置硬盘)。免费的 Windows Live 影音制作(WLMM)非常出色，帮助文件也不会太晦涩难懂。WLMM 随 Windows XP 和 Vista 一起安装在根启动菜单中。Windows 7 必须下载([www.microsoft.com/downloads](http://www.microsoft.com/downloads))。然而，要注意的是，任何视频编辑程序都不像任何其他软件，它需要一些学习——但它是有创造性的，非常有趣。WLMM 自然是基于现实生活中的电影剪辑过程，在这个过程中，您有一组必须被修剪、以正确的顺序组合然后组合的电影剪辑。需要使用淡入淡出和叠化将一些剪辑混合到下一个剪辑中。
添加声音和片头并不太难，一个视频的结尾可以添加滚动的片尾。小心不要使用大声的声音。特别是，如果有人在说话，不要使用背景声音。这个恼人的噱头深受广告商和纪录片的喜爱，会毁了你的视频。主持人经常被不恰当的背景“音乐”弄得听不见他们的评论。
在 Windows Live 影音制作中，加载到程序中的视频在主窗格中显示为一系列剪辑或短片。可以在预览窗格中预览(播放)每个剪辑，并暂停以允许您修剪剪辑。两个主要特点是时间线和故事板。您可以重新排列剪辑的顺序，但是可以使用时间线来修剪剪辑或添加/移除声音。“帮助”按钮是位于右上角的蓝色圆圈中的白色问号。您必须联机才能查看帮助文件。
因为这本书是关于网页设计的，所以我不会在视频编辑上花更多的时间。尝试阅读詹姆斯·弗罗伊德·凯利的《Windows Live 影音制作入门》。
制作幻灯片
幻灯片有时比视频信息量更大，因为用户可以完全控制他们所看到的内容。可以暂停幻灯片放映，以便用户可以根据需要随时查看特定的幻灯片。本节给出了创建可嵌入网页的幻灯片放映的四种方法。
本节介绍了以下四种创建 web 嵌入式幻灯片放映的常用方法:
- 使用 BarelyFitz 设计的一段 Java Script 语言代码（见图 6-8 .
- Use Animoto online slide production tool (see Figure 6-9 ).
- Convert PowerPoint slides into videos.
- Use Windows Live movie maker.
巴雷利菲兹设计的幻灯片
BarelyFitz Designs 的 Patrick Fitzgerald 为幻灯片制作了一个优秀的免费开源 JavaScript。他还在自己的网站上提供了一个非常有用的教程:
[www.barelyfitz.com/projects/slideshow/](http://www.barelyfitz.com/projects/slideshow/)
图 6-8 显示了使用 BarelyFitz 技术制作的幻灯片截图。
***图 6-8。*带控件的幻灯片
在下一节中，您将学习如何创建如图 6-8 所示的幻灯片。
制作 BarelyFitz 幻灯片
这种技术易于理解和实现。不需要 JavaScript 知识；只需修改列表，插入您自己的幻灯片。
- 访问 BarelyFitz 网站(``www.barelyfitz.com
??)，点击下载&示例选项卡，下载 JavaScript 脚本slideshow.js。将脚本文件放在包含该网页的文件夹中，并将副本上传到将托管该网页的服务器文件夹中。 - 准备一个空白网页，并将其放在 JavaScript 代码所在的文件夹中。
- 收集用于幻灯片放映的图片，并将它们放在包含网页的文件夹的子文件夹中。最简单的方法是，让你的幻灯片都一样大。如果你想使用不同的尺寸，从标记中删除任何关于宽度和高度的内容；但是请注意，您将会有一个可以跳跃的幻灯片来适应不同的尺寸。为了减少跳跃，让图片高度相同。
- 图 6-8 的标记对于大多数目的来说是足够的。调整它以支持您自己的幻灯片。用您自己的图片替换粗体斜体的项目；添加任意数量的图片。然后将页面上传到您的服务器。本例假设幻灯片位于名为
slides的文件夹中。
使用清单 6-8 中的 HTML5 代码，幻灯片可以在所有浏览器中运行，包括 IE 7 和 IE 8。
清单 6-8 。(slide-show.html)
`<!doctype html>
s = new slide();
s.src = “slides/Mitzi2.jpg”;
s.text = “Open link in same window”;
SLIDES.add_slide(s);
s = new slide();
s.src = “slides/Mitzi3.jpg”;
s.text = “Open link in same window”;
SLIDES.add_slide(s);
s = new slide();
s.src = “slides/Mitzi4.jpg”;
s.text = “Open link in same window”;
SLIDES.add_slide(s);
` ` `
要改变连续播放幻灯片的时间间隔，用记事本打开 JavaScript 文件slideshow.js并找到“超时”部分。您将看到默认值是 3，000 毫秒(3 秒)。更改数字以加快或减慢幻灯片之间的间隔。
浏览 BarelyFitz 网站，然后选择 Tutorial 选项卡，了解在网页中嵌入和配置代码的更多详细信息。网站上有几个成功的例子；通过这些，您可以发现如何添加额外的功能，例如随着每次幻灯片更改而改变的描述性文本，或者幻灯片的下拉列表，或者不同的按钮控件。
Animoto 幻灯片制作人
Animoto Lite 版本只适合测试，因为它的设施有限，不能用于商业目的。如果试用后你想购买它，专业版有几个限制，并根据您的需要提供各种级别的许可。它还提供了一个 iPhone 应用。你会在[animoto.com](http://animoto.com)找到 Animoto。
该程序提供了广泛的开放屏幕和音乐，但它强迫你选择一些音乐。不幸的是，缺少的一个音乐选项是“无”你必须选择一个主题、一些音乐和一些文字，否则就不能进入下一步。大多数音乐一点也不好听，但是我在古典音乐区确实找到了一些好东西。上传幻灯片并选择主题和音乐后，单击创建视频按钮。最终，您会收到一封电子邮件，告诉您可以观看幻灯片的视频。您可以查看它并下载其代码以嵌入到网页中。
图 6-9 中显示了一个动画幻灯片。
***图 6-9。*一场充满敌意的幻灯片秀
Animoto 下载的代码片段使用 Shockwave Flash，如下所示:
`<object id=“vp13vUA9” width=“432” height=“240” classid=
“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000”>
将 PowerPoint 幻灯片转换成视频
这是一种创建幻灯片的有效方法，而且用途广泛。它将导入许多类型的输入，甚至是动画.gifs。免费版本将视频转换为 MP4，WMV 和 AVI 视频，没有水印。如果您转换为任何其他文件类型，幻灯片将在左上角有一个水印。
从[www.effectmatrix.com/PowerPoint-Video-Converter/Free-PowerPoint-Video-Converter.htm](http://www.effectmatrix.com/PowerPoint-Video-Converter/Free-PowerPoint-Video-Converter.htm)下载 E.M. PowerPoint 转换器的免费版本
网站横幅是 Etinysoft，所以不要认为你到达了错误的来源。
使用 Windows Live 影音制作创建幻灯片
可以将图片导入 Windows Live 影音制作，然后按照所需的顺序排列。幻灯片将被保存为一个.wmv文件。使用 Windows Live 影音制作将幻灯片创建为视频的过程如下:
- 将幻灯片放入文件夹中，以便您可以轻松找到它们。
- 打开 Windows Live 影音制作，然后单击“添加视频和照片”。导航到包含幻灯片的文件夹。
- 打开每张幻灯片，直到它们都显示在右侧窗格中。
- 单击菜单上的编辑，将幻灯片之间的时间间隔调整为 3 秒。
- 选项可用于各种过渡和渐变。
- 单击菜单上的主页，然后单击工具栏上的保存电影按钮。
- 为计算机选择，然后给文件命名。单击保存。
生成的.wmv文件可以在任何播放器中查看，例如 Windows Media Player 或 QuickTime。要将其添加到网页中，可以将创建的文件上传到 YouTube，这样您就可以嵌入可下载的代码。生成的视频可以在任何浏览器中观看。图 6-10 显示了 YouTube 版本的幻灯片。
***图 6-10。*在 Windows Live 影音制作中创建的幻灯片，然后存储在 YouTube 上。请注意，YouTube 框架的外观最近发生了一些变化。
清单 6-10 展示了可下载的 YouTube 版本的.wmv文件是如何嵌入到 HTML5 网页中的。标记非常简单，但是如果你的客户不想使用 YouTube，,那么.wmv文件可以被转换成其他格式，用于前面描述的嵌入视频的方法之一。
清单 6-10。【slides-video-YT.html 嵌入 Windows Live 影音制作文件的 YouTube 视频
`<!doctype html>
总结
在本章中，您了解到新的 HTML5 <audio>和<video>标签允许 AV 在没有插件的情况下播放，但<audio>和<video>标签在 IE 7 和 IE 8 中不起作用。好消息是 IE 9 承诺支持<audio>和<video>标签。然而，IE 9 只能在使用 Vista 或 Windows 7 的电脑上运行。
你被提醒需要一些文件转换器，并且推荐了几个经过测试的转换器。向您展示了几种解决在 IE 7 和 IE 8 中显示视频问题的备用方法。提供了替代视频解决方案，如 YouTube 和 Vimeo。然后，您学习了如何使用两个简单的 JavaScript 解决方案来确保视频可以在任何浏览器中看到。本章最后描述了在网页中创建和嵌入幻灯片的四种方法。
在下一章，你会发现如何给框、网页和标签菜单加圆角。许多完整的项目都描述了新的 CSS3 圆角方法。
七、圆角
CSS3 将使网页设计者能够在不使用 JavaScript 的情况下制作圆角(用 CSS3 的话说就是圆角边框)。目前只有最新版本的 Mozilla Firefox、Chrome、IE 9 和 Safari 支持该功能；因此，对于包括 IE 7 和 IE 8 在内的较旧的浏览器，必须使用临时 JavaScript 方法。
本章包括:
- Simple JavaScript solution to create rounded corners for basic rectangles and complex pages
- Description of the new CSS3 fillet module
- Summary of abbreviation code of CSS3 fillet
- CSS3 fillet applied to tab menu
一个简单的 JavaScript 解决方案
Alessandro Fulciniti 开发了一个简单的 JavaScript 解决方案，在 GNU GPL 许可下是免费的(如果您使用该脚本，请注明作者)。它适用于包括 IE 6 在内的所有浏览器。完整的细节可以在他的网站上找到。
在图 7-1 中，两个面板使用 JavaScript 应用了圆角。
***图 7-1。*JavaScript 应用的圆角
所见即所得设计程序可能无法正确显示边角。在浏览器中查看页面以查看圆角。
注files niftyCube.js和niftyCorners.css必须从 Nifty Corners 网站或这本书的网页上下载。将文件包含在包含您的网页的文件夹中。HTML 没有链接到文件niftyCorners.css，但是 JavaScript 文件引用了它。本章的文件可以从该书的网页上下载。所有文件都有内部样式，仅供教学使用。
清单 7-1 包含一个内部样式表，仅用于说明目的。
清单 7-1。【fig1-nifty.html】使用漂亮的边角在面板上创建圆角
`<!doctype html>
Nifty Corners
` `This method of producing rounded corners was devised by a clever Italian  called Alessandro Fulciniti. This is the content panel.
Rounded corners without images
Until all browsers accept the CSS3 rounded corners tag then this javascript  workaround is a good interim solution.
The rounded corners will be visible in all browsers from IE6 onwards.
Simple. Just Javascript and CSS.
This is another panel which could take a navigation menu
` 注意每个被赋予圆角的元素必须是带有id的<div>，例如<div id="leftcol">。您将无法对带有语义标签的项目进行圆角处理。因为 HTML5 不在乎你用语义标签还是<div> s，这不是问题，用<div> s 就行了，好消息是你也可以很容易的给你现有的 HTML4 和 XHTML 网页加圆角。
在进入使用漂亮边角的更复杂的例子之前，将提供如下一些基本规则:
一般规则
JavaScript 文件的链接(粗体显示)被插入到
<head></head>标签中。给定圆角的元素如下所示:
Nifty ("#leftcol, #rightcol");要给两列相同的高度，使用属性
"same-height"如下:
Nifty("#leftcol, #rightcol","same-height");如果省略
"same height"参数，列的高度将与它们各自的内容相匹配。圆角半径:圆角半径的大小由
small、normal或big指定。当没有指定大小时，默认为normal。对于大半径和相同高度的列，属性如下:
Nifty("#leftcol, #rightcol","same-height big");除右上角外，所有角的半径都很大
Nifty("#leftcol", "tl bottom big");这意味着给左上角和两个底角一个大的半径。右上角没有提到，所以它没有得到半径。
对于除左上角之外的所有角上的大半径
Nifty("#leftcol", "tr bottom big");这意味着给右上角和两个底角一个大的半径。左上角没有提到，所以它没有得到半径。
对于除右下角之外的所有角上的大半径
Nifty("#leftcol", "bl top big");这意味着给左下角和两个顶角一个大的半径。右下角没有提到，所以它没有得到半径。
带有圆形边框的网页
客户越来越多地要求网页上的圆形边框具有现代感。Nifty Corners 提供了一个易于实现的简洁解决方案。图 7-2 中的显示了白色框架上的圆角和框架内的一些角。
***图 7-2。*显示圆角元素边框的整页
注意<h1>框的高度必须等于页眉图像的高度，减去任何顶部和底部的填充。中间面板(midcol)必须略高于侧柱。不要在中间面板上添加圆角，因为这会导致中间面板在 Internet Explorer 8 中低于外部列。
清单 7-2 将漂亮的边角应用到有栏和边框的复杂页面上。
清单 7-2。【fig2-nifty.html】在复杂页面中创建圆角
`<!doctype html>
Rounded Corners
Menu column
Auxiliary Panel
This panel can be used for adverts, additional information, or items like  validation certificates.
Middle panel for content
` `
This method uses CSS and Javascript.
If Javascript is turned off in the  users computer, the page differs only in that the corners are not rounded.
Full details can be found on his website  www.html.it/articoli/niftycube/index.html
Footer goes here `
注菜单链接显示为href="#"。当然，这些必须更改为链接到您的页面。
带有圆形边框和圆形面板的网页
圆形边框可以扩展到页面边框内的项目，以给页面设计带来一致的感觉。图 7-3 是一个带有圆形边框和圆形内部面板的页面截图。
***图 7-3。*包含三个通过无序列表定位的报价的页面。“阅读更多”按钮是带有指向相应页面的超链接的图像。
清单 7-3 将漂亮的边角应用到页面上，给出了圆形的边框和三个圆形的内部面板。
清单 7-3。【fig3-nifty.html 在内部面板上创建圆角
`<!doctype html>
Rounded Corners
Menu column
` `
Auxiliary Panel
This panel can be used for adverts, additional information, or items like  validation certificates.
Middle panel for content
Budget web Hosting from £1.99 per month
标签菜单上漂亮的角落
圆形菜单标签非常流行，以前实现起来很棘手，因为它们需要几个带有透明角的图像。Nifty Corners 提供的简单解决方案如图图 7-4 所示。我把列表和完整的解释放在了第四章(滚动菜单上)我觉得它应该在的地方。
***图 7-4。*使用漂亮边角的圆形标签
接下来的部分着眼于新的 CSS3 圆角模块，这不需要 JavaScript，但在 IE 7 和 IE 8 中圆角元素将默认为方角。
CSS3 圆角模块
CSS3 border-radius 模块在块元素(包括图像)上创建圆角，并且不需要 JavaScript。它还消除了对图像和多个
标签的需求。请在 http://www.css3.info/preview 查看 W3C 关于这个模块的最新细节。
截至 2011 年 11 月，以下浏览器支持 CSS3 圆角:- Opera、Safari 和 Chrome。新版 Mozilla Firefox 支持 CSS3 边框半径；旧版本需要前缀-moz-。Internet Explorer 9 支持 CSS3 边框半径标记。IE 9 仅适用于 Vista 和 Windows 7。在 Windows XP、IE 6、IE 7 和 IE 8 中，边角不会变圆。JavaScript 解决方案适用于 IE 6、IE 7 和 IE 8。
图 7-5 显示了在彩色面板的每个角上使用 CSS3 圆角的结果。
***图 7-5。*彩色面板上的圆角
这是一个最简单的盒子模型，它适用于除 IE 6、IE 7 和 IE 8 之外的所有浏览器。只有支持版本 5 之前的 Mozilla Firefox 才需要项目-moz-border-radius:20px;。
在这个项目中，彩色面板的所有四个角都用相同的半径圆化(内部样式表仅用于演示；它通常是一个外部样式表)。在列表 7-5 中，圆角代码以粗体显示。一些填充是必要的，以防止内容从角落突出。
清单 7-5。【fig5-four-identical-on-panel.html】在矩形上创建圆角
`<!doctype html>
An example of rounded corners on a panel
Each corner has a radius of 20 pixels
This works with Safari, Opera and Chrome. Mozilla currently requires the -moz- hack to make it work
For IE 7 and 8 the Nifty Corners Javascript solution must be used.
Microsoft has promised that IE 9 will enable  rounded corners
图 7-6 显示了带圆角的彩色面板周围的黑色边框。
***图 7-6。*黑色边框的彩色面板
在清单 7-6 中，黑色边框是用粗体显示的代码添加的…只有支持版本 5 之前的 Mozilla Firefox 才需要项目-moz-border-radius:20px;。
清单 7-6。【fig6-panel-blackbdr.html】用黑色边框将矩形的角变圆
`<!doctype html>
An example of four identical rounded corners
Each corner has a radius of 20 pixels
This works with Safari, Opera and Chrome. Mozilla needs the -moz- hack to make it work
For IE 7 and 8 the Nifty Corners Javascript solution must be used.
Microsoft has promised that IE 9 will enable rounded corners
图 7-7 显示了文本块周围的黑色边框。
***图 7-7。*一块文字上的圆角
清单 7-7 用相同的半径对文本块的四个角进行圆角处理(内部样式表仅用于演示，通常是外部的)。只有支持版本 5 之前的 Mozilla Firefox 才需要项目-moz-border-radius:20px;。
清单 7-7。【fig7-four-rounded-text.html】对文本块应用 CSS3 圆角()**
`<!doctype html>
An example of four identical rounded corners
Each corner has a radius of 20 pixels
This works with Safari, Opera and Chrome.  Mozilla needs the -moz- hack to make it work
For IE 7 and 8 the Javascript solution  must be used.
IE 9 has promised it will work with rounded corners
注下一个 CSS3 边框半径项目有-moz hacks。久而久之，Mozilla Firefox 将不需要–moz黑客。尝试注释掉黑客，偶尔用 Mozilla Firefox 测试代码。黑客将允许支持旧版本的 Firefox，现代版本应该会忽略这一点。
CSS3 标记可以为每个角指定不同的半径。CSS3 规范给出了在每个角上创建不同半径的两种方法。第一种方法如下:
方法一。
#box-1 { border: *size color* solid; border-top-left-radius: *size*; border-top-right-radius: *size*; border-bottom-right-radius: *size*; border-bottom-left-radius: *size*; }
用像素或百分比替换单词 size 。百分比与盒子的相应尺寸有关；换句话说，在一个 200 像素见方的盒子上，10%的半径将给出 20 像素的角半径。
然而，Mozilla Firefox 目前并不理解这一点，即使有了-moz- hack。Mozilla 确实理解这种方法的一种变体，下面用粗体表示。
#box-1 { border: *size color* solid; border-top-left-radius: size; **-moz-border-radius-topleft: size;** border-top-right-radius: size; **-moz-border-radius-topright: size;** border-bottom-right-radius: size; **-moz-border-radius-bottomleft: size;** border-bottom-left-radius: size; **-moz-border-radius-bottomright: size;** }
但是，Mozilla、Safari 和 Chrome 确实理解速记方法(第二种方法)，如下所示:
方法二。
#box-1 { border: *size color* solid; border-radius: *size size size size*; }
标记从左上角开始按顺时针顺序指定框角半径，如下所示:
top left, top right, bottom right, bottom left
每个角可以有不同的半径。 图 7-8 显示了一个有两个像素宽的黑色边框的面板。该面板的左上角半径为 30 像素，右上角半径为 20 像素，右下角半径为零，左下角半径为 10 像素。
***图 7-8。*四个不同的角落使用速记代码
清单 7-8 使用 CSS3 将选择的圆角应用到一个彩色面板上。在 IE 7 和 IE 8 中查看时，矩形会有尖角。
清单 7-8。用 CSS3 圆角应用各种转角(【fig8-panel-4diff.html】??)
`<!doctype html>
An example of four different corners
 Top left is 30 pixels radius, top right is 20 pixels, bottom right has no radius,  bottom left has a 10 pixel radius.
This works with Safari, Opera and Chrome. Mozilla  needs the -moz- hack to make it work
For IE 7 and 8 the Nifty Corners Javascript  solution must be used.
带 CSS3 的椭圆角
使用两个尺寸值可以创建椭圆拐角。创建椭圆拐角需要两个半径。在下面的代码片段中，第一个大小固定垂直半径(30 像素)，第二个大小(15 像素)固定水平半径。为了记住顺序，我使用了助记符 V 值 H int(垂直然后水平)。
#box-1 { border-top-left-radius: 30px 15px; } #identifier { border-*top/bottom*-*left/right*-radius: *vertical size* *horizontal size*; }
图 7-9 显示了各种椭圆拐角。
***图 7-9。*四个不同的椭圆角
清单 7-9 向你介绍 CSS3 椭圆角应用于黑边面板。在 IE 7 和 IE 8 中查看时，面板会有尖角。
清单 7-9。【fig9-elliptical-corners.html】应用 CSS3 椭圆角的选择
`<!doctype html>
`
【CSS3 圆角速记规则汇总
CSS3 圆角为快速标记提供了一个简化版本，简化标记的规则如下:
规则 A: 如果一个值为零，那么角将是方形的，而不是圆形的。
规则 B: 速记属性可以用来同时定义所有四个角。属性接受由正斜杠分隔的一组或两组值，每组由一个、两个、三个或四个长度或百分比组成。如果提供了所有四个值，顺序将是左上、右上、右下和左下。
规则 C: 第一组值(在正斜杠之前)定义了四个角的垂直半径。
规则 D: 正斜杠后的第二组(可选)值定义了所有四个角的水平半径。
规则 E: 如果只有一组值，这些值同等地确定垂直和水平半径。
规则 F: 如果省略了值，则遵循此规则:如果省略了左下方的维度，则与右上方的维度相同；如果省略了右下的尺寸，它将与左上的尺寸相同。
规则 G: 如果只提供了一个值，则用于相等地设置所有四个半径。
以下是一些例子:
#box-1 { border-radius: 10px 15px 10px 15px / 15px 10px 15px 10px;(四个椭圆角)
#box-1 { border-radius: 10px；(四个相同的圆角)
现在是真正的大脑弯曲:
#box-1 { margin:auto; text-align:center; border:30px #FFCC66 solid; width:250px;  height:150px; border-radius: 10px 20px/**20px**; }
在“brain bender”代码中，角半径可以翻译如下:所有角的水平半径为 20 像素，由正斜杠(粗体显示)后的单个大小决定。左上角被修改了 10 个像素的垂直半径，因此它是椭圆形的。
第二维度(20 像素)使右上角的水平半径为 20 像素，因为它已经具有 20 像素的垂直半径。它不是椭圆，但该角具有 20 像素的简单半径。
规则 F 起作用是因为只有两个维度被给定在正斜杠的左边。这使得右下角与左上角相同。规则 F 也使左下角与右上角相同。结果看起来像图 7-10 。
***图 7-10。*用尽可能简短的标记创建圆角和椭圆角
清单 7-10 使用 CSS3 在面板上选择圆角和椭圆。在 IE 7 和 IE 8 中查看时，矩形会有尖角。
清单 7-10。【fig10-brain-bender.html】使用速记应用 CSS3 圆角和椭圆
`<!doctype html>
`
我们现在将演示 CSS3 圆角在标签菜单中的应用
使用 CSS3 的圆角标签
带有圆形标签的菜单非常流行，以前很难实现。下面列出了 CSS3 圆角边框模块提供的简单解决方案，最终结果如图 7-11 所示。该模块在 IE 7 和 IE 8 中不工作，但它优雅地后退，如图图 7-12 所示。
图 7-11。 CSS3 选项卡菜单上的圆角
图 7-11 中的 CSS3 圆形标签可以在 Mozilla Firefox、Safari、Opera 和 Chrome 中使用，但不能在 IE 6、IE 7 或 IE 8 中使用。稍后我们将使用一个有条件的 IE 样式表作为方形角的后备(见图 7-13 )。IE 9 应该显示圆角。在图 7-11 中，第一页的页签被选中，变成白色并与内容面板合并。当鼠标悬停在选项卡上时，选项卡会改变颜色。光标显示为悬停在标签 3 上。
注意标签 3 比其他的都长。标签会自动放大或缩小以适应文本。
活动元素从一页到另一页改变以匹配活动页面，活动元素在清单 7-11a 中以粗体显示。HTML 清单 7-11a 是图 7-11 、 7-12 和 7-13 的标记。有条件的后退链接(粗体显示)将允许使用 IE 7 和 IE 8 进行可接受的显示，但标签角会很尖。
清单 7-11a。【fig11-css3-tabs-rounded.html】用 CSS3 创建圆形标签
`<!doctype html>
Tabs with CSS3 corner radii
注意每个href="#"当然必须被你的页面的 URL 所取代。必须在每个页面上更改活动链接的id以匹配页面。例如，在第 5 页上，活动链接的 id 将出现在第 5 页链接的旁边，即<li><a class="tab" **id="activelink"** href="#">Tab5</a></li>，在该页上，第一个选项卡将变成<li><a class="tab" href="#">Tab1</a></li>。图 7-13 显示了结果。
清单 7-11b 是图 7-11 中所示圆形标签菜单的 CSS3 样式表。
***清单 7-11b。*为清单 7-11a (css3-tabs.css) 创建 CSS 标记
#header { width:500px; height:100px; background-image:url('img/bluepan.jpg');  background-repeat:no-repeat; background-position:center; color:white; text-align:center; margin-bottom:-27px; } h1 { font-size:150%; font-weight:bold; padding-top:20px; } h2 { font-size:125%; } #nav ul {width:400px; position:relative; top:-14px; } ul li { text-decoration:none; display:inline; } ul li a.tab { font-family:Arial; color:black; font-size :medium; font-weight:bold;  background-color:#ffff00;  **/*-moz-border-radius-topleft:8px;É-moz-border-radius-topright:8px;*/** border-top-left-radius:8px; border-top-right-radius:8px; border:2px solid black;  padding:5px; padding-bottom:5px;margin :-2px; text-decoration:none; border-bottom:none; } .tab:hover { background-color:lime; color:black; } #activelink {background-color:white; border-bottom:0; padding-bottom:7px; } #content {margin-top:-25px; padding:10px; width:476px; border:2px solid black; }
注意CSS 样式表中粗体显示的注释掉的行清单 7-11b 对于 Mozilla Firefox 以后的版本是不需要的。粗体文本中的项目现在可以省略，但是如果你也想迎合 Firefox 的早期版本，请删除注释符号。
图 7-12 显示了选择 tab5 时的菜单。
***图 7-12。*第五页的标签已经被选中
图 7-13 显示了标签菜单在 IE 7 和 IE 8 中是如何出现的。
***图 7-13。*IE 7 和 IE 8 中的标签有方角
由于在清单 7-11a 中包含了 IE 条件，条件 CSS 标记清单 7-13 在 IE 7 和 IE 8 中给出了可接受的显示，如图图 7-13 所示。然而，标签将有方角。
清单 7-13 中的条件 CSS 对一些元素的边距进行了调整。
清单 7-13 显示了 IE 条件 CSS。
***清单 7-13。*允许 IE 7 和 IE 8 可接受的标签菜单的条件 CSS(css3-tabs-IE . CSS)
#header { margin-bottom:-25px; } #content {margin-top:-25px; }
总结
在这一章中，你学习了如何使用 Alessandro Fulciniti 的简单 JavaScript 解决方案在盒子(面板)上创建圆角。然后，这种技术被应用到整个网页的边框和面板上。然后向您介绍了应用于盒子的 CSS3 圆角；介绍了这种技术的全部可能性。最后，您学习了如何将 CSS3 圆角应用于选项卡菜单。
在下一章中，你会发现如何将投影应用到图像和文本块上，使它们看起来漂浮在页面上。你也可以看到如何用阴影包围一个网页。然后将向您介绍将 CSS3 投影应用到图像、文本框和文本的项目。
八、投影
投影可以将图片和文本块变成醒目的插图，看起来好像悬浮在页面表面。CSS3 建议包括一个新的投影功能，这将在本章中首先介绍。Internet Explorer 7 和 8 不支持 CSS3 因此，本章的其余部分给出了 CSS2 变通办法的说明，这将使 IE 7 和 IE 8 用户看到阴影。图像和文本框的投影可以通过以下三种方法实现:
- Use the new CSS3 projection (this doesn’t work in IE 7 or IE 8).
- Use graphics packages to apply shadows directly to images or text. This chapter describes how to use the free open source program Gimp (known as GIMP in the version before 2.6) to generate projections quickly and easily.
- Use CSS2 and a background map of
.pngshadow, which stretches or shrinks to match the size of the picture (this is Big John’s method; There will be more introduction later in this chapter). Shadows can be viewed in all browsers including IE 8. This method will create double-sided or four-sided shadows by using one or more shadow background images. This chapter gives instructions on creating shadow images in the free GIMP graphics program.
CSS3 阴影不需要阴影图像
CSS3 框阴影模块是一个创建投影的新功能。它可以应用于任何框，如图像或段落。这个模块提供了一个更简单的方法来创建阴影*，因为不需要阴影图像*。除了 IE 7 和 IE 8 之外，所有浏览器都支持该功能。
提示关于 CSS3 盒子阴影的更多信息见[www.css3.info/preview/box-shadow/](http://www.css3.info/preview/box-shadow/)
在新的框阴影模块中指定的属性由三个维度组成(四个维度用于四边阴影)。属性展开和颜色有额外的可选尺寸。属性和维度如下:
- **阴影的水平偏移量。**正偏移将阴影放在方框的右边；负偏移将阴影放在框的左侧。
- **阴影的垂直偏移量。**正偏移量将阴影放在方框下方。负偏移会将阴影放在方框上方。
- **阴影的模糊半径。**数值越高，阴影会越模糊。如果设置为零，阴影将被尖角化。
- 当使用 CSS3 的圆角功能时，阴影将跟随圆角。
- 可选属性可用，例如，展开(阴影的大小)和插入(创建内部阴影)。详情请见网站
[www.css3.info/preview/box-shadow/](http://www.css3.info/preview/box-shadow/)。
注意一定要把图像的尺寸放在样式表中。例如，一个 296 像素宽、196 像素高的图像需要一个 CSS 语句，如下所示:
#shadow { box-shadow: 6px 6px 6px #888; **width: 296px; height:196px;** }
彩色段落的 CSS3 阴影显示在图 8-1 中。
***图 8-1。*CSS3 阴影添加到彩色段落
清单 8-1a 创建一个简单的彩色段落，两边有阴影。
清单 8-1a。【css3-para-shadow.html】创建一个两边都有阴影的彩色段落
`<!doctype html>
This is a paragraph with CSS3 drop shadow
`清单 8-1b 中的 CSS 代码创建了一个模糊半径为 4 像素的阴影，位于段落右侧 6 像素，下方 6 像素。
***清单 8-1b。*清单 8-1a 的 CSS 样式表(css3-para-shadow.css)
#para-shadow p { box-shadow: 6px 6px 8px #888; padding: 5px 5px 5px 15px; width:300px;  background-color:#66FF99; color:black; font-weight:bold; }
图 8-2 显示了一张图片的 CSS3 阴影。本章中使用的科利河照片是由科林·海恩斯许可的。
***图 8-2。*这个例子的 CSS3 给出了一个模糊半径为 5 像素的投影，位于图像右侧 6 像素，下方 6 像素。
Internet Explorer 9、Mozilla Firefox、Safari 和 Opera 都支持这种 CSS3 框影。在清单 8-2a 中，CSS3 的目标是 <div id="shadow"> 为图片添加阴影。
清单 8-2a。【css3-image2.html创建一个模糊半径为 5 像素的阴影
**`<!doctype html>
**
**
`
清单 8-2b 针对包含阴影id的<div>。
***清单 8-2b。*清单 8-2a 的 CSS 样式表(css3-image1.css)
body { color: #fff; } #shadow { box-shadow: 6px 6px 6px #888; width: 296px; height:196px; }
CSS3 投影也可以产生白色边框，如图图 8-3 所示。
***图 8-3。*CSS3 代码给出了一个带有白色边框和阴影的图像，模糊半径为 6 个像素，位于图像右侧 6 个像素，下方 6 个像素。
添加了背景色，以便您可以清楚地看到白色框架的顶部。阴影颜色可能需要调整以匹配背景颜色。在清单 8-3a 中，粗体显示的<div>是 CSS 样式表产生阴影的目标。
清单 8-3a。【css3-image-whitebdr.html】在图像周围创建阴影和白色边框
`<!doctype html>
**
** `
在清单 8-3b 中，白色边框是由粗体显示的标记创建的；这条线的其余部分产生了阴影。
***清单 8-3b。*清单 8-3a 的 CSS 样式表(css3-image-whitebdr.css)
body { background-color:#99CCFF; } #shadow-bdr { **background-color:#fff; padding:10px;** box-shadow: 6px 6px 6px #78b;  width: 296px; }
CSS3 四边形阴影
CSS3 box-shadow 模块可以通过零偏移和一个额外的属性来提供四边投影。典型的例子如图 8-4 所示。相关代码如清单 8-4a 和清单 8-4b 所示。
***图 8-4。*一个 CSS3 的四边落影
***清单 8-4a。*在图像的四周放置阴影 ( css3-image-4sides)
`<!doctype html>
`
在清单 8-4b 中，将粗体显示的样式(注意两个零)与前一个双边示例的样式进行比较。
***清单 8-4b。*清单 8-4a 的 CSS 样式表( css3-image-4sides.css)
body { color: #fff; } #shadow { margin:20px auto 0 auto; } #shadow { box-shadow: **0 0 6px 6px** #888; width: 298px; height:196px; }
CSS3 为文字投下阴影
这适用于除 IE 6、IE 7、IE 8、IE 9 和 IE 10 测试版之外的所有当前浏览器。在 Internet Explorer 中，影子代码将被忽略，文本将显示为图 8-5 。不要在同样苍白的背景上使用苍白的颜色，因为如果没有阴影，Internet Explorer 将无法清楚地显示文本。
***图 8-5。*在 IE 6、7、8、9 和 10(测试版)中查看文本时不显示阴影
在 IE 6、IE 7、IE 8、IE 9 以外的浏览器中的效果如图 8-5b 所示。
***图 8-6。*CSS3 在 Mozilla、Opera、Safari 和 Chrome 中出现时会产生阴影
清单 5a 和 5b 显示了图 8-5 和图 8-6 的 HTML 和 CSS 代码。在 CSS 清单 8-5b 中，在清单 8-5a 中以粗体显示的<div>是 CSS 样式表产生阴影的目标。
清单 8-5a。【css3-text-shadow.html】对文本应用阴影()**
`<!doctype html>
This is a CSS3 drop shadow on text
** ** `在清单 8-5b 中，阴影是由粗体显示的标记创建的。
***清单 8-5b。*清单 8-5a 的 CSS 样式表(css3-text-shadow . CSS)
body {background-color:#99CCFF; } #banner h1 { color: #fff; padding: 50px 0 0 20px; margin: 0; font-size: 2.6em;  **text-shadow: 0.1em 0.1em 0.2em black;** }
这转化为:阴影向右偏移 0.1 em，阴影在图像下方偏移 0.1 em，模糊半径 0.2 em，阴影颜色为黑色。
为 IE 7 和 IE 8 创建投影
因为 IE 7 和 IE 8 不支持 CSS3 投影，所以必须使用一种临时技术。有两种可能性:
- 使用图形包为图像或文本添加投影。
- 在背景中使用阴影背景图像。
使用图形包
直到最近，在图形包中创建投影还是一个名副其实的障碍。下面描述了一些以前的包的典型过程。
- 将图像加载到程序中。
- 在四周添加 30 像素宽的边框。
- 选择图层
新建光栅图层。 - 回到第一层。
- 用魔棒点击新边框，用白色填充。
- 单击选择并反转选择。
- 选择效果
3D 效果
投影。 - 在下一个对话框中设置尺寸和不透明度。
- 将图像移动到阴影上，直到您对外观满意为止。
- 选择选择
选择无。 - 选择图层
合并图层(展平)。 - 裁剪顶部和左侧的白色边框。
- 保存图像。
唷！结果是一个很好的投影，可以在 IE 7、IE 8 和所有更新的浏览器中看到，如图 8-7 所示。
***图 8-7。*典型图形包产生的阴影
大多数软件包都涉及到了对层和选择功能的处理。幸运的是，现在大多数程序都在简化程序并提供更好的指导。
我使用 GIMP 快速轻松地创建投影。这个免费的软件包充满了先进的功能，易于下载和安装。撰写本文时的最新版本是 GIMP 2.6 *。*你也可以下载一本精美的图文并茂的手册。该网站位于[www.gimp.org/downloads](http://www.gimp.org/downloads)
将使用 GIMP 的以下步骤与前面描述的过程进行比较:
- 将图像加载到 GIMP 中。
- 选择滤镜
光影。 - 单击投影。
就这样！没有摆弄层，没有选择。图 8-8 显示了用 GIMP 2.6 和更早版本添加投影的结果。
***图 8-8。*使用 GIMP 创建的阴影
如果您使用不同的图形程序，请浏览帮助文件以获得关于投影的说明。我的另一个图形包附带的 500 页的手册中有一句关于阴影的无用的句子。如果你的程序有类似的手册，你可以通过访问与你的图形程序相关的论坛找到有用的建议。
图 8-9 显示了使用 GIMP 在文本上创建投影的结果。
图 8-9。 GIMP 可以在文本上创建阴影。
尝试以下练习:
- 打开 GIMP，点击文件
新建。 - 单击风景图标；将宽度设置为 500 像素，高度设置为 35 像素。
- 点击工具箱中的图标。
- 在工具箱中，单击“字体”旁边的图标。从下拉列表中，选择无粗斜体。
- 选择字体的大小和颜色；让我们试试 24pt 黑色。编辑窗口中将出现一个文本框。
- 输入文本，然后单击菜单上的过滤器。
- 选择光线和阴影，然后选择投影。
- 在下一个对话框中，尝试以下设置:
- 偏移 x: 2
- 偏移 y: 2
- 模糊半径:2
- 将颜色保留为默认黑色；将不透明度设置为 70%。
- 点击确定。
- 要保存文件，在“文件”菜单项中选择“另存为”，并将其保存为
.jpg或.png图像。
使用背景图片和 CSS2 创建阴影
背景阴影图像可以自动扩展和收缩，以适应各种图像尺寸。我非常感谢大约翰发表了这个 CSS2 技术的阴影。实现例 8-10 至 8-15 遵循他的技术。一定要在 http:// www.positioniseverything.net 访问大约翰的优秀网站(注意.net域名)。
这个网站对这种方法的工作原理有非常有用的解释。该网站也是 CSS 实用信息的宝库。
通过用包含阴影图像的<div>包围诸如段落或图像的块，该方法可以在两侧或四侧提供阴影。我们将从两边的阴影开始。
使用 CSS2 背景阴影图像的双面阴影
图 8-10 显示了图像两侧的阴影。有两个，相关的代码示例显示在清单 8-10a 和清单 8-10b 中。
***图 8-10。*一个两边都有阴影的简单图像
清单 8-10a 中的三个<div>持有三个阴影图像的一部分。这些由两个角阴影图像和主阴影图像组成。第四个<div>持图。这些<div>以粗体显示。
清单 8-10a。围绕一个两边都有阴影的图像。(【two-shadowfig10.html】??)
`<!doctype html>
** **
**
`
CSS 清单 8-10b 中的图 8-10 使用了三张背景图片，top-rightcorner.png、bottom-leftcorner.png和main-shadow.png。图 8-10 、 8-11 和 8-12 都使用相同的阴影图像。这些可以从这本书的网页上下载。使用 CSS 中的position:relative;将图片定位在背景阴影中。
***清单 8-10b。清单 8-10a 的 CSS 样式表为(*two-shadow fig 10 . CSS)
.top-right-corner { background:url(top-rightcorner.png) right top no-repeat; width: 305px; } .bottom-left-corner { background:url(bottom-leftcorner.png) left bottom no-repeat;  padding-top:8px; padding-left:8px; } .shadowbox { background:url(main-shadow.png) bottom right; } .innerbox { position: relative; left:-8px; top:-3px; }
您可能需要稍微调整.innerbox位置，以确保不会出现白边；例如，起初我有这样的设置:.innerbox { position:relative; left:-8px; top:-8px; }，但是在图片的底部出现了一个像素的白边。通过改成top:-7px；，白边被移除。
在有白框的图像周围放置一个阴影，如图 8-11 所示。
***图 8-11。*一个两边都有阴影和白色边框的图像
这个例子有一个彩色的背景，这样可以清楚地看到白色边框的顶部和左侧。相关代码见下一个清单 8-11a 至 8-11d 。
方法一:添加白色边框
图像必须首先给一个白色的边界。在本例中，使用图形程序添加了一个 10 像素的白色边框。然后图像以新名称colrivblu-whitebdr.jpg保存。这些边框将图像的尺寸增加了 20 个像素；新的尺寸是 318 像素× 216 像素，这些数字被仔细地记录下来，为下一步做好准备——清单 8-11a 。
清单 8-11a。添加阴影和白色边框(【twoshad-whitebdr1.html】)
`<!doctype html>
***清单 8-11b。*清单 8-11a 的 CSS 样式表( twoshad-whitebdr1.css)
body { background-color:#CCFFCC; font:black arial medium; } .top-right-corner { background:url('img/top-rightcorner.png') no-repeat right top;  width: 326px; } .bottom-left-corner { background:url('img/bottom-leftcorner.png') no-repeat left bottom;  padding-top:8px; padding-left:8px; } .shadowbox { background:url('img/main-shadow.png') right bottom; } .innerbox { position: relative; left:-8px; top:-4px; }
方法 2:使用 CSS 添加白色框架
带有现成边框的图像提供了一个解决方案，但是 CSS 可以用来添加白色边框。CSS 方法更可取，因为它加载速度更快，并且避免了使用画图程序添加边框的麻烦。然而，可能需要对样式表进行一些修改才能使其正确。
清单 8-11c 给出了与图 8-11 相同的外观。名为.frame的类被添加到图像中，以便添加白色边框；这以粗体显示。
清单 8-11c。【使用类提供白色边框(twoshad-whitebdr2.html ??)】
`<!doctype html>
HTML 中使用了类.frame来定位图像，以便添加白色边框。这个新行img.frame { border:10px white solid; }被添加到 CSS 清单 8-11d (以粗体显示)。
***清单 8-11d。定义类的 CSS 样式表。innerbox(*two shad-white BDR 2 . CSS)
body { background-color:#CCFFCC; font:black arial medium; } .top-right-corner { background:url('img/top-rightcorner.png') no-repeat right top;  width: 326px; } .bottom-left-corner { background:url('img/bottom-leftcorner.png') no-repeat left bottom;  padding-top:8px; padding-left:8px; } .shadowbox { background:url('img/main-shadow.png') right bottom; } .innerbox { width:298px; **height:216px;** position: relative; left:-8px; top:-8px; } **img.frame { border:10px white solid;** }
CSS2 文本的双面阴影
图 8-12 显示了给文本块添加阴影的效果。
***图 8-12。*一个段落的双面投影可以使用与图像相同的技术来实现。
清单 8-12a 中的 HTML 与之前的项目几乎相同，除了使用了一段文本而不是一张图片。
清单 8-12a。【two-shadowtext.html】在文本块周围放置双面投影
`<!doctype html>
A paragraph can have a drop shadow. The shadow grows and shrinks  automatically to accommodate varying amounts of text
` ` `图 8-12 在文本和段落内容框之间有 5 个像素的填充。这在下一个清单中以粗体显示。200 像素宽的内容加上左右填充给出了 220 像素的总宽度，这被添加到了top-right-corner的样式中(在清单 8-12b 中以粗体显示)。文本块被赋予一条细的银色边框，这样顶部和左侧的边缘清晰可见。
***清单 8-12b。*清单 8-12a 的 CSS 样式表(two-shadow text . CSS)
body { background-color:#FFF; font:black arial medium; } .top-right-corner { background:url('img/top-rightcorner.png') no-repeat right top;  **width:220px;** } .bottom-left-corner { background:url('img/bottom-leftcorner.png') no-repeat left bottom;  padding-top:8px; padding-left:8px; } .shadowbox { background:url('img/main-shadow.png') right bottom; } .innerbox { position: relative; left:-8px; top:-8px; } .innerbox p { margin:0; padding:5px; width:200px; border:1px silver solid; }
CSS2 四边阴影
使用 CSS 背景图片可以在图片的四周放置阴影。较宽的背景阴影可能看起来不太真实，因为拐角处的阴影半径对于尖角图片的阴影来说可能显得太大。
图 8-13 和图 8-14 显示了两种不同阴影宽度的效果。
***图 8-13。*窄窄的四面垂影
***图 8-14。*四面广坠影
图 8-13 、 8-14 和 8-15 仅使用一个矩形阴影图像。
提示可以从书的网页上下载有限数量的投影图像，或者你可以使用图形处理软件包创建自己的图像。投影图像必须是透明的.png文件。
清单 8-13a 有四个<div>并再次使用 CSS 背景图片属性。<div> s 的定位及其关闭的</div> s 极其重要。这个 10 像素阴影的例子最适合 XHTML 列表。阴影在所有现代浏览器中都可以工作，但在 IE 6 或 IE 7 中不能正确显示。
注意在清单中，corner a是右上角，corner b是左下角。
清单 8-13a。用四个 10 像素宽的阴影包围一幅图像*(【fourside-drop10px.html】)***
`
清单 8-13b 使用单一矩形阴影图像、shadow10p.png和 CSS 定位。
***清单 8-13b。*清单 8-13a 的 CSS 样式表( fourside-drop10px.css)
.shadow-one { position:absolute; padding-top:20px; padding-left:20px; } .corner-a { position:absolute; right:0; top:0; width:20px; height:20px;  background:url('img/shadow10p.png') right top no-repeat; } .corner-b { position:absolute; left:0; bottom:0; width:20px; height:20px;  background:url('img/shadow10p.png') left bottom no-repeat; } .shadow-two { position:relative; background :url('img/shadow10p.png')  right bottom no-repeat; } .shadow-three { position:relative; left:-20px; top:-20px;  background:url('img/shadow10p.png') left top no-repeat; } .shadow-four { position:relative; left:10px; top:10px; }
注意在图 8-13 中，.png图像上阴影区域的宽度为 10 像素。CSS 清单中的 20 像素尺寸是.png阴影宽度的两倍。阴影四与.png阴影区域的宽度相同(10 像素)。
在图 8-14 的中显示了一个更宽的阴影。清单 8-14a 有四个<div>并再次使用 CSS 背景图片属性。<div> s 的定位及其关闭的</div> s 极其重要。阴影最好使用 XHTML 而不是 HTML5。该阴影可以在所有现代浏览器中查看，包括 IE 8，但它不能在 IE 6 或 IE 7 中正确显示。
清单 8-14a。【fourside-drop30px.html】在四边放置一个 30 像素宽的阴影
`
CSS 清单 8-14b 使用单一矩形阴影图像、shadow30p.png和 CSS 定位。
***清单 8-14b。*清单 8-14a 的 CSS 样式表
.shadow-one { position:absolute; padding-top:60px; padding-left:60px; } .corner-a { position:absolute; right:0; top:0; width:60px; height:60px;  background:url('img/shadow30px.png') right top no-repeat; } .corner-b { position:absolute; left:0; bottom:0; width:60px; height:60px;  background:url('img/shadow30px.png') left bottom no-repeat; } .shadow-two { position:relative; background :url('img/shadow30px.png')  right bottom no-repeat; } .shadow-three { position:relative; left:-60px; top:-60px;  background:url('img/shadow30px.png') left top no-repeat; } .shadow-four { position:relative; left:30px; top:30px; }
注意在图 8-14 中，.png图像上阴影区域的宽度为 30 像素。60 像素的尺寸是.png阴影宽度的两倍。阴影四与.png阴影区域的宽度相同(30 像素)。
段落周围的四边阴影
通过使用投影，可以使段落看起来好像漂浮在页面表面上。图 8-15 显示了一个没有边框但被阴影包围的段落。
***图 8-15。*在一段文字周围放置四边阴影时，使用一个段落，并给段落一个宽度，这样阴影就有东西可以附着。
该过程与之前的项目完全相同，但使用了一个段落而不是一张图片(见清单 8-15a 和 8-15b )。
***清单 8-15a。将阴影应用到文本块的四边(*shadow-paragraph.html)
`<!doctype html>
Rare bureaucrat discovered
Bureaucrats and other public 'servants'  *…some text has been ommitted from this markup to save space…* present in bureaucrats and jobsworths of all nationalities.
***清单 8-15b。*清单 8-15a 的 CSS 样式表( shadow-paragraph.css)
/*SET 4 SIDED SHADOW*/ .shadow-one { position:absolute; padding-top:60px; padding-left:60px; } .corner-a { position:absolute; right:0; top:16px; width:60px; height:60px;  background:url('img/shadow30px.png') right top no-repeat; } .corner-b { position:absolute; left:0; bottom:16px; width:60px; height:60px;  background:url('img/shadow30px.png') left bottom no-repeat; } .shadow-two { position:relative;  background :url('img/shadow30px.png') right bottom no-repeat;} .shadow-three { position:relative; left:-60px; top:-60px;  background:url( 'img/shadow30px.png' ) left top no-repeat; } .shadow-four {position:relative; left:30px; top:30px; } #wrapper { width:420px; } p {width:400px; padding:10px; }
排除清单 8-13 至清单 8-15 中的阴影
如果你对刚才讨论的阴影有任何问题，这部分的信息应该可以帮助你。对于初学者，总是从拐角 a 和拐角 b 的高度设置为零开始，如下所示:
.corner-a {position:absolute; right:0; **top:0;** width:60px; height:60px;  background:url('img/shadow30px.png') right top no-repeat; } .corner-b {position:absolute; left:0; **bottom:0;** width:60px; height:60px;  background:url('img/shadow30px.png') left bottom no-repeat; }
角 a 是一个盒子的右上角；角 b 是一个盒子的左下角。零位设置导致拐角 a 和 b 出现问题，如图图 8-16 所示。
.corner-a { position:absolute; right:0; top:16px; width:60px; height:60px;  background:url('img/shadow30px.png') right top no-repeat; } .corner-b { position:absolute; left:0; bottom:16px; width:60px; height:60px;  background:url('img/shadow30px.png') left bottom no-repeat; }
图 8-16 显示了故障角 a 和 b 。
图 8-16。 A 角和 b 角的问题
纠正故障
通过反复试验，改变角点 a 和 b 的顶部和底部像素。在本例中，解决方案是将零点改为 16 像素。
.corner-a { position:absolute; right:0; **top:16px;** width:60px; height:60px;  background:url('img/shadow30px.png') right top no-repeat; } .corner-b { position:absolute; left:0; **bottom:16px;** width:60px; height:60px;  background:url('img/shadow30px.png') left bottom no-repeat; }
。 png 阴影图像
哪里可以获得.png阴影图像？少量可以从大约翰的网站上下载([www.positioniseverything.net](http://www.positioniseverything.net) ) *。*我在这本书的网页下载包里放了一些阴影。你可以使用免费的 GIMP 图形程序设计自己的.png阴影图像。这些指令相当复杂，但是您不需要在使用其他一些包时所必需的插件。关于 GIMP 的信息可以在 http://www.gimp.org/获得，你也可以从 GIMP 网站下载程序和帮助文件。
创建*。*GIMP 中的 png 阴影图片
这个部分的目的是在一个空的矩形周围产生一个四边的阴影。
-
打开 Gimp，点击文件
新建。 -
在下一个对话框中，单击高级选项。
-
单击左侧图标(位于高度选项下方)选择纵向。指定所需阴影的大小(例如 640 像素宽× 400 像素高)。在色彩空间字段中，选择灰度(它具有英国英语拼写)。
-
Select Fill With
Transparency, then click OK. The empty image is created; it is covered with a checkerboard pattern that denotes transparency. Figure 8-17 shows the GIMP’s Toolbox window. 
图 8-17 。GIMP 的工具箱窗口。白色样本与黑色样本重叠。
-
现在选择白色，单击弯曲的双箭头，以确保白色方块与黑色方块重叠。顶部颜色代表填充颜色，而黑色(位于所选的下部颜色上)是背景颜色。在工具箱窗口中，单击桶填充图标。单击白色方块，然后返回到棋盘图像，并左键单击它使其变成白色。
-
点击图层
新建图层。确保选中透明度单选按钮，接受所有默认设置，然后单击确定。 -
在菜单中，单击窗口
可停靠对话框图层对话框。这将在屏幕上出现一个对话框，显示层。 -
确保棋盘格图案的图层总是被选中(当它被选中时会有一个浅色背景；未选择的层将是白色的)。
现在我们将决定阴影图像的宽度，假设它是 20 像素。
-
点击选择
全部。现在你会看到虚线轮廓像一排行进的蚂蚁一样移动。 -
点击选择
缩小。一个对话框将允许您选择图像的缩小量；假设是 30 像素。 -
确保勾选了标记为“从图像边框收缩”的框。单击确定。
-
现在你会看到内部和外部图像有虚线边框。只有内在的形象才会有行进的蚂蚁。点击滤镜
光影
投影。 -
在对话框中，将偏移设置为零，模糊半径为 20 像素，不透明度为 70。
-
Make sure the box labeled Allow Resizing is unchecked. Click OK. You will see a third layer, called Drop Shadow, has appeared; just ignore it. The docked Layers window is illustrated in Figure 8-18.
***图 8-18。*GIMP 图层对话框
-
**不要保存它，**但是在图层对话框中点击与背景图层相关的眼球。现在你可以在编辑面板中看到投影，棋盘再次显露出来。
-
点击文件
另存为，选择保存位置。在对话框的顶部，给文件命名，并确保通过在文件名中添加.png来包含文件类型(例如:mydropshadow.png)。 -
点击保存按钮。将弹出一个标有导出文件的对话框。确保选中标记为“合并可见层”的单选按钮。然后单击导出按钮。接受下一个对话框中的默认设置，然后单击保存按钮。
这样创建的阴影图像可用于之前的背景阴影图像示例中，并且可对其进行切片，以给出本节稍后所需的图像 8-21a 、 8-21b 和 8-21c 。尝试各种尺寸，但始终包括偏移的两个零。最终你可以创建一个阴影尺寸库；请记住，当阴影收缩或膨胀以填充<div>时，较大的阴影尺寸可用于较小的图像。但是，如果您对其周围的图像使用过小的阴影，它将隐藏在图像后面。我们刚刚创建的阴影如图 8-19 所示。
***图 8-19。*使用 GIMP 创建的阴影
在网页的主面板周围添加阴影
本例中的技术最适用于固定宽度的布局，但是使用.png阴影图像来缩放以匹配框元素，半流动页面也是可能的。图 8-20 显示了一个固定宽度页面的四边都有阴影的整页。
***图 8-20。*阴影环绕整个页面的白色边框。这适用于所有浏览器。
注意通过使用新的 CSS3 模块，在标题面板的白色字体上添加了阴影。清单 8-20 、 8-22 和 8-23 中的 CSS3 文本阴影在 Internet Explorer 6、7、8 和 9 中不工作。IE 6 中的.png阴影是不透明的。
清单 8-20a 适用于 960 像素的固定宽度和 1024 像素水平分辨率的屏幕。使用的阴影宽度和深度为 1024 像素。
清单 8-20a。【shadow-fullpage.html】在网页边框周围创建阴影
`
Shadow all around main white frame
Latest News
Rare bureaucrat discovered
Bureaucrats and other public 'servants' normally have all traces of common *Some of the text has been omitted here to save space* and jobsworths of all nationalities.
Man bites dog
Cedric Sidebottam age 46, mistook his Yorkshire terrier for a hamburger; he spread mustard on the dog and then bit it. The dog recovered but Cedric was admitted to hospital suffering from shock and food poisoning.
** ** ** ** ** ** ** ** ** ** `
***清单 8-20b。*清单 8-20a 的 CSS 样式表( shadow-fullpage.css)
body { text-align: center; background: #e6e6e6; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } #wrapper { margin: -20px auto 0 auto; width: 940px; border:10px white solid; padding:0; } header { width: 940px; height: 154px; margin: 0; border-bottom:10px white solid;  background: url(img/bluepan.jpg); } article { margin-left:10px; width:40%; display:inline; float:left; text-align:left; } #mainContent {margin:0; width: 940px; float: left; background-color:#aac9f6; } nav { width: 120px; margin-right:10px; padding: 0 5px 5px 0; float: right; } footer { margin:0; text-align:center; clear: both; background-color:#aac9f6; } br.clear { clear:both; } body { font: 76%/1.6 "Lucida Grande", Geneva, Verdana, sans-serif; } a { font-weight: bold; color: navy; text-decoration: none; border-bottom: 1px solid navy; } a:hover {color:#906; border-bottom: 1px solid #906; } header h1 { color: #fff; padding: 50px 0 0 20px; margin: 0; font-size: 2.6em;  text-shadow: 0.1em 0.1em 0.2em black; } h2, h3, h4 { margin-top: 0; color: black; font-weight: bold; } h2 { font-size: 2.2em; margin-bottom:0; } h3, nav h2 { font-size: 1.6em; margin-bottom:0; } h4 { font-size: 1.2em; margin-bottom:0; } p { margin-top:0; margin-bottom:6px; } #mainContent p, #mainContent h2, #mainContent h3, #mainContent h4, #mainContent ul,  { margin-left: 10px; margin-right: 10px; background-color:#aac9f6; } nav ul, nav ul li { list-style: none; margin: 0 0 2px 10px; padding: 0; } /*SET 4 SIDED SHADOW STYLES*/ .shadow-one {position:absolute; padding-top:60px; padding-left:60px; } .corner-a {position:absolute; right:0; top:-20px; width:60px; height:60px;  background:url('img/shadow30px.png') right top no-repeat; } .corner-b {position:absolute; left:0; bottom:0; width:60px; height:60px;  background:url('img/shadow30px.png') left bottom no-repeat; } .shadow-two { position:relative;  background:url('img/shadow30px.png') right bottom no-repeat; } .shadow-three { position:relative; left:-60px; top:-60px;  background:url('img/shadow30px.png') left top no-repeat; } .shadow-four { position:relative; left:30px; top:30px; }
谨慎这种方法虽然有效，但是有一个很大的弊端。此页面的垂直长度受到您选择的阴影图像尺寸的限制。图 8-7 中使用的 1024 像素阴影将页面的垂直高度限制为 980 像素，内容面板的垂直高度限制为 780 像素。在主页上不会有问题，主页不应该超过浏览器窗口的高度；但这可能会严重妨碍后续页面。
克服身高限制
有以下三种解决方案可供选择:
- Use a larger shadow image. This will mean finding or creating a larger shadow image; However, even if the vertical height is extended, it will still be limited.
- Use slice shadow images.
- Use shadows on both sides; No top or bottom shadows.
使用切片阴影图像
这个例子改编自安迪·巴德( ` `www.andybudd.com`` )为《博客设计解决方案》(编辑之友，2006)一书创建的模板。这个例子是一个 800 × 600 的屏幕，虽然对于今天的屏幕来说太小了，但它可以用来演示这项技术。使用更大的阴影文件，它可以适应大屏幕和高分辨率。
图 8-22a 到 8-22c 显示了使用绘画程序分割成三个项目的阴影图像。
***图 8-21a、8-21b、8-21c。【标签为 top-shadow.png、middle-shadow.png 和 bottom-shadow.png 的 ***
在此示例中，切片的高度如下:顶部切片为 20 像素，中间切片为 64 像素，底部切片为 20 像素。图 8-22 中的截图展示了一个可扩展阴影的工作示例。
***图 8-22。*垂直延伸到任何高度的阴影
顶部和底部的阴影是固定的。在清单 8-22a 中，CSS 样式表让包装器应用侧面阴影。
清单 8-22a。在网页边框周围放置可延伸的阴影(【shadow-fullpage-extendable.html】??)
`<!doctype html>
Shadow all around main white frame
Latest News
Rare bureaucrat discovered
Bureaucrats and other public 'servants' normally have all traces of common *some text omitted here to save space* usually present in bureaucrats and jobsworths of all nationalities.
Man bites dog
Cedric Sidebottam age 46, mistook his Yorkshire terrier for a hamburger; he  spread mustard on the dog and then bit it. The dog recovered but Cedric  was admitted to hospital suffering from shock and food poisoning.
** ** ** ** `
侧面阴影切片垂直重复以匹配包装的长度；这在清单 8-22b 中通过将包装器作为目标来实现。
***清单 8-22b。*清单 8-22a 的 CSS 样式表(shadow-full page-extended . CSS)
/*This css template is derived from a template created by Andy Budd (www.andybudd.com)  for the book "Blog Design Solutions", and is released under a Creative Commons  Attribution-NonCommercial-ShareAlike 2.5 License*/ body { margin: 0; padding: 0; text-align: center; background: #e6e6e6;  font: 76%/1.6 "Lucida Grande", Geneva, Verdana, sans-serif; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } #wrapper, #top, #bottom { margin: 0 auto; padding: 0 10px; width: 720px; } **/*apply shadows*/** **#wrapper { background: url(img/middle.png) repeat-y;** **}** **#top { height: 20px; margin-top: 20px; background: url(img/top.png) no-repeat;** **}** **#bottom { height: 20px; background: url(img/bottom.png) no-repeat;** } `header { width: 700px; height: 154px; margin: 0; margin-left:10px; 
border-bottom:10px white solid; background: url(img/bluepan.jpg);
}
#leftcol { margin: 0 10px; display:inline; /* fix IE double margin float bug */
float: left; width: 500px; text-align:left;
}
#mainContent {margin:0 0 0 10px; border:0 10px 0 10px white solid; width: 700px; 
float: left; background-color:#aac9f6;
}
nav { width: 140px; margin-right:10px; padding: 0 5px 5px 0; float: right;
}
footer { margin:0; text-align:center; clear: both;
}
br.clear { clear:both;
}
a { font-weight: bold; color: navy; text-decoration: none; border-bottom: 1px solid navy;
}
a:hover {color:#906; border-bottom: 1px solid #906;
}
header h1 { color: #fff; padding: 50px 0 0 20px; margin: 0; font-size: 2.6em; 
text-shadow: 0.1em 0.1em 0.2em black;
}
h2, h3, h4 { margin-top: 0; color: navy; font-weight: bold;
}
h2 { font-size: 2.2em; margin-bottom:0;
}
h3, nav h2 { font-size: 1.6em; margin-bottom:0;
}
p { margin-top:0; margin-bottom:6px;
}
#mainContent p, #mainContent h2, #mainContent h3, #mainContent h4, #mainContent ul, 
#mainContent ol { margin-left: 10px; margin-right: 10px
}
nav ul li { list-style: none; margin:0; padding: 0;
}
仅在包装纸的侧面使用阴影
对于这种技术，包装器必须接触浏览器窗口的顶部。如果可能的话，尽量让包装的底部接触到浏览器窗口的底部。
图 8-23 显示了带有侧阴影的页面。
***图 8-23。*仅添加到网页侧面的阴影
在清单 8-23a 中，顶部和底部阴影位置被省略，包装器通过 CSS 表单中的顶部边距移动到页面顶部。在清单 8-23b 中，CSS 让包装器将侧面阴影放置为垂直重复的图块。
清单 8-23a。【side-shadow-fullpage-extendable.html 仅在网页侧面添加阴影
`<!doctype html>
Extendable shadow at the sides only
Latest News
Rare bureaucrat discovered
Bureaucrats and other public 'servants' *some text has been omitted to save space* usually present in bureaucrats and jobsworths of all nationalities.
Man bites dog
Cedric Sidebottam age 46, mistook his Yorkshire terrier for a hamburger; he spread mustard on the dog and then bit it. The dog recovered but Cedric was admitted to hospital suffering from shock and food poisoning.
** ** `
***清单 8-23b。*清单 8-23a 的 CSS 样式表(side-shadow-full page-extended . CSS)
/*This css template is adapted from a template created by Andy Budd (www.andybudd.com)  for the book"Blog Design Solutions", and is released under a Creative Commons Licence*/ body { margin: 0; padding: 0; text-align: center; background: #e6e6e6;  font: 76%/1.6 "Lucida Grande", Geneva, Verdana, sans-serif; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } #wrapper{ margin: 0 auto -20px auto; padding: 0 10px; width: 720px; clear:both; } **/*apply drop shadows to sides*/** **#wrapper { background: url(img/middle.png) repeat-y;** } header { width: 700px; height: 154px; margin: 0; margin-left:10px;  background: url(img/bluepan.jpg); border-top:10px white solid; } #leftcol { margin: 0 10px; display:inline; /* fix IE double margin float bug */ float: left; width: 500px; text-align:left; } #mainContent {margin:0; width: 700px; float: left; background-color:#aac9f6;  border:10px white solid; min-height:425px; } nav { width: 140px; margin-right:10px; padding: 0 5px 5px 0; float: right; } footer { margin:0; text-align:center; clear: both; background-color:#aac9f6; } br.clear { clear:both; } a { font-weight: bold; color: navy; text-decoration: none; border-bottom: 1px solid navy; } a:hover {color:#906; border-bottom: 1px solid #906; } header h1 { color: #fff; padding: 50px 0 0 20px; margin: 0; font-size: 2.6em;  text-shadow: 0.1em 0.1em 0.2em black; } h2, h3, h4 { margin-top: 0; color: navy; font-weight: bold; } h2 { font-size: 2.2em; margin-bottom:0; } h3, nav h2 { font-size: 1.6em; margin-bottom:0; } p { margin-top:0; margin-bottom:6px; } #mainContent p, #mainContent h2, #mainContent h3, #mainContent h4, #mainContent ul,  #mainContent ol {margin-left: 10px; margin-right: 10px } nav ul li { list-style: none; margin:0; padding: 0; }
使用形状拼贴软件
这个软件可以产生很好的边框和阴影，如图图 8-24 所示。
***图 8-24。*在形状拼贴中创建的阴影和白色边框
可以从 http:// www.shapecollage.com 下载形状拼贴的免费试用版。它可以产生有或没有白框的阴影，如左图 8-25 所示。
如果在探索之后，你认为它可能有用，你可以花大约 29 美元(26 英镑)购买它，然后你将能够制作没有水印的图像，以及解锁几个额外的功能。顾名思义，该程序还可以创建拼贴画。
我发现形状拼贴一开始很难使用。以下是测试免费试用版的基本指南。
- 在打开形状拼贴之前，请记下以下信息:
- 需要投影的图像的大小。
- 图像在硬盘上的位置。
- 您打算放置已完成图像的网页的背景颜色。
- 打开形状拼贴，然后关闭 nag 屏幕。
- 在下一个面板上，在“形状选择矩形”下，将拼贴大小设置为比图像宽度宽大约 50 %,并将高度设置为比图像高度大大约 50%。
- 在所示的示例中，图像宽 296 像素，高 196 像素。我把拼贴尺寸设为 450 × 300。
- 在“照片大小”下，单击“手动”，并将实际图像大小设置为 296 像素。
- 在“照片”下，将数量更改为 1。
- 单击外观选项卡。
- 在背景字段中，单击白色字段。您将看到一个颜色选择器。选择网页的背景颜色。
- 用同样的方法选择边框颜色。将默认边框宽度保留为 3.3%。如果不希望图片周围有边框，请将其更改为零。
- 单击高级选项卡并选择旋转为无和 0，0。
- 对于阴影偏移，选择 1。
- 点击文件
添加文件。 - 导航到文件的位置并选择它，然后点按“好”。
- 你将回到主屏幕。在中央面板的底部，单击“创建”按钮。
- 在下一个屏幕上，您可以选择一个文件夹并命名文件。你可以选择三种文件格式
.jpg、.png或.psd(Photoshop 文件)。 - 单击保存。
- 会出现一个小弹出窗口，询问您想要什么质量。默认就可以了，所以单击 Save。
总结
在这一章中，你学习了几种创建阴影的方法，使你的图片和文本块看起来像浮在页面上。本章首先描述了新的 CSS3 盒阴影模块，你学习了如何应用 CSS3 阴影到图像和文本。然后，因为 IE 7 和 IE 8 不支持 CSS3 框阴影，有人建议可以使用图形包来应用投影。特别是，GIMP 2.6 被推荐为一个免费的综合程序，具有极其简单的投影功能。然后演示了一种替代方法；它使用了阴影背景图像，可以在所有现代浏览器和 IE 8 中看到。
在下一章，你将学习几种创建拼贴画的方法，以及如何构建一个带标题的图片库。**
