源码及WYSIWYG编辑工具

KompoZer

KompoZer 是一款极具特色的网页设计系统，集成了FTP客户端，直观的用户界，并且支持许多主流的操作系统。

Bluefish Editor

Bluefish Editor 是一款面向网页设计师和开发人员的轻量级快速编辑工具。它提供了一个非常实用的HTML文件向导，强大的项目管理，以及查找替换功能。

Quanta Plus

Quanta Plus 是一款功能强大的网页开发IDE。它具有很强的扩展能力，并且可以运行自定义的脚本。它还具有一个可视化的CSS编辑器，并且具有语法提示和自动完成功能。

Amaya

Amaya 是一款由W3C开发的免费，开源的网页编辑器及浏览器。它开始仅仅是一款HTML/CSS编辑器，现在已经成为了许多基于XML系统的编辑工具，如SVG 和MathML。

CSSED

CSSED 是一款功能丰富，基于GTK-2 的CSS编辑器，并且具有强大的扩展功能。

OPEN BEXI HTML Builder

Open BEXI HTML Builder 是一款基于网页的，创建HTML页面的开源工具。它具有一个CSS颜色拾取器以及一个非常简单的项目管理选项。

NOTEPAD++

NOTEPAD++ 是windows下的一款非常流行的开源文本编辑工具。虽然从严格意义上来讲它不是专门针对网页设计师的，但是它拥有一个非常棒的源码编辑器，支持HTML, XML, CSS,以及 JavaScript。

jEdit

jEdit 是一款为程序开发人员设计的文本编辑器。它可以在Mac, Windows以及Linux操作系统上运行，支持HTML, XML, CSS, JavaScript 以及其他语言的语法高亮功能。

SeaMonkey

SeaMonkey, Mozilla Foundation开发的一款 ”all-in-one” 浏览器，具有简单却功能强大的HTML编辑器，可实现在浏览器中直接编辑页面源码。

图形图像编辑器

GIMP

GIMP, 是一款非常流行的，功能丰富的开源图形图像编辑器。如果你喜欢Photoshop的界面，可以安装Gimpshop扩展来实现。

Inkscape

Inkscape 是一款占据主导地位的开源矢量图形编辑器，和Adobe Illustrator 及 CorelDRAW及其类似。

Krita

Krita 是一款为KOffice 设计的油画及图像编辑软件。

Karbon14

Karbon14 是一款可伸缩的适量绘图软件，它是KOffice project 的一部分。

Kivio

作为一个网页设计师，你经常需要制作设计模型或是流程图。Kivio就是一款非常出色的图标编辑器，可以帮助你设计出各种模型，图表和示意图等。

Dia

Dia 是另一款非常出色的图表绘制工具。

Skencil

Skencil 是一款非常棒的制作插图和图表的适量绘图软件。你可以将作品存储成大多数矢量软件均可识别的EPS格式。

OpenOffice Draw

OpenOffice Draw 是一款简单但是功能强大的绘图及图表制作工具，它是OpenOffice 的一部分。

mtPaint

mtPaint 是一款简单的绘图工具，由 Mark Tyler (mt)开发而成。

FontForge

如果你需要在设计中编辑字体，可以试试FontForge，一款易于使用的开源字体编辑工具。

ImageMagick

ImageMagick 是一款功能丰富的图形编辑包，可以让你创作位图格式的图像。它可以打开并保存上百种格式，包括非常流行的GIF, JPG, SVG以及 PDF格式。

GraphicsMagick

GraphicsMagick 被称作“图像处理的瑞士军刀”。它支持非常多的图像格式，具体可以查看这里。

有用的工具

HTML TIDY

HTML TIDY 是一款免费，开源的工具，用来修复和优化HTML语法。

Cyberduck

Cyberduck 是Mac OS上一款非常出色的开源FTP客户端软件。它内建支持Mosso Cloud 文件以及Amazon S3 浏览器使它成为网页设计师和页面开发程序人员的首选。

FileZilla

FileZilla 是一款非常流行的开源FTP客户端软件。它支持许多平台（包括Linux, Mac, 以及Windows），并且可以通过很多种模式进行文件传输。

WinSCP

WinSCP 是一款windows操作平台下的FTP客户端软件，可以进行本地和远程文件的传输。它有一个非常简单的文件管理功能帮助你操作和组织文件。

CamStudio

当你的项目经理或者客户要求你设计一款计算机模拟内容（例如网站服务的电子教程）的时候，你可能需要一款屏幕录制软件。这时你可以试试CamStudio，一款功能丰富的开源屏幕录制工具。

Greenshot

网页设计经常需要进行抓屏工作来进行设计展示说明。Greenshot是一款非常出色的且功能丰富的抓屏软件，免费而且开源。

ZScreen

ZScreen 是一款杰出且实用的抓屏工具，它可以实现全屏、可视区域及指定区域的抓屏工作。你可以安装自动FTP截屏功能，从而轻松实现图片的共享和归档。

Xournal

Xournal 是一款简单的笔记及草图工具，可以将你的笔记本作为你的输入工具。它和Windows Journal 的工作原理相似。

Firebug

Firebug 是一款相当实用的页面调试工具。你可以使用它获取和探测HTML及CSS源码。

Gallery

使用Gallery, 你可以随心所欲的控制你的图片。Gallery 是一款基于网页的图库工具，你可以用它在线储存、管理以及访问图像。

[原文链接]

为什么我们需要一个CSS编辑器？

CSS编辑器的优势发挥依赖于一个全面发展的网络开发环境，它的主要任务就是集合CSS样式表、HTML源码以及网页有效布局的编辑特性。不过就目前这些CSS编辑器来看，它们所具有的功能远远超出了这些。

除了提供编码功能，CSS编辑器还提供了调试、实时编辑、在不同的浏览器中预览、先进的代码预览、格式化代码、美化和压缩、验证实效性、内建项目管理工具等。基于以上，你很有必要放一个这么有用的工具在你的手边。

Xyle

Xyle (Mac)

这款先进的编辑器允许开发人员使用内建的样式表进行网站编辑。和网站开发工具栏类似，你可以修改CSS代码，实时预览修改效果。和网页开发工具栏相比，Xyle还具有很多高级特性，例如容器树状预览，语法高亮以及高级文件管理等。

在预览模式下你可以使用Safari渲染引擎预览网页。在选择模式下，你可以点选指定的HTML和CSS源码进行预览。

在层叠模式下，Xylescope不仅可以显示应用到当前选择元素下的样式规则，还可以显示它的父元素的规则。当进行调试的时候，你可以在“层叠模式”下直接选择有问题的元素。Xylescope还提供和外部文本编辑器BBEdit的集成。

售价$19.95。提供免费试用版本。

Xyle特性：

• 自动格式化Automatic formatting
• 容器匹配Selector matching
• 智能分组
• 内建DTD预览模式

Stylizer

Stylizer (Windows)

Stylizer区别于其它编辑器的两个特性是：它使用网格界面代替文本编辑界面以及内嵌Firefox和IE。格状系统就好像是在“Rails中的CSS”，这样就不可能出现任何的CSS错误，同时可以使用户在同一个界面进行编辑和诊断。

使用Stylizer，用户可以轻松的调整界面。用户可以通过直接修改属性、托拽鼠标进行实时的修改尺寸、白边、颜色以及背景位置等。用户可以使用主题、托拽鼠标、实时查看文本颜色、背景以及边框的变化，就好像在体验用Photoshop做网页一样。

Stylizer的标准版是免费的。高级版售价$69.95。两者区别不是很多，不过免费版不提供样式表过滤功能，只能对指定的内容显示规则。

Rapid CSS Editor

Rapid CSS Editor (Win)

该款编辑器提供给用户语法高亮、自动填充以及代码检测等功能。你可以通过使用内建的CSS和HTML向导快速建立容器和标签属性。颜色工具可以使设计人员不需要切换颜色工具就可以选择正确的颜色，并在IE和Firefox中进行实时预览。文件管理功能支持FTP上传CSS文件。而且，你可以使用高级剪贴版保存多个代码片断以备用。编辑器售价$29.85。提供免费试用版。

Rapid CSS特性：

▪ 针对CSS和HTML文件的语法高亮

▪ CSS语法检查和验证

▪ CSS代码窗口

▪ Code侦测

▪ CSS和HTML自动填充

▪ 在Internet Explorer和FireFox中进行样式表实时预览

▪ HTML X-Ray模式预览

▪ 符合CSS标准及多种浏览器标准

▪ 集成CSS和HTML的W3C验证器

▪ 内建CSS手册

▪ CSS代码格式化和美化

▪ CSS代码压缩

▪ 通过正则表达式进行查找替换

▪ 在文件中进行查找替换

▪ 多项目剪贴功能

▪ 内建文件浏览窗口

▪ FTP远程保存和打开文件

▪ 项目和网站管理以及FTP发布

▪ 个性化用户界面

▪ 代码合并

TopStyle

TopStyle (Win)

较早的网页设计师都还记得有一款专业网页制作软件叫HomeSite吧，TopStyle就是制作HomeSite的原作者所开发的。在HomeSite中包含了TopStyle的简易版本，不过，TopStyle提供了许多其他编辑器所不具备的功能。例如，通过使用集成的HTML-tidy工具，你可以轻松的将HTML标签转换成有效的XHTML。集成的样式更新可以使用有效的CSS规则代替诸如<font>这样的标签。剪贴库储存了你经常使用代码片断。窗口拆分功能是你可以直接预览比较在IE和Mozilla中的效果。你也可以通过改变Doctype定义查看在不同浏览器中的DTD影响。

或许TopStyle最强有力的工具就是样式检测。它不仅可以确保用户在不同浏览器中使用有效的样式表，当你使用了正确的CSS代码时，还可以预测在主流浏览器中会存在的bug。你也可以使用W3C CSS验证器服务对你的CSS样式表进行验证。完整版售价$79.95。提示：简易版本不提供升级服务。

TopStyle特性：

▪ 在同一项目中进行HTML, xHTML and CSS编辑。

▪ 易用的文件导航：你可以通过点击HTML中样式表链接打开外部样式表，也可以点击文件中的锚打开相应的链接文件，还可以点击<img>标签用你设定的图像编辑软件打开图像。

▪ 当你键入的时候即会进行元素和属性的有效性检测。

▪ 样式表检测

▪ 样式更新

▪ 集成HTML Tidy

▪ 站点报告

▪ 全屏预览

▪ 集成W3C HTML验证

CSSEdit

MacRabbit CSSEdit (Mac)

和XyleScope相似，CSS提供实时样式表编辑模式。即使有基于复杂数据库或者使用了AJAX的动态网页应用，CSSEdit同样可以进行实时分析，而不需要你上传或者刷新这些文件，而且不管你有没有在网络上。容器构建可以让你对你的元素用简单的英文进行描述。智能代码感应可以分析CSS和CSS行为，从而提供给你适合你所创建的内容的建议。

X-ray检测模式向你展示你的HTML文件所应用的样式。你也可以通过使用W3C标准或者项目管理工具验证你的样式表的有效性，从而优化你的工作流程。CSSEdit还会自动添加括号，冒号以及适当的空格。如果你手中有一个别人设计的样式表，而且并不符合你的设计习惯，你可以通过Re-Indent工具来适应你的工作区。除此以外，它还提供实时预览，常用片断代码剪贴库等特性。

EditCSS提供了一个Firefox插件以及书签。你可以通过点击浏览器上的标签工具栏就可以编辑网站的样式表，并使用一些高级的CSSEdit编辑功能。CSSEdit具有十分美观和直观化的界面，而且体积非常小，为你的设计工作提供了良好的组织性和友好性。售价29.95欧元($47)。提供免费试用版本。

CSS Edit特性：

▪ 容器构造工具

▪ 便于使用的代码折叠包和滤镜

▪ 使用智能代码感应器进行代码修改

▪ X-ray页面

▪ 实时预览

▪ 项目管理

▪ 代码验证工具

▪ 集成浏览器

Style Master

Style Master (Win / Mac)

自从这款WYSIWIG CSS编辑器自称其具有90余种特性以来，它就从其他的同类编辑器中脱颖而出。的确，Style Master可以让新手或者专业的开发人员设计出有效的和语法正确的样式表。容器可以按照字母顺序、类别和现有顺序进行排列。编辑器内置颜色拾取工具、各种模板、向导以及验证工具。因此，专业人士可以轻松有效的进行设计，而新手也不必为缺乏专业的技术知识而烦恼。

该款编辑器给人带来绝对惊喜的地方就是它内置了很多实用的编辑模板。你可以轻松的实用这些CSS架构，并且定义规则，所有的容器全都出现在列表里面了。你也可以使用W3C的实例样式表，可以定义几乎所有的HTML标签，例如<hx>。

Style Master允许你使用在线文件（必须是本地服务器上的）作为预览文件。 你还可以使用设计窗口的所有特性，如利用X-Ray设计你的样式表。Style Maste是一款易于上手、具有直观性的编辑器。售价$59.99。提供免费试用版。

Stylemaster特性：

▪ 浏览器支持帮助

▪ 向导Wizards

▪ 超过40格内建模板Over 40 Templates

▪ X-Ray窗口实时浏览布局结构

▪ 代码优化

▪ 智能代码自动填充

▪ 白边格式化工具

Style Studio

Style Studio (Win)

Style Studio提供一个强大的CSS检测工具，可以使新手和专业人士开发出标准的CSS布局。 开发人员可以试用一系列的支持工具，例如“Smart linker智能链接”能够即刻链接多个CSS文件到许多HTML XHTML / XML文件，CSS管理器可以管理和升级到标准代码，并且检测和CSS相关联的问题。

该款编辑器提供一个可以迅速查找CSS注释的智能感应技术（包括对CSS和HTML两者的支持）。Property Watch（属性观测）工具可以自动检测CSS属性（或HTML标签，如果你正在编辑的是HTML文件的话） 。

Style Studio售价$49.95。官网提供了一些CSS相关的文章，布局和教程。

Style Studio特性：

▪ 自定义语法颜色，全局查找、替换和编辑

▪ CSS验证器

▪ 强大的CSS管理工具

▪ 集成超过35种HTML编辑器

▪ 样式表和HTML的智能感应工具

▪ CSS属性观测工具

▪ HTML多文件导入和输出

▪ 自定义CSS代码缩进

▪ CSS向导

▪ 验证XML文件

▪ 智能分析程序，当你键入的时候即可检测你的属性的有效性

▪ 自定义热键启用代码片断助手

▪ 迁移向导

▪ 自动检测已安装的浏览器

▪ 格式工具栏

▪ 使用Ctrl+Up/Down热键轻松调整CSS值

▪ 内建支持整个系统范围的查找替换

CoffeeCup

CoffeeCup StyleSheet Maker (Win)

CoffeeCup StyleSheet Maker提供针对高级编辑功能和基本编辑功能的属性设定。它和TopStyle有点类似，但是不如后者灵活性高。售价$34.00。提供免费试用版。

CoffeeCup特性：

▪ 包括CoffeeCup网页颜色搭配软件

▪ 简化的CSS字体样式设计，只需从下拉菜单中选择即可

▪ 样式表设计向导

▪ 多浏览器测试

▪ 编辑、存储和打开.css, .html 或 .txt格式的文件

▪ 50款内置样式表下拉菜单

▪ Class & ID向导

▪ 动态HTML代码片断

EngInSite CSS Editor

EngInSite CSS Editor (Win)

如果你想选择一款严格执行W3C标准的CSS编辑器，EngInSite无疑是你的最佳选择。该款编辑器的目标就是帮你创建符合W3C标准的网站。该款工具提供内建实时样式表预览，自动代码填充、语法高亮、内建W3C HTML验证器、集成帮助系统，内建CSS手册、自定义和可扩展的代码库以及实时编辑功能。售价: $39.95，提供免费试用版本。

EngInSite特性：

▪ 高级、全功能自定义文本编辑工具

▪ 集成样式表即时预览功能

▪ 支持多种浏览器CSS语法检测

▪ 集成W3C HTML验证器

▪ 适应CSS标准和多种浏览器

▪ 多浏览器预览

▪ 集成帮助系统和CSS手册

▪ 多个样式表编辑

▪ 语法检查

▪ 正则表达式查找替换

▪ 自定义导航栏

▪ 可视化编辑器

▪ body, IE滚动栏, 列表和背景编辑向导

Jellyfish CSS

Jellyfish CSS (Mac)

作为一款使用简单而且直观的编辑器，Jellyfish CSS确保设计人员能够轻松迅速的编辑CSS样式。该款编辑器提供代码库、代码感知支持、浏览器支持注释、向导以及错误即时更正等功能。你也可以使用内置的颜色混合器创建合适的颜色模板。售价29€ ($47)。提供免费使用版本。

Jellyfish特性：

▪ 代码感应器帮你即时更正代码输入错误

▪ 支持Mobile Profile 1.0

▪ 语法高亮

▪ 3种不同的预览模式

▪ 内建W3C验证器和CSS-Tidy工具进行有效性检测

▪ 直接从网站加载CSS文件并进行编辑

▪ 代码片断助手

▪ 样式表生成向导

▪ 颜色混合器

Astyle

Astyle (Win)

Astyle是一款初级可视化CSS编辑工具，提供了一些基本功能。虽然没有什么高级功能，但是确实一款很好的基础编辑工具。售价：$20.

Astyle特性：

▪ 可视化界面

▪ 图形化树状结构预览文件结构和CSS结构

▪ 按组预览属性和容器

▪ 从标记语言文件自动选择CSS容易组别

▪ CSS, HTML, XML 代码编辑

▪ IE和Mozilla预览

▪ 支持剪切、粘贴和拷贝操作Copy

▪ 支持托拽操作

一些附加的CSS编辑器

JustStyle CSS Editor (跨平台)

JustStyle CSS Editor是一款跨平台的编辑软件。基于Java，可以在不同的平台使用，如Windows, IBM OS/2, Linux, Apple Mac OS, Mac OS X及其它。你可以同时编辑整个样式表，也可以挑选其中的一部分分开编辑。虽然JustStyle CSS Editor仅提供了一小部分CSS设计功能，但是它能够从外部开发环境快速更新你的CSS文件。但是，JustStyle并不适合大型项目的开发。JustStyle是一款免费软件。

Simple CSS (Win / Mac)

Simple CSS是又一款免费的可以在Mac和Windows平台使用的编辑器。Simple CSS提供将元素分组的功能。预览窗口可以使设计者快速创建代码。一旦CSS文件完成以后，你可以通过导出功能将文件运用到其他的项目上。简单、易用、直观。

CSSED (Linux / Win / Mac)

CSSED是Linux的CSS专家。尽管它只提供如语法高亮、语法验证以及自动填充等基本性能，但是它可以使用外挂插件实现很多扩展功能。你可以在官网上找到这些插件。这是一款开源的软件。

Eric Meyer’s CSS Sculptor (Win)

这是一款Eric Meyer为Dreamweaver和Microsoft Expression Web提供的基于模板的外挂程序。你可以选择内建的30多个模板，并且可以最大程度的更改设计样式：改变尺寸、位置、栏数等。它也可以根据段落、标题以及链接等元素的属性设定空白边和内边距。你可以将修改过的样式作为一个新的模板以便将来继续使用。