CSS tools: Difference between revisions
Jump to navigation
Jump to search
| Line 3: | Line 3: | ||
網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具 | 網頁設計樣式表({{Acronym| def=串接樣式表(Cascading Style Sheets) | acronym = CSS}})工具 | ||
== 網頁設計樣式表(CSS)工具 == | == 網頁設計樣式表(CSS)工具 == | ||
* {{Gd}}[http:// | * {{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修改的效果 | ** 可針對遠端網頁預覽CSS修改的效果 | ||
** | ** 可追蹤網頁各元素下載所需的時間 | ||
** | ** 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址) | ||
* {{Gd}} [http://www. | * {{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) | ||
** | ** {{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 | * ''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修改的效果 | ** 可針對遠端網頁預覽CSS修改的效果 | ||
** | ** 可預覽螢幕解析度800x600 & 1024x768 不同效果 | ||
** {{ | ** 分割視窗同時顯示 [[MozillaFirefox|Firefox]] v1.7 ({{Fx}}) 與 Internet explorer({{IE}}) v6 瀏覽畫面 | ||
== 網頁製作相關工具 == | == 網頁製作相關工具 == | ||
Revision as of 11:06, 14 February 2012
Web site design and development process
- Information gathering: Research surveys
- Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
- Design: CSS tools, Free fonts, Free photos, Emoji & icons
- Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
- Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
- Need help? Community, I need inspiration, Web design glossary
網頁設計樣式表(CSS)工具
網頁設計樣式表(CSS)工具
Firebug v1.5.4 for Firefox 
(How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com)
- 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間
- 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)
- Internet Explorer Developer Toolbar(開發者工具) v.1.00.2188.0 for Windows IE
- 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)
- 可結合IE6 ~ IE8模擬應用程式，並均可使用該開發者工具
- Firebug Lite bookmarklet for IE , Firefox , Chrome
(Firebug Lite for Google Chrome), Opera 
or Safari 
- 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 無法 追蹤網頁各元素下載所需的時間
- csscan for Chrome
- 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
- 無法針對遠端網頁預覽CSS修改的效果
- 無法 追蹤網頁各元素下載所需的時間
- Google chrome瀏覽器 v.13.x 內建工具: 滑鼠點右鍵，選擇「檢查元素」
- 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
- 無法針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間 (切換到 Network 標籤)
- Opera Dragonfly (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) Opera
- 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間
- Web Developer extension v1.1.4 for Firefox
- 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(Validator)
- DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer for IE
- 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
- 無法針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)
- TopStyle Lite 3.5 for Windows (trial)
- 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ?
- 無法針對遠端網頁預覽CSS修改的效果?
- 提供驗證工具(validator)
- 相關文章: 排序 CSS 的利器 - TopStyle | 走過的、學過的、看過的
- discontinued CSSVista for Windows XP/Vista v0.15 (freeware; 須安裝 .Net Framework v2.0+)
- 按滑鼠一下，選取網頁元素(DOM inspector)，即可顯示網頁元素屬性: ?
- 可針對遠端網頁預覽CSS修改的效果
- 可預覽螢幕解析度800x600 & 1024x768 不同效果
- 分割視窗同時顯示 Firefox v1.7 (Firefox ) 與 Internet explorer(IE ) v6 瀏覽畫面
網頁製作相關工具
開發人員工具
- 網頁主控台 for Firefox v.6 內建工具，選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 Control+Shift+K
- 開發人員工具 for Chrome 內建工具，選單位置位於: 工具 -> 開發人員工具、 或者直接按快速鍵 Control+Shift+I
- Console² Firefox "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context，意指 Chrome, Content) 來篩選要顯示的錯誤訊息"
view source codes of html
- Dafizilla ViewSourceWith for Firefox - "(a)to view page source with external applications (b)open CSS and JS files present on page" Quoted from official website [Last visited: 2011-02-28]
- View Source Chart bookmarklet for Chrome , Opera , Safari
- alternative: View Source Chart for Firefox ; View Rendered Source for IE
- alternative: View Source Chart for Firefox
不同螢幕解析度檢視網頁
- ViewLike.Us ViewLikeUs - Check Sites in Various Resolutions!
分析網頁連線下載速度
網頁的字型工具
- What's the font? for Chrome 選擇網頁一段文字，檢視使用的字型
其他工具
- Aardvark Firefox Extension Firefox
- Running Aardvark as a bookmarklet in Firefox , IE or Safari
- ColorZilla Extension for Firefox and Mozilla Firefox
- MeasureIt: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website. Firefox
- User Agent RG for Firefox
- Web Developer's Toolbox :: 收藏集 for Firefox
- 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店
further reading