reamweaver對一個web前端工作者來說，再熟悉不過了，像我07年接觸web前端開發就是用的dreamweaver，一直用到現在，身邊的朋友有跟我推薦過各種更好用的可替代dreamweaver的工具，一開始我是拒絕的，但是后來我發現竟然真有比dreamweaver好用的工具，智能提示，自動補全工具，模糊編碼這些用上手了以后根本停不下來，sublime text當之不愧是最佳替代方案第一選擇。

1. Sublime Text

Sublime Text2是一款跨平臺的編輯器，再也不用為換平臺而找不到合適的、熟悉的編輯器擔憂了。

Sublime Text2 是一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴展機制，用她來寫代碼，絕對是一種享受。

Sublime Text 2 的特色功能：

• 良好的擴展功能，官方稱之為安裝包(Package)。

• 右邊沒有滾動條，取而代之的是代碼縮略圖，這個功能非常贊

• 強大的快捷命令“可以實時搜索到相應的命令、選項、snippet 和 syntex， 按下回車就可以直接執行，減少了查找的麻煩。”

• 即時的文件切換。

• 隨心所欲的跳轉到任意文件的任意位置。

• 多重選擇(Multi-Selection)功能允許在頁面中同時存在多個光標。

• 支持 VIM 模式

• 支持宏，簡單地說就是把操作錄制下來或者自己編寫命令，然后播放剛才錄制的操作或者命令。

• 更新非常勤快

2. TopStyle5

TopStyle 是一款 CSS 開發輔助工具，即 HTML5 / CSS3 編輯器，它專注于 HTML CSS 設計輔助，提供比較多的功能，如 CSS 代碼檢查等，據稱 TopStyle 的幫助文件非常好，有詳細的 CSS 指令，適于初次接觸 CSS 的學習之用。

不過如果你想對 CSS 了如指掌，對 CSS 網頁布局非常熟練，還是扔掉一切輔助軟件，用記事本開發，而熟練 CSS 之后，再使用此類輔助軟件，可以提高工作效率和開發速度。

TopStyle 5 在 CSS3 / HTML5 方面的增強：

*??CSS3 for Inspector, Insight and Style Checker

*??Prefixr

*??CSS3 Media Queries

*??CSS Gradient Generator

*??Text Shadow Generator

*??Improved options for Preview Files (CSS-only)

*??HTML5 for Inspector and Insight

*??HTML5-only Validator

*??HTML Structure Panel

*??Wrap HTML Tag

*??Image Map Editor (HTML-only)

3. Chocolat

Chocolat是Mac系統上最新出現的一款強大的文本編輯器，兼具原生的Cocoa及強大的文本編輯功能。Chocolat支持多種編程語言的關鍵字高亮顯示、窗口分割、標簽頁、色彩主題等功能。界面和MacVim非常相似。

4. Aptana

Aptana 是一個非常強大,開源,專注于JavaScript的Ajax開發IDE。它的特性包括： *JavaScript,JavaScript函數,HTML,CSS語言的Code Assist功能。 *Outliner(大綱)：顯示JavaScript,HTML和CSS的代碼結構。

*支持JavaScript，HTML，CSS代碼提示，包括JavaScript 自定函數

*代碼語法錯誤提示。

*支持Aptana UI自定義和擴展。

*支持跨平臺。

*支持FTP/SFTP

*調試JavaScript

*支持流行AJAX框架的Code Assist功能：AFLAX，Dojo，JQuery，MochiKit，Prototype，Rico，script.aculo.us，Yahoo UI，Ext。

*Adobe AIR與iPhone開發工具

5. Komodo IDE

Komodo 是一個跨平臺支持多種程序語言的Integrated Development Environment （IDE）軟件，目前他支持了在Windows與Linux上 ，Pythone, Ruby, Rails, Perl, HTML, CSS, and JavaScript,等的程序語言開發，以及多種程序語言語法著色。

6. Eclipse

Eclipse是 著名的跨平臺的自由集成開發環境（IDE）。最初主要用來Java語言開發，但是目前亦有人通過插件使其作為其他計算機語言比如C++和Python的開 發工具。Eclipse的本身只是一個框架平臺，但是眾多插件的支持使得Eclipse擁有其他功能相對固定的IDE軟件很難具有的靈活性。許多軟件開發 商以Eclipse為框架開發自己的IDE。

Eclipse的基礎是富客戶機平臺（Rich Client Platform, 即RCP）。RCP包括下列組件：

• 核心平臺(啟動Eclipse，運行插件）

• OSGi（標準集束框架）

• SWT（可移植構件工具包）

• JFace（文件緩沖，文本處理，文本編輯器）

• Eclipse工作臺（即Workbench ，包含視圖（views）、編輯器（editors）、視角（perspectives）、和向導（wizards））

Eclipse采用的技術是IBM公司開發的（SWT），這是一種基于Java的窗口組件，類似Java本身提供的AWT和Swing窗口組件；不 過IBM聲稱SWT比其他Java窗口組件更有效率。Eclipse的用戶界面還使用了GUI中間層JFace，從而簡化了基于SWT的應用程序的構建。

Eclipse的插件機制是輕型軟件組件化架構。在富客戶機平臺上，Eclipse使用插件來提供所有的附加功能，例如支持Java以外的其他語 言。 已有的分離的插件已經能夠支持C/C++（CDT）、Perl、Ruby，Python、telnet和數據庫開發。插件架構能夠支持將任意的擴展加入到 現有環境中，例如配置管理，而決不僅僅限于支持各種編程語言。

Eclipse的設計思想是：一切皆插件。Eclipse核心很小，其它所有功能都以插件的形式附加于Eclipse核心之上。Eclipse基本內核包括：圖形API (SWT/Jface)， Java開發環境插件(JDT )，插件開發環境(PDE)等。

Eclipse由各種不同的計劃組成。以下列出了部分計劃。

• Eclipse計劃：本身包括Eclipse平臺，Eclipse富客戶端平臺（RCP）和Java開發工具（JDT）。

• Eclipse測試和性能工具平臺（TPTP）：提供一個允許軟件開發者構建諸如測試調試、概況分析、基準評測等測試和性能工具的平臺。

• Eclipse Web工具平臺計劃 （WTP）：用Java企業版Web應用程序開發工具來擴展Eclipse平臺。它由以下部分組成：HTML、JavaScript、CSS、JSP、SQL、XML、DTD、XSD和 WSDL的 源代碼編輯器；XSD和WSDL的圖形界面編輯器；Java企業版的“項目性質”（project nature）、建構器（builder）和模型（model），與一個Java企業版的導航（navigator）；一個Web服務（Web service）向導和瀏覽器，還有一個WS-I測試工具；最后是數據庫訪問查詢的工具與模型。

• Eclipse商業智能和報表工具計劃（BIRT）：提供Web應用程序（特別是基于Java企業版的）的報表開發工具。

• Eclipse可視化界面編輯器計劃（VEP）：一個Eclipse下創建圖形用戶界面代碼生成器的框架。

• Eclipse建模框架（EMF）：依據使用XMI描述的建模規格，生成結構化數據模型的工具和其他應用程序的代碼。

• 圖形化編輯器框架（GEF）：能讓開發者采用一個現成的應用程序模型來輕松地創建富圖形化編輯器。

• UML2：Eclipse平臺下的一個UML 2.0元模型的實現，用以支持建模工具的開發。

• AspectJ：一種針對Java的面向側面語言擴展。

• Eclipse通訊框架（ECF）：專注于在Eclipse平臺上創建通訊應用程序的工作。

• Eclipse數據工具平臺計劃（DTP）

• Eclipse設備驅動軟件開發計劃（DSDP）

• C/C++開發工具計劃（CDT）：努力為Eclipse平臺提供一個全功能C和C++的集成開發環境（IDE），它使用GCC作為編譯器。

• Eclipse平臺COBOL集成開發環境子計劃（COBOL）：將構建一個Eclipse平臺上的全功能COBOL集成開發環境。

• 并行工具平臺（PTP）：將開發一個對并行計算機架構下的一組工具進行集成的平行工具平臺，而且這個平臺是可移植的，可伸縮的并基于標準的。

• 嵌入式富客戶端平臺（eRCP）：計劃將Eclipse富客戶端平臺擴展到嵌入式設備上。這個平臺主要是一個富客戶端平臺（RCP）組件子集的集合。它能讓桌面環境下的應用程序模型能夠大致同樣地能運用在嵌入式設備上。

但是我個人用的其實還是國產的hbuilder，有點像中文版的sublime text，sublime text提供了很多自動補全，提示等插件，而hbuilder則集成了這些，像我這種懶人就更偏向于傻瓜化點的。

----------------------------

切圖網（qietu.com）是一家專門從事web前端開發的服務機構，長期致力于提供高品質的psd轉html5、響應適配、webapp切圖，h5切圖等web前端開發服務。

專注web前端開發技術，關注用戶體驗，加我們公眾微信賬號：qietuwang（長按復制）

2h.cn是國內最早推出psd轉html5服務的網站，psd轉html5是我們的主要核心服務，但是我們發現，越來越多的設計師客戶們開始采用sketch來做網頁設計了 ，在我們與這樣客戶接觸合作過幾例項目之后，我們正式推出sketch轉html服務。sketch和我們傳統的psd切圖有些不一樣的地方，而且需要在mac系統下切圖，不過我們適應了所有的不同。

歡迎來詢。

什么是sketch？

Sketch 是一款適用于所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁，圖標以及界面設計的最好方式。但除了矢量編輯的功能之外，我們同樣添加了一些基本的位圖工具，比如模糊和色彩校正。我們盡力讓 Sketch 容易理解并上手簡單，有經驗的設計師花上幾個小時便能將自己的設計技巧在Sketch中自如運用。對于絕大多數的數字產品設計，Sketch 都能替代 Adobe Photoshop，Illustrator 和 Fireworks。

歡迎轉載，轉載請注明來源：http://www.p2h.cn/sketch-2-html/

來越多的開發者熱衷于使用html5+JavaScript開發移動Web App。不過，HTML5 Web APP的出現能否在未來取代移動應用，就目前來說，還是個未知數。那么，有什么辦法，既可以使用HTMl5開發應 用，又可以將其簡單封裝成APK文件呢？

一、Android SDK中的WebView

1.在要Activity中實例化WebView組件：WebView webView = new WebView(this);

2.調用WebView的loadUrl()方法，設置WevView要顯示的網頁：

? 互聯網用：webView.loadUrl("http://www.qietu.com");

? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.調用Activity的setContentView( )方法來顯示網頁視圖

4.用WebView點鏈接看了很多頁以后為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統回退剪鍵，整個瀏覽器會調用finish()而結束自身，而不是回退到上一頁面

5.需要在AndroidManifest.xml文件中添加權限，否則會出現Web page not available錯誤。

? <uses-permission android:name="android.permission.INTERNET" />

缺點：如果是載入的是普通網頁，沒有什么問題，但如果是html5,封裝后，在android2.3以上才能正常訪問，android2.2及以下，SDK中的WebView還沒完全支持HTML5

下面是具體例子：

MainActivity.java

??? package com.android.webview.activity; ?

??? import android.app.Activity; ?

??? import android.os.Bundle; ?

??? import android.view.KeyEvent; ?

??? import android.webkit.WebView; ?

??? public class MainActivity extends Activity { ?

??????? private WebView webview; ?

??????? @Override

??????? public void onCreate(Bundle savedInstanceState) { ?

??????????? super.onCreate(savedInstanceState); ?

??????????? //實例化WebView對象 ?

??????????? webview = new WebView(this); ?

??????????? //設置WebView屬性，能夠執行Javascript腳本 ?

??????????? webview.getSettings().setJavaScriptEnabled(true); ?

??????????? //加載需要顯示的網頁 ?

??????????? webview.loadUrl("http://www.qietu.com/"); ?

??????????? //設置Web視圖 ?

??????????? setContentView(webview); ?

??????? } ?

??????? @Override

??????? //設置回退 ?

??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?

??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?

??????????? if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?

??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁面 ?

??????????????? return true; ?

??????????? } ?

??????????? return false; ?

??? }

在AndroidManifest.xml文件中添加權限

??? <?xml version="1.0" encoding="utf-8"?>

??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"

????????? package="com.android.webview.activity"

????????? android:versionCode="1"

????????? android:versionName="1.0">

??????? <uses-sdk android:minSdkVersion="10" />

??????? <application android:icon="@drawable/icon" android:label="@string/app_name">

??????????? <activity android:name=".MainActivity"

????????????????????? android:label="@string/app_name">

??????????????? <intent-filter>

??????????????????? <action android:name="android.intent.action.MAIN" />

??????????????????? <category android:name="android.intent.category.LAUNCHER" />

??????????????? </intent-filter>

??????????? </activity>

??????? </application>

??????? <uses-permission android:name="android.permission.INTERNET"/>

??? </manifest>

二、使用PhoneGap

??? PhoneGap是一個用基于HTML，CSS和JavaScript的，創建移動跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯系 人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，

詳細方法請見：http://phonegap.com/start#android

優點：在Eclipse中加入SDK，編程自由，完美適應不同設備屏幕大小，適合高手使用。

缺點：沒有使用布局，直接加載網頁，不能添加廣告。

----------------

切圖網（qietu.com）最早將psd轉html服務模式帶到國內，并首個提供響應式、webapp前端開發的公司。專注web前端開發技術，關注用戶體驗，加我們公眾微信賬號：qietuwang（長按復制）