雖然使用影像來取代文字是最常使用的方式,
但是如果一個網站有很多的標題需要被取代,
那麼製作圖片、修圖、設定符合每個標題圖片的 CSS 語法,
將會是一件繁瑣又耗時的工作,更新維護工作就更累了。

所以這裡要介紹另外一種取代文字的方案,
那就是使用 Flash 來取代文字,嚴格來說,
它的限制會比用影像取代文字更多,門檻也更高,
但這種方式能夠自動縮放 Flash 物件的大小,
以符合原 HTML 文字區塊大小範圍,應用起來很方便。
即使瀏覽器不支援 Flash 或是 JavaScript ,
一樣能保留原先並顯示原先的 HTML 文字。

這個方式需要用到三種格式類型的檔案:
FLA 檔,用來展現文字,修改後輸出成 swf 檔
JS 檔,用來偵測及設定 swf 檔
CSS 檔,用來調整 Flash 與標題 Hx 系列的關係

在開始之前,請先下載三個檔案:
sifr.fla  sifr.js  sifr.css

1. 完成頁面標題和文字,如下圖:
flash-text1.gif

此範例 CSS 語法(可一起加入後面的 CSS 檔):
h1{
color:#06c;
font-size:250%;
font-family:Georgia, "Times New Roman", Times, serif;
line-height:1.45em;
}

p{
width:550px;
text-align:justify;
}


2. 製作 Flash 標題文字
使用軟體開啟編輯 sifr.fla 檔(如 Adobe Flash),
輸入文字和更改為您想要的字型,輸出swf檔,檔名隨意。
(暫時沒有軟體編輯,可以先下載做好的
wc_roughtrad_bta.swf 回去嚐鮮)

3.1 插入 JavaScript 語法
Flash 文字檔完成之後不是直接套用就可以,
還需要靠 JavaScript 來控制 Flash,
使用 JavaScript很簡單,將語法插入網頁,
再修改一下 JavaScript 檔案的內容即可,
將下面這一行插入 <Head> 標題之間,

<script type="text/javascript" src="java/sifr.js"></script>

黃色部份替換成實際檔案名稱和路徑。

3.2 修改 JavaScript 檔案內容
使用網頁編輯或文字編輯軟體開啟 sifr.js 檔,
裡面大部分是跟 Flash 偵測與 DOM 有關的語法應用,
直接拉到最下面,可以看到以下這一行:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac &&
(!sIFR.UA.bIsWebKit || sIFR.UA.nWebKitVersion >= 100)){
    sIFR.setup();
};

在 sIFR.setup(); 後面加入以下內容:
sIFR.replaceElement(named({sSelector:"h1",
sFlashSrc:"flash/wc_roughtrad_bta.swf",
sBgColor:"#ffffff",sColor:"#0066cc",sWmode:"transparent"}));


sSelector:標籤選擇器,如 h1、h2、h3。
sFlashSrc:用來替換文字的 Flash 檔案位置。
sBgColor:設定 Flash 背景色彩。
sColor:設定文字色彩。
sWmode:設定 Flash 視窗模式

修改後存檔,重新載入頁面
可以看到畫面出現了兩個標題,
那是因為用來定位和設定版面的 CSS 檔還沒設定完畢

flash-text2.gif

4. 加入 CSS 檔
sifr.css 檔本身已經包含了很多預設規則,
以便讓 Flash 能夠符合 h1 到 h5 的標題區塊大小,
只要在 <HEAD> 標籤內加入以下這行:
<link href="CSS/sIFR.css" rel="stylesheet" type="text/css" />
添加外部 CSS 檔,黃色部份改成實際檔案及路徑

依據標題文字字型種類及大小不同,
可能還需要做一些細部 CSS 設定,如字距設定。
最後結果如下:
flash-text3.gif
範例網頁

arrow
arrow
    全站熱搜

    ALVIN 發表在 痞客邦 留言(0) 人氣()