搜尋

隨機推薦

21 十一月 2010

Zen Coding - 超高效率編寫 HTML, CSS 代碼的新方法

總結

很多嘗試過Zen Coding的人都說它改變了他們寫頁面的方式。當然還有很多事情要做,還有很多的編輯器需要被支持以及一些文檔要寫。請瀏覽現在的文檔 以及廣告

serge.che">源代碼
以尋找你的問題的答案。希望你喜歡Zen Coding!

附:Zen coding的具體用法

遺憾的是, 本文原作者並沒有說明zen coding的具體用法,神飛認為有必要做以下簡要的說明。這裡就以Aptana/Eclipse和Dreamweaver為例,其它編輯器平台暫不描述,如有疑問可以在評論中與前端觀察的網友交流。

Aptana/Eclipse

由於Aptana本身就是基於Eclipse的,所以,Zen Coding也是支持Eclipse的,只是需要一個EclipseMonkey插件的支持,Aptana已經封裝了這個插件,所以如果你使用Aptana,下面的第一步可以跳過。

  1. 通過更新網站安裝EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana,可跳過這一步)
  2. 在你的當前工作去創建一個頂級的項目,給它命名,比如,就叫zencoding
  3. 在新創建的項目中創建scripts文件夾
  4. 解壓縮下載的ZIP插件包到該文件夾。項目結構看起來就像這樣:

  5. 安裝之後,Aptana的菜單欄中的「腳本(Script)」菜單中將會出現Zen coding相關子菜單

注意事項:

  • Aptana版的官方插件是基於MAC機的,如果你用的是Windows,需要手動更改快捷鍵(在每個文件頭部的註釋片段中更改)
  • 官方的文件編碼有點兒亂,修改官方js的時候,請注意編碼問題,修改不當會造成相關功能的丟失;

DreamWeaver

好消息是,現在已經有了Zen coding for DreamWeaver插件,壞消息是,該插件支持的功能很少,只支持展開縮寫功能。而且默認的快捷鍵是無效的。只能在「命令」菜單中點擊操作。另外,沒 有測試該插件是不是只支持CS4版本。不過比較好的是,作者將本插件的源碼也放出了,你可以自定義一個Dreamweaver的插件。

PS:官方的DW插件已經更新,推薦到官方去下載。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009

特別推薦:豪情同學將縮寫給實踐了一番,總結出了很多很棒的用例,推薦大家前去學習

原作者介紹:

Sergey Chikuyonok是一位俄羅斯的前端開發工程師和作者,他在優化方面有很大的熱情:從圖片、JavaScript效果到工作流程和節省時間的編碼。訪問他的主頁他的Twitter

VN:F [1.8.0_1031]

譯自:Smashing Magazine

中文:Zen Coding: 一種快速編寫HTML/CSS代碼的方法

請尊重版權,轉載請註明來源!

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.