Monday, June 19, 2006

用 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光眼鏡在使用,對如我一般的初學者,實在是不可或缺的好工具啊!

1 comment:

suzuki said...

我也想要用用這個軟體,可以給我嗎?超感恩!!