網頁唯美派 6 -- 製作「我的最愛」圖示

( 此為舊的兩隻老虎網站, 全新的兩隻老虎 blog 在此 . jUst cLick here ! )

瞭望 Web Services

無廢話 XML eBook

?U﹐u!u|p|oA3|O|‥?° Adobe ?{￥i±MRa!veBook

成為 Adobe 認可專家

網頁唯美派

網頁唯美派 6 --
製作「我的最愛」圖示

( 2002 / 10 / 1 )

為網站製作專屬的「我的最愛」圖示 (icon)，能幫助你的網頁在瀏覽者一大堆的「我的最愛」選單裡搶眼突出，如果網頁被設定成桌面上的捷徑，icon 也會顯現出來。唯一小小的局限是: 只有使用 IE 5.5 以上瀏覽器的人才能看到這個圖示。

Step 1：使用專門製作圖示的軟體

使用你最習慣的專門製作圖示 (icon) 的編輯工具，例如：Microangelo、GoldIcon 等（網路上都有試用版可供下載），製作一個長寬尺寸剛剛好 16x16 像素的圖示。長寬尺寸不要大於或小於 16 像素，否則出現在螢幕畫面時，會硬被縮放扭曲成 16x16 像素，反而影響外觀畫質。

-- 筆者使用 Microangelo 5.5 這個專門製作圖示的編輯工具，
來製作「兩隻老虎」網站的「我的最愛」icon。

Step 2：使用 ImageReady 製作圖示

如果你不熟悉如何操作專門製作圖示的編輯工具，也可以先在熟悉的 Photoshop、ImageReady 軟體裡先完成繪製工作，將它儲存為 GIF 檔。最後再利用專門製作圖示的軟體，將 GIF 檔轉存成圖示專用的 Icon Resource 就可以了。

1. 例如筆者網站裡的「我的最愛圖示」，一開始先在 ImageReady 裡開啟一 16x16 像素的新檔案，使用「鉛筆工具」描繪上紅色背景色、與黑灰色邊框。

2. 接著鍵入「虎」字，因為字體很小，只有 12 點，所以要特別指定去除「反鋸齒」效果，亦即在 ImageReady 最頂端的選項工作面板裡 (Options bar)，將文字效果設為「none」。

-- 如果使用 ImageReady 製作圖示，記得要將文字效果設定為「none」，去除「反鋸齒」效果。

3. 叫出「最佳化」工作面板，將色盤裡的顏色數量盡可能壓低。

至於設定透明色的設定，即使你在 ImageReady 裡設好了，最後呈現出的圖示並無法反映出來（因為 ImageReady 只提供 GIF 檔轉存，並不提供 ICO 圖示檔的轉存）。所以透明色的設定，我們留待進入「專製圖示的編輯工具」裡，再來完成。

4.我們現在已完成了在 ImageReady 裡的工作，將圖形最佳化、儲存為 GIF 檔，執行 File / Save Optimized。關閉 ImageReady。

-- 在 ImageReady 裡，將圖形最佳化，儲存為 GIF 檔。

5. 在「專製圖示的編輯工具」裡，打開剛才繪製好的 GIF 圖形，指定某幾個像素為透明區塊，最後完成後，將此圖示儲存為 favicon.ico（大小寫均可，但必須完全一模一樣的檔名與副檔名）。

Step 3：將圖示放置在根目錄

將 favicon.ico 放置在你的網站的根目錄裡（亦即放置在與網站首頁同一級處），例如：http://www.xxx.com /favicon.ico，那麼當瀏覽者到達你的網站時，在瀏覽器的網址列裡就會自動呈現出這個圖示（你並不需要特別在網頁裏添加任何 HTML 碼）。

而當瀏覽者將你的網頁收納成「我的最愛」時，這個 favicon.ico 也會一起呈現在瀏覽者的「我的最愛」選單裡。如果將它設定成桌面上的捷徑，則 favicon.ico 也會出現。

很重要的一點是：
欲測試預覽此 favicon.ico 效果，你必須真的連上線，將此 icon 上傳到 web 主機內，然後打開瀏覽器，連結到你的網站，將你的網頁儲存為「我的最愛」，如此才能觀看到 favicon.ico 的真實效果。如果做了以上動作，還是看不到 favicon.ico 效果，則把瀏覽器完全關閉，然後再重新啟動，就可看到「我的最愛」icon 了。

-- 當瀏覽者將你的網頁收成「我的最愛」時，favicon.ico 會一起呈現在瀏覽者的「我的最愛」選單裡。而當瀏覽者到達你的網站時，網址列裡也會呈現出這個圖示。

Step 4：各別網頁搭配各別圖示

如果你的網站根目錄並非直接隸屬於某網址之下（例如：http://www.xxx.com/），而是再次幾個層級（例如：http://www.xxx.com/yy/zz），那麼你可能無法直接將 favicon.ico 放置在網站的最高層級裡（例如：http://www.xxx.com/），這時你可使用另外一種方法來放置 favicon.ico。

將下列的 HTML 碼安插在 <HEAD> 標籤裡：

將 href 指向你的 favicon.ico 所在之處即可。

用這個方法的好處是：因為你已明確指定連結某 icon 的路徑、檔名，因此你可以為網站裡各個不同系列的網頁，各自搭配不同的圖示。而 icon 檔名也不再嚴格局限於 favicon.ico 此固定檔名，你可以取任何適當、易辨認的檔名，只要是 ico 格式即可。

Step 5：下載物件「Favorites Icon」

1. 如果你懶得自己鍵入 Step 3 提及的 HTML 碼，你也可以連結到 Macromedia Dreamweaver Exchange 網站，下載「Favorite Icon」物件。

執行 Help / Dreamweaver Exchange，到達 Macromedia Dreamweaver Exchange 網站。搜尋一個名叫「Favorites Icon」的物件，將它下載下來，Dreamweaver 的 Extension Manager 會自動將此物件安裝起來（如果你沒有最新版本的 Extension Manager，記得要先下載、安裝）。

2. 關閉你的 Dreamweaver 程式，再將它重新啟動，以便讓剛才安裝的物件生效。

3. 打開欲加入 icon 的網頁，執行 Insert / Head Tags / Favorite Icon 即可。或者在 Insert 列上點按 Head 標籤，點按「Insert Favorite Icon」按鈕。

-- 下載「Favorite Icon」物件，方便在任何網頁裏加入「我的最愛」icon，如此就不用自己手動鍵入 HTML 碼了。