电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使图像文本具有语义并且可搜索（4） [打印本页]

作者: look_w 时间: 2018-8-5 13:28 标题: 使图像文本具有语义并且可搜索（4）

用图像文本覆盖文本准备好内容和结构之后，您就可以添加显示层了。这里的工作和刚才对显示的处理差不多：一个具有许多选择符、规则和格式的 CSS 样式表。
为页面添加普通的样式首先，添加背景颜色（可能是一张背景图），设置默认的字体颜色、样式、对齐，以及对 CSS 进行通常所需的设置。展示了一个针对 Tom Doerr Guitars Web 站点的简单样式表。
清单 3. 针对 Tom Doerr Guitars 站点的 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@charset "UTF-8";
/* Main CSS Stylesheet for Tom Doerr Guitars */

body {
background-color: #5D1008;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-top: 150px;
margin-left: 75px;
}

#splash {
height: 343px;
width: 514px;
background: url(../images/splash_guitar.gif) no-repeat bottom left;
}

#title {
position: absolute;
top: 80px;
left: 275px;
height: 93px;
width: 475px;
}
#slogan {
position: absolute;
top: 260px;
left: 375px;
height: 94px;
width: 399px;
}

您需要在您的 XHTML 中引用这个 CSS，如所示。
清单 4. 在 XHTML 中引用显示 CSS

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>
]]><b><![CDATA[<link type="text/css" rel="stylesheet"
href="styles/doerr.css" />]]></b><![CDATA[
</head>

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

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

把它上传到浏览器将看到如所示的效果。页面非常整洁：有一些样式，甚至文本也在最终放置图像的地方。很明显，要想显示正常需要反复的试验，但处理过程很简单。目前只需设置文档的普通样式，还不需要考虑隐藏文本。
图 2. 向页面添加大量显示

隐藏应该隐藏的文本现在您需要隐藏两小段文本。由于使用了 span标记和容易定位的 div，这个过程相当简单。首先，您需要一个在 CSS 中选择文本的规则。然后，您只需要设置 display属性的值为 “none”。展示了更新后的 CSS，它们反映了这两处更改。
清单 5. 隐藏不希望被看见的文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

@charset "UTF-8";
/* Main CSS Stylesheet for Tom Doerr Guitars */

body {
background-color: #5D1008;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-top: 150px;
margin-left: 75px;
}

#splash {
height: 343px;
width: 514px;
background: url(../images/splash_guitar.gif) no-repeat bottom left;
}

#title {
position: absolute;
top: 80px;
left: 275px;
height: 93px;
width: 475px;
}
#title span { display: none; }
#slogan {
position: absolute;
top: 260px;
left: 375px;
height: 94px;
width: 399px;
}
#slogan span { display: none; }

这里已经隐藏了文本，但并没有使用什么技巧。在标题文本里，选择符是 #title span。#title选择一个 id 为 “span” 的 div。然后，末尾的 span选择该 div内部的 span标记。
上传页面，将看到所示的结果。现在文本消失了，接下来只需添加文本式图像。
图 3. 文本已经隐藏

当然，这种显示不会影响页面的实际内容。尽管不能看见标题和标语的文本，但它们仍然在底层的 XHTML 中。这意味着搜索引擎、搜索器和屏幕阅读器都能够获取需要的东西来处理页面。现在，我们面临更高级别的显示，它会 “模糊” 或隐藏内容。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)