Editing CSS tools

{{Template:Build a website}}

網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具
== 網頁設計樣式表(CSS)工具 ==
* {{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])
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間
** 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)


* {{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
** 可針對遠端網頁預覽CSS修改的效果
** 提供驗證工具(validator)
** {{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}}
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** '''無法''' 追蹤網頁各元素下載所需的時間

* [https://chrome.google.com/extensions/detail/nnklpgoldelpoigiacfpnpphpkkmbdkb csscan] for {{Chrome}}
** 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
** '''無法'''針對遠端網頁預覽CSS修改的效果
** '''無法''' 追蹤網頁各元素下載所需的時間

* Google chrome瀏覽器 v.13.x 內建工具: 滑鼠點右鍵，選擇「檢查元素」
** 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
** '''無法'''針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間 (切換到 Network 標籤)

* [http://www.opera.com/dragonfly/ Opera Dragonfly] (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) {{Opera}}
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 可追蹤網頁各元素下載所需的時間

* [http://chrispederick.com/work/web-developer/ Web Developer extension] v1.1.4 for {{Fx}}
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 可針對遠端網頁預覽CSS修改的效果
** 提供驗證工具([[Validator]])


* [http://www.debugbar.com/?langage=en DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer] for {{IE}}
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
** 無法針對遠端網頁預覽CSS修改的效果
** 提供驗證工具(validator)


* [http://www.newsgator.com/individuals/topstyle/default.aspx TopStyle] Lite 3.5 for Windows (trial)
** 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ?
** 無法針對遠端網頁預覽CSS修改的效果?
** 提供驗證工具(validator)
** 相關文章: [http://jerome.anyday.com.tw/archives/85  排序 CSS 的利器 - TopStyle | 走過的、學過的、看過的]


* ''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+])
** 按滑鼠一下，選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector)，即可顯示網頁元素屬性: ?
** 可針對遠端網頁預覽CSS修改的效果
** 可預覽螢幕解析度800x600 & 1024x768 不同效果
** 分割視窗同時顯示 [[MozillaFirefox|Firefox]] v1.7 ({{Fx}}) 與 Internet explorer({{IE}}) v6 瀏覽畫面

== 網頁製作相關工具 ==
=== 開發人員工具 ===
* 網頁主控台 for {{Fx}} v.10 內建工具
** 選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 {{kbd | key=Control}}+{{kbd | key=Shift}}+{{kbd | key=K}}
** [https://developer.mozilla.org/en/Using_the_Web_Console Using the Web Console - MDN]
* 開發人員工具 for {{Chrome}} 內建工具
** 選單位置位於: 工具 -> 開發人員工具、 或者直接按快速鍵 {{kbd | key=Control}}+{{kbd | key=Shift}}+{{kbd | key=I}}
* [https://addons.mozilla.org/zh-TW/firefox/addon/1815/ Console²] {{Fx}} "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context，意指 Chrome, Content) 來篩選要顯示的錯誤訊息"

=== view source codes of html ===
* [https://addons.mozilla.org/en-US/firefox/addon/dafizilla-viewsourcewith/ Dafizilla ViewSourceWith] for {{Fx}} - "(a)to view page source with external applications (b)open CSS and JS files present on page" Quoted from official website {{access | date = 2011-02-28}}
* [http://zigrat.com/getthebookmarklet.html View Source Chart bookmarklet] for {{Chrome}}, {{Opera}}, {{Safari}}
** alternative:  [https://addons.mozilla.org/en-US/firefox/addon/655 View Source Chart] for {{Fx}} ; [http://billfriedrich.tripod.com/index.html?Web View Rendered Source] for {{IE}}

=== 不同螢幕解析度檢視網頁 ===
* {{Gd}} [https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] for {{chrome}}
* [http://viewlike.us/ ViewLike.Us]  ViewLikeUs - Check Sites in Various Resolutions!
** [http://blog.yalinfo.com/2009/07/viewlikeus.html 教學]

=== 分析網頁連線下載速度 ===
[[Web_Ping#分析網頁連線下載速度 | 分析網頁連線下載速度]]

=== 網頁的字型工具 ===
* [https://chrome.google.com/webstore/detail/ipooogmmnpmfmhbhlahhjkjiiamjllal What's the font?] for {{Chrome}} 選擇網頁一段文字，檢視使用的字型


=== 其他工具 ===
* [http://karmatics.com/aardvark/ Aardvark Firefox Extension] {{Fx}}
* [http://karmatics.com/aardvark/bookmarklet.html Running Aardvark as a bookmarklet] in {{Fx}}, {{IE}} or {{Safari}} 
* [http://www.iosart.com/firefox/colorzilla/ ColorZilla Extension for Firefox and Mozilla] {{Fx}}

* [http://www.kevinfreitas.net/extensions/measureit/ MeasureIt]: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website. {{Fx}}
* [https://addons.mozilla.org/zh-TW/firefox/addon/user-agent-rg/?src=discovery-learnmore User Agent RG] for {{Fx}} 
* [https://addons.mozilla.org/zh-TW/firefox/collections/mozilla/webdeveloper/ Web Developer's Toolbox :: 收藏集] for {{Fx}} 
* [https://chrome.google.com/webstore?hl=zh-TW&category=ext%2F11-web-development 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店]

----
further reading
* [http://www.w3schools.com/css/css_reference.asp CSS2 Reference]
* [http://sixrevisions.com/tools/google-chrome-extensions-for-web-design-students/ Google Chrome Extensions for Web Design Students] for {{Chrome}}




[[Category:WebDesign]]