Spry Menu 的應用技巧 Vertical Menu Bar

美工製作網頁選單如果使用 Dreamweaver 常會使用 Spry menu 來製作加快處理選單的作法. Spry menu 是一個方便的選單處理方式. 不過如果對於 css 不熟悉或是剛剛入門的設計師而言要製作稍微客製化的選單就有點難度.

先針對一般的選單設計, 要製作出這樣的選單如果使用 Spry menu 處理很快, 以垂直顯示(Vertical) 的選單來說,設定好選單項目內容稍微修改一下 css 項目就可以達成. 每次選擇一個選項, 就會在該項目右邊顯示出相同高度的次目錄.

例如: http://www.smdoor.com.tw/test4.html

但是如果客戶要求要把選單點選後的次選單位置統一固定高度顯示,初學者可能會傻眼, 不知道要去哪邊修改高度讓他每次選擇一個主選單後次選單固定在一致的高度位置顯示.

網頁製作中使用 Font 字型取代小圖示 (icon)

在製作網頁時往往會用到依些小圖示來標示, 讓網站內容更明確清楚, 現在有一個 font 字型可以使用來取代這些常用的小圖示, 讓網站速度變快, 也省掉相當多的製圖時間.

網址為 : http://fortawesome.github.io/Font-Awesome/

可以參考裡面的範例將所要的字型圖示加到網頁中.

在網頁中加入 Google 提供的動態天氣預報資訊

幫客戶製作網站的網頁時, 客戶提出想在網頁中加入及時的天氣預報資訊.搜尋網路上有提供相當多的相關資訊, 但是一直都不是很簡潔的處理方式.

有的是透過 Yahoo 提供的 API, 有的是透過 Google 提供的 API, 由於想要的是最簡潔的方式, 可以很單純的將現在的溫度跟天候狀態顯示出來,以及未來三天的預測. 所以選用了 Google 的天氣 API. 另外, 為了要讓天氣顯示美美的, 所以也加上了 jQuery 的 plugin, fisheye dock menu 

(http://blog.jquery.com/2007/05/09/fisheye-dock-menu/) 來當作美化介面使用. 這一個 plugin 除了可以使用來凸顯介面, 也可以當作選單使用, 就像你在使用 Apple 的介面一樣, 讓你的網站看起來不一樣, 有興趣的自行參考該網站.

Google 提供天氣的資訊是使用 xml 的方式傳遞資訊, 所以在我開發的過程中使用了 php 提供解析 xml 的函數 simplexml_load_file(). 這樣就可以方便將每一個 xml 現在跟預報中的資訊都擷取出來使用.

要使用 Google 提供的 xml 檔案, 就要先了解他的 xml 結構, 要使用 Google weather API 請到以下的網址 http://www.google.com/ig/api?weather=taipei 參數 weather=taipei 這裡請填你要查詢的地區, 以下是抓取台北(taipei), 的地區天氣資訊所傳回的 xml 檔案.