宣傳網站的利器——DIY個人化iGoogle主題收藏

摘自《Google API大全——編程·開發·執行個體
》第10章“iGoogle主題設計”10.2節

10.2 建立主題的步驟

為iGoogle製作主題，除需要有藝術天賦外，還需要有Web設計、編寫代碼、調試等電腦相關知識。

簡單地說，建立一個主題有以下3個步驟：

• 視覺設計。包括頁首和頁尾的橫幅設計，各個模組的配色等。對Web設計不熟悉而有藝術天賦的設計者對橫幅設計的一些要求可能不那麼容易理解，本章將重點講解。
• 代碼實現。把視覺設計轉換成iGoogle能讀懂的XML檔案。
• 測試並提交。

下面以iGoogle全球版的最新版本為基礎進行講解。此版本在原有版本上有大幅改進，API也有較大變動。涉及新老API不同時，文中會加以說明。iGoogle中國版（www.google.cn/ig
）目前還是適用於舊版API。

10.2.1 視覺設計

開啟iGoogle，可以看到，介面由4部分組成：頁首、頁尾、內容地區和左側導航（新版），這些都可以在主題中進行定製。

可以根據iGoogle關於主題內容的指引（http://code.google.com/apis/themes/programpolicy. html
）來選擇是放照片還是繪畫作品。筆者認為最容易被開發人員們忽視的有以下相關規定：

• 不要把品牌要素放在指定地區之外。也就是說，不能在頁首的橫幅圖片裡面做廣告。創意需要的文字可以放在頁首的橫幅圖片中，但製作者的名字、logo和廣告語等都不允許放在其中，因為頁尾有專門署名的位置。
• 不要在設計中自行添加iGoogle和Google的logo。
• 背景映像的設計不能干擾頁面上的iGoogle logo——iGoogle 7個字母，也就是說iGoogle徽標附近不能有複雜的圖案，背景映像不能看上去像是與iGoogle徽標進行互動，徽標也不能和背景顏色過於接近等。
• 設計必須不影響iGoogle本身的可用性，主要是指文字、連結等必須仍然清晰可辨，不會給使用者的使用帶來困難。

詳細規定可以瀏覽http://code.google.com/apis/themes/programpolicy.html
。

頁首的設計

頁首地區是一個iGoogle主題最引人注意、最容易被識別的部分。在UI的實現上，頁首由四個層次構成，從下到上依次是：

• 背景顏色。如果沒有圖片或圖片因網路等原因無法載入時，背景顏色會顯示出來。
• 一張從中心開始向兩邊重複平鋪的背景圖片。
• 一張置中顯示的前景圖片。
• iGoogle徽標、搜尋方塊和連結文字等。

圖10-1以“江南”為主題，說明這個關係：

下面，重點講講平鋪圖片和中心圖片的關係。對於仔細設計的iGoogle主題而言，頁首的映像看上去像是一張圖片，而事實上由兩張圖片組成的：一張
在後面平鋪，一張置中顯示。為什麼要這麼做？因為iGoogle的設計是自適應瀏覽器寬度的，也就是說，使用者的顯示器有多寬，這張圖片所佔的位置就可能有
多寬。如果不想兩邊留白，最容易的解決方案就是設計一張超大的圖片。然而，大圖片就意味著使用者需要等待更長的時間，尤其對螢幕解析度不大的使用者來說，更浪
費時間。

圖10-1 以“江南”為主題的樣本

在iGoogle實際應用中，背景的平鋪圖片先載入，這張圖片從頁面的中心開始，向兩邊無限地重複平鋪，而且整個平鋪的效果使這張圖片的左邊界和右邊界完美銜接，見圖10-2所示。

圖10-2 載入背景平鋪圖片

背景圖片鋪完以後，再在其正中心載入一張前景圖片。前景圖片不平鋪，但其左右邊界也必須和它下面的背景圖片完美銜接，見圖10-3所示。

圖10-3 載入前景圖片

無論使用者的解析度有多大，背景圖片看起來都應該是一張大圖片，不能有明顯的接縫。設計者可以用比較靈活的方式來達到這個要求，舉例如下：

• 只用一張背景圖片，不用前景圖片。保證背景圖片平鋪時能銜接即可。下面這個Simplicity is complex主題的寬度約為3000像素（下同），見圖10-4所示。

圖10-4 背景圖片

• 只用一張前景圖片，不用背景圖片。保證前景圖片在邊緣處已經漸層到了背景的純色即可。例如，Earth hour主題，見圖10-5所示。

圖10-5 前景圖片

• 前景圖片使用透明背景的GIF或PNG映像，背景部分使用背景圖片和背景顏色都可。前景圖片的透明部分會直接顯示出背景部分，只需要完美融合即可。一般來說，這要比保證接縫處的融合容易。Bus stop的主題使用的是這個方法，可以參閱http://code.google.com/apis/themes/docs/dev_guide.html#Header
  中的介紹。

可以在應用這些主題後，使用Firebug等工具查看這些圖層到底是如何拼合的。

頁首映像高度規定為175像素，可以使用JPG、PNG或GIF圖片。使用PNG圖片時請注意，一些舊的瀏覽器如IE6對帶有透明通道的PNG圖片支援有限。

下面該談談徽標的選擇了。

可以為自己的主題選擇一個相匹配的iGoogle徽標。Google備有24個不同顏色的徽標供設計者選擇，詳情可到http://code.google.com/apis/themes/docs/reference.html#Ref_Logos
中瀏覽。

關於徽標的選擇規定，請參閱前面的介紹。

頁尾的設計

頁尾部分的結構和頁首相似，同樣要使用兩張圖片來實現無限延展的效果，在此不加贅述，但圖片高度的要求變為140像素。

在頁尾，還可以放置一個100像素寬、50像素高的署名映像。署名會出現在頁尾地區的右上方，內容可以是設計者的名字、簽名或徽標。具體規定，請仔細閱讀政策頁（http://code.google.com/apis/themes/programpolicy.html
），以免在提交主題時被拒絕。

色彩配置

iGoogle允許指定頁面中許多元素的顏色。顏色的數值可以是6位的十六進位數值（#XXXXXX），也可以是CSS中的通用色彩名字，共有28個顏色值可以供使用者指定，列舉如下：

（1） 頁首部分：背景顏色，連結文字顏色，非連結文字顏色。

（2） 左側導航（新版）：背景顏色，邊框顏色，表徵圖顏色，選中標籤中的連結文字顏色，未選中標籤中的連結文字顏色，未選中標籤的邊框顏色等。

（3） 頂部導航標籤欄（舊版）：標籤邊框顏色，選中標籤的背景顏色和文字顏色，未選中標籤的背景色和文字顏色等。

（4） 聊天工具：連絡人名字顏色，連絡人狀態顏色，滑鼠滑過連絡人時的背景顏色，浮動連絡人卡片的邊框顏色，新連絡人邀請的背景顏色、邊框顏色、連結文字顏色和非連結文字顏色，聊天視窗的背景顏色，高亮狀態下聊天視窗的背景顏色等。

（5） 內容部分：內容地區的邊框顏色，每個小工具的邊框顏色、標題列背景顏色、標題列文字顏色、標題列表徵圖顏色和內容中的連結顏色僅對內聯的小工具有效。

（6） 頁尾部分：背景顏色，連結文字顏色，非連結文字顏色。

關於小工具標題列的表徵圖顏色，新舊版API的指定方式略有不同。在舊版的API中，對於每個小工具右上方的3個操作按鈕，要分別指定在不同狀態下調
用的圖片地址；4個按鈕中，每個按鈕有兩個狀態，一共就是要指定8個圖片地址。而在新版API中，只要指定一個標題列表徵圖顏色。不是所有的顏色都可以用於
標題列——可供選擇的顏色請參閱參考資料（http://code.google.com/apis/themes/docs/reference.html#Ref_Icons
）。

動態主題

每個主題下面可以包括多個皮膚。在設計主題時，可以指定不同的皮膚在不同的時段顯示。通過這個功能，可以設計出許多有趣的Theme。例如：假如設計能反映每天不同時段的心情，或者通過不同的時段講述完整的故事，一定會讓使用者更感親切。

但由於深夜iGoogle的使用者不會有其他時間那麼多，這段時間的主題變化可以減緩，以減少工作量。有關資料表明，午休時段和黃昏時段，iGoogle的使用者最多。

10.2.2 編寫XML文檔

完成上述工作後，可以開始編寫代碼。每個iGoogle的Theme都由一個XML文檔表示，該XML文檔中的索引值對，就表示設計的各種屬性，如頁首背景圖片、連絡人名字顏色等。一個Theme檔案的基本結構如下：
<?xml version="1.0" encoding="UTF-8" ?>
<ConfigMaps>
  <ConfigMap type="Skin">
    <Meta name="title">Simple Theme</Meta>
    <Meta name="description">Simple theme example.</Meta>
    <Meta name="author">Rowan</Meta>
    <Meta name="author_email">Rowan@gmail.com</Meta>
    <Meta name="thumbnail">http://gmodules.com/ig/images/skins/ig_thumb_beach

. jpg</Meta>   
  </ConfigMap>
  <ConfigMap type="Skin">
    <Attribute name="header.background_color">teal</Attribute>
    <Attribute name="header.logo">white</Attribute>
    <Attribute name="header.link_color">blue</Attribute>
    <Attribute name="header.text_color">black</Attribute>
    <Attribute name="gadget_area.gadget.header.background_color">teal</Attribute>
  </ConfigMap>
</ConfigMaps>

每個Theme檔案都至少包括兩個Config
Map，其中一個是Theme的屬性，另外一個是具體的設計。如果一個Theme內包括多個皮膚，也就是所謂的動態主題，那麼可以包括多個皮膚設計，並通
過標籤和TimeOf Day屬性來指定不同皮膚適用的時間段，指令如下：
<ConfigMap type="Skin">
  <Trait name="TimeOfDay">12am-1am</Trait>
  ...attributes...
</ConfigMap>
<ConfigMap type="Skin">
  <Trait name="TimeOfDay">1am-2am</Trait>
  ...attributes...
</ConfigMap>

每個皮膚使用的時間段可以有多個，但互相之間不能有重疊。iGoogle還規定時間段不能跨過午夜12點（12am）。如果確實須要跨夜，可以把它拆成兩個來寫。如要表示晚上10點到第二天6點，可以這樣寫：
<Trait name="TimeOfDay">10pm-12am</Trait>
<Trait name="TimeOfDay">12am-6am</Trait>

也可以使用多個Config Map來表示不同語言、不同國家地區版本的Theme基本資料，通過標籤和TimeOf Day屬性來指定不同配置適用的語言和國家地區。如下指令：
<ConfigMaps>
  <ConfigMap type="Skin">
    ...meta attributes... 
  </ConfigMap>
  <ConfigMap type="Skin">
    <Trait name="Language">zh-CN</Trait>
    ...meta attributes...
  </ConfigMap>
</ConfigMaps>

前一個Config Map表示了預設的 Theme資訊，後一個Config Map則特意指定了簡體中文版中的資訊。

具體的設計項目及對應的XML屬性，請參閱API文檔（http://code.google.com/apis/ themes/docs/reference.html
）。但有兩點注意事項：

1. 顏色代碼不能使用3位元的簡寫。也就是說，不能寫成#123，而必須寫成#112233。

2. 裡面所有的URL都必須是絕對URL。

10.2.3 開發、測試和提交

XML完成後，就可以在iGoogle的實際環境中進行調試。

首先，需要把XML檔案連同圖片上傳到一個公用的Web伺服器。必須核實XML中指定的圖片URL地址是否和上傳後的地址一致。如果沒有合適的伺服器，Google Code的Project Hosting服務是個不錯的選擇。

然後，開啟iGoogle，在地址後面加上一個?skin=參數。表示要測試的XML檔案的絕對URL。如果順利，應該可以看見Theme的效果；如果看到的是iGoogle的預設藍色風格，說明Theme存在問題，請仔細檢查文法，以及有沒有違反上述格式的規定。

仔細檢查Theme的效果，特別是一些第一眼看不見、容易被忽視的功能。如刪除一個小工具後頁首中會出現一個小提示，詢問使用者是否撤銷剛剛的操作，這時候文字就不一定容易辨認了。細節非常重要，使用者往往會因為一個細節而棄用某個主題，不管這個主題的其他部分是多麼好。

測試沒有問題後，可以到http://www.google.com/ig/skin_submit
提交。提交時程式會檢查XML有沒有語法錯誤、圖片是否可訪問等，如果沒有問題，就會提交到後台等待審核。如果沒有任何非技術的問題，在1～2個工作日內，設計者設計的Theme就會出現在iGoogle的主題目錄裡。

iGoogle的主題通過後，所有圖片會被iGoogle抓取過去緩衝，所以不用擔心自己伺服器流量問題。另一方面，如果要更新主題的設計，即使只是更新圖片，都要重新提交主題。

相關閱讀：
雲端運算開發的技術平台前景無限
（Google開發技術推广部中國市場首席經理欒躍作序推薦）
品原創 讀執行個體 享互連網開發之趣
（Google資深研究員吳軍作序推薦）
《Google API大全——
編程·開發·執行個體
》互動網預定請點這裡
，卓越亞馬遜預定請點這裡