Web 設計開發工具

身為一個專業的程式設計師，難免必須要接觸UI設計。所以以前常用Gimp等修修小圖，做做按鈕…

這幾天發現了一個網頁開發工具，叫 WDT (Web Developer Tools) 。直接下載，點兩下安裝後，會出現在 應用程式→軟體開發，比較重要的功能有

• CSS 按鈕產生器 （拉一拉就產生CSS碼）
• JavaScript 壓縮容量與混餚
• 圖形按鈕美化產生

先說說CSS按鈕產生器，就快快樂樂拉一拉。測試後的結果…Chrome, Firefox 行。IE 不支援…跟我想的一樣，本來就不對IE抱著CSS支持度的希望

使用方式，就是把產生後的 css 碼貼到網頁上，然後使用 HTML A Element 來套用
<a class="button" href="0#">我的按鈕</a>
※複製的css碼有點bug，假設貼上後的碼
.button {
    border-top: ....
要把每行前面的空白去掉，不然css不會生效。因為那空白不是真的空白，只是不可見字元
向作者反應bug，不到12小時，就修正了 ^^

再來說說 JavaScript 壓縮容量與混餚

1. 先把JavaScript代碼貼上
2. 可以勾選Base64 encode，就會把原始碼編過。當然也可以不勾選
3. 按下Pack。不勾選Base64 encode的話，就是幫你壓縮容量，去掉換行等多餘字元
4. 輸出結果

最後介紹 Cool Button Generato，這是打磨你的圖形按鈕，讓按鈕不亮也光。但是限制圖形只能是正方形大小 32, 48, 64, 96, 128

沒有什麼屬性可以調整，簡單易用，直接選擇單一圖形，或選擇整個資料夾下的圖形去做美化。我的實測

原按鈕

美化成正方形

美化成圓形

打亮後的按鈕，應該叫 Aqua Style 吧，其實圓形的好像不太完美，但也不錯了。這樣UI比較有Web 2.0 的感覺了吧