CSS tools: Difference between revisions

Jump to navigation Jump to search
19 bytes added ,  14 February 2012
m (Reverted edits by MaraFry (talk) to last revision by Planetoid)
Line 3: Line 3:
網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具
網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具
== 網頁設計樣式表(CSS)工具 ==
== 網頁設計樣式表(CSS)工具 ==
* {{Gd}}[http://litmusapp.com/labs CSSVista] for Windows XP/Vista v0.15 (freeware; 須安裝 [http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8edd-aab15c5e04f5 .Net Framework v2.0+])
* {{Gd}} [http://www.getfirebug.com/ Firebug] v1.5.4 for {{Fx}} ([http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/ How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com])
** 按滑鼠一下,選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector),即可顯示網頁元素屬性: ?
** 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 可預覽螢幕解析度800x600 & 1024x768 不同效果
** 可追蹤網頁各元素下載所需的時間
** 分割視窗同時顯示 [[MozillaFirefox|Firefox]] v1.7 ({{Fx}}) 與 Internet explorer({{IE}}) v6 瀏覽畫面
** 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)




* {{Gd}} [http://www.getfirebug.com/ Firebug] v1.5.4 for {{Fx}} ([http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/ How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com])
* {{Gd}} [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) v.1.00.2188.0 for Windows {{IE}}
** 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
** 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間
** 提供驗證工具(validator)
** 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)
** {{Gd}} 可結合[http://www.xenocode.com/Browsers/ IE6 ~ IE8模擬應用程式],並均可使用該開發者工具
 


* [http://getfirebug.com/firebuglite Firebug Lite] bookmarklet for {{IE}}, {{Fx}}, {{Chrome}}([https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench Firebug Lite for Google Chrome]), {{Opera}} or {{Safari}}
* [http://getfirebug.com/firebuglite Firebug Lite] bookmarklet for {{IE}}, {{Fx}}, {{Chrome}}([https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench Firebug Lite for Google Chrome]), {{Opera}} or {{Safari}}
Line 55: Line 56:




* [http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 Internet Explorer Developer Toolbar](開發者工具) v.1.00.2188.0 for Windows {{IE}}
* ''discontinued'' [http://litmusapp.com/labs CSSVista] for Windows XP/Vista v0.15 (freeware; 須安裝 [http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8edd-aab15c5e04f5 .Net Framework v2.0+])
** 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
** 按滑鼠一下,選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector),即可顯示網頁元素屬性: ?
** 可針對遠端網頁預覽CSS修改的效果
** 可針對遠端網頁預覽CSS修改的效果
** 提供驗證工具(validator)
** 可預覽螢幕解析度800x600 & 1024x768 不同效果
** {{Gd}} 可結合[http://www.xenocode.com/Browsers/ IE6 ~ IE8模擬應用程式],並均可使用該開發者工具
** 分割視窗同時顯示 [[MozillaFirefox|Firefox]] v1.7 ({{Fx}}) 與 Internet explorer({{IE}}) v6 瀏覽畫面


== 網頁製作相關工具 ==
== 網頁製作相關工具 ==

Navigation menu