用 Xyle scope 學習CSS排版

初學標準網頁排版，尤其是研究textpattern的版面，實際上還學不到什麼CSS的進階技巧，光是排版這檔事就讓人一個頭兩個大，每次看到一個喜歡或值得學習的網站，只能土法煉鋼的先檢視原始碼，找出css檔在哪，偷偷下載後對照網頁拼命研究，常常淹沒在那一堆標籤之中...

最近，幸運的找到了 Xyle scope 這套軟體；之前好像也曾在 Mobile01 上看過介紹，當初以為只是另一套CSS編輯器，老實說編輯工具太多了，太複雜的工具反而不利於學習，所以根本沒有去嘗試；但是，我搞錯了，Xyle scope 實際上的強項並非在與 CSSEdit 之類的編輯器競爭，套用一句 Xyle 網站上的介紹詞：

Xyle scope 是一套讓你戴上X光透視鏡瀏覽網頁的工具。

使用 Xyle scope 得從瀏覽開始，在網址列輸入自己的網站或是任何你想要學習的網站，先按下左上方的那個特殊按鍵：Boxes with format，然後再用滑鼠去點網頁上的任一位置，就會發現網頁上出現了遮罩式的不同陰影，網頁上使用 CSS 排版的格式箱全部一目了然！搭配右方視窗中即時跳換的CSS標籤，就可以解析出這個網頁排版是如何構成、如何組織在一起的。

即使瀏覽的不是自己的網頁，一樣可以試著在右邊視窗中修改CSS，例如改一下顏色、字形大小等等，左邊視窗裡的網頁就馬上呈現修改後的樣子。

我用 Xyle scope 來對照一些CSS教學書上的說明，很快的對原來CSS排版最頭痛的相對位置、欄距、邊框以及整體概念，都有豁然開朗的感覺！尤其是透過這套工具去觀摩學習一些優良設計的網站，幾乎都能很快的理解，而有 “原來人家是這樣做的啊！“ 的感嘆。

Xyle scope 或許還有更多的功能需要探尋，不過目前對我來說，真的是把它當成一副X光眼鏡在使用，對如我一般的初學者，實在是不可或缺的好工具啊！