使图像文本具有语义并且可搜索（3）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-8-5 13:26 | 只看该作者

使图像文本具有语义并且可搜索（3）

有效的 Web 页面会使用所有可用的层当您意识到 Web 页面的 3 个组件都属于层时，就可以使用它们了。让我们为某个 Web 站点构建一个非常简单的介绍页面，并演示图像丰富的页面如何获得文本支持。
按常规布置页面首先通过结构来布置页面。HTML head和 body标记将文档分为不同的部分。然后，找到您要在页面上使用的基本组件。在这个示例页面中，它们分别是：

一个标题 “Tom Doerr Guitars”。
一个徽标或标语 “fine handcrafted guitars... instruments without compromise”。
一些较大图片展示了该站点的重点；很可能是某种吉他。

注意，这里忽略了所有特定于显示的细节。在这一阶段，我们谈论的是纯粹的内容和结构。
确定这些东西之后，继续创建 XHTML。不用担心 CSS；只需构建基础页面。展示了一个简单的开头。
清单 1. 这个简单的 XHTML 只涉及内容和结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tom Doerr Guitars</title>
</head>

<body>
<div id="splash">
  <div id="title">Tom Doerr Guitars</div>

  <div id="slogan">
fine handcrafted guitars... instruments without compromise
  <div>
</div>
</body>
</html>]]>

这是一个小巧的 “基础” XHTML。它包含了页面的头部、标题和正文。在正文之内，有名为 “splash” 的 div元素；这是非常标准的 Web 实践。div组织并分解页面，在这里也不例外。这个主要的 div组织所有的内容。
然后是页面的标题。我们将要处理这个标题，因此使用另一个 div来标识该标题，但这次使用一个 “title” 作为 id。所以在这个阶段，我们很少考虑显示。我们使用结构（div）来标识以后在现有文本上面覆盖图像文本的位置。这里仍然忽略了关于覆盖的大部分细节。
对标语执行同样的操作：创建另一个 div。该 div内部就是文本标语。同样，除了 div外，没有其他显示。
可能有点奇怪，不过事实就是这样！显示了这个页面，它一个非常枯燥无味的 Web 设计。幸好它还未完成。
图 1. 没有显示的页面非常枯燥

这里的关键是 Google 或其他任何搜索引擎将查找它们可以索引的文本。这个站点的标题很清晰。因为它是标语，所以对人类而言也是可读性很强的。
识别不可视文本在这个阶段，您可以考虑一点显示了。我们知道有 3 种元素，所以现在需要考虑哪些是文本的，哪些是图像的：

一个标题，“Tom Doerr Guitars”。我们对它使用带有定制或独特字体的图像。
一个徽标或标语，“fine handcrafted guitars... instruments without compromise”。 这也应该使用定制字体。
一些较大图片展示了该站点的重点；很可能是某种吉他。 这显然是一个图像。

因此在这种情况中，实际上页面上没有可视的东西，并且不是图像！
当您知道什么是图像，什么不是图像之后，就需要从结构上识别将要隐藏页面的哪部分，尤其是文本。看看清单 1，它意味着将要隐藏标题和标语。为了方便以后查找，将这两段文本包含在 span内。清单 2展示了现在的 XHTML 的样子。
清单 2. 将隐藏文本放在 span 标记内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tom Doerr Guitars</title>
</head>

<body>
<div id="splash">
  <div id="title">]]><b><![CDATA[<span>]]></b>
  <![CDATA[Tom Doerr Guitars]]><b><![CDATA[</span>]]></b><![CDATA[</div>

  <div id="slogan">
]]><b><![CDATA[<span>]]></b><![CDATA[fine handcrafted guitars...
instruments without compromise]]><b><![CDATA[</span>]]></b><![CDATA[
  <div>
</div>
</body>
</html>]]>

在这里使用 span可能有点多余；所有在标题 div内的文本将被隐藏，以及所有在标语 div内的文本也一样。使用 span来进一步标识文本是一个良好的实践。如果您以后希望标语 div内的部分文本是图像，并且另一部分 —比如副标题或说明性文字 —保持为普通文本，您可以仅将隐藏的文本放置在 span内部。
不管怎样，您现在有了 XHTML 页面，它具有可标识的部分，并且具有容易标记和查找的隐藏文本。

收藏分享评分

回复引用

订阅 TOP

返回列表