佳新的部落格

2009年2月16日星期一

如何用自建的圖示標籤來取代冗長的<img>標籤？

你知道的，網頁的內容若要豐富，難免會需要一些小圖示配合演出。至於是哪些時候呢？以我自己的情況為例，寫食記總得附上地圖連結吧，寫讀書心得總會附上購買書籍連結吧，再者大部分的部落格文章總離不開會有許多不可避免的參考資料連結吧，諸如此類。

我後來發現，如果這些連結前面可以加註分類圖示，一定會更加顯眼，提升被點擊的機會。如果需要製作GIF動畫小圖示的話，可以參考這篇文章。

關於在網頁裡面插入圖示的解決方案可能有很多種，最單純的就是利用<img>標籤了。只是這樣的標籤畢竟太冗長了，還要設定有的沒的屬性，比方說透過「style="border:0;"」來避免Blogger系統的某些版型會為圖片加上的外框。因此利用自建新的標籤來取來代之，將可以省下許多麻煩，不僅標籤插入的程式碼變短了，同時其名稱也可以命名成容易記憶的名稱，例如<icon_xxx>之類的。

關於前面提到過的地圖、購物車和參考資料等圖示的自建標籤程式碼如下所示：

icon_map {
  background: url("http://jarsing.com/gallery/icon_map.gif") no-repeat left center;
  padding-left: 20px;
}

icon_cart {
  background: url("http://jarsing.com/gallery/icon_cart.gif") no-repeat left center;
  padding-left: 20px;
}

icon_ref {
  background: url("http://jarsing.com/gallery/icon_ref.gif") no-repeat left center;
  padding-left: 20px;
}

在上述的程式碼裡面，必須留意幾點：首先，因為圖案是以背景圖載入的緣故，所以無法透過滑鼠來選取；再者，在今日普遍都是XHTML架構的網頁裡面，只要使用像是<icon_map/>這樣的標籤即可，不需要每次都寫<icon_map></icon_map>；最後，圖示大小是16x16，但是卻用padding-left硬是將呈現區域的寬度擴張為20px，並且將圖示置中擺放，形同左右各留白了2個像素寬。

喔，對了。在Blogger系統裡面，將上述這些程式碼放在「/* Page Structure */」區段之前，如此這些自建標籤就可以在部落格文章裡面使用了。

連結：製作GIF動畫的工具──Microsoft GIF Animator

《歐萊禮速查手冊》系列讀書心得

書名：CSS 速查手冊第二版
作者：Eric Meyer
編譯：莊惠淳
書號：A150
ISBN：986-7794-38-9
頁數：128頁
出版日期：2004 年 10 月
售價：199

我之所以會有感而發想要寫篇文章來加以討論，全是因為我手邊那本大約125頁、長18公分、寬11公分、厚1公分的《CSS2速查手冊》。

台灣歐萊禮（美國O'Reilly出版社的台灣分公司）出版的一系列口袋本的所謂速查手冊，因為頁數薄，為了方便裝訂之故，採用的紙質很厚，厚的話就會硬、難翻，導致閱讀起來不甚舒適，便利性大打折扣。就連「看到了某頁想要把書本翻過來蓋上，暫時壓著充當書籤，待稍後再回來閱讀」的簡單動作都不易達成，XD。

我手邊有幾本原文的（例如《Windows 2000 Commands Pocket Reference》），倒是沒這問題，可見台灣的出版社在閱讀便利性方面還得再多用點心才行。想了想，我已經不是頭一次碰上他們用過厚的紙來出版書了，不過即便是比較大本的正常尺寸書籍，硬硬的還是很難翻閱。

另一方面，這種速查手冊通常文字描述都少得可憐，有時候你可以看到某個東西有哪些屬性可用，卻不見得知道每個屬性的用途與意義。這對於reference指南性質的書籍來說，其實有點自廢武功，不過看在是口袋書形式的份上，只好自己有空再接著上網查詳細的資料吧。

2009年2月12日星期四

製作GIF動畫的工具──Microsoft GIF Animator

今天心血來潮，想到要幫部落格文章結尾處的網址連結參考資料前面放置專屬的圖示，以便彰顯這些連結的用途，例如「地圖」、「連結」、「工商服務」、「電影官網」等，提醒大家可以透過這些連結來獲得額外的資訊。

靈機一動，又想到可以弄成GIF動畫，不然我的美工能力如此粗糙，通常只能夠畫出16x16的單色線條式圖案來而已。但是如果可以變成動畫的話，不知怎地感覺上就是會有加分效果似的，突然忘卻了圖案上面線條和顏色的單調性。

遍尋網路的結果，發現微軟也有推出這樣的免費軟體，叫做Microsoft GIF Animator，也許是當年跟著製作網頁的FrontPage一起推出的吧。雖然也有看到非官方的中文化版本，不過壓縮檔裡頭居然暗藏病毒，真是太可怕了，所以咱們還是用微軟官方的英文版就好，小弟在此同步翻譯就請對照著看唄。

不過說實在的，這套Microsoft GIF Animator從2000年之後就好像沒有新版了，始終只找得到1.0版本的，再者其功能實在有點陽春，基本上就是幫你把圖片一張一張按時播放形成動畫而已，沒啥特殊功能可以再供你發揮了。要打分數的話，頂多是3顆星，也就是60分到80分之間的水準罷了。

總而言之，利用這套軟體來製作GIF動畫檔的步驟如下：

按下〔Open〕開啟第1張圖檔，接下來的圖檔都是按下〔Insert〕一張一張插入的。但是根據我的經驗，圖檔的放置順序是反過來的，也就是說如果有3張圖的話，要先開啟第3張，然後再依序插入第2張圖和第1張圖，或者你想要之後再透過〔Move Up〕或〔Move Down〕按鈕來移上或移下也行。另一方面，這套軟體支援的圖檔格式也十分有限，基本上只支援GIF和AVI兩種。
在標籤頁面的部分，基本上「Options」選項頁面的設定都可以維持預設值不必更動；切換到「Animation」動畫頁面，這裡可以設定是否循環播放（要的話就勾選「Loop」循環，否則動畫就只會播放一次而已），以及要循環播放幾次（要無限制循環播放的話就勾選「Repeat Forever」永遠重複）。
接著切換到「Image」影像頁面，這裡可以設定個別畫面的顯示時間（即「Duration」顯示時間欄位，單位是百分之一秒，所以半秒鐘的話就是輸入「50」），或者是按下〔Select All〕全選所有畫面，然後統一設定同樣的設定值。如果這個GIF動畫要以去背景的透明方式呈現的話，可以勾選「Transparency」透明，並將「Undraw Method」顯示方式下拉式選單選取為「Restore Background」還原背景，以免畫面彼此之間因為去背景而產生影像重疊的情況。因此這些插入的GIF圖檔是不需要事先去背變成透明的，這個動作在這套軟體裡面完成即可。
按下〔Preview〕進行預覽。
確認一切都沒有問題之後，按下〔Save As〕另存新檔，此時必須當心，如果按下的是〔Save〕存檔按鈕的話，則檔名會是最先開啟的那張圖檔，因此沒留意就按下去的話，將會覆蓋掉既有的檔案。所以這個動作必須十分小心，免得覆蓋掉重要的既有檔案，難怪在某些下載網站裡面，這套軟體只獲得2顆星，因為居然連覆蓋檔案的詢問對話方塊都沒有，真是太危險啦！

我用這套軟體製作3款圖示如下，請參考，ㄎㄎㄎ：