DIV CSS 佈局教程網

今天閒來無事，把一些工具(online和client的)、常用網址、以及經驗總結等羅列出來和大家分享下。這個標題起地大了點，肯定會有很多地方沒列到，包括類目的分法也可能考慮不周，所以還請大家積極補充指正，可以直接留言，也可以發郵件給我(sorrycc#gmail.com)。之所以加上“大眾”兩字，因為以下資源對於高手來說可能早就很熟悉了。

另外想提一句，工具是死的，好不好用得看你會不會用。比如Firefox、Fiddler等，除了顯而易見的功能以外，都有一些小的技巧，掌握了可以讓你事半功倍。

更新記錄：

• [20081025] 第一版

快捷導航：

• 在線工具集
• 常用Firefox插件
• IE下的調試工具
• 參考手冊
• 批處理工具
• IDE及其他工具
• Bookmarklet
• 前端開發者社區及權威網站
• 推薦訂閱的博客和網站

另外還搞了個Firefox插件《前端開發工具集》，把資源整合到一個菜單下，方便查詢。數據放在線上(Google AppEngine)，速度應該會有保證，更新也會比較方便哈。 

在線工具集

• 書籍類：
  • Book Shelf 2.0 beta —— 薦，分類很清晰，下載很方便
  • Book Go!
  • 原版圖書免費下載鏈接收集站
  • 51CNNET.NET
• JavaScript類：
  • Beautify JavaScript —— JavaScript格式化工具，效果很理想
  • AJAX Libraries API
  • Regex Tester
  • Compressor Packer —— 以前一直用這個壓JS，自從有了TBCompressor，就放棄他了
• CSS類：
  • CSS選擇器性能測試
  • CSSTidy —— CSS格式化工具
  • CSS Compressor  —— CSS壓縮
• 其他：
  • GUID 生成器 —— 做某些東西(Firefox插件)時需要唯一資源標志符時用
  • W3Counter
  • WebWait - Benchmark Your Website

常用Firefox插件

• 支付寶安全控件 和 旺旺協議 —— 網購專用，Firefox+浦發網銀，無敵了
• Firebug —— 這個不用介紹了吧，附空帏的外部編輯器亂碼修正版
  • Firecooike —— 支持Cookie的查看和編輯
  • Jiffy —— 調試性能的，用起來比較麻煩，沒試過
  • YSlow —— Why Slow? YUI出品
  • Pixel Perfect —— 把設計稿直接拖到Firefox裡進行對比
  • Rainbow for Firebug —— JS高亮，性能不是很理想
• Fiddler 開關 —— 簡化在Firefox裡切換Fiddler的操作，感謝Taobao UED的空帏同學
• Web Developer
• DevBoi —— 把Html, Dom, JavaScript等手冊放在側欄裡，可以自定義增加，快捷鍵Ctrl+F9。可以在這裡找到更多的Package。
• RefControl —— 針對每個站點發送想要的HTTP Referer
• GreaseMonkey —— 看某個網站不爽，寫個小腳本來優化下還是不錯的
• HttpFox —— 查看當前Http鏈接狀態，類似IE下的HttpWatch
• User Agent Switcher —— 切換User-Agent，同時開發iphone和web版本的時候很方便
• FoxyProxy —— 穿牆工具，配合專業代理公布器使用很和諧

IE下的調試工具

• Fiddle2 —— 非常強悍的一款http流查看工具，默認支持IE，其他浏覽器可以設置將{Document}\Scripts\BrowserPAC.js設為代理進行使用。Firefox下可用上述"Fiddler 開關"進行快速切換。支持插件。
• IE Developer Toolbar —— 查看元素、禁用緩存、禁用CSS\JS、Outline元素、查看生成的源碼等功能，IE8自帶了一個加強版的。
• Microsoft Script Debugger + Companion.JS —— 調試JS用，雖然報錯還是有誤差，但是我已經滿足了。安裝順序是：Microsoft Script Debugger，Companion.JS，在"IE選項-高級"裡取消禁用腳本調試。
• 多版本IE共存兩種方案：
  • IE7/8 + IE Tester —— 大眾型配置，可以基本滿足日常需要。
  • IE6 + Internet Explorer Collection —— 在IE 6用戶占絕對優勢以及IE 6神奇bug滿天飛的時代，我還是推薦這種方案，因為只有神奇的原裝IE 6，才能抵擋運營神奇的問題。另外如果還有其他機器可供支配的話，建議再裝個IE 8 + IE Tester，因為IE 8下的Developer Toolbar還是有很大改進的，調試起來會方便一些。
• 以下三個軟件相對不重要些：
  • HttpWatch —— http流查看
  • Instant Source —— 可查看JS生成的源碼
  • NetLimiterPro —— 網速限制

參考手冊

• XHTML、CSS & DOM W3C 手冊 —— 玉伯整理的版本，包含了W3C手冊以及其他有用的資料。
  
• 蘇昱的CSS中文手冊和Dom中文手冊
• JScript語言參考
• XML指南
• XMLHTTP參考手冊
• jQuery 1.2.6 API和jQuery and jQuery UI Reference 1.2
• Apache 2.2 中文版參考手冊在線版
• MySQL 5.1 參考手冊 (在線版)
• PHP手冊
• YUI Cheatsheet
• Cheat Sheet Roundup - Over 30 Cheatsheets for developers
• 23個Cheatsheet打包下載

批處理工具

• TBCompressor —— 淘寶UED的JS/CSS壓縮工具，詳見玉伯的介紹
• pngOptimizer —— png優化工具
• jpegTran —— jpeg去冗余meta工具

IDE及其他工具

• Editplus v301 漢化版
• Tortoise SVN
• 移動版本的 Apache + PHP —— 灰常灰常好用，灰常灰常移動，見明城的說明
• …

Bookmarklet(右鍵另存)

• Firebug Lite —— 官方介紹
• Xray —— 官方介紹
• MRI —— 官方介紹
• ‘+ window.document.documentElement.outerHTML+ ”">查看生成的源碼，‘+ window.document.documentElement.outerHTML+ ”);})()">打開新窗口查看生成的源碼 —— for IE

開發者社區及權威網站

• Mozilla Developer Center (MDC)
• YAHOO! Developer Network (YDN)
• Dev.Opera
• Apple Developer Connection
• MSDN
• IBM Developers中國 (Web 前端開發技術專題)
• WebKit
• AOL Developer Network
• SlideShare - Share PPT —— 在線PPT分享，資源豐富
• Google Doctype —— Web開發人員的百科全書
• W3C (香港，中國)
• Position Is Everything
• HTML Dog
• 維基百科

推薦訂閱的博客和網站(排名不分先後)

• 國外
  • 內容聚合：A List Apart，Ajaxian，Smashing Magazine，456 berea street，Script & Style，CSS Globe，CSS-Tricks，SitePoint
  • 團隊Blog：Yahoo! User Interface Library (YUI)，IEBlog
  • 個人Blog：John Resig，PPK: QuirksMode，Douglas Crockford，Dean Edwards，Nate Koechley，Julien Lecomte，Eric A. Meyer，Andy Budd，Steven Levithan，HedgerWow
• 國內
  • 內容聚合：Blueidea，無憂腳本，網頁設計師(W3CN)，JavaScript教程網
  • 團隊Blog：淘寶，口碑，阿裡巴巴國際站，阿裡巴巴中文站，阿裡巴巴中文站前端開發團隊(方凳)，阿裡媽媽，支付寶，阿裡軟件，19樓，九天音樂，金蝶與友商網
  • 個人Blog，這裡列出的是原創並更新相對頻繁的博客，如有遺漏，請告之(sorrycc#gmail.com)：怿飛，手氣不錯，Realazy，old9(需穿牆術)，沙灘涼鞋(空帏)，射雕(玉伯)，Aether，振之，嗷嗷，JunChen，爆牙齒，秦歌，克軍，5key，小志，Rage(正淳)，麥雞，雲烈，老冒，番茄紅了，Joyqi，盧力，CSS森林(Ghost)，Twinsen，Gulu77，Rlog，Dlog，子鼠，西風坊 …