HTML5 项目实践指南（五）
十三、外观和实用性
访问者只会浏览一个有吸引力和有用的网站。一些网站所有者要求一个让他们满意的网站，而不考虑什么会让他们网站的访问者满意。这样的网站让所有者很高兴，但它可能对访问者或所有者的业务没有任何帮助。网站所有者应该问问自己，网站将为访问者做些什么。他们应该问几个人，如果他们访问这个网站，他们希望找到什么。
当与潜在客户交谈时，向他们解释网站设计过程不是从文字和图片开始的，而是从计划开始的。首先，确定网站的总体目标。是为了分享信息吗？还是有望产生销量？从一个目标开始会使设计网站更容易，并帮助每个人关注网站的目的。集中精力让网站的信息快速、清晰、直接地出现。
考虑导航和你的次要内容如何与你的目标互动。规划页面或部分。每一页应该只涵盖一个主题。列出主题，并使用该列表规划导航菜单。在开始组成页面之前，规划导航菜单和结构*；这样可以节省以后很多小时繁琐的修改。*
外观
关于网站外观的这一节首先简要讨论了文本的使用和滥用；文本内容的显示方式可以增强或破坏网页。接下来，你会了解到主页的重要性；它的出现是如何吸引用户进一步探索还是将他们从你的网站上赶走。接下来讨论颜色的效果，最后提供一些有用的提示来帮助你创建更有吸引力的页面。
文字的使用和滥用
本节中的指导方针只是简单的常识，但是一定要把它们作为一个清单来改进你的工作，以防感情压倒理智。当我开始设计网站时，一些客户向我展示了大量的文字，保证会把用户从他们的网站上赶走。然后我就有了压缩文本的乏味任务，这偶尔会惹恼客户，这是可以理解的。我证明了压缩文本并保留客户希望传达的每一点信息是可能的。
我还向他们提出了一条小小的建议:在一本书、一本杂志或一本小册子中，冗长的文字可能是可以接受的，但是大量的文字，尤其是在主页上的文字，将会彻底毁掉一个网站。
测试表明，当出现大量文本时，网站访问者会抱怨并转向另一个网站。这是因为与打印的页面相比，在屏幕上阅读文本非常累人。访问者访问网站不是为了阅读；他们在网上寻找特定的信息，并且希望快速找到。
压缩文本主要适用于主页面，但是如果你在描述一个产品或服务，或者提供信息，不要为了简洁而忽略重要的细节；删除对信息没有任何帮助的词。
所有重要的主页必须像捕蝇草一样
所有的网站都从主页开始。主页的设计尤其重要，因为它是访问者的第一印象，它传达了网站的基调。使其成为一个有吸引力的杂志封面(参见图 13-1 )。用它来激发访问者的兴趣。这很容易做到，只需透露足够多的信息；这引起了好奇心。
图 13-1 。捕蝇草。aboutfacts.net供图
主页应该像一个捕蝇草，一个吸引人的登陆点，把访问者吸引到更深的地方，让他们不去别的网站。每一页必须清楚地集中在一个主题，只有一个主题。这尤其适用于主页。重点是对网站内容的简要描述。这一点必须通过导航菜单上的按钮或链接的措辞来强调。
是什么破坏了主页上的焦点？没有什么比一个贴满 RSS 订阅源、表扬、徽章、无关网站链接、闪烁广告、字幕和视频的主页更糟糕的了。徽章、奖状和认证证书都有一定的作用，但这些最好放在“关于我们”页面上。W3C 验证标识可以放在侧边栏或页脚，因为客户经常渴望表明他们雇佣了一个有能力的设计师。一码长的主页和巨大的文本块是焦点杀手。一个没有清晰焦点的页面会把访问者拒之门外。
图 13-2 和 13-3 显示了一个聚焦的和一个非聚焦的主页。
图 13-2 。一个干净整洁的主页
***图 13-3。*呸！
主页必须非常简短和整洁。主页上的信息太多是不好的。这使得后续页面变得多余。如果主页已经说明了一切，为什么访问者还要费心去点击菜单项呢？
主页必须清楚地表明网站的内容。
如果你是天堂退休中心，不要只显示“天堂”的标题，并附上大楼或一些快乐居民的照片。简短地大声说出提供的内容；类似于以下内容:
受保护的退休住所
为老年人出租的住所
在关爱的环境中拥有陪伴和支持的独立性
一言以蔽之:不要再添加任何文本。让菜单按钮诱惑用户去发现故事的其余部分。
图片比文字更能解释事物。但是大图片(或者图片太多)会让主页加载很慢。然后访问者会离开去寻找一个加载速度更快的网站。
空白对于聚焦是必不可少的。在每一页上使用大量的空白来把注意力集中在重要的部分。空白表示没有文字或图片的空间。如果你有一个浅青绿色的背景，那么空白将是浅青绿色的，但它仍然被归类为空白。空白将注意力集中在要点上。糟糕的设计师很想填满页面的每一个可用区域。拥挤的页面令人厌烦。
保持主页简短。使主页的高度不大于屏幕窗口高度。不要让访问者向下滚动主页。如果他们不得不向下滚动，你在主页上放了太多东西。向下滚动可能意味着菜单不再吸引他们。当然，后续页面可以更长。一个简短的主页可以确保访问者查看菜单按钮以获得更多信息。
精心选择颜色。为了清晰易读，最好的文本颜色是白底黑字。鲜明的背景色，如鲜红色，如果覆盖了页面的大部分区域，会让人感到不舒服。如果你的网站是卖东西的，使用明亮但不花哨的颜色，并且有节制地使用它们(只是为了产品或菜单按钮)。花哨的颜色搭配表明网站没有品位，缺乏专业水准。如果你不是在卖东西，而是在提供信息，那就用淡色的背景来营造平静；访问者会在平静的网站上逗留更长时间。深色的背景颜色是不祥的，令人不快的(尤其是黑色，它真的只适合殡仪馆)。避免整页背景图形(水印或纹理)；它们会导致页面过于繁琐，使文本难以阅读。确保文本和背景颜色有足够的对比度，使弱视的人能容易地阅读你的网站(关于颜色对比的细节，见第十四章)。
如果客户有一个带有配色方案的房子风格，或者一本小册子，或者一个彩色标志，这些都可以作为一个配色方案的良好开端。向客户展示调色板也可以帮助他们选择主题。
最初，一个名称只能指定 17 种颜色，如红色或蓝色。现在，147 种颜色可以这样命名:color: mediumpurple;。有关这方面的更多信息，请参见[www.w3schools.com/css/css_colornames.asp](http://www.w3schools.com/css/css_colornames.asp)和[somacon.com/p142.php](http://somacon.com/p142.php)。
提示需要对颜色有想法吗？试试下面的网站:
[colorschemedesigner.com](http://colorschemedesigner.com)或[colorschemer.com](http://colorschemer.com)或[www.elizabethcastro.com/html/colors…](http://www.elizabethcastro.com/html/colors/backflapcolors.html)或[www.december.com/html/spec/color.html](http://www.december.com/html/spec/color.html)。
你网站上的每张图片都应该有一个 ?? 和 ??，这样即使你的访问者关闭了图片，他们也能发现图片的内容。更重要的是，这使得弱视和失明的人能够听到图片的语音描述。如果一个页面有没有alt的图片，它将不会被验证。Logos 应该有空的alts和titles像这样:alt= " "和title= " "，不会妨碍残疾人，但是会验证。除非有title标签，否则 Mozilla 不会显示工具提示。
每个超链接都必须有一个title像这样:<a href="Page-two.html" title="Page Two">Page Two</a></li>。
避免滚动文本(字幕)、自动启动视频和任何移动的东西。这些花招是把人们从你的网站上赶走的最好方法。噱头可能非常令人恼火，也可能成为人们关注的焦点——以至于忽略了页面的其他部分。唯一的例外是展示事物如何工作的动态图片(不在主页上)。是否运行应该在用户的控制之下；它不应该自动启动。如果是动画.gif，那肯定是循环次数有限；假设在五到十个周期之间。如果视频、音频和幻灯片不在主页上，并且用户可以选择是否要观看/收听，则它们是可以接受的(媒体文件不得自动启动)。
Autostart 表示加载页面时声音或视频自动开始。这是个坏主意，因为它肯定会激怒人。突然爆发的声音会让用户大吃一惊，尤其是盲人用户。用户要么会立即离开你的网站，要么会疯狂地寻找关闭 AV 剪辑的方法。他们可能永远不会再回到你的网站。确保 AV 只能在用户请求时开始。如果自动开始载入一个短而安静的琶音，它对于音频可能是可以接受的。也许一段安静、舒缓的背景音乐是可以忍受的，如果它是短暂的，并且不会无休止地重复。
框架:这是一种允许内容在固定的横幅和菜单后面上下滚动的设计方法。框架不再被接受；搜索引擎拒绝穿透框架来定位后续页面。框架不能在移动设备上工作，并且它们使得盲人和弱视者几乎不可能阅读屏幕。
主页以外的页面
印刷品、音频和电影以线性方式交流。观众从开头开始，一直看到结尾。一个网站很不一样；它是非线性的。用户通过在网站上跳来跳去来探索。网站更像是一本电话簿；为了找到 Fred Blogg 的电话号码，你拿起目录(相当于主页)，跳到 Bs(对于 Blogg)，跳过所有其他页面。然后跳过 B 条目，直到到达 Blo。找到正确的电话号码后，你可能不会浏览其他页面。这个目录已经达到了它的目的。如果一个网站的访问者可以直接跳转到他所寻找的信息，那么这个网站就达到了它的目的。
假设约翰·史密斯和他的妻子决定在 7 月 25 日和 8 月 25 日之间带着孩子去英国德文郡的农场度假。约翰在搜索引擎中输入“农场假日德文郡”。他在结果页面上选择了第一个农场假日。在网站上，他看到一个标有“空缺”的菜单按钮。他点击它，并被带到一个页面，显示他想要的日期没有空缺。使用下一个搜索结果，主页是一个可怕的业余混乱，所以他跳到列表中的下一个网站。这个网站没有给出如何找到空缺日期的提示，所以他跳到下一个搜索结果。下一个网站没有可用日期的菜单按钮；相反，主页告诉他打电话约会。他受不了打电话的麻烦，所以他去了下一个网站。这个有一个指向可用日期的菜单按钮，他点击它，看到有一个合适的日期。很好！他现在会点击价格菜单按钮，发现它太贵了。所以他继续寻找，直到找到最合适的。
我们来分析一下这个。
他访问了六个网站的主页。* He immediately gave up two places.* He explored another page besides the home pages of three websites. Then, he browsed two other pages besides the home page of the last website.
网站所有者很难相信用户不会阅读他们精心制作的每一页。
但是，如果 John 以合适的价格找到了合适的空房，他将浏览该网站上的其他页面，以了解住宿情况、位置、当地景点、所有者(在“关于我们”页面中)，最后，他将使用订单来预订假期。
访问者认为他们电脑屏幕上的内容只针对他们。你的语气和文笔要随意，非常简洁。这给人一种亲切感，就好像你在一对一地交谈。冗长的正式散文可以展示你是多么的能言善辩和博学多才，但是它会激怒你忙碌的访客；他们会去别的地方。
始终使用标题和副标题。使用h1、h2、h3、h4、h5和h6标题。访问者很少阅读文本；他们从一个标题跳到另一个标题，寻找他们感兴趣的特定主题。盲人和弱视者可以通过屏幕阅读器点击 H 键从一个标题跳到另一个标题。标题曾经被忽视，因为它们的上下都有大的行距。标题的间距和字体大小现在可以使用 CSS 轻松调整(见第十四章)。
不要在页面上展开文字。当眼睛已经到达一长串文字的末尾时，访问者将头转回到该行的开头，通常会迷失(并且他最终会放弃挣扎)。请改用两列。在分辨率为 1024 × 768 的情况下，可接受的最大列宽为 5.25 英寸(133 毫米)。儿童网站应该有更小的列宽。
小字体不人性化。正文中的文本对于 Times New Roman 来说不应小于 100 %,对于 Arial 或 Verdana 来说不应小于 80%。没有人会费事去拿一个放大镜来查看一个 8 磅的网站。
尽量不要在一页上使用两种以上的字体。Arial 和 Verdana 是首选的无衬线字体，因为它们是为网站上的易读性而设计的。Times New Roman 是最好的衬线字体，因为它经过专门设计和测试，具有良好的可读性，尤其是对于印刷品。
文本应该被分割成小块 ，在适当的地方使用项目符号或标题。卖点最好用项目符号来突出。如果可能的话，让文字穿插图片。一旦访问者找到了一个提供他们所寻找的内容的网站，他们就会渴望探索更多的页面。最后，当他们被吸引时，他们会想更多地了解提供产品的人。“关于我们”页面通常是最后一个被访问的，但它可以成交。
不使用两端对齐的段落。对齐文本是一个杀手，必须不惜一切代价避免。大脑必须努力克服单词之间的巨大差异。此外，与参差不齐、右对齐的文本的生动性相比，对齐的文本看起来很无聊。比较杂志上的两种风格，看看参差不齐的风格看起来有多有趣。对齐文本对阅读障碍者和任何使用屏幕放大软件的人来说都是一个问题，因为单词之间的不同间隙也被放大了。对齐的文本中有分散注意力的空白河流贯穿其中。
小斜体字体在网站上从来都不好看。计算机屏幕上出现的小斜体是一系列被印刷设计师称为“锯齿”的字体该文本具有粗糙的锯齿外观；因此，除了较大的字体外，应避免使用斜体。
帮助您的客户选择设计
如果你的客户没有网站设计的经验，他们会想知道如何进行。总是尽可能地提供帮助，因为他们需要学习基础知识；这需要极大的耐心。他们从你身上学到的越多，他们就越不可能要求愚蠢的事情。强烈抵制展示自己专长的诱惑；这对发现你的客户想要什么没有任何帮助。
新客户有时会向你展示一个可怕网站的打印页面，并说，“这就是我希望我的网站看起来的样子。”最好的方法是一开始就同意，然后说“让我们看看如何做得更好。我们需要我们双方的一些投入来稍微整理一下。”我委婉地指出，为什么客户样本中的一些可怕的部分会有损于拟议中的网站。
如前所述，客户现有的任何营销材料或标识都是一个很好的起点。客户可能已经到了要改变房子风格的地步；这不仅有助于你和你的客户一起创造一个全新的外观和感觉，而且它提供了一个为你或你的团队创造更多工作的机会。
当与不知道自己想要什么或对网站设计一无所知的潜在客户交谈时，我会让他们坐在我旁边，坐在电脑屏幕前，做以下每一件事:
- I showed them a page template to help them choose the color and page layout (see Figure 13-4 ).
- I asked them to list the topics they wanted to include. Then I explained that a theme is equivalent to a page, and a theme is a button or link on the navigation menu. I explained the approximate cost per page, so that they can be completely sure of their commitment if they agree to continue.
- Let me explain how much it costs for hosting and domain name registration.
- I explain how much it costs to process and insert a page for each picture.
- I asked them how they planned to provide me with pictures.
- I asked them what kind of continuous maintenance they might need, and gave them the estimated cost of updating the website.
- I make sure that the potential customers understand the size and time limit of the hosted video (see Chapter 6 of for details). I suggest that they carefully consider all the issues we discussed before committing to this project.
***图 13-4。*帮助客户选择颜色和设计的典型样本页
所有这一切的要点是，潜在客户应该感到放心，离开时会觉得他们对流程有所了解，不再是傻瓜。如果你让一个潜在的客户感到愚蠢或无知，你就应该失去他或她。
使该项目成为一个完全合作的项目。使用我自己的网站主机，我创建了一个名为“hidden”的文件夹，然后我让客户端知道这个文件夹的 URL。我将客户的草稿一页一页上传到那个文件夹，这样他或她就可以看到最新的页面，并查看之前页面的任何进展。然后，客户可以对整个过程的每一步做出贡献和评论。
与您的客户一起安排 网站的注册和托管。我让我的同事坐在我旁边，用他们的名字注册网站。然后我给客户所有的 FTP 细节，以防他们将来某个时候想换另一个网站管理员。我解释说，网站将以客户的名义注册和托管，他或她将拥有网站的版权。一些卑鄙的网站设计者会将客户锁定在一个无止境的合同中，这样客户就永远不能将网站转让给其他人。困住客户后，这些令人讨厌的网站设计者将收取高额的年度维护费。
一种显示/隐藏文本的技术，提供了一个紧凑的页面
在本章的“文字的使用和滥用”部分，我解释了过多的文字会让人们远离网站。通过只显示标题，新闻页面可以变得更加紧凑和易于使用。用户可以扩展标题来阅读他们选择的新闻条目(参见图 13-5 和图 13-6 )。为此，您需要下载 JavaScript 文件jquery.js并将其放在您网站的根文件夹中。jQuery是一个跨浏览器库，旨在简化客户端脚本。
下面的隐藏/显示技术由 Karl Swedberg 完善并发表。如需下载，请前往[jquery.com](http://jquery.com)。更多信息，参见[www.learningjquery.com/2006/09/bas…](http://www.learningjquery.com/2006/09/basic-show-and-hide)和[www.learningjquery.com/2007/02/mor…](http://www.learningjquery.com/2007/02/more-showing-more-hiding)
***图 13-5。*我采用了卡尔·斯威得伯格技术的最简单版本，并添加了一些用户友好的修饰。
***图 13-6。*点击时新闻项展开。
在图 13-5 和图 13-6 中创建带有显示/隐藏功能的标题页面的代码如清单 13-5 所示。
清单 13-5。【show-hide.html 用 jquery 创建显示/隐藏页面
`
Show/hide text from learningjquery.com *meta details go here* body { font-size:110%; } .demo-show { width: 400px; margin:0 auto 0 auto; text-align:left; }` `h1 { font-size:150%; font-weight:bold; margin:5px 0 0 0; } .demo-show h2 { font-size:130%; margin:0; background: #bfcd93;  border-top: 2px solid #386785; border-bottom:0; padding:5px 0 0 5px; } .demo-show h3 { font-size:small; margin: 0; color:blue; text-decoration:underline;  cursor:pointer; background: #bfcd93; text-align:right; padding:0 5px 5px 0; } .demo-show div { margin:0 0 5px 10px; padding:5px; } span.link { font-size:small; color:blue; text-decoration:underline; text-align:right; } #container { width:450px; margin:auto; text-align:center; }TODAY'S NEWS
Lamb causes trouble
Click here to read more or hide
Weather
Click here to read more or hide
Science and Technology
Click here to read more or hide
(with apologies to twinkle twinkle little star)
Thought for the day
Click here to read more or hide
 and you can keep your clubs and the fresh air."
Jack Benny
为了方便起见，清单 13-5 中使用了内部样式。图中显示了第二块 JavaScript 代码，但它通常会被提取到一个外部文件中，并命名为show-hide.js。然后，标记会像这样调用 JavaScript 文件:
script src="show-hide.js" type="text/JavaScript"> </script>
第一段 JavaScript 调用文件jquery.js；这是驱动这项技术的引擎。
<script src="jquery.js" type="text/JavaScript"> </script>
下一个 JavaScript 块的第一行是$(document).ready(function() {
它说，“当页面加载后，执行下一行 JavaScript 代码。”
在 HTML 标记中，所有的新闻条目都包含在一个带有类demo-show的<div>中。
`
每个新闻条目都写在一个标记组中，如下所示(以粗体显示):
`
Lamb causes trouble
Click here to read more or hide
**that walked into some soot
And everywhere**  **that Mary went
His sooty foot he put** **
JavaScript 的第二行与用户交互。线$('div.demo-show:eq(0)> div').hide()；以 demo-show 类中的每个<div>为目标，隐藏<div>的内容。
接下来的两行针对演示组中的<h3>标记:
$('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); );
它们触发一个快速的切换动作，使<h3>标签的内容变成链接。这些链接显示或隐藏包含扩展新闻条目的 div。
CSS 样式使这些链接变成蓝色并带有下划线，以表明它们是活动链接。
最后，一个光标被添加到 CSS 中与<h3>目标相关的链接上。链接和光标样式以粗体显示。
.demo-show h3 { font-size:small; margin: 0; **color:blue;**  **text-decoration:underline; cursor:pointer;** background: #bfcd93;  text-align:right; padding:0 5px 5px 0; }
注意光标名称
pointer是用词不当；你会以为它是一个箭头，但它实际上是一只手。
新的 HTML5 <details>和<summary>标签提供了一个显示/隐藏功能，但是在编写的时候只使用了 Chrome。因此，在没有合理范围的浏览器支持的情况下，我无法正确测试提议的标记。使用该功能时，可以点击<summary>元素来扩展或缩小细节。
在 HTML5 中显示/隐藏
新的 HTML5 显示/隐藏特性的标记如下所示:
`
Was the Mona Lisa a paint by numbers kit?
No, Leonardo used a graphics program on the world’s first computer, Colossus
有用性
一个有用的网站会成为一个受欢迎的网站。例如，如果一个竞猜蜂鸣器制造商的网站包含有用的内容，如竞猜问题和各种可选竞猜游戏的说明，那么他可能会比其他竞猜蜂鸣器制造商更受欢迎。如果一个网站有一个可识别的品牌，一个容易理解的导航系统，和一个搜索网站的简单方法，那么这个网站就是有用的。
用图标提升网站的形象
单词 favicon 代表收藏夹图标。这种图标可以增加网站的重要性，因为所有的大品牌都有一个 favicon。它们也有助于网站识别和品牌推广。更重要的是，它是有用的，它帮助用户快速识别收藏夹列表(书签列表)和浏览器标签中的特定站点。图 13-7 显示了我的计算机帮助网站上的图标。
***图 13-7。*地址栏和选项卡中的“C”是www.colycomputerhelp.co.uk的图标
在收藏夹或历史列表中突出的收藏夹是那些有一个图标的收藏夹，如图图 13-8 所示。
***图 13-8。*在收藏夹列表中,“C”图标非常突出。
创建网站图标
一个 favicon 必须是一个 16 像素的正方形，这意味着，因为它很小，你可以忽略细节。在图 13-9 中，放大显示了 Coly 计算机帮助图标；它证明了图标不能显示清晰的细节。然而，只要你简化内容，这并不重要。
***图 13-9。*科里电脑帮助图标
**发挥你的聪明才智，选择一个有意义的图标。**对于我的网站( www.colycomputerhelp.co.uk`` )，我选择了 URL 的第一个字母；即蓝色的独特大写字体“C”。如果可以，用一种颜色；这将使它在收藏夹列表和浏览器标签中脱颖而出。将图像缩小到 16 × 16 像素，保存为.gif或.png文件。重要的是保存为 16 色图像；否则会变得很模糊。现在它必须转换成一个.ico文件，并改名为favicon.ico。
提示许多画图程序无法以
.ico格式保存图像。Adobe Photoshop 需要一个插件，Paint Shop Pro 7 到 9 不会以.ico格式保存。免费程序 GIMP 和 IrfanView 保存.ico文件。IcoFX 是一个免费的图标制作程序。可从[www.icofx.ro](http://www.icofx.ro)下载。尽管使用起来相当棘手，但一旦掌握，它就是一个有用的工具。如你所料，它获取.png和.gif图像文件，并将生成的图标保存为*。ico* 文件。
在主机上传 favicon 图标到你的根目录，必须命名为favicon.ico。您不必向 HTML 代码添加任何内容。但是，如果您希望安全起见，或者 favicon 没有显示在特定的浏览器上，您可以在页面的<head>部分添加一个链接，如下所示:
<link rel="shortcut icon" href="favicon.ico">
除了 Chrome 之外的所有浏览器都会在地址栏的左边显示 favicon。除了 Chrome 之外的所有浏览器标签和收藏夹列表(书签)都会显示它。
注意如果你有几个网站，每个网站都有一个图标，它们都必须被命名为
favicon.ico。显然，为了避免混淆，你必须非常小心地把它们分开存放在与每个网站相关的文件夹中。
有一个潜在的问题。上传 favicon 后，您可能会发现它不会出现在地址栏中，尽管它可能会出现在浏览器选项卡上。这意味着你的网页的非 favicon 版本的拷贝存储在你的浏览器的缓存中，显示的是旧版本。你需要清空浏览器的缓存。或者，在其他人的计算机或您的其他计算机上查看该网站。如果您可以在另一台计算机或不同的浏览器中看到 favicon，那么您知道它已成功加载，即使您在常规浏览器中看不到它，而旧页面仍在您的缓存中。
对访问者和所有者的有用性
如果一个网站包含了访问者需要知道的一切，那么它就是最有用的。如果信息不容易获取、不清楚或丢失，那么它就没什么用处。如果它经常更新，并且包含会让访问者一次又一次返回的条目，那么它就很有用。页面打印机按钮也使网页更有用，它将节省墨水和纸张(页面打印机按钮见第十七章)。
在商业网站的主页和所有其他页面上，**让访问者很容易联系到网站的所有者。**信息可以包含在每一页的页脚中。这样，无论保存或打印哪个页面，访问者都会保留那些重要的信息。然而，这可能会产生一个维护问题——如果您更改了其中一个项目，每个页面都必须更改。或者，如果您喜欢将信息放在一个页面上，请使用“联系我们”页面或“关于我们”页面。这些网页应该包括一个加密的电子邮件地址或一个反馈表的链接，以便访问者可以很容易地向所有者发送电子邮件；所有者的电话号码；和主人的邮政地址。联系方式——邮政地址和电话号码——对于树立信心和满足法律要求至关重要。明智的访问者不会从没有邮政地址或电话号码的网站上订购。还包括商业注册号和与适当的贸易协会的链接，以便客户可以检查企业的信誉。
如果网站所有者希望人们在网上订购商品，给用户所有必要的信息，让他们立即放心订购。你必须展示价格:如果游客不得不停下来打电话询问价格，销售很可能会失败。不要隐瞒销售税和送货费用等信息。如果在订单过程的最后突然增加额外的成本，潜在的订单可能会被放弃。提前警告客户额外的费用。
不要让用户困惑
导航系统(菜单)必须非常清晰。导航越清晰，网站越有用。要决定在菜单上放什么，问这样一个问题，“访问者可能想从这个网站学到什么？”更好的办法是，问问其他人他们希望在网站上找到什么信息。例如，一个住宿加早餐网站的菜单按钮可能包括任何空房？价格，位置，住宿，预订表格，关于我们，联系我们。
让访问者轻松完成两件事:
- Get the information they are looking for quickly and easily.
- Can easily and logically move from one page to another.
如果用户不能方便快捷地找到信息，那么信息就是无用的。
最好的导航菜单按钮是带有对比文本的彩色非图形按钮。不要在菜单按钮上使用无字图片，因为导航需要解释；也就是说，你必须告诉人们点击图片获取更多信息。访问者期望一个简单明了的、水平的或垂直的菜单，不需要任何解释。如果你有大量的菜单项，那么在页面上同时使用水平和垂直菜单。使水平按钮比垂直按钮大。确保网站访问者不会感到困惑或被困。与非专业冲浪运动员一起测试网站。如果你的“试验品”说，“我下一步做什么？”
**避免 JavaScript 下拉菜单。**这些隐藏了访问者正在搜索的信息(最不友好)。尽量不要使用太多的子菜单。搜索引擎无法穿透 JavaScript 菜单，这意味着你的主页将是唯一被搜索引擎索引的页面。这确保了你的网站会有一个很低的排名，除非你的网站是关于一个独特的主题。此外，在移动和平板浏览器上使用 JavaScript 菜单可能会很困难，如果不是不可能的话。
不要让随意散落在页面上的零碎东西让访问者 感到困惑。每页只写一个要点或主题。设计好每一页的布局，让用户能够关注你的要点。一个繁忙的页面不能引导用户到关键的功能。在相关组中显示事物。
**练习一致性。**在每页的相同位置使用相同的导航按钮。在每一页上使用相同的背景颜色和字体。这很容易通过从你的主页制作一个模板来实现。样式表还应该确保一致性。
确保访问者知道他们在 的哪一页，以及每一页将为他们做什么。如果游客不能马上解决，他们会去别的地方。在页面顶部放一个简短的说明性标题，这样人们不用向下滚动就能看到页面的内容。人们会向下滚动，但前提是他们有理由确信页面的其余部分有他们感兴趣的内容。
避免带下划线的单词或短语。访问者会认为这些项目是超链接。下划线可以隐藏下划线。给文字加下划线的设计师是在暴露他们的年龄；下划线可以追溯到古代机械打字机的时代。下划线是完全没有必要的，因为你可以使用粗体或更大的字体或颜色来强调一个单词或短语。
向网站添加搜索字段
搜索域可以增加网站的有用性，也可以吸引人们离开你的网站，这取决于它是如何实现的。如果你选择只在自己的网站上提供搜索功能，这没有问题。搜索集中在你的网站上，但是偶尔一两个其他的网站也会出现在搜索结果上。如果你选择搜索整个互联网的代码，那么用户将会被诱惑去探索一些搜索结果并放弃你的网站；这不是个好主意。接下来，我将描述由三大主流搜索引擎提供的网站搜索框代码:Bing、Yahoo！，还有谷歌。
必应搜索框
添加阿炳搜索框，只搜索你的网站，如图图 13-10 所示。
***图 13-10。*添加阿炳搜索字段
主要的搜索引擎提供代码片段。Bing 是最容易安装的。清单 13-10 显示了如何在网页中包含阿炳搜索框。
清单 13-10。【bing-search.html】网页中包含阿炳搜索框
`
Bing search box **** **#bingbox img { margin-bottom:-7px; border:none;** **}** ******
**
以下注释涉及清单 13-10 中的粗体项目:
- Change the number 1252 to match the code page number of
charsetof your website. For example, if your website has<charset:windows-1252>in the title section, this number will be1252. If your website has<charset:utf-8>in the title section, this number will beutf-8.
[www.your-web-site.com](http://www.your-web-site.com)
雅虎！搜索框
虽然雅虎！与必应合并后，一些大型机构使用雅虎！作为他们网站的默认搜索引擎。因为许多用户都熟悉 Yahoo！接口，它包含在本节中。为了雅虎！搜索框代码，去雅虎！在[search.yahoo.com/info/ysearchbox_instructions.html](http://search.yahoo.com/info/ysearchbox_instructions.html)或使用清单 13-11 。
图 13-11 显示了四个可用 Yahoo！搜索框。
***图 13-11。*雅虎！搜索框
有四种格式可用，但说明相当混乱。我已经简化了雅虎！代码，如清单 13-11 所示。
***清单 13-11。*包括雅虎网页上的搜索框(yahoo-search.html)
`
<input type="radio" name="vs" value="http://www.***your-web-site.com***"
插入您自己的网站 URL 来代替[www.**your-web-site.com**](http://www.your-web-site.com)。
谷歌搜索框
图 13-12 显示了适用于网站的各种可下载的谷歌搜索框的一个版本。
***图 13-12。*添加一个谷歌搜索栏
谷歌要求你注册一个账户，然后它会给你一个令人困惑的表格让你填写。为了避免这些麻烦，戴维·泰勒简化并改进了谷歌代码。请访问他的网站[www.askdavetaylor.com/how_can_i_add_a_google_search_box_to_my_website.html](http://www.askdavetaylor.com/how_can_i_add_a_google_search_box_to_my_website.html)。
清单 13-12 改编自戴维·泰勒的代码。内部样式表仅用于说明目的。不需要谷歌帐户。它展示了如何在网页中安装一个 Google 搜索框。
清单 13-12。【在网页中插入谷歌搜索框(google-search-1.html)
`
Google search field by Ask Dave Taylor #outerbox { border:1px solid black; padding:4px; width:300px; height:40px;  text-align:center; font-size:75%; } .googlebox { display:inline; } .hidden { display:none; }
Search this web site
对于您自己的网站，更改清单 13-12 中粗体显示的 URL。
图 13-13 显示了我的网站上的标题。它包含了使用我的简化版戴维·泰勒代码的谷歌搜索框(见清单 13-13 )。
图 13-13。我已经简化了网站的谷歌搜索；这不需要谷歌帐户。
在清单 13-13a 中，我在页面标题中嵌入了谷歌搜索框，并进一步简化了戴维·泰勒的代码。如前所述，不需要谷歌账户。
清单 13-13a。【google-search-2.html 在网页中嵌入谷歌搜索框
`
A page with a search field using GoogleColy Computer Help
Search this web site
对于您自己的网站，请更改以粗体显示的 URL。
清单 13-13b 是清单 13-13a 中 HTML 的 CSS 样式表。
***清单 13-13b。*清单 13-13a 的 CSS 样式表 (search.css)
/*reset browsers for cross-client consistency*/ html,body,h1,h2,h3,h4,h4,h5,h6,p {margin:0; padding:0 } img { border-style: none; float: none; margin-left: 0px; margin-right: 0px; } body { text-align:center; background-color:#D7FFEB; color:black;  font-family: "times new roman"; max-width:1024px; min-width:800px; font-size: medium;  color: #000000; margin: auto; width:95%; } /* set header height and background image */ #hdr{ margin-top:0; margin-bottom:0; background-position:45% top; background-image:url('img/compbkgcrop.jpg'); background-repeat:no-repeat; height:160px; padding-bottom:0; } h1 { padding: 110px 0 0 12%; margin-bottom:0; font-family :"times new roman"; font-size: 250%; color: #0080a0;; font-weight:bold; } #hdr { position:relative; } .search { position:absolute; top:10px; right:40px; height: 56px; }
总结
本章描述了使网站吸引访问者的特性。它还展示了吸引访问者探索主页之外的方式。一个关于有用性的部分强调，即使是一个有吸引力的网站，如果没有用，也会被放弃或者不再访问。提供了创建有用特征的提示。经常查阅这一章，并在尝试书中的其他项目时应用它的建议。
在下一章中，你将学习使网站对残疾用户，尤其是盲人和弱视者无障碍的基本要求。包括美国和英国在内的许多国家已经就网站的可访问性提出了建议或通过了法律，您将会了解其中的要点。除了法律方面，这一章还解释了无障碍环境也为身体健全的用户提供了好处。
十四、可访问性
在美国和英国，三分之一的成年人超过 50 岁，其中一些人会有视力问题。阻止这些人访问你的网站是愚蠢的。许多电子商务网站在向盲人和弱视者开放网站后，销售额显著增加。本章主要讲述帮助弱视者和盲人浏览网站的方法。有严重视觉障碍的人和盲人可以使用屏幕阅读器(语音浏览器),将网站的文本内容转换成语音。屏幕阅读器还可以向用户解释网页的布局，以及描述标记中每个元素的性质。在本章的后面，你会学到更多关于屏幕阅读器和如何设计这些设备能理解的网站。我们将首先简要提及关于无障碍的现行法律和准则。
法律和准则
澳大利亚和联合王国制定了关于视觉障碍者无障碍访问网站的法律；其他国家如瑞典、爱尔兰和日本也制定了指导方针。
在美国，一些州已经发布了指导方针，在撰写本文时，美国司法部民权司正在考虑针对网站可访问性的联邦法规。同时，W3CAG2 和 WAI 是实现可访问性建议的主要力量。WCAG2 是 Web 内容可访问性指南([www.w3.org/TR/WCAG/](http://www.w3.org/TR/WCAG/))的首字母缩写。WAI 是网络无障碍倡议组织([www.w3.org/WAI](http://www.w3.org/WAI) /)。
英国法律规定，残疾人应该可以或合理地可以使用网站。这项法律被称为《残疾歧视法》,代表《残疾歧视法》。澳大利亚已将《残疾歧视法》作为本国法律的基础
没有必要惊慌失措，开始重新设计你所有的网站以符合法律，但要努力修改那些最有可能被弱视者或盲人浏览的网站，尤其是那些使用屏幕阅读器的网站。这将表明你已经尽力让这些网站合理地可访问。当设计一个新的网站时，你应该记住从这一章中学到的东西。
包括英国和澳大利亚在内的大多数国家已经采用 WCAG2 指南作为其法律或指南的基础。
WCAG2 指南有三个标准。
**答:**最低限度(但绝对必要)符合 WCAG2 指南
AA: 符合 WCAG2 指南
AAA: 完全符合 WCAG2 指南
网站必须至少符合 A 和 AA 。如果可能，尽量符合 AAA 。
可在[www.w3.org/WAI/intro/c…](http://www.w3.org/WAI/intro/components.php)找到 W3 和 WAI 在无障碍规范方面的状态。可从[www.w3.org/TR/WAI-WEBC…](http://www.w3.org/TR/WAI-WEBCONTENT/checkpoint-list.html)获得检查点列表。
注W3 围准则和英国准则相似。以下网站在可访问性方面给出了很好的建议:
[www.w3.org/WAI/PF/aria…](http://www.w3.org/WAI/PF/aria/)；[www.w3.org/WAI/intro/a…](http://www.w3.org/WAI/intro/aria.php)；[www.webcredible.co.uk/user-friend…](http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/uk-website-legal-requirements.shtml)；还有[dev.opera.com/articles/view/introduction-to-wai-aria/](http://dev.opera.com/articles/view/introduction-to-wai-aria/)。
我们现在将讨论网页设计者可以为部分视力或色盲的用户提供的帮助。这些用户还没有达到需要屏幕阅读器的阶段。网站设计者可以通过应用一些基本的规则来使网站对弱视人群更加易读，这些将在下一节描述。
帮助弱视者和色盲者
这一节涉及的因素，帮助部分视力和色盲，但健全人也将受益于这一节的建议。它涵盖了颜色对比、文本样式/大小、导航的便利性和测试。
颜色对比文本和背景颜色的比例必须符合一定的标准。
- The color of hyperlinks should always be a high contrast color different from that of ordinary text.
- The contrast between text and background should be at least 4.5:1 at AA level and at least 5:1 at AAA level. See
[www.w3.org/TR/WCAG/](http://www.w3.org/TR/WCAG/)for specific suggestions.- The contrast of large text (super normal or bold) should be at least 3:1.
注意确保你的 CSS 样式代码包含背景色和前景(文本)色。比如
{ …color:black; background-color:white; }。不要在 CSS 和 HTML 之间拆分文本和背景颜色。一定要在一个地方定义它们。
提示Juicy Studio 网站
www.juicystudio.com/services/luminositycontrastratio.php`` 有一个优秀的在线对比度测试仪，只需输入你的背景和前景(文本)颜色的十六进制代码。或者在
[www.snook.ca/technical/c…](http://www.snook.ca/technical/colour_contrast/colour.html)试试 Snook.ca 的色彩对比检查。
我最喜欢的分析仪 CCA-2.2(见图 14-1 )可以下载到你的硬盘上。
从[www.paciellogroup.com/resources/c…](http://www.paciellogroup.com/resources/contrast-analyser.html)下载压缩文件CCA-2.2.zip
你可能已经下载了 CCA-2.2 当跟随第十二章。操作说明如下:向下滚动 Paciello Group 网站的主页，直到看到下载和语言版本列表。单击相应的语言版本下载 zip 文件。将其解压缩到一个新文件夹，然后创建一个桌面快捷方式来访问文件CCA-2.2.exe。
图 14-1 显示了颜色对比分析仪(CCA-2.2)的界面。
***图 14-1。*CCA-2.2 色彩对比分析仪
要使用颜色对比度分析器，请按照下列步骤操作:
- Double-click the desktop shortcut (note that the spelling of the color in CCA interface is English and Australian color ).
- Use the drop-down arrow or enter a hexadecimal number to select the foreground color (text color).
- Select the background color as well.
- In the bottom panel, you will see the contrast and be told whether the contrast meets AA or AAA standards.
- Change the hexadecimal code one bit at a time until the desired color contrast is achieved. Write down the hexadecimal color code and use it to modify your CSS style sheet. Try this color blindness experiment: choose the most common form of color blindness with green foreground and red background. Now, the bottom panel of the box marked "Show color blindness comparison results" will be expanded to show the influence of these colors on three different forms of color blindness.
- If you click the option on the menu, you can adjust the color through the slider.
为了客观地看待问题，让我们看一个颜色对比变化的例子。一个客户要求我使用红色菜单按钮和白色标签。红底白字的对比度是 4:1。几乎相同的红色#D20B0D给出了 5.4:1 的好得多的对比度。使用这种新的红色，我可以取悦客户，也可以让弱视的人看到菜单按钮上的文字。色彩对比不是全部；我们还必须考虑文本的大小。
允许弱视用户通过使用他们自己的 CSS 样式表来改变文本大小。即使没有特殊的样式表，用户也可以改变文本大小；例如，在 IE 的“工具”下，选择“互联网选项”，然后选择“辅助功能”来选择字体大小。设计网站时，不要使用固定的尺寸，如pt或px；始终根据表 14-1 指定命名为的字体大小或百分比。例如，下面的代码选择指定的字体大小medium:
body { background-color:#d7ffeb; font-family: Arial; **font-size: medium**; color: #000; }
注意不要使用颜色选择进行导航。一个不好的导航的例子是“点击绿色按钮进入下一页”。单击红色按钮返回上一页。”这样的说明对于严重视觉障碍的人和红/绿色盲的用户是没有用的。
避免使用大写字母或斜体的整句整段。小写字母的形状对每个人来说都更容易阅读，包括弱视的人。
也要避免使用对齐的文字，因为它很难阅读，即使对身体健全的用户来说也是如此。这是因为单词之间的间隙变化很大。对于那些使用屏幕阅读器和放大镜的人来说，大的间隙尤其会引起问题。用户读到一行的一半时可能会被愚弄，以为他们已经到达了行尾，导致他们向下移动到下一行的开始。
一般建议
以下提示将极大地帮助视力障碍者:
您可以创建使用不同样式表的替代页面，以提供高对比度。一个很好的例子，见
[www.juicystudio.com/services/lu…](http://www.juicystudio.com/services/luminositycontrastratio.php)。多汁工作室菜单上的第二个按钮加载高对比度页面。如果您有几个页面,这不是一个合适的解决方案,因为每个页面的两个版本都必须更新。此外,搜索引擎不喜欢重复的网页组织页面，以便在样式表关闭时可以按逻辑顺序阅读。
Avoid using JavaScript for navigation and operation except for buttons such as printing this page, marking this page and returning to the previous page. These are acceptable only because they duplicate the functions available in all browsers.* When providing information in PDF format, provide the same information in an accessible alternative format, such as HTML or text, or provide links to tools provided on Adobe websites. Adobe is improving the PDF format so that screen readers can read PDF files quickly.* Ensure that links and page elements can be navigated by keyboard; Create a logical tab order for them.* Do not appear pop-up windows or other windows without warning the user in advance.* Give each page a unique
<title>so that users can know their location in the site.* Do not use tables for page layout. Use CSS to locate items on the page. Table-based layout is not suitable for disabled users. Most automatic compliance scanners reject them because they cannot distinguish between data tables and layout tables.* Avoid using ASCII characters, such as the "less than" () symbol to point to something. The screen reader will read its meaning, whether it is "less than" or "greater than". Please use a mesh arrow or some text.* Add a repeating menu and return to the top link on a long page at regular intervals. Don't use too many radio buttons and check boxes, because they will make the form more difficult to fill out.* To help people with shaking hands, make sure there is enough space between fields, check boxes, menu buttons and radio buttons.* Graphical menu buttons can be accessed as long as the title/alternate text describes the purpose of each button.* Screen reader users cannot access JavaScript drop-down menus. Or the drop-down menu in PHP ASP is accessible.* Make sure that the<html>tag contains a language description so that the screen reader can correctly interpret the page. For example,<html lang=en>is English.* All images conveying useful information must contain tooltips for usingaltandtitle. Pure decorative images can not convey useful information; Therefore, the correct alt/title of these images should be empty alt (alt=" "), and any empty title should be (title=" "). The screen reader will not read an emptyaltortitlestring.* Ensure that the video has subtitles so that the deaf can understand and appreciate it.* Tab should provide a logical order for disabled users who can't use the mouse. The default jump order is reasonable, so don't change it.* Use short and simple language. Text described by images is useless because screen readers can't read it. If you use an image containing text, be sure to include a"alt"tooltip that provides text for screen readers.* This prompt is the most important: absolutely make sure that the audio and video clips are neither automatically started noronmouseover. This sudden noise will surprise blind or amblyopic users. Always useonmousedownto start audio or video clips, and give explanations and warnings.* 在每一页(而不是主页)的开头添加一个“跳转到主要内容”链接，这样屏幕阅读器用户就可以直接跳转到内容，而不必重复地浏览导航菜单。一些设计者通过在每一页的开始放置一个普通的链接，或者一个图片，或者一个 1 像素的 GIF 图片(因此是不可见的)，标题文本为“跳到主要内容”确保措辞不是“跳到内容”使链接跳转到页面内容开始处的锚点(书签)。` <img title="Skip to main content" src="onepx.gif" height="1" width="1"border="0" alt="Skip to main content"> navigation menu which is to be skipped goes here
这种方法的一个小缺点是,先前不可见的链接的突然出现会使视力正常的用户感到困惑。您可能会发现使用可见链接更好；选择权在你
提示从皇家国家盲人学院的网站上可以搜集到有价值的信息。(
www.rnib.org.uk/webaccesscentre`` 和[www.rnib.org.uk/seeitright](http://www.rnib.org.uk/seeitright))。RNIB 使用免费的 WAVE 程序来监控可访问性。RNIB 用 WC3 和 WDG 验证器检查 HTML 和 CSS 的有效性。它使用各种图形浏览器和 Lynx 浏览网站，并使用 Freedom Scientific 的 JAWS(语音作业访问)收听网站如何说话。
测试网站的一般可访问性
设计者可以让一个弱视或失明的人充当试验品来测试网站的可访问性。然而，这可能是不可能的或不实际的，所以这里有一些你可以自己进行的测试。使用以下清单来查看您的网站是否可访问:
- At
[validator.w3.org](http://validator.w3.org)- Use W3C online validator to verify the code on the web page and rest the cursor on each image and each link to ensure that tooltips, substitutions and titles are displayed.
- Turn down the volume to see if there is any audio content with literal equivalence.
- Enlarge the font with the browser to see if the page is still alive.
- Resize the browser window to see if the content of the page is satisfactory with a small width.
- Ensure that users do not need to scroll horizontally to an unreasonable degree at low resolution.
- Check whether labels and title marks on menu links clearly indicate their destination.
- Ensure that people with disabilities can use the keyboard to browse links and form fields. Use the tab key to check this. Use clear, short and simple text, and divide it into small pieces with informative titles.
- Use prefaced content so that each paragraph begins with a conclusion. Use ordered or unordered lists where appropriate.
- Remove all flashing items, including the ticker.
- Make sure that absolute audio and video are not set to auto-start or
onmouseover.
针对盲人和严重视力障碍者的屏幕阅读器
盲人和视力严重受损的人可以在屏幕阅读器的帮助下使用计算机，有时被称为“语音浏览器”，或者用技术人员喜欢的生硬的行话来说，“辅助技术”屏幕阅读器实际上并不阅读屏幕，而是阅读源代码。有关屏幕阅读器和表格的有趣音频演示，请访问[www.xstandard.com/en/articles…](http://www.xstandard.com/en/articles/wysiwyg-editors-and-bad-markup/)
提示在
[www.nvda-project.org](http://www.nvda-project.org)可以获得一个带有演示视频的免费开源屏幕阅读器。初步报告表明，NVDA 的 HTML5 支持比一些商业程序更先进。NVDA 是为 Mozilla Firefox 设计的。它有一个用户指南；更多提示请见
[www.marcozehe.de/articles/ho…](http://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/)。
屏幕阅读器和搜索引擎依赖标题标签<h1>到<h6>。当使用屏幕阅读器时，用户点击 H 键从一个标题跳到另一个标题。标题由屏幕阅读器读出，这样用户可以决定标题部分是否是他正在寻找的。如果你的页面没有<h1>到到<h6>的标题，屏幕阅读器会说，“这个页面上没有标题”，用户会很困惑。
在 20 世纪 90 年代早期，标题经常被错误地认为是一种让文本变得更粗、更大或更小的方式。这并不奇怪，因为 W3Schools.com 有这样一个相当模糊的指令:“<h1>定义最大的航向，<h6>定义最小的航向。”
正确的定义是:“<h1>最重要，<h6>最不重要。”
你可能在过去避免使用<h1>到<h6>，因为文本上下有很大的空隙。现在使用 CSS 可以很容易地解决这个问题。对于屏幕阅读器来说，重要的标题应该放在页面的顶部，最不重要的放在底部。代码中较早出现的标题更重要(搜索引擎和屏幕阅读器会认为它们更重要)。
- The title should simply and accurately describe the theme of the paragraph it introduces.
- Use CSS to make the title into any size and format you want (see Figure 14-3 ).
- From
h1, never skip a title; For example, don't jump fromh2toh5.
图 14-2 显示了默认的标题尺寸和行距。
***图 14-2。*未格式化的标题(注意文本行之间的双倍行距)
图 14-2 显示了默认的标题样式。图 14-3 显示了使用清单 14-3 中包含的 CSS 格式的标题。你可能永远不会在真实的页面中改变字体大小，这只是一个演示，证明标题可以被格式化。但是，您可以有效地更改标题的行距。
***图 14-3。*使用 CSS 改变每个标题和行间距的外观和大小。幸运的是，屏幕阅读器仍然可以识别标题，如 H1、H2 等等。
清单 14-3 显示了应用于每个标题的格式。可以更改标题大小和行距，以便为视力正常的人改善页面的外观。屏幕阅读器仍然接受标题的层次结构，并按照重要性的顺序读出它们。换句话说，视障用户理解页面的结构，因为他们首先听到主标题(H1)，然后是 H2、H3 等等。用户通过按 H 键从一个标题移动到另一个标题。
清单 14-3。【hformatted.html 格式化 HTML 标题
`
Formatted headings h6 {font-size:200%; font-family:"Times New Roman"; margin-top:-20px; } h5 {font-size:medium; font-family: arial; margin-top:-10px; } h4 {font-size:150%; margin-top:-10px; margin-bottom:10px; } h3 {font-size:medium; font-family: arial; margin-top:-10px; } h2 {color:blue; font-family:arial; margin-top:-10px; } h1 {font-size:110%; font-family: arial; }This is an H1 heading
This is an H2 heading
This is an H3 heading
This is an H4 heading
This is an H5 heading
This is an H6 heading
`数据表和屏幕阅读器
数据表给视障人士带来了一个大问题。如果一个表格的构造不适合屏幕阅读器的工作方式，那么一个有许多列的表格是无法理解的。首先朗读第一行标题，然后朗读第二行单元格，但不引用标题，然后朗读第三行单元格，依此类推。除非视障用户能够记住所有的标题，否则这些行将是难以理解的。
本节给出了一些表格的例子，从简单的两列表格(不需要记忆标题)到四列表格(通常需要记忆标题)。本节描述了几种使表格与屏幕阅读器一起工作的方法。使用这些技术，列标题被链接到单元格内容，并在用户移动每一行时朗读出来。通过向标记中添加额外的列，这些方法可以扩展到四列以上。
注意表格仅用于呈现数据。可访问页面不得包含布局表格。
有两列的数据表
图 14-4 显示了一个简单的两列数据表，其内容易于屏幕阅读器阅读，不需要特殊标签。但是，一定要用<caption>和<table…summary="…">。这使得屏幕阅读器能够通知用户他们已经到达一个表。
***图 14-4。*两栏数据表
普通的两列表格不需要标题。屏幕阅读器将一个单元格一个单元格地阅读每一行，不需要记忆列标题。图 14-4 是使用清单 14-4 创建的，它有一个内部样式表，仅用于指导目的。
清单 14-4。【创建两列表格(simple-2col.html ??)】
`
Two column table with no need for headers table { width: 500px; border:1px black solid; border-collapse:collapse;  font-family: "times new roman"; }` `td { border:1px black solid; } th { border:1px black solid; } caption { font-weight:bold; }| Saturday 12th June | 2.30pm Church Fête |
| Wednesday 16th June | 7.00pm Concert in church |
| Saturday 19th June | 10.30am to 5.00pm Flower Festival |
对于包含三列或更多列的表格，盲人用户和有严重视力问题的人必须记住标题才能理解数据。下一个例子是我们克服这个问题的第一个方法。通过将列标题顶行中的<td>替换为<th>可以避免这一困难。标签<th>描述了一个包含标题信息的单元格。
注意为了听到屏幕阅读器朗读的表格单元格，有视觉障碍的人可以使用 Ctrl+Alt 键和右箭头键来移动这些行。
有三列或更多列的数据表
图 14-5 显示了一个更复杂的三栏表格。使用屏幕阅读器的人首先会听到最上面一行的标题，通过使用将单元格链接到标题的方法，就不需要记住标题。用户可以将光标放在位置标题下的第一个单元格中。然后，用户可以使用 Ctrl+Alt 和右箭头键沿着行移动。用户会听到下面的话:“伦敦广场，费希尔国王酒店，200 美元。”
然后，仅点击向下箭头将把用户带到下一行的开始，用户将再次使用 Ctrl+Alt 和向右箭头听到这个:“Place Colyton，Hotel Leofric，Cost 30”。
***图 14-5。*三栏数据表
注意在撰写本文时，HTML5 页面中的表格无法被大多数旧屏幕阅读器正确读取。这尤其适用于 JAWS(语音作业访问)。在屏幕阅读器赶上 HTML5 之前，您将需要使用 XHTML 1.0 页面来使盲人能够阅读您的数据表。网站中任何不包含数据表的页面都可以使用 HTML5，但是要避免使用语义标签，直到屏幕阅读器能够支持它们。在
[validator.w3.org](http://validator.w3.org)中验证 XHTML 1.0 页面。查看第十八章关于验证 XHTML 1.0 页面的提示。
只要你使用 XHTML 文档类型，所有的表格和图 14-5 到 14-9 都可以被当前和旧版本的屏幕阅读器读取。当屏幕阅读器赶上 HTML5 时，您可以切换到 HTML5 DOCTYPE，但这会给使用旧版本 JAWS 的用户带来问题。清单 14-15 创建了一个适合屏幕阅读器的三个标题的表格。
清单 14-5。【three-col-hotels.html】创建具有三列的可访问表
`
Three column table with th headers table { width: 330px; border:1px black solid; border-collapse:collapse;  font-family: "times new roman"; } td { padding:0 5px 0 5px; border:1px black solid; } **th** { text-align:left; padding:0 5px 0 5px; border:1px black solid; } caption { font-weight:bold; } .right { text-align:right; } ` ` **** **** <**th** class="right">Cost| **Place** | **Hotel** | |
|---|---|---|
| London | King Fisher | £200 |
| Colyton | Leofric | £30 |
| Coventry | Ritz | £150 |
我们的第二种方法允许使用标签<thead>和<tbody>创建一个稍微复杂一点的表格。同样，必须使用 XHTML 1.0，直到旧的屏幕阅读器被能够读取 HTML5 页面中的表格的新版本所取代。
数据表使用<头>和<体>
为了将数据链接到屏幕阅读器的标题，需要使用标签，如<thead>、<tbody>、<th>、<tr>和<td>。标签<thead>是表格的标题区域；<tbody>是表格中包含数据的区域(见图 14-6 )。
***图 14-6。*更高级的数据表
在清单 14-6 中，<thead>和<tbody>项以粗体显示。
***清单 14-6。*创建更复杂的可访问表格(three-col-fruit.html)
`
Three column table with thead and tbody table { width: 500px; border:1px black solid; border-collapse:collapse; font-family:"times new roman"; font-size:medium; } td { border:1px black solid; } th { border:1px black solid; } caption { font-weight:bold; } **** **** **** **** **** **** **$1.00**** **** **** **** **** ****| **Lemons** | **Pears** | |
|---|---|---|
| **Wholesale** | **$1.50** | |
| **Retail** | **$2.00** | **$2.50** |
`
接下来，我们将看看第三种方式来创建表格，在屏幕阅读器上给出可理解的语音。单元格将使用标识(id)链接到标题。
使用 id 将列和行链接到标题
正常情况下，屏幕阅读器读取单元格，就好像它们是<div>标签一样；例如，如果图 14-7 中的表格被编码成一个简单的表格，没有 id 或者标题标签，下面两行将被屏幕阅读器读出为:“To Lisbon No Yes Yes。去怀特岛是是不是。”
不是很有帮助。我相信你会同意的。
相反，图 14-7 中的表格使用 id 和标题信息将单元格链接到屏幕阅读器的标题。
***图 14-7。*将列和行链接到具有< id >和的标题
在下一个方法中，下面的代码片段显示了如何通过向每个<th>元素添加一个<id>属性，将每个数据单元格链接到其列标题和行中的第一项。首先，每个标题被赋予一个id，将它链接到它的<th>。例如:
`
Destination Coach Boat Air `然后将标题id链接到每个单元中的数据；例如:
`
To Lisbon No Yes Yes `每个单元格都链接到它的标题，以便屏幕阅读器能够陈述这种关系。当用户沿着标题下面的行移动时，它会读取单元格的标题和内容，如下所示:“目的地是里斯本，蔻驰，不，乘船，乘飞机。”清单 14-7 包括如下片段:
清单 14-7*。使用id和headers(four-col-travel.html)***创建可访问的表
`
Four column table with id and th ` ` table { width: 330px; border:1px black solid; border-collapse:collapse;  font-family: "times new roman"; } td { padding:0 5px 0 5px; border:1px black solid; } th { text-align:left; padding:0 5px 0 5px; border:1px black solid; } caption { font-weight:bold; } .right { text-align:right; }| Destination | Coach | Boat | Air |
|---|---|---|---|
| To Lisbon | No | Yes | Yes |
| To Isle of Wight | Yes | Yes | No |
下面的示例使用了第四种方法，该方法使用了scope属性而不是id属性来将单元格数据与其标题以及行中的第一项相关联。
使用范围链接单元格和标题
对于如图 14-8 中所示的表格，id/headers 对可以替换为scope属性。可惜用了这么一个不伦不类的词；类似于cell-linker的东西会比scope更好地解释它的目的。
***图 14-8。*链接单元格和标题与范围
清单 14-8。【使用 Scope 创建可访问的表(four-col-scope.html)
`
Four column table using scope table { width: 330px; border:1px black solid; border-collapse:collapse;  font-family: "times new roman"; } td { padding:0 5px 0 5px; border:1px black solid; } th { text-align:left; padding:0 5px 0 5px; border:1px black solid; } caption { font-weight:bold; } ` `| Plumber | Electrician | Carpenter | |
|---|---|---|---|
| HandyAndy | Yes | No | Yes |
| BoilerMan | Yes | Yes | No |
| Chippendale | No | No | Yes |
我们现在来看第五个例子，展示图 14-7 中所示的相同表格，并使用我们之前学过的方法。
使用< th >和 id 链接单元格和标题的进一步练习
在清单 14-7 的中，我们学习了如何使用<th>和id以及headers将单元格链接到表格标题。我们现在将在本地零售商表上使用此方法，作为使用范围的替代方法。该表的外观将与图 14-8 中的相同，为了方便起见，它再次显示为图 14-9 中的，以便您在研究清单时可以参考。
***图 14-9。*该表与图 14-8 相同，但通过使用< th >、id 和 headers 代替 scope 实现。
清单 14-9 通过使用id代替scope创建了一个四列表格，其外观与图 14-8 相同。屏幕阅读器的用户将听到与其标题相关的每个数据单元格。相关的标签和属性以粗体显示。
清单 14-9。【four-col-trade-id.html】创建可访问表图 14-9 不使用范围
`
Four column table but using id instead of scope table { width: 330px; border:1px black solid; border-collapse:collapse;  font-family: "times new roman"; } td { padding:0 5px 0 5px; border:1px black solid; text-align:center;` ` } th { text-align:left; padding:0 5px 0 5px; border:1px black solid; } caption { font-weight:bold; } .right { text-align:right; } ** ** ** ** ** ** ** ** ** ** ** ** ** ** **| Plumber | Electrician | Carpenter | |
|---|---|---|---|
| HandyAndy | Yes | No | Yes |
| BoilerMan | Yes | Yes | No |
| Chippendale | No | No | Yes |
提示使用
scope、colgroup、colspan和rowgroup的复杂表格的说明可以在罗杰·哈德森的网站上找到:http:// www.usability.com.au/resources 。
我们已经看到，有几种不同的方法可以帮助屏幕阅读器以有意义的方式朗读表格单元格数据；而且都管用。那么应该用哪种方法呢？
从使数据表尽可能简单开始。复杂的表格通常可以拆分成两个或多个简单的表格。简化表格后，尝试我们首先讨论的最简单的方法。如果像 JAWS 这样的屏幕阅读器能够理解它，那很好。如果没有，请尝试稍微复杂一点的方法。
下一节讨论我们如何制作适合屏幕阅读器的反馈表单。
屏幕阅读器和反馈表格
盲人和视力严重受损的人可以使用屏幕阅读器填写表格。要做到这一点，表单必须遵循以下准则:
- Tables do not use table layout. Use CSS and make the order of form fields as logical as possible.
- Leave enough space between the form elements to help those who have difficulty placing the cursor due to shaking hands.
- No explanation is given at the end of the form. Users with screen readers and screen enlargement functions will not realize this information until they reach the end of the form.
表单布局的完整列表在这里没有显示，因为这个主题在第十一章中已经详细讨论过了。相反，下面的列表描述了单个表单元素最容易访问的格式。
Location indicates the best accessibility. Prompt is the text explaining the purpose of the field; For example, your name, email, etc.
The prompt text in the input field and text area should be in the field on the left side of or the field above . For this reason,
<label>statement must appear before<input>statement.对于屏幕阅读器，代码必须包括
for和id。<input>元素的id必须与<label>元素相关联，并且对于该页面必须是唯一的。标签是for一个可识别的输入字段。在本例中，标签为表示和<input>，标识为id="username"。<label **for**="username">Your Name:</label> <input **id**="username" name="username" size="30">表单元素会出现在屏幕上,并带有盲人用户希望找到它的提示,如下所示:
你的名字: .
验证需要
'alt'属性 Mozilla Firefox 只响应'title'，因此两者都被使用Because not all check boxes or radio buttons need to be selected , you cannot apply "required" or "optional" to individual check boxes or buttons. Apply the required or optional instructions to the heading of each group of boxes or buttons.
The prompt of check box and radio button must be on the right side of field , and it must be unique and clear. Compared with the previous example, the order of label and input statements must be reversed (input appears before label). This places the prompt to the right of the element. For able-bodied and disabled users, tables should always use
forandid. This is essential for screen readers.
复选框的列表如下所示:
<input type="checkbox" **id**="chkbox1" name="coffee" value="Yes"> <label **for**="chkbox1"><strong>Coffee</strong></label>
单选按钮的代码如下所示:
<label **for**="laptop"> <input type="radio" name="computer" value="Laptop" **id**="laptop">Laptop </label> <label **for**="desktop"> <input type="radio" name="computer" value="Desktop" **id**="desktop">Desktop </label>
注意使用单选按钮时(确保只能选择一个选项)，一组单选按钮中的每个单选按钮必须具有相同的名称但不同的值。在前面的示例中，相同的名称是“计算机”，不同的值是“笔记本电脑”和“台式机”
文本区的代码片段
标签
<textarea…>用来代替<input…>.。label语句必须在textarea语句之前，如下所示:
<label for="suggest"><b>Please type your content suggestion or message</b></label> <textarea **id**="suggest" name="suggestion" rows="12" cols="40"> </textarea><br><br>
- Check your form in the browser to test whether the prompt text is correctly associated with the form item. When you click the prompt text, a blinking cursor will appear in the field (the form field has become the focus). Checked the check box or selected the radio button.
- In the long table, the grouping information is placed in the related chunks. This is helpful to both visually impaired Internet users and users with normal vision. You can also use HTML tags
<fieldset>and<legend>, but not all browsers can display field sets correctly. The following is a code fragment of a field set:
`
Personal details --- Form items (eg title, name, age) --- Contact information --- Form items (eg address1, address2, town, postcode, phone) --- `
- Mark all date fields , especially where the separate input fields are placed in one line. The screen reader will only associate the date text label with the first text input field. It is recommended to use one field marked DD/MM/YYYY, or use three fields marked with labels, one for the three fields day, month and year.
- The placeholder text in the field is no longer necessary and may be a trouble for modern screen readers.
- Don't select by using the drop-down field that depends on JavaScript, because screen reader users can't access them; Although recent improvements enable the latest screen readers to handle a certain amount of JavaScript.
- In chapter 11 of , a complete working example of the accessible form with anti-spam filter is provided.
html 5、XHTML5 和 CSS3 的屏幕阅读器
屏幕阅读器的创造者需要时间来调整他们的程序以适应新的建议。直到这种情况发生，直到他们的行为为人所知，网页设计师应该使用 HTML4 或 XHTML 1.0 的数据表。
导航菜单的新标签将会引起一些困惑，直到屏幕阅读器的标准被决定；因此，继续使用本章前面描述的“跳到 HTML5 中的主要内容”。
HTML5 页面中最有问题的元素是多个标题(h1到h6)和<hgroup>。在这些问题解决之前，继续使用 HTML4 或 XHTML。
“跳转到 HTML5 中的主要内容”怎么样？在 HTML5 中，你可以专门标记页面上所有的“次要”内容——比如导航、品牌、版权声明——所以你不能专门标记页面上最重要的部分——内容，这有点奇怪。但是，具体标记它的目的是什么呢？如果你需要设计风格，使用<div>。
提示很多支持 HTML5 的浏览器都没有实现辅助功能支持。要跟踪这个问题的进展，请参见
www.webaim.org/techniques/tables/data](http://www.webaim.org/techniques/tables/data) 和 [` `www.accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/ 。
测试您的网站的屏幕阅读器可访问性
以下是测试网站时建议遵循的步骤。
- When you record any problems you find, please ask a person with amblyopia to look at the scene.
- Let a user with severe visual impairment listen to the website with a screen reader, and write down any problems you find. If possible, listen to your website with a screen reader on your own computer. The most popular screen reader is JAWS for Windows (also the most expensive). You can download the limited time trial version of JAWS from
[www.freedomscientific.com](http://www.freedomscientific.com), or search for the limited time version of MS Windows-Eye. For free screen readers, please visit[www.nvda-project.org](http://www.nvda-project.org)- Submit the revised website or page to a free automatic compliance scanner (ACS), such as
[wave.webaim.org](http://wave.webaim.org)WAVE. WAVE will provide a report detailing what your website does not meet the requirements. WAVE's report is quite easy to understand. WAVE focuses on how the screen reader responds to your page. It uses colored icons, which give useful explanations when the cursor hovers over the icons. Unfortunately, WAVE currently does not support color contrast.
AbilityNet ACS ( [www.abilitynet.org.uk/](http://www.abilitynet.org.uk/))报告色彩对比度。它使用 Compliance Sheriff 扫描仪，只有初始扫描是免费的。合规警长报告一开始可能会令人困惑。它包含许多描述 WCAG 建议的方框，但很少提示如何纠正不合规之处。Compliance Sheriff 不区分布局表和数据表。它错误地建议布局表格应该有标题、摘要，甚至范围。
要知道 AbilityNet 虽然是一个优秀的慈善机构，但是资金有限。它只允许对你的网站进行一次免费扫描。通过每页 170 美元(120 英镑)的首次免费扫描。请记住，自动化的可访问性测试工具不能检查内容是否以对视觉障碍者有帮助的方式编写。他们的职责是检查标记是否适合屏幕阅读器进行智能解释。使用前置内容很重要，这样每段都以结论开头。这仅仅意味着不要强迫用户去阅读一个很长的段落来了解它的内容。使用记者的“标题”技巧，在第一行或标题中讲述段落的内容。
提示下面的屏幕阅读器和其他资源也可以下载:browse aloud
www.browsealoud.comThunder[www.screenreader.net](http://www.screenreader.net)和 WebbIE(免费) www.webbie.org.uk`` 如果你用火狐，看看[www.firevox.clcworld.net/about.html](http://www.firevox.clcworld.net/about.html) Fire Vox 是 Mozilla Firefox 的屏幕阅读器。
皇家国家盲人学院为设计无障碍网站提供了一个非常有用的清单。参见[www.rnib.org.uk/professiona…](http://www.rnib.org.uk/professionals/Documents/WAC_See_it_Right_standard.doc)
提示参见
[www.hassellinclusion.com/2011/01/web…](http://www.hassellinclusion.com/2011/01/web-accessibility-myths-2011-part2/)关于网站可访问性的启发性和争议性的想法。
总结
在本章中，您了解了残障人士，尤其是视力残障人士遇到的 web 辅助功能问题。简要参考英国法律和美国关于该主题的指导，给出了有用的网站地址以供进一步参考。这一章提到了色彩对比和字体大小对弱视者的重要性。
一份详细的清单为您提供了一种评估网站可访问性的方法。关于屏幕阅读器的部分描述了它们如何工作以及与数据表相关的问题，尤其是 HTML5。本章描述了可用于屏幕阅读器的表单元素。在设计网站时，试着记住这些提示，尤其是对盲人或弱视者有用的网站。
下一章将介绍过时的元素。您将学习如何使用 CSS 来替换它们。HTML5 引入了新的标签，增加了不推荐使用的元素的数量。工作示例将演示如何替换不推荐使用的元素。
十五、废弃那些不推荐使用的项目
术语“不推荐使用的项目”意味着万维网联盟(W3C)已经淘汰了这些项目，您不应该使用它们。包含不赞成使用的标记和属性的页面将无法通过验证，也不适合手持设备、屏幕阅读器或搜索引擎。
我有时会从另一个网站管理员那里接管网站的维护和重新设计。网站通常是旧的，充满了过时的内容。我的第一个任务是用现代的对等物替换所有被否决的项目。你可能会被要求做类似的工作。本章将帮助您更新网站，并向您展示如何避免在未来的网站中包含不推荐使用的项目。
本章包括以下几节:
- List of disapproved items and their modern alternatives
- Advantages of deleting deprecated items
- Avoid the table layout of columns.
- Avoid table layout of extensible content panel.
- Use CSS instead of tables for multiple boxes with borders.
- CSS3 module for multiple columns
不推荐使用的项目
在 HTML4 的早期，一些标签和属性已经被废弃了。还有一些在 HTML5 中被否决了；它们都一起列在表 15-1 和 15-2 中。当增强或更新一个网站上的页面时，你应该抓住机会用 CSS 或新的标签替换所有不推荐使用的项目。如前所述，如果有人将旧网站转让给你，过时的项目将需要替换。
表 15-2 中列出的属性必须全部被 CSS 样式替换。
替换不推荐使用的项目
当不推荐使用的项目被 CSS 替换时，HTML 标记的数量将会减少。然而，CSS 表将包含更多的标记。这带来了净节省，因为 CSS 表是一个单一的页面，但许多链接到样式表的 HTML 页面将具有较少的标记。
我通常在像图 15-1 这样的长页面上放置一个向上箭头。单击箭头会使光标跳到页面顶部。
***图 15-1。*一个向上箭头及其文本
用于向上箭头的旧 HTML 标记将包含此处以粗体显示的不推荐使用的项目:
<p **align="center"**><b><**font size="3" face="Times New Roman"**>Go to top of page**</font>**</b> <a href="#top"> <img **border="0"** title="Go to top of page" src="img/bluearrow.gif"  **align="middle"** alt="Go to top of page" width="52" height="44"></a> </p>
移除不推荐使用的项目并使用 CSS 样式表后，标记变为:
<p><b>Go to top of page</b> <a href="#top"> <img class="up-arrow" title="Go to top of page" src="img/bluearrow.gif"  alt="Go to top of page" width="52" height="44"></a> </p>
当与图像一起使用时，宽度和高度标签在 HTML 标记中是可接受的。字体系列细节和类up-arrow将在 CSS 样式表中定义如下:
.up-arrow { font-family: "times new roman"; font-size:100%; font-weight:bold;  text-align:center; border:0; vertical-align:middle; }
我使用一个class而不是一个id,因为在很长的页面上我需要不止一个向上箭头。
标记从 241 个字符减少到 172 个字符，标记现在将生效。在网站中，这种节省将在包含向上箭头的每个页面中实现。
当侧栏中有多个上箭头时，创建一个名为class="up-arrow-more"的额外的上箭头类。
在 CSS 样式表中，附加的类如下所示:
.up-arrow-more { font-family:"times new roman"; font-size:100%; font-weight:bold;  text-align:center; border:0; vertical-align:middle; **margin-top:400px;** }
页面上的附加箭头被赋予类别up-arrow-more。margin-top:400px强制向上箭头垂直分开 400 像素的距离。这避免了在每个向上箭头之间插入大量换行符<br>或<p>标签的需要。
锚
在早期，页面顶部的着陆点由 HTML 4 标记设置为
<a name="top"></a>
属性name现在应该被替换为id。代码变成了<a id="top"></a>。这是现在所有 HTML 版本的通用做法。
同样的建议也适用于其他页面上的锚；例如，要从一个页面链接到另一个页面上的特定位置，链接可能是
<a href="page3.html#colyton">Click for more information about Colyton</a>
当点击时，链接会把用户带到page3.html上的一个地方，标签为
<a id="colyton"></a>
**验证:**包含不赞成使用的项目的页面将不会被验证。手持设备和搜索引擎可能会受到无法验证的页面的阻碍，因为它们包含不推荐使用的项目。
HTML4 中不赞成使用 <嵌入> 标签，它将无法验证。然而，它被广泛使用(尤其是在视频中)，以至于它在 HTML5 中得到了复兴。它的回归受到热烈欢迎。
粗体和斜体文本
关于弃用，经常会出现以下问题:现在是否应该用<strong></strong>代替<b></b>，用<em></em>代替<i></i>？
标签<b></b>没有被弃用，标签<strong></strong>给出了类似的结果，但是用户的浏览器设置可以覆盖它。CSS 的对等词是b { font-weight:bold; }。
标签<i></i>没有被否决，标签<em> </em>给出了类似的结果，但是用户的浏览器设置可以覆盖它。等价的 CSS 代码是i {font-style:italic;}。
当我忙的时候，我会交替使用这两个词，因为我发现这两个词之间的区别太微妙了，根本不用担心。
一般来说，使用<i>将一个单词或短语变为斜体，但不改变其强调或语气；例如:“不要错过今晚电视 123 频道的堕落肥皂剧
用<em>来强调一个单词或短语；例如:“你是说实际上喜欢*那个节目？”
数据表好，布局表差
表格应该只用于显示数据。早期的网站使用表格来进行页面布局，现在许多网站仍在使用表格。几年前，万维网联盟(W3C)就不赞成页面布局使用表格。移动设备肯定不喜欢表格布局。表格布局导致页面臃肿。表格布局的 HTML 可能比 CSS 布局大三到四倍。
一旦掌握，CSS 布局比表格布局有更大的力量和灵活性。对于使用屏幕阅读器、语音输出浏览器、盲文浏览器和文本浏览器的人来说，表格布局可能是个大问题(见第十四章)。由数据行和列组成的可接受的表格，如表 15-3 。
注特殊规则适用于帮助残疾人的数据表。这些在第十四章中有描述。
多列无表格
基于 CSS2 的多列设计非常容易，不需要使用表格。(本章这一节可以看作是对第十二章多栏节的补充。)CSS3 可以创建文本列(参见本章后面的“新的 CSS3 列模块”)，但是目前很少有浏览器支持这一功能。
一个基本的三栏页面，各栏颜色相同
在这些例子中没有使用语义标签，因此 IE 7 和 IE 8 可以显示结果，而不必求助于添加 JavaScript 的复杂性。如果您希望使用语义标签，请务必添加 JavaScript 片段，并更改 CSS 中的显示指令，如第一章所述。
图 15-2 显示了 CSS 创建的三列。
图 15-2 。一个有五个部分的三栏页面
这是通过创建五个部分来实现的:页眉和页脚各一个，每列一个。纯粹主义者会对我使用的表示标记感到震惊。设计师不鼓励使用像leftcol和rightcol这样的标识符；标识符应该指示内容而不是位置。在这个和随后的例子中，为了清楚起见，使用了表示性的词语leftcol、rightcol和midcol。在真实的网页中，它们可以被类似于menu-col、advert-col和main-content的东西所取代。
清单 15-2a 使用 CSS 表示产生三列，而不是使用一个废弃的表格布局。
清单 15-2a。【在不使用表格的情况下创建三列(three-col-no-tables.html)
`
Three columns without tables *meta details go here*CSS 布局在清单 15-2b 中提供。
***清单 15-2b。*图 15-2 (三列无表. css) 布局的 CSS 样式表
body {background:white; font-family:arial; font-size:medium; color:black;  margin:auto; padding:7px; } #container { width:960px; border:1px black solid; margin:auto; text-align:center;  margin-top:0; background:#a5f400; } #hdr {width:920px; height:20px; margin:15px auto 15px auto; background:yellow;  color:black; border:1px black solid; } /*THE MAIN PANEL CONTAINS THE THREE COLUMNS*/ #mainpanel {margin:auto; background:#d2ff81; text-align:center; width:920px;  height:140px; border:1px black solid; } #leftcol {float:left; width :115px; height: 140px; border-right:1px black solid; } #rightcol { float:right; width:92px; border-left:1px black solid; height:140px; } *SET MARGINS FOR MID COLUMN. THIS SITS BETWEEN THE FAR LEFT AND FAR RIGHT COLUMNS*/ #midcol { margin-left:120px; margin-right:105px; text-align:center; border:1px black solid; } #ftr {width:920px; margin:auto; text-align:center; clear:both; background: #a5f400;  border: 1px black solid; }
一个基本的四列页面，各列颜色相同
图 15-3 显示了 CSS 标记产生的四列显示。
***图 15-3。*不使用表格的四列
创建四列只需使用<div>将中间的一列拆分成两个子列。清单 15-3a 和 15-3b 的将它们标识为subleft和subright。
清单 15-3。【four-col-no-tables.html】创建不带表格的四列布局
`
` `Four columns with no tables图 15-3 的 CSS 布局由清单 15-3b 提供。
***清单 15-3b。*提供四列的 CSS 布局(四列无表. css)
body {background:white; font-family:arial; font-size:medium; color:black; margin:auto;  padding:7px; } #container { width:960px; border:1px black solid; margin:auto; text-align:center;  margin-top:0; background:#a5f400; } #hdr {width:920px; height:20px; margin:15px auto 15px auto; background:yellow;  color:black; border:1px black solid; } #mainpanel {margin:auto; background:#d2ff81; text-align:center; width:920px;  height:140px; border:1px black solid; } #leftcol {float:left; width :115px; height: 140px; border-right:1px black solid; } #rightcol { float:right; width:92px; border-left:1px black solid; height:140px; } #midcol { margin-left:120px; margin-right:105px; text-align:center; } **#subleft** { float:left; width: 49%; height: 140px; border-right:1px black solid; } **#subright** { float: right; width:49%; height: 140px; border:0; } #ftr {width:920px; margin:auto; text-align:center; clear:both; background: #a5f400;  border: 1px black solid; }
背景颜色不同的四列
图 15-4 显示了四根不同颜色的柱子。
***图 15-4。*四列三色
如果你需要不同颜色的柱子，设计会变得更加棘手，如图 15-4 。就我个人而言，我更喜欢相同的颜色，它看起来很有品位，将注意力集中在主题上，给设计师带来的问题更少。但是，如果您需要不同颜色的列，下面将介绍最简单的方法。(本章末尾提供了其他方法的来源。)
清单 15-4a 提供了四列页面上的内容。
清单 15-4a。【colour-columns1.html】用三种颜色创建四列内容
`
Colour columns *meta details go here*Header
Far left column
some content
some content
some content
Far right column
some content
Coloured columns
Mid left column
some content
some content
some content
some content
some content
some content
Mid right column
some content
Some content
some content
**
Footer
清单 15-4b 中的是显示彩色列的样式表，如图 15-4 中的所示。
***清单 15-4b。*彩色列的 CSS 样式表(style-colourcols1.css)
/*SETTINGS FOR MAXIMUM CONFORMITY BETWEEN BROWSERS*/ html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, fieldset, blockquote {  padding: 0; margin: 0; font-size: 100%; font-weight: normal; } img { border:0; } body { background:#BBD999; font-family:arial; font-size:120%; color:#4B6113;  margin:auto; padding:7px; } #container { width:900px; border: 10px white solid; margin:auto; text-align:center;  margin-top:0; background-color:#CEE1BA; color:#4B6113; } #hdr { padding-top:18px; height:141px; width:100%; margin:auto;  background-image:url('img/banner.jpg'); background-repeat:no-repeat;  background-position:65; } #hdr h1 { font-family: "times new roman"; text-align:center; color: white;  font-weight:bold; font-size: 300%; margin-top:50px; } #leftcol { float:left; width :130px; display:inline; background-color:#ACC; } #rightcol { float:right; width:92px; text-align:center;  background:url(img/yellow-square.gif) repeat-y right top; } /*SET MARGINS ON MID COLUMN*/ #midcol { margin-left:140px; margin-right:105px; text-align:center; } /*SET COLUMN WIDTHS FOR CONTENT. THESE SIT WITHIN THE MIDCOL*/ #mid-left-col {width:47%; float:left; text-align:left; } #mid-right-col {width:47%; float:right; text-align:left; } /*ENSURE DIVS AUTOMATICALLY STRETCH VERTICALLY TO ACCOMMODATE VARIOUS AMOUNTS OF CONTENT*/ br.clear { clear:both; } /*SET FOOTER TO CLEAR PRECEDING COLUMNS*/ #ftr {text-align:center; clear:both; }
没有桌子的可延伸的彩色中央嵌板
对于下一个例子，我要感谢 Diana Board 女士允许我使用我为她的网站设计的主页。
以下所有示例都不使用表格。图 15-5 显示了一个四列页面。带有白色边框的浅绿色内容面板需要调整，使其向下扩展以匹配内容的数量。
***图 15-5。*未被削弱的页面
图 15-6 显示了向下扩展的内容面板，没有采用表格布局。
***图 15-6。*被调整的页面
本主页图 15-6 中使用的两张照片是步行英国([www.walkingbritain.co.uk](http://www.walkingbritain.co.uk))的善意许可。
清单 15-6 中粗体的项目是下拉框架的调整。在清单 15-6 中，许多内容被省略了，因为它们与要表达的观点无关。你可以从合作网站 www.apress.com[下载完整的清单。](www.apress.com)
***清单 15-6。**为图 15-6【tweaked.html】*所示的页面创建结构
`
Tweaked page *meta details go here*Lower Farm B&B, Glastonbury, Somerset
-
*The horizontal menu buttons go here*
Bed and Breakfast Accommodation
 Glastonbury Tor
- Lower Farm, Lottisham is a working farm offering bed and breakfast 
accommodation in an ideal location for touring the many attractions of 
Somerset. Only 3 miles from the Royal Bath and West showground
- Situated in a new barn conversion, the spacious rooms retain traditional 
charm together with quality furnishings and decor
- Available for single nights or longer stays. Bed and
breakfast accommodation with flexibility, privacy and excellent value for 
money
- AA 4 star award for B&B. Visit Britain 4 star award for farmhouse  accommodation
**
向下拉动面板和边框的方法是放置在 CSS 样式表中的一个附加项。添加的代码如下:
/*ENSURE DIVS AUTOMATICALLY STRETCH VERTICALLY TO ACCOMMODATE VARIOUS AMOUNTS OF CONTENT*/ br.clear { clear:both; }
现在我们来看看包含图像和文本的盒子。这些传统上以表格的形式呈现。但是因为表格已经过时，下一节将向您展示如何通过使用 CSS 样式表来取消表格。
CSS 框和边框
在过去，网页设计师会用一个表格来构建图 15-7 。既然表格已经过时，那么必须使用 CSS 来构造这些框。图 15-7 展示了一组完全通过 CSS 构建的盒子。
***图 15-7。*无表格的方框和边框
肖像画家安·罗·琼斯好心地允许我使用我为她设计的网站上的物品。这些用于图 15-7 中的。您可以在[www.annroejones-artist.co.uk](http://www.annroejones-artist.co.uk)查看她的网站。
为了清楚起见，这里使用了内部样式。这些盒子在它们自己的<div>中定义，每个盒子都有一个类mainpanel。面板由代码<br class="clear">分开。
清单 15-7。【borders-boxes.html】为一组盒子创建结构和 CSS 表示
`
Borders and boxes` ` *meta details go here* #wrapper { text-align:center; } **.mainpanel** {margin:auto; padding:5px; font-size:100%; text-align:center;  width:700px; border:1px solid black; } .leftcol { float:left; width:30%; text-align:center; } .rightcol {float:right; width:68%; text-align:left; } **br.clear { clear:both**; **}** p { margin-top:0; margin-bottom:6px; } .img-left { float:left; } .img-right {float:right; } #cat { float:right; margin-right:20px; margin-left: 5px;" width="69" }Borders and Boxes
Ann paints under her professional name of Ann L Roe (Jones)
She is an academician and trustee of the South West Academy of Fine  and Applied Arts.
Ann studied painting, art and design in France, London and Brighton.
Ann's portrait of 'Nico with icons' won her the prestigious Baker Prize  for Painting in the South West Academy Open Exhibition.
Ann lives in Colyton Devon, UK. She paints landscapes and still life, but her particular interest is portrait  painting.
** **
**
Ann's portrait of Sir Patrick Moore FRS
The astronomer  Sir Patrick Moore FRS, still presents his Sky at Night program on BBC television (channels 1,2 and 4).
` `Ann painted a separate portrait of Sir Patrick Moore's 
beloved cat (see inset on the right)
** **
**
Ann's portrait of the three Chelsea Pensioners - Bob, Michael and Fred - The painting now has a permanent home in the Infirmary  Building of the Royal Hospital Chelsea in London.
Unveiled in March 2010 by  General the Lord Walker GCB CMG CBE DL, the painting can be seen by the public in  the Foyer.** **
The next section discusses the new CSS3 module for creating multiple columns.`
用于列的新 CSS3 模块
现在布局表格已经过时了，设计者必须放弃传统的显示文本列的方式，而使用多单元格的表格来显示不可见的边框。在本章的前面，我描述了如何使用 CSS 来实现包含文本的多列。
CSS3 有新的多栏布局模块，这可能是所有推荐模块中最令人兴奋的节省时间的模块。当它被完全采用时，我们可能会看到那些文本在屏幕上传播的可怕网站的终结。它肯定会成为列的表格布局的死穴。
可以定义列的宽度和数量。您所期望的新样式关键字是，column-width和column-count。可以使用称为forcolumn-gap的宽度在列之间创建一个空间。可以使用column-rule创建列之间的垂直线。内容会像在出版软件中一样从一列流到另一列。
在撰写本文时，只有 Mozilla Firefox、Chrome 和 Safari 支持新的多栏模块。然而，Firefox、Chrome 和 Safari 通过自己独特的方式来处理这个问题:Firefox 用-moz-，Safari 和 Chrome 用-webkit-。可悲的是，IE 7、IE 8 和 IE 9(以及撰写本文时的 Opera)忽略了 CSS3 列样式。所以，CSS3 多列可能在 IE 7、IE 8、IE 9 灭绝之前的几年内都不会被网页设计师使用。
注意 CSS3 不依赖于 HTML 版本。CSS3 增强功能可以在 HTML4、XHTML 和 HTML5 中工作，但前提是浏览器支持它们。Firefox、Safari 和 Chrome 支持多列。微软在 2010 年 9 月声明，IE 9 将不支持 CSS3 多列。
图 15-8 和 15-9 显示了 CSS3 多列在不同浏览器中的显示方式。
***图 15-8。*CSS3 多栏标记无法在 Internet Explorer 6、7、8、9 和 Opera 中显示
图 15-9。【CSS3 多栏如何在 Mozilla Firefox、Safari 和 Chrome 中显示
在清单 15-8 中，粗体代码建立了支持浏览器显示这两个图中的列的方式。
清单 15-8。【css3-columns.html】使用 CSS3 可以在栏中显示的内容模板
`
CSS3 mutiple columns *meta details go here* **#content { -moz-column-count: 3; -moz-column-gap: 1em;** **-webkit-column-count: 3; -webkit-column-gap: 1em;** }CSS3 可以提供竖线，也就是将一个项目与另一个项目分开的线。图 15-10 显示 CSS3 可以提供段落之间的划分规则。
图 15-10。【CSS3 多栏如何显示 Mozilla Firefox、Safari 和 Chrome 中的规则
在撰写本文时，垂直规则要求 Mozilla Firefox 的 hack -moz-和 Safari 的-webkit-。在下面的代码片段中，规则的新 CSS3 列模块关键字以粗体显示。
#content { -moz-column-count: 3; -moz-column-gap: 1em; **-moz-column-rule: 1px solid black;** -webkit-column-count: 3; -webkit-column-gap: 1em; **-webkit-column-rule: 1px solid black;** }
清单 15-10。【css3-3col-rules.html 在 CSS3 列之间引入垂直规则
`
CSS3 mutiple columns #content { -moz-column-count: 3; -moz-column-gap: 1em; **-moz-column-rule: 1px solid black;** -webkit-column-count: 3; -webkit-column-gap: 1em; **-webkit-column-rule: 1px solid black;** }当浏览器窗口水平收缩时，三列的宽度会相应减少。它们还向下延伸以容纳所有内容。如果内容容器具有固定的宽度，则当浏览器窗口收缩时，列保持相同的宽度。
有一天，我们将能够省略黑客攻击，只使用以下 CSS3:
#content { column-count: 3; column-gap: 1em; column-rule: 1px solid black; }
当浏览器最终实现下一批特性时，多列模块将非常灵活；例如，下一段 CSS 标记将固定列的宽度，并将调整列的数量以适应内容空间。列宽标记将列宽设置为至少 15 em 宽。确切的列数将取决于可用的内容宽度。
#content { column-width: 15em; }
在下一段 CSS3 标记中，列数将是固定的，但是每列的宽度将会改变以适应内容区域的宽度。
#content { column-count: 3; }
可以使列的长度相等，如下所示:
#content { column-fill: balance; }
可以制作一个跨越各列的标题，如下所示:
h2 { column-span: all; }
列规则(列之间的垂直线)可以省略，也可以有各种宽度和颜色，如下所示:
#content {column-rule: thin solid blue; }
许多其他多栏功能正在模块的管道中，但尚未完成；在撰写本文时，它们也不能在浏览器中使用。它们包括以下内容:
column-space-distribution, break-before:column; break-inside:avoid-column; and break-after:avoid-column;
提示参见 A List Apart 网站
[www.alistapart.com/articles/css3multicolumn/](http://www.alistapart.com/articles/css3multicolumn/)了解新的 CSS3 多栏模块的全面处理。参见
[developer.mozilla.org/en/docs/CSS3_Columns](http://developer.mozilla.org/en/docs/CSS3_Columns)和[www.w3.org/TR/css3-multicol/](http://www.w3.org/TR/css3-multicol/)。
总结
本章提供了一个不推荐使用的标签和属性的列表，这些是您在设计或重新设计网站时应该避免的。向上箭头装置用于展示转储废弃项目的优势。因为表格已经过时，所以描述了几种用 CSS 样式替换它们的解决方案。本章给出了使用 CSS 布局时可能出现的问题的解决方案。描述了一种构造一系列没有表格的有边框的盒子的方法。传统上，带有不可见边框的表格用于显示文本列；本章给出了使用 CSS2 替换表格的说明，然后演示了新的 CSS3 多栏解决方案。
在下一章中，你将学习搜索引擎是如何工作的，并且你将被介绍优化你的网站的方法，这样它们将在搜索引擎的结果中出现在更高的位置。*
十六、搜索引擎优化
当你在 Bing，Yahoo！，还是谷歌？你可以增加出现在最初几页的机会，但是如果不为一个有利的位置付费，就不能保证早出现。
本章向您展示如何提高您的评分，以及应该避免什么。您将获得信息，帮助您了解搜索引擎如何选择与用户的搜索词(关键字)相对应的网页。
让你的网站出现在搜索引擎的页面上是免费广告的一种形式。然而，其他方式的广告你的网站不应该被忽视。这一章包括了一些建议，告诉你如何通过其他方式来宣告你的网站的存在，从而补充搜索引擎的工作。
概述
搜索引擎优化(SEO)可能会令人沮丧。你的一个网站可能不会出现在搜索列表中，即使它已经过很好的优化。在搜索引擎的首页查看某些网站的源标记；你可能会发现有些并没有很好的优化。为什么你优化得很好的站点没有被列出来，而非优化的站点却被列出来了？只有搜索引擎知道为什么。
搜索结果似乎不一致。我的一个网站在谷歌的第二页底部，在必应的第二页第一。两周后，我的网站从谷歌上消失了，但仍在必应上的同一个位置。一个月后，它重新出现在谷歌第三页的底部。为什么呢？我想不出合理的解释。
SEO 与其说是一个科学的过程，不如说是一门神秘的艺术。这不应该阻止网站设计者尽最大努力优化网站。我的网站在雅虎的第一页排得很靠前！，但只在谷歌的第七页。这是因为雅虎！专注于关键词和网站优化，而谷歌更依赖于网站外部链接的数量(网站的受欢迎程度似乎比它对搜索者是否有用对谷歌更重要)。
同样令人沮丧的是，SEs 需要三到五个月的时间来索引一个优化良好的新网站。令人惊讶？不会，因为 SEs 使用的机器人要爬遍 2.4 亿个现有网站才能更新。除此之外，他们每年还会抓取近 5000 万个新的。每年约有 4000 万人变得不活跃，可能会从阿瑟指数中删除。
时间是一个重要的方面。虽然 SEs 可能会在三到五个月内索引一个新的域名，但这并不意味着它会在搜索结果中有一个好的排名。有时候，在你的网站靠近搜索结果的第一页之前，还需要五到六个月的时间。一些富裕的公司会购买一个完善的，高排名的域名，而不是从头开始一个新的域名。不太富裕的人应该立即上传一些基本内容，而不是等到网站完成后再上传。这让 SEs 对其进行索引并开始“试用期”,而网站的其余部分正在开发中，
一个优化良好的网站相当于在你的街道上有一个名牌，在你的房子上有一个门牌。在极少数情况下，邮递员无法投递你的邮件，但如果没有门牌号和街道名称，他投递邮件的能力就会大大降低。如果没有优化，SEs 索引你的网站并为搜索者列出的机会就会大大减少。
网络爬虫是 SEs 用来搜索每个网站，寻找关键词和关键短语的机器人。然后可以对网站进行索引，以便用户可以搜索拥有这些关键字的网站。大多数网站主机都有流量监控系统(有时称为 web stats)。您可以使用它来查看网站被 SEs 抓取的时间和频率。
提示要获得一流的资源，试试彼得·肯特的傻瓜搜索引擎优化(威利，2010)。彼得描述的技术可读性很强，一步一步的指导非常清晰，易于实践。它包含额外的点击付费等项目，以及大量非常有用的资源。要获得有用的互联网资源，请访问 Phil Craven 的网站，
[www.webworkshop.net](http://www.webworkshop.net)还可以在[www.seomoz.org/term-extrac…](http://www.seomoz.org/term-extractor)尝试 SEOmoz 的术语提取器。这个工具从任何特定的网页中提取关键字，并模仿搜索引擎蜘蛛。
当心虚假的承诺
警告你的客户，在网站上线后，他们会在短时间内被不道德的人发来的邮件纠缠。即使客户的电子邮件地址被加密或使用了安全的联系方式，骗子也可以通过尝试info@yourwebaddress.co.uk等地址做出合理的猜测。然后，他们试图说服你的客户为网站的优化付费。给你的客户一份下面的警告:
**诈骗警告:**在推出一个网站后，垃圾邮件发送者会联系网站所有者，提出改善他们的搜索引擎优化。如果一个拥有者被这个欺骗了，她将会付很多钱，而垃圾邮件发送者将会什么都不做。事实上，垃圾邮件发送者也无能为力。一些可怕的人甚至声称为谷歌、雅虎工作。、或必应，或者他们声称在那些组织内部有联系人。一个特别讨厌的样本用电话联系受害者。他说，他为谷歌工作，如果受害者拒绝使用他的“服务”，他将从谷歌的索引中删除该网站。
真正的 SE 优化器确实存在，但他们不会使用垃圾邮件，也不会使用通用的电子邮件地址，如@hotmail或@gmail。他们有一个完善的服务，可以检查其真实性。但是为什么要花钱买一份你可以在本章的帮助下自己完成的工作呢？
页面排名和受欢迎程度
搜索引擎对他们的搜索标准和网页排名方法非常保密。SEs 可能偶尔会修改他们的规则，但一般原则将保持不变。
页面排名
我发现网页排名对网站在搜索结果列表中的位置没有很大的影响。我有网页排名很差的网站在搜索结果中排名靠前，反之亦然。因此，我忽略页面排名，专注于网页在结果列表中的位置。然而，尽管最近网页排名的重要性有所下降，你可能会从网页排名的监控中获得一些好处。如果你想知道更多关于网页排名的信息，请看 Phil Craven 在[www.webworkshop.net/pagerank.ht…](http://www.webworkshop.net/pagerank.html)的详细解释
当与搜索引擎相关时，可以从两个方面来考虑流行度这个词。它可以指网站本身的受欢迎程度，也可以指网站主题(即其关键词)的受欢迎程度。
知名度和外部链接
谷歌和必应非常重视网站的受欢迎程度，他们将其等同于网站的有用性。他们认为人们不会链接到一个无用的网站。受欢迎程度与一个网站的点击率无关。必应，尤其是谷歌，主要通过检测指向你网站的外部链接的数量来决定受欢迎程度。雅虎！另一方面，会检测网站中关键字的数量和内部链接页面的数量，给出与搜索栏中键入的关键字更相关的结果。
我有经常出现在雅虎首页的网页！因为网页优化得很好。然而，使用相同的搜索词，谷歌和必应对它们的评价并不高，只是因为指向它们的外部链接较少。流行网站上指向你的网站的链接表明你的网站一定也很受欢迎，所以你的网站的排名会上升。这些外部链接有很强的作用，但不幸的是它们不在你的直接控制之下。雅虎！依靠组织良好的内部联系。这些将首先被讨论，因为它们直接在你的控制之下。幸运的是，关键词内容和组织良好的内部链接也得到必应和谷歌的认可。
主题的受欢迎程度(及其关键词)
如果一个主题很受欢迎，你将与数百万其他网页竞争搜索结果列表中的位置。如果你是唯一一家为大象生产抗血栓袜子的公司，你会在第一页的搜索结果中排名第一。因此，如果网站所有者能够专注于他的推广的一些独特方面，这将有助于搜索引擎排名。例如，数以百万计的古董商在 SE 结果中竞争一个位置。如果经销商专注于一种特殊类型的古董，这将大大缩小搜索范围，提高网站的排名。
网站设计者需要知道搜索引擎寻找什么，以确保网站的关键字和链接得到优化。接下来的部分将列出搜索引擎寻找的内容。然后讨论实现每个主题的最佳方式。
搜索引擎寻找什么
搜索引擎查找以下内容:
- And phrases (especially in the
<title>and<body>parts of a page- Well-designed internal links to all pages on the website
- External links to other websites of your website
关键词和短语
搜索相关网站的用户使用关键字和关键短语。例如，如果用户对计算机有问题，他可能会输入关键词“计算机问题”。SEs 按照以下顺序对关键词的重要性进行评级:
<title>- Keywords/phrases in
<body></body>- Keywords/phrases in
<head></head>(not so important to Google)- Keywords/phrases that appear earlier in the tag
- Keywords/phrases
h1, h2, h3in the title, etc. )- Bold keywords/phrases
第一个标签的内容
<title></title>是一个非常重要的标签，必须紧跟在<head>标签之后，以获得最大效果。
将你的公司或网站名称放在标题或 meta 标签中是没有多大效果的，除非该公司相当出名。如果你是 Tesco 或 Walmart，那么你必须将公司名称放在<title>和"description" meta 标签中，因为用户搜索的是知名的名称。不要在标题或 meta 标签中插入“欢迎使用”这样的字眼，浪费宝贵的关键词空间；没人搜索 欢迎或者 欢迎来到。
Meta 标签关键词争议
一些 SEO 专家指出，SEs 索引标题和元描述，但他们忽略了关键字元标签。这种观点对谷歌来说可能仍然是正确的，因为谷歌在其搜索引擎提示中省略了对关键字 meta 标签的任何引用。然而，必应和雅虎！两人都说关键词元标签对他们很重要。我们该如何理解这些相互矛盾的信息呢？
Google 开始忽略 keywords meta 标签，因为设计者滥用它，用许多关键字填充它。其他搜索引擎优化大师说，系统工程师只阅读有限数量的元标签词。我们不知道答案，因为 se 对他们的方法极其保密。
我把关键字放在关键字元标签中，因为必应和雅虎！假设他们注意到了这些问题，那么至少有一点点可能性，谷歌可能会在未来的某个时候再次关注这些问题。
同时，确保你的<title>标签发挥最大作用，因为它至关重要。给出一个好的相关的"description"元标签，包含关键短语或关键词，因为这总是显示在结果列表上。尽管围绕着"keywords" meta 标签存在争议，你仍然应该在你的关键词中使用它。
提示正文标题，如
<h1> </h1>、<h2> </h2>等，是放置关键字和关键短语的理想位置。搜索引擎对标题的内容给予很高的评价。
下一节将帮助你选择合适的关键词和关键短语。
提示将你的主关键词或关键短语放在任何关键词列表的第一位。以下有用的网站会帮你选择关键词:Google 关键词工具箱
[googlekeywordtool.com](http://googlekeywordtool.com)；点击第一项，Google 关键词工具)和 Google Adwords 关键词工具([adwords.google.com/select/](https://adwords.google.com/select/)
KeywordToolExternal)。谷歌网站管理员工具是一个必须看到的学习更多关于搜索引擎优化。
选择关键词和短语
想象你是在你的网站上搜索信息的人。您会在搜索栏中键入什么？询问其他人他们会输入什么。选择关键词和短语并不那么容易，但它会让你开始思考。
假设在一次西藏之行中，史密斯先生相当愚蠢地开着车窗四处转悠，结果他患上了疼痛的肩周炎。幸运的是，一位西藏僧侣用腐臭的牦牛脂肪快速按摩治好了史密斯先生的冻疮。史密斯先生建立了一个网站来销售这种疗法。他的企业注册为史密斯健康产品有限公司。
他可能会选择“腐臭的牦牛脂肪”作为关键词。这是行不通的，因为那时他是西藏以外唯一知道酸败的牦牛脂肪可以治疗肩周炎的人。没有人会想到输入这个关键词(尽管一些有笔记本电脑的藏人可能会)。
在未来的某一天，史密斯先生将能够使用关键短语“腐臭的牦牛脂肪”以及他目前的短语。但在此之前，腐臭牦牛脂肪疗法必须广为人知，并出现在无数的杂志和电视节目中。同时，他应该使用关注问题而不是产品的短语。
那么他应该选择什么呢？史密斯的保健品怎么样？这将是完全无用的；除了他的家人，几乎没有人知道他的新企业。知道他公司名称和网址的明智的人会把网址输入正确的地方；也就是浏览器的地址栏。如果乔·布洛格斯有肩周炎，他怎么会知道一家叫史密斯的公司有治疗方法呢？
乔·布洛格斯很明智，可能会在痛肩、痛肩、肩周炎、痛肩或僵肩上搜索。
史密斯先生将这四个关键词输入搜索引擎，他会找到以下内容:
- Shoulder pain: 1.1 million search results
- Shoulder: 288,000 search results
- Stiff shoulder: 137,000 search results
- Shoulder pain: 51,000 search results
这表明疼痛的肩膀被网站使用的次数是短语*冻结的肩膀的四倍。*这些数字并不表示包含这些短语的网站的数量；它告诉你有多少网页包含该关键字。大量的这些搜索结果会突出这样一个事实，即关键短语出现在每个网站的许多页面上。许多结果将是重复的或三次的。有些结果可能不太相关；这对于目前的谷歌来说尤其如此，因为谷歌过于强调可能相关也可能不相关的外部链接。
利用谷歌关键词工具和微软 Excel，史密斯先生制作了表 16-1 。
在这个表格中，史密斯先生会在标签之间使用一些最流行的关键词，尤其是在标题和整个页面中。他也会遵守接下来两节的规则。
对过度重复的限制
不要在标题标签或元标签中重复一个短语(或复数短语);例如，不要做以下事情:
<title>shoulder pain, shoulder pain, shoulder pain, shoulder pain</title> <meta name="description" content="shoulder pain, shoulder pain, shoulder pain,  shoulder pain, shoulder pain"> <meta name="keywords" content="shoulder pain, shoulder pain, shoulder pain,  shoulder pain, shoulder pain">
你可以把同一个单词放在 title 标签的不同短语中两次。
<title> shoulder pain treatment, pain shoulder, frozen joint, cure joint injuries</title>
在描述元标签中，同一个单词在不同的短语中最多可以出现四次。
<meta name="description" content="shoulder pain cure, pain shoulder, frozen shoulder  treatment, shoulder injuries">
在 keywords meta 标签中，您可以将同一个单词放在不同的短语中四次。
<meta name="keywords" content="shoulder pain treatment, pain shoulder treatment,  frozen shoulder cure, cure shoulder injuries">
关键短语的数量受限于对重复的限制。不幸的是，如果史密斯先生查阅词典，他会发现没有其他流行的肩的同义词；因此，Smith 先生只能在标题中重复单词 should 两次，在每个 meta 标签中重复四次。如果他在销售或出租自行车，那么可以在关键字 meta 标签中使用多个同义词，而不会出现不必要的重复，例如 bicycle、bike、pushbike 和 cycle。
对字符或字数的限制
限制字符或单词的数量是因为网页设计者滥用 meta 标签和<body>部分，用大量的关键字填充它们。限制如下:
<title> </title>标签之间的
<meta name="description"
:
<meta name="keywords"
- : 12 words at most.
你可以在页面的<body>部分放很多关键词，并且可以经常重复。但是不要过度。大多数专家说，正文关键词不应该超过页面总字数的 10%到 15%。
有些设计师认为头节的关键词就足够了。这不是真的。标题中的关键词/短语是最重要的，但是正文部分中的关键词比元标签中的关键词评价更高。为了获得最佳效果，关键字应该出现在标题标签、元标签和正文中。
关键字/短语必须出现在 <body>…</body> 标签之间。正文部分的关键词/短语非常重要。它们与<head></head>标签之间的关键字/短语协同工作。关键字/短语也必须出现在网站每一页的<body>标签之间。
以下是应该考虑并添加到您的列表中的关键字变体。
- singular and plural : lists and pages should include two forms of an important keyword.
- hyphen : If the hyphen may be inserted by the searcher, add the keyword with hyphen.
- Misspelled : If a keyword is misspelled frequently, add misspelled keywords.
- Picture and link : Add keywords to the title of the link. Add keywords to the "alt" and "titles" of the picture. For example, a shoulder map on Mr. Smith's website may have the following HTML code:
<img alt="Painful shoulder" title="Painful shoulder" src="img/shoulder-pain.gif">
精心设计的内部链接
史密斯先生会明智地将最重要的关键字或短语插入到他的网页的文件名中。Smith 先生从一个四页的网站开始，他用以下名称保存它们:
index.html(This is his homepage, so the page name cannot be a keyword)shoulder-pain.html(This is his explanation for shoulder pain)shoulder-pain-cure.html(This is his treatment of rancid yak fat)shoulder-pain-form.html(This is his order)
他可以使用句号而不是连字符(最多使用三个连字符或句号)。
接下来，Smith 先生的导航菜单将包括关键词肩痛，以链接到页面名称中包含该关键词的页面:
`
`菜单看起来如下所示:
- Shoulder pain description
- Shoulder pain cure
- Shoulder pain order form
- Shoulder pain home page
创建一个网站地图，因为这是一个强大的内部链接来源。网站地图只是一个链接到你最重要的页面或者所有页面的页面。你可以在本章后面的“站点地图帮助 SEs 索引网站”一节中找到创建站点地图的说明。
提示确保所有的页面都有一个返回主页的链接。
您网站的外部链接
网站上与你的产品相关的外部链接比没有相关内容的网站上的链接更有价值。最巧妙的方法是首先在你的网站上添加一个广告和一个到其他网站的链接。联系其他网站所有者，并对她的网站给予好评。然后问店主她是否会把你的链接加到她的网站上。
询问合作的网站所有者是否会在链接旁边添加一个小广告，就像这样:
<p><a href="http://www.best-buzzers.com">In my opinion the best quiz buzzers are found  at http://www.best-buzzers.com</a></p>
外部链接必须包含关键字；因此，您必须指定链接包含的内容。在前面的例子中，关键字是问答游戏蜂鸣器。在电子邮件中发送您喜欢的链接和文本，以便合作的所有者可以剪切和粘贴它。
询问合作网站的所有者，她是否会将链接添加到多个页面。试着让她把你的链接放在包含很少其他链接的相关页面上；这增加了你的链接的价值。
如果网站内容相关性很好，考虑在她的网站上购买一个小广告，最好带有相关的文本链接。链接交易可能会成为一个非常无聊的过程，如果你在与你的关键词相关的网站上购买链接，通常会更容易管理。
注册搜索目录。SEs 从 DMOZ 开放目录项目中获取链接。将您的网站地址提交给[www.dmoz.org/help/submit…](http://www.dmoz.org/help/submit.html)
在 DMOZ 上市，选择正确的类别非常重要；确保您在适当的级别提交。DMOZ 由志愿者提供服务，可能需要很长时间才能获得批准。
联系您的供应商。请他们在自己的网站上投放广告；或许类似于以下内容:
<p><a href="http://www.best-buzzers.com">Quiz buzzers made by BestBuzzers use our  ElectraCo super solenoids></a></p>
许多公司都有客户名单。如果你是该公司的客户之一，要求把你的网址放在他们的客户名单上。另一个想法是寻找特定行业的网站和目录，以及特定行业或地区的搜索引擎。
你永远不应该做的事情
下面列出的“你绝对不应该做的事情”摘自三大搜索引擎的建议页面。
不要把其他网站的链接放在你的主页上；这将有损于你自己的排名。* Do not use frames; They confuse and stop web crawlers.?? 不使用 JavaScript 菜单和 JavaScript 链接；它们阻止网络爬虫访问你链接的内部页面。* Do not use stealth writing and other tricks; Like white characters on a white background. Web crawler detects them, and even detects and punishes closely related colors, such as very light gray text on white background.* Keywords/key phrases do not use pictures; These are invisible to se.* Do not use cookie cutter ; That is, add the same or nearly the same pages to increase the number of linked pages. SEs will not accept these and may punish the website.
谷歌说:“不要在不同的网址下创建一个页面的多个副本。许多网站提供纯文本或打印机友好版本的页面，这些页面包含与相应的富图形页面相同的内容。为了确保您的首选页面包含在我们的搜索结果中，您需要使用一个
robots.txt文件来阻止来自我们蜘蛛的重复页面。有关使用robots.txt文件的信息，请访问我们关于阻止 Googlebot 的信息。
[support.google.com/webmasters/bin/answer.py?hl=en&answer=35291](http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35291)
注本书第十五章中描述的页面打印机并没有颠覆搜索引擎。使用 CSS 页面打印机可以避免这个问题，因为没有重复的页面。
do not use link farms, that is, automated systems that create dreams of links on their web sites pointing to your pages. ses reject to acknowledge these links.
Yahoo! Statement: "Using' Linked Farm' violates Yahoo! The website guide won't improve your webpage ranking. "
Google declares: "Don't participate in the link plan to improve your website ranking or page ranking. In particular, avoid linking to spammers or "bad neighbors" on the network, because these links may have a negative impact on your ranking. "
然而，一些搜索引擎优化大师说，某些类型的链接农业可以很好地工作，如果混合一个坚实的运动，但你需要知道你在做什么，以避免扰乱搜索引擎。
在下一节中，我们将检查一个没有搜索引擎优化的网页。我们可以从一个不良实践的例子中学到很多，因为它强调了网站设计者应该避免的常见错误。
一个不包含搜索引擎优化的网站
图 16-1 展示了一个完全没有经过搜索引擎优化的网页。我感谢蒂娜·法林顿允许我使用我为她设计的网站上的泰迪熊照片
***图 16-1。*似乎包含关键词“泰迪熊”的网页
这个网站的关键词是泰迪熊或泰迪熊。乍一看，你可能认为这个关键短语在这个页面上出现了五次。但是，关键短语都是图像，因此这些短语无法被网络爬虫检测到。设计师应该为彩色面板使用背景图像，然后在面板上覆盖真实文本，以便 SE 可以阅读文本。
清单 16-1 展示了一个没有搜索引擎优化的网页的标记。SEO 错误以粗体显示。
清单 16-1。【welcome.html 展示未进行搜索引擎优化的网页
`
**Welcome to our web site** **** **** #container { margin:0 auto 0 auto; width:790px; }
隐藏下一节，看能不能看懂清单中的 SEO 错误。如果你理解了所有五个不良实践的例子，那么恭喜你，你已经清楚地吸取了上一节的教训。
清单 16-1 中的 SEO 错误
下一节解释在清单 16-1 中所犯的搜索引擎优化错误。
“欢迎来到我们的网站”这个标题不仅愚蠢，而且毫无用处。它不包含关键短语。为了用户的利益，以及为了搜索引擎的优化，标题必须恰当地描述页面的内容。* The key phrase Teddy bear does not appear anywhere in the mark, and the word Teddy bear or Bear does not appear either.* 元内容不包含关键短语。meta
"description"标签应该已经描述了页面和被推广的产品。有一大块下拉菜单的 JavaScript 代码。搜索引擎不读取 JavaScript。下拉菜单上的每个按钮显示九个附加页面。这意味着除了主页之外，还有 20 多页是搜索引擎无法读取和索引的。这些页面可能充满了 se 永远不会看到的关键词和关键短语。JavaScript 下拉导航菜单如图 16-2 所示。它显示了 JavaScript 下拉菜单，可以阻止搜索引擎搜索主页。***图 16-2。** JavaScript 下拉菜单* * The title is called `banner.jpg`, and `alts` or `titles` are not used. Missed three opportunities to insert keywords. It can be read as:
<img src="img/teddybears.jpg" alt="Colyton teddybears" title="Colyton teddybears"  width="786px" height="224px">
在三个面板的每一个中可以看到相同的故障；例如， black-panel.jpg 可能是:
<img alt="Price of **teddy bears**" title="price of teddy bears"  src="img/**teddy-bear-prices.jpg**" width="227"height="198">
**结论:**在搜索框中输入泰迪熊、泰迪熊、或熊，永远也找不到这个网站。
注意如果网页设计者将网页提交给 W3C 验证，许多错误就会被强调出来，并得到纠正。如果你想让搜索引擎找到并索引页面，就要经常验证它们。
向搜索引擎提交新的网站是很常见的。下一篇技巧文章中列出了这样做的 URL。只提交一次，否则 SEs 会认为你是垃圾邮件。一些 SEO 专家不愿意提交，但是他们等待 se 找到网站。很难确定哪种方法是最好的。
提示通过以下地址向三大搜索引擎提交网站 URL:
冰:[ssl.bing.com/webmaster/SubmitSitePage.aspx](https://ssl.bing.com/webmaster/SubmitSitePage.aspx)
雅虎:[www.search.yahoo.com/info/submit…](http://www.search.yahoo.com/info/submit.html)
谷歌:[www.google.co.uk/addurl/](http://www.google.co.uk/addurl/)和[www.google.com/submit_cont…](http://www.google.com/submit_content.html)
我不建议使用批量提交组织。以我的经验来看，其中一些会将网站的电子邮件地址卖给垃圾邮件发送者；不要冒险，你自己去做。
站点地图帮助 SEs 索引一个网站
站点地图可以是一个简单的网页，上面有一个指向网站上每个页面的链接列表。一个小型网站的简单站点地图上的链接可能看起来像图 16-3 。
***图 16-3。*一个简单但有效的网站地图
正如你在图 16-3 中看到的，一个站点地图可以是一页文本。文本由指向网站页面的实时链接组成。包含网站的文件夹的 URL 必须位于列表的第一位。图 16-3 由清单 16-3 产生。该列表不可下载。
***清单 16-3。*创建一个简单的网站地图
`
Sitemap for Rapid Embroidery logos *meta details go here* #container {margin:auto; width:420px; text-align:left;} h1 { text-align:center; }Sitemap
- The Rapid Logo Embroidery Company  root folder
- Contact  Rapid Logo Embroidery
- Rapid Logo Embroidery -  Home Page
- About Rapid  Logo Embroidery ` `
- The  range of garments supplied with embroidered logos
-  Commendations for Rapid Logo Embroidery Company
- Sitemap
在所有页面上放置一个指向网站地图的链接是很重要的。使链接不显眼，因为大多数用户不会对点击特定的链接感兴趣。网站地图链接最好位于网页的页脚。当访问者看到站点地图链接时，他们可能会错误地理解它。如果你的网站涉及一个城镇，一个建筑工地，或者一个野营地，访问者可能会认为这是一个地理地图。为了避免这种错误，可以把可见链接叫做类似于网站目录的东西，但是为了 SEs 的缘故，要确保实际的页面叫做sitemap.html。主页上的链接列表如下所示:
`
Web site Directory `生成的网站地图
如果一个网站有很多页面，那么创建一个文本链接页面将会非常乏味。然而，三个主要的搜索引擎接受免费的在线生成器的结果，这些生成器会在一瞬间为一个大型网站创建一个网站地图。首选的生成器是[www.sitemaps.org](http://www.sitemaps.org)，但是在本节的后面，我建议使用一个稍微友好一点的生成器，名为auditmypc.com。
搜索引擎将接受一个类似于清单 16-3 中的纯文本网站地图；然而，搜索引擎更喜欢阅读 XML 格式的站点地图。在线生成器生成一个通用的 XML 站点地图，因此它可以被所有搜索引擎接受。清单 16-4 是一个生成的站点地图的例子(这个清单不能下载)。
***清单 16-4。*使用生成器以 XML 格式创建的网站地图示例
`
www.rapidembroidery.co.uk/logo-embroi…
www.rapidembroidery.co.uk/logo-embroi…
www.rapidembroidery.co.uk/logo-embroi…
-
www.rapidembroidery.co.uk/logo-embroi…
www.rapidembroidery.co.uk/index.html `
生成器允许您添加可选信息(lastmod、changefreq、priority)，如下面的代码片段，但我倾向于使用默认设置:
<url> <loc>http://www.rapidembroidery.co.uk/index.html/</loc> <lastmod>2011-01-01</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url>
网站地图生成器的下一个例子是对[www.sitemaps.org](http://www.sitemaps.org)的替代。
使用审计我的电脑
确保您没有运行需要站点地图的网站。转到[www.auditmypc.com](http://www.auditmypc.com)
这个第三方生成器是免费的(与试图定位和使用搜索引擎的工具相比，也是用户友好的)。生成的 sitemap 适合 Bing，Yahoo！，还有谷歌。
- On the home page, click Site Map Builder on the top menu bar. You will see a video; Don't run it, but click Skip Video above the video.
- Click Run on the security pop-up window. A window named XML Site Map Tool will appear. Expand the window and type the URL of your website.
- Click the start button (the green right arrow at the bottom left).
- Click export
site map XML.
- Save the generated site map in the root folder of the website on your hard disk. Rename it to
sitemap.xml. Then use your FTP client to upload it to the root directory of the website server.
向搜索引擎提交网站地图
一旦你生成了网站地图并上传到你网站的服务器上，你需要告诉搜索引擎在哪里可以找到它。将它提交给 Google 和 Bing 的说明如下:
谷歌
Log in to the Google website map account at
[google.com/webmasters/tools/](http://google.com/webmasters/tools/)(if necessary, create an account).Add a site map.
Enter the URL of your site map file such as
[www.mywebsite.co.uk/sitemap.xml](http://www.mywebsite.co.uk/sitemap.xml).
兵
[www.bing.com/toolbox/web…](http://www.bing.com/toolbox/webmaster)
- Sign in to the Bing Webmaster tool (sign in with Windows Live ID for details).
- On the home tab, click the Add Site button and submit its URL. Verify ownership by selecting option 1. Download an XML file named
BingSiteAuth.xml.- Save it to the root folder of the website on your hard disk.
- Then use your FTP client to upload it to the root folder of the website on the host/server.
- In the browser address bar, enter the URL of the XML file. Click the verify button.
- After verification, the site map can be submitted.
- Go to
[www.bing.com/toolbox/web…](http://www.bing.com/toolbox/webmaster/)to register.- On the home tab page, click the website you just verified. Click the grab tab
- Enter the full URL of the site map like this:
[www.yourwebsite/sitemap.xml](http://www.yourwebsite/sitemap.xml)- Click submit.
雅虎！
这个 SE 现在和 Bing 挂钩了；因此，不再需要单独提交。去雅虎！站点资源管理器了解更多信息。
注意在生成站点地图的情况下，主页没有到站点地图的链接。XML 文件放在网站的根目录中，搜索引擎知道它在哪里，因为您必须在生成 XML 文件的过程中包含这些信息。
获取和提交网站地图可能会很棘手，因为目标一直在变。你认为你已经理解了这个过程，但是下一次一些事情已经改变或者隐藏在一个链接和子链接的迷宫中。一些界面有褪色的颜色和低对比度的颜色，这样标签就看不清楚了。一般的方案好像是:首先给 SE 添加一个网站 URL，然后验证你是网站的主人。当这被验证后，你就可以提交站点地图了。站点的所有者一词不是字面意思；意思是你是被主人授权维护网站的人。
提示参见
[www.sitemaps.org/protocol.ht…](http://www.sitemaps.org/protocol.html)了解更多关于网站地图的信息。该网站强调了站点地图的价值，并解释了 Google、Yahoo！，还有必应。
让人们知道你的网站的存在
当你的网站出现在搜索引擎的页面上时，这就是一种免费广告。你的目标是销售商品和服务，提供信息，或者为某项事业获得支持。为了最大限度地增加网站的访问者数量，可以通过其他形式的广告来补充搜索引擎的结果。
注意记住你的网站的目的是说服人们雇佣或购买你的产品，或使用你的服务；因此，使用每一个可用的方法把人送到你的网站以达到这个目的。
一个商业网站可能排名较低，但它比排名高的竞争对手获得更多的访问。这可能是因为排名较低的网站在行业杂志、行业目录和手册中被广泛宣传。不要忽视宣传你的网站。定期在合适的杂志和小册子上刊登小广告会收到很好的效果。
不一定懂电脑的满意客户可以告诉别人你的产品。这些人可能会在搜索引擎上寻找你的产品。
在每一份小册子、传单、包装纸和所有其他印刷品上，确保你的网站地址被醒目地显示出来。在你所有的资料上也使用二维码。这种广告媒体将在下一节描述。
使用快速响应(QR)码
现在，您应该已经熟悉了一种叫做 QR 码或矩阵码的新型条形码。现代智能手机可以扫描二维码。这使得智能手机无需点击 URL 就能访问网站。一款名为 QR 阅读器的免费应用必须下载到移动设备上，才能读取 QR 码。
前往[createqrcode.appspot.com](http://createqrcode.appspot.com)即可生成免费二维码。这个谷歌托管的应用是由杰森·德尔波特设计的。
将出现图 16-4 中所示的表单。你会看到我已经填写了我的网址， www.colycomputerhelp.co.uk`` 你可以选择不同的图片尺寸，但我选择了默认的 300 × 300 像素。点击创建二维码。
注意不要输入任何其他文本，否则手机设备会认为这是一条短信，你的网站将无法加载。但是，如果您不想加载 URL，QR 码也可以包含从电子邮件地址到一长段文本的任何内容。
***图 16-4。*用于输入您的网站网址的对话框
代码图像将出现，如图 16-5 所示。右键单击并保存它，或者将其复制并粘贴到文档中。
***图 16-5。【www.colycomputerhelp.co.uk】生成的二维码 ***
你也可以把它的代码嵌入到网页中，虽然我不确定这是否有用。要抓取用于嵌入的代码，请从http://chart…开始选择 QR 图像下方的所有文本，并将其粘贴到网页中。
注参见维基百科 QR 文章，了解 QR 码组成部分的精彩解释。
总结
为了确保人们可以找到你的网站，它必须被广告。本章讨论了两种主要的广告方式:搜索引擎和印刷品。第三种方法是口口相传。
这一章以对搜索引擎的概述和对折磨网站所有者的骗局的警告开始。你学习了网页排名以及如何选择关键词和短语。还有一部分描述了你必须永远不要做的事情。
就精心设计的内部和外部联系提出了建议。一个为搜索引擎优化而设计糟糕的页面的例子给出了不要做什么的实用建议。网站地图的一个部分演示了如何制作网站地图并上传到搜索引擎，这样他们就可以更容易地索引你的网站。
这一章建议了宣传你的网站的方法，包括二维码，这样智能手机用户就可以从打印的文档中立即访问你的网站。
在下一章中，你将了解到网站的三个有用的附加功能。第一部分描述了如何在页面上显示防垃圾邮件的电子邮件地址。第二部分向您展示了如何向关键页面添加访问者计数器。最后一节解释了将用户重定向到其他页面或网站的方法。
