CSS 排版協助工具

先前在 CSS 速戰速決 - 談多欄式編排 中提到有些工具可以在 CSS 泥沼中提供適當的協助，這篇則簡單介紹一下這些工具的使用效果，並作為後續 CSS 排版實戰編之楔子。

此處介紹兩大瀏覽器下各自的協助工具分別有：

• Mozilla Firefox 1.5.x/2.0.x

1. Firebug：Firefox 上 JavaScript 偵錯、CSS 排版、HTML 結構檢視的好工具，本來是偵對 JavaScript 偵錯而開發，最後持續演變成多功能版本。
2. WebDeveloper：Firefox 上最廣為人知的網頁開發工具箱，和 Firebug 不同的是它的訴求一直在頁面元素的處理上。
3. MeasureIt：檢視元素寬度或距離的工具。
4. ColorZilla：挑選顏色的工具，任何存在於 Firefox 瀏覽內的顏色皆可被挑選並轉成 16 進位的顏色代碼。

• Microsoft Internet Explorer 6

1. Internet Explorer Developer Toolbar：以下簡稱 IEDT ，算是個功能多但有些不足的工具。
2. IE WebDeveloper：這要花錢買，而且看起來功能也比較完整，可參考此篇介紹文章：超强的IE DOM查看工具：IE Web Developer V2。 此軟體不符所需，不必考慮。
3. CSSVista：一個可以同時檢視、修改 Firefox 及 IE6 中 CSS 設定的工具。使用前必須先安裝 .NET Framework 2.0 。
4. Inline CSS Editor：類似 WebDeveloper 中的線上編輯 CSS 功能，不過不支援透過 @import 引入之 CSS 設定檔。

檢視網頁結構

要快速的找到需要被開刀的對象是有訣竅的，直接點選頁面上的某元素並顯示其所在網頁結構（DOM，正式稱呼為 文件物件模型, Document Object Model ）是最便民的方式。

1. 使用 Firebug 檢視網頁結構
   
2. 使用 IEDT 檢視網頁結構
   

標示元素佔用範圍

1. 使用 Firebug 檢視元素佔用範圍，margin 及 padding 值會以不同顏色表示出來
   
2. 使用 IEDT 檢視元素佔用範圍，此處看不出 margin 及 padding 設定的影響
   

檢視 CSS 套用結果

1. 使用 Firebug 檢視 CSS 套用結果，除了 CSS 設定結果外還包含所在 CSS 檔名稱及行數、繼承自那一個父節點設定等資訊
   
2. 使用 IEDT 檢視 CSS 套用結果，只能檢視最終設定結果
   

量測頁面兩點間之距離

1. 使用 MeasureIt 量測頁面兩點間之距離
   
2. 使用 IEDT 量測頁面兩點間之距離
   

挑選顏色設定值

1. 使用 ColorZilla 檢視顏色設定值
   
2. 使用 IEDT 檢視顏色設定值
   

快速設定瀏覽器尺寸

使用這個功能可以快速查看版面設定在各種解析度下的顯示結果

1. 使用 WebDeveloper 快速設定瀏覽器尺寸，解析度設定可以自行新增
   
2. 使用 IEDT 快速設定瀏覽器尺寸，一樣可以自行設定特殊解析度
   

CSS 編輯支援

1. 使用 WebDeveloper 編輯 CSS 內容，目前我習慣先在 Firebug 上看效果後再回頭編輯 CSS 內容，編輯完後還可以存檔
   
2. 使用 WebDeveloper 載入本機上的 CSS 設定檔並套用，這是在不修改網站設定下立即確認 CSS 設定結果的最方便手段
   
3. 使用 Firebug 可以協助校正 CSS 定位不準確的情形，詳請參閱 Firebug and CSS Layout

工具下載

1. Firebug
2. WebDeveloper：是英文版，多國語言版中只提供簡體中文界面。
3. MeasureIt
4. ColorZilla
5. Internet Explorer Developer Toolbar 1.00.2188.0
6. CSS Edit

CSS Edit 的安裝與使用

1. 將 CSSEdit.zip 下載後解開壓縮檔可以得到 CSSEdit.dll 檔，放到 "%windir%\system" 目錄下（在檔案管理員上輸入上述路經即可），然後開啟 命令提示字元 視窗輸入以下指令即可安裝完成：

   regsvr32 "%windir%\system\CSSEdit.dll"

2. 使用時透過點選 IE6 選單中的 檢視 -> 瀏覽器列 -> Inline CSS Editor 即可啟用，如附圖：
   

其他

在擴充套件分類介紹的09. 網頁開發分類中有更多與網頁開發有關的 Firefox 附加元件，可以參考之！