15,050
edits
CSS tools: Difference between revisions
Jump to navigation
Jump to search
no edit summary
(add View Source Chart bookmarklet) |
No edit summary |
||
| Line 2: | Line 2: | ||
網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具 | 網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = 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://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)，即可顯示網頁元素屬性: ? | ** 按滑鼠一下，選取網頁元素(<span style="cursor:help; Border-bottom-style:dotted; Border-bottom-width:thin;" class="acronym" title="Document Object Model">DOM</span> inspector)，即可顯示網頁元素屬性: ? | ||
| Line 55: | Line 56: | ||
== 網頁製作相關工具 == | |||
* [http://karmatics.com/aardvark/ Aardvark Firefox Extension] {{Fx}} | * [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://karmatics.com/aardvark/bookmarklet.html Running Aardvark as a bookmarklet] in {{Fx}}, {{IE}} or {{Safari}} | ||
| Line 62: | Line 63: | ||
* [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}} | * [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}} | ||
view source codes of html | === 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}} | * [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}} | * [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}} | ** 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}} | ||
不同螢幕解析度檢視網頁 | === 不同螢幕解析度檢視網頁 === | ||
* [http://viewlike.us/ ViewLike.Us] ViewLikeUs - Check Sites in Various Resolutions! | * [http://viewlike.us/ ViewLike.Us] ViewLikeUs - Check Sites in Various Resolutions! | ||
** [http://blog.yalinfo.com/2009/07/viewlikeus.html 教學] | ** [http://blog.yalinfo.com/2009/07/viewlikeus.html 教學] | ||