使用图像取代文字技巧制作网页标题

        网站制作的其中一个难题，是可以选用的中文字体极有限，正确地讲，只可使用预设的字体，即Windows 附带的新细明体。 新细明体的弊处是放大时锯齿很明显，当需要用较大字体制作网页标题时，其效果之差，很多客户都不会接受。

    于是大部分网页设计者都会使用图像来制作标题，不过对于讲求搜索引擎优化效果来说，这方法令标题内只有图像，不可放入关键字词，而从讲求语义网 (Semantic Web)的角度看，没有文字的标题亦是不可接受的事情。

      其中一个解决的方法是使用CSS 的图像取代文字(image replacement) 的技巧，令指定的图像既有文字的网页代码，显示时则用图像取代。图像取代文字技巧在5年前已有人提出，当中有很多不同的实行方法，《 Nine Techniques for CSS Image Replacement 》归纳了不同方法和其利弊。 可以说没有一个实行方式是十全十美的，网站建设协策网络认为大家使用时有几点要注意：

     1.在大部分的浏览器都可正确显示

    2.考虑网页亲和力，照顾要使用萤幕阅读器的人士

  3.应该只在网页标题上使用此技巧，网站的选单如使用图像制作，则可在网页底部加入一个文字选单

   基于以上考虑条件，Gilder/Levin Method 是一个最合适的方法，其实行方式如下：

1.

2. <h1 class= "title-text" title= "网页标题" >

3.网页标题</h1>

4.CSS:

5.h1 .title-text {

6. width : 220px ; height : 50px ;

7.position : relative ;

8. }

9. h1 .title-text span {

10.background : url ( "images/webpage-title.gif" ) ;

11. position : absolute ;

12.width : 100 % ;

13. height : 100 % ;

14.}

示范

要注意的就是要加入一个空白的span，及图像不能有透明部分，而且要比文字长。

有人担心使用图像取代文字技巧，和搜寻器痛恨的隐藏文字优化方式有些类似，恐怕优化不成反被惩罚。的解说，安心地使用这技巧。

本文由上海网站建设协策网络(http://580plan.com/)发表，转载请以链接形式注明出处，谢谢！