在网页制作过程中,我们往往为了网页的美观采用不利于搜索引擎优化的图片来替代文字. 这个时候我们可以采用图像替换技术来帮助我们在美化网站的同时优化网站.

采用这种技术, 网页设计师能够用一张背景图像替代某元素中的原始文字. 这种技术实现起来非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span，看起来好像是一个图片,实际上在这个背景上有一个透明的span.

下来我们举例来说明:

HTML:
<h1 class=“logo”><a href=“/”>Company Name<span></span></a></h1>

CSS:
.logo {
margin:0; padding:0; height:45px; width: 210px; /* logo高45px,宽210px */
overflow:hidden; /* 防止文字溢出 */
position:relative; }
.logo a{ display:block; height:100%; width:100%; }
.logo a span{
display:block; height:100%; width:100%;
position:absolute; top:0; left:0;
background:url(logo.gif) no-repeat left top;
cursor:pointer; /* IE下显示为手型指针 */ }

这种图像替换技术比图像替换技术的提出者Todd Fahrner的Fahrner Image Replacement(FIR)要高明的多. 在CSS被禁用的时候,可以显示文字; 在CSS起作用但是图片被禁用的时候,可以看到文字; 在CSS和图片都起作用的时候, 因为 <span>被设置成和和<h1><a>在同一个位置和同一个大小. 这时候,图片会遮住后边的文字,使得它看起来完全就是一个图片.

这样,在文章的最开始,便用一个H1标签来显示你的关键字,其效果也是可以想象的了.

MisterWei最近整理了一些以前在网上收集到的关于CSS, DHTML, Javascript相关的免费资源, 列出来和大家进行分享.

1. CSS 2.0手册: 经典的CSS 2.0手册,由苏昱编写, 详细的列出了编写CSS时所用到的所有的相关信息
   点击下载CSS 2.0 手册(CHM)(CHN)
2. CSS入门指南: 14个章节,由浅入深的介绍了如何去使用CSS, 对于刚刚接触CSS的人来说是一个不可多得的好东西.
   点击下载CSS入门指南(CHM)(ENG)
3. DIV+CSS布局大全: 用详细的例子来演示了如何去布局DIV+CSS, 很多例子可以直接照搬到你的网站上.
   点击下载DIV+CSS布局大全(PDF)(CHN)
4. DHTML手册: 详细的介绍了一些DHTML的基本知识和技巧.
   点击下载DHTML手册(CHM)(CHN)
5. Prototype.js: 大名鼎鼎的prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙，而且兼容标准的类库，能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。
   点击下载Prototype.js(RAR)(CHN)