CSS Guy說他用Dreamweaver這麼久，唯一會想念的功能就是畫表格，特別是幫某欄的所有儲存格加上class的時候。

所以他做了一個簡單的線上小工具：Kotatsu，可以增加欄或列，然後為指定的欄或列加上class，最後產出表格的HTML原始碼。

雖然可以用colgroup，我自己也是最喜歡用Dreamweaver去幫欄列加上class，所以這個簡單的工具對我來說很實用啊。

附註：

• Kotatsu是日文暖桌、被爐的意思。
• Oops，這個工具在IE裡面無法使用。

Designers Toolbox提供了在Windows XP和Mac OSX底下的表單元素（PSD檔案），包含IE、Firefox和Safari共四種版本，對網頁設計師而言，既實用也值得收藏。

由planetOzh製作的The Lightbox Clones Matrix，不光是單純將蒐集到的Lightbox特效列表，還將各種屬性作成表格綜合比較，包括：

• javascript檔案大小（不含CSS、影像等）
• 採用的javascript library（未壓縮的library檔案大小）
• 前述兩者的綜合檔案大小
• 是否支援影像
• 是否支援影像群組
• 是否支援其他物件，如inline content、Ajax content、iframe、video、Flash

更酷的是這張表格透過jQuery，製作了動態的篩選與排序功能。使用者可以快速地找出哪個Lightbox特效是基於jQuery，哪個有支援Flash物件，哪個有支援影像群組，真的節省不少時間。

由於瀏覽器版本的不同，呈現的內容可能會稍有出入（以Firefox為準），雖然表格的內容可能並非百分百正確，但絕對值得開發人員和設計師收藏到書籤裡。

在jQuery底下，要檢查某元素是否存在，我ㄧ開始是這樣寫的：

原本一切看似正常，後來卻發現，某個頁面明明沒有#myid，但是底下的alert動作仍然照常執行。

Google一下，在jQuery HowTo’s正好有解答。原來使用$()呼叫物件時，jQuery永遠是有求必應地傳回物件給我們。所以上面這個條件式永遠都成立，有寫跟沒寫一樣。

正牌的寫法，是要利用jQuery傳回陣列的特性，用length來檢查陣列長度：

當然直接用getElementById來寫也是可以的：

很久以前在Smiley Cat看過一篇教學，將整個區塊元素變成可連結，並且在滑鼠移過時變換背景顏色：

要完成這個效果，有兩個重點：

• 必須讓整個區塊產生滑鼠移過會改變背景顏色的hover effect。
• 必須讓整個區塊可以連結。

在Smiley Cat的教學中，利用CSS設定將 a 元素改為display:block，因為 a 元素除了可以連結之外，在CSS中，又能使 :hover 這個偽類別（pseudo-classes）產生作用（:hover如果不用在 a 元素，而用在其他區塊元素如 li:hover，IE 6是不支援的）。

而最近Web Designer Wall則有一篇jQuery十大特效的教學（jQuery Tutorials for Designers），裡面的第六項：Entire block clickable，提到如何用jQuery來達成相同的效果。我借用了它的XHTML原始碼與部份的CSS，並做了一點修改，讓區塊變換背景顏色與連結的效果都採用JQuery控制，成果請見demo頁面。 | 繼續閱讀…