(1)首先在站点上创建子文件夹用来保存sIFR代码。在seophp文件夹下面创建文件夹sifr,则sIFRr的完整路径是/seophp/sifr/
(2)下载sIFR。登陆到http://www.mikeindustries.com/sifr/找到页面顶部的下载链接。最新的压缩包直接下载地址是http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR2.0.2.zip
(3)在/seophp/sifr文件夹下压缩sIFR。该目录的文件夹看上去应如同图6-4所示。
(4)需要使用Macromedia Flash打开sifr文件夹下的sifr.fla文件。如果没有安装Macromedia Flash,可以在http://www.adobe.com/downloads上下载试用版,或者到软件下载网站去下载,例如http://www.softpedia.com。
(5)如果正确地安装了Macromedia Flash,就可以打开sifr.fla文件了。
(6)刚刚下载的sifr.fla脚本可以将字体嵌入到swf文件中,来修饰图片文本。对想使用的任何字体,都需要遵循以上相同的步骤。这个示例选择了Trebuchet MS字体。在工作区中间的空白面板处双击,会出现文本“DO not remove this text.”,并且Properties窗口会加亮。单击Properties窗口的Font复选框,然后选择想要使用的字体。
(7)通过File|Export|Export Movie命令可以导出新的文件。当询问保存的文件名时,可以按照所选择的字体取名,因为导出这个文件就是为了保存该字体。
(8)单击Save按钮后出现选项表单,保留它的默认值,确保导出的文件是Flash播放器6的格式,然后单击OK按钮。
(9)创建完文件后,就可以关闭Macromedia Flash。不需要对sifr.fla保存做任何改变。
(10)打开catalog.php,同时添加对sifr.js的引用。注意,catalog.php是在以前的章节中创建的。
<?php
require_once 'include/url_factory.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml111.dtd>
<html>
<head>
<title>The SEO Egghead Shop</title>
<script src="sifr/sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="sifr/ssIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sifr/sIFR-print.css" type="text/css" media="print">
</head>
(11)最后,在所选择的想要替换的字符串上启用sIFR技术。包含JavaScript代码,从而可以使得页面下载时实现这个效果。在catalog.php中的</body>标签之前,增加如下代码。
<!--sIFR replacement code-->
<script type="text/javascript">
{
sIFR.replaceElement(named({sSelector:"body h1",sFlashSrc:"./sifr/super_font.swf."}));
};
</script>
</body>
</html>
(12)至此便完成了。如果禁用JavaScript之后,加载http://seophp.example.com/catalog.html,就会看到这种类页面使用默认的标题字体。如果希望的话,也可以使用CSS来对未启用JavaScript的用户进行文本样式定义。
(13)在启用JavaScript和Flash的情况下加载相同页面,就能用新的字体来绘制标题。
在所有的配置工作完成之后,sIFR就真正容易使用了。对初学者来说,需要在创建Flash应用时包含想发布给用户的字体。可以为不同的单元使用不同的字体,但对此次练习一种字体就已足够。
为了能够有效地使用sIFR,需要在catalog.php脚本中引用sIFR JavaScript库及其两个CSS文件。
<script src="sifr/sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="sifr/sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sifr/sIFR-print.css" type="text/css" media="print">
在引用JavaScript库之后,就只需要使用它即可。仅仅引用sifr.js本身没有任何效果,不过有趣的地方马上就要来了。将下面的代码添加到catalog.php的未尾,利用sIFR.replaceElement()函数来取代所有<h1>标签,然后Flash文件会修饰文本。
<!--sIFR replacement code-->
<script type="text/javascript">
if(typeof sIFR=="function")
{
sIFR.replaceelement(named({sSelector:"body h1".sFlashSrc:"./sifr/super_font:swf"}));
}
</script>
(typeof sIFR=="function")条件检查sIFR库是否安装成功。因此,如果忘记引用sIFR JavaScript库,脚本就不会尝试调用sIFR.replaceElement()函数。
replaceElement()函数支持很多参数,但必不可少的是sSelector参数和sFlashSrc函数。除此之外,还支持许多参数,可以根据需要对替代选择进行细微调整。
加上最后这一小段代码,所有的工作就完成了。网页将默认以替换的文本工作,如果Flash和JavaScript不被用户代理支持,网页会显示以替换前的默认页面字体。