1-1 安裝各種輔助工具

一、請先將瀏覽器升級至最新版

1. 研習示範用的瀏覽器預設為Firefox最新版（http://mozilla.com.tw/）
2. 謀智台客中常常會有一些值得一看的文章：http://myfirefox.com.tw/provider/moztech/
3. 由於瀏覽器版本對於呈現效果會有影響（通常越新版對於CSS3或HTML5的支援就越好），所以，請記得將瀏覽器升級為最新版。
4. 一般來說，從工具列的「說明」→「關於xxxx」就可以檢視瀏覽器版本，並自動升級到最新版。

二、安裝 WebDeveloper 附加元件

1. WebDeveloper 附加元件：https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/
2. WebDeveloper 1.2.5 正體中文包，修改自 http://blog.yanwen.org/archives/1406.html
3. 其中幾個很實用的功能：
   • 表單：顯示表單細節
   • 其他功能：顯示尺標
   • 標記：標記表格：標記表格單元格
   • 查看源代碼：查看處理後的源代碼

三、安裝 ColorZilla 附加元件

1. ColorZilla 附加元件：https://addons.mozilla.org/en-US/firefox/addon/colorzilla/
2. 可用來抓取網頁上的顏色碼
3. 可自己挑選想要的顏色
4. 可分析別人網站的配色

chrome:

1. WebDeveloper: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=zh-TW
2. ColorZilla : https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=zh-TW