CSS tools

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)工具

• 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 瀏覽畫面

• Firebug v1.5.4 for Firefox (How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com)
  • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
  • 可針對遠端網頁預覽CSS修改的效果
  • 可追蹤網頁各元素下載所需的時間
  • 其他: 可觀察網頁間傳送的 POST 變數 (Firebug選單 -> 網路)

• 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 | 走過的、學過的、看過的

• Internet Explorer Developer Toolbar(開發者工具) v.1.00.2188.0 for Windows IE
  • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
  • 可針對遠端網頁預覽CSS修改的效果
  • 提供驗證工具(validator)
  • 可結合IE6 ~ IE8模擬應用程式，並均可使用該開發者工具

網頁製作相關工具

開發人員工具

• 網頁主控台 for Firefox v.6 內建工具，選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 Control+Shift+K
  • Using the Web Console - MDN
• 開發人員工具 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

不同螢幕解析度檢視網頁

• 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

• CSS2 Reference
• Google Chrome Extensions for Web Design Students for Chrome