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（长按复制）