2008/07/01

15款CSS编辑器概览

之前我们了解过了一些针对网页开发和设计者的源码编辑工具,现在我们来仔细探讨一下高级CSS代码编辑器。

为什么我们需要一个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.gif

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多个模板,并且可以最大程度的更改设计样式:改变尺寸、位置、栏数等。它也可以根据段落、标题以及链接等元素的属性设定空白边和内边距。你可以将修改过的样式作为一个新的模板以便将来继续使用。


没有评论: