所见即所得型网页编辑工具简介

一、背景

需求一：有如下图一所示的网页素材，将其中红色方框内的”Clean Blog”修改为”GCDDalian Workshop”。

此时，如果有一个所见即所得的网页编辑器，兼具编码及浏览的功能，那是最好不过的。十年前，答案可能是Dreamwaver；现在，微软提供的免费软件Expression Web（下载地址 https://www.microsoft.com/en-us/download/details.aspx?id=36179）则是最佳选择之一。该软件可支持多种界面语言，包括中文。

图一 网页素材

二、使用方式

用Expression Web打开上图网页文件index.html，界面如下

图二 Expression Web及其Split模式

如图二左下角红色方框的标签所示，该软件有三种模式：Design、Split和Code。Design是直观的网页设计模式，不涉及对代码的直接修改；Code则只显示网页代码，而不能直接看到网页效果；Split模式可同时显示代码和网页实际效果。点击标签可在三种模式间进行切换。

现在要实现如前所述的修改网页上的"Clean Blog"为"GCD Dalian Workshop"，方法：找到网页上的"Clean Blog"，直接修改为”GCD Dalian Workshop”，这种修改方式当然比在代码里找到”Clean Blog”然后再进行修改要快。这是Expression Web的好处之一。

需求二：作为初学者，我想学习网页上某种元素的实现方式。比如，怎样往网页里添加图片呢？同样以图二为例，要了解其中的图片插入代码，点击网页上的图片后，可以在代码去看到其对应的代码：

通过已有的网页，学习其实现方式，这是Expression Web的好处之二。

虽然已经具有以上两个优点，但是Expression Web的Design模式显示出来的页面和真实的网页还是有区别的，因为它只能显示静态元素，对于需要通过脚本表现的效果它是显示不出来的。这种情况下，可以用另一个免费的软件Brackets(下载地址 http://brackets.io/)

Brackets的界面如下：

图三 Brackets

利用Brackets编辑好代码之后，只要点击图三右侧红色方框内的按钮，就可以通过Live Preview功能在Chrome中显示真实的网页，所有的脚本都可以在其中表示出来。

在编程的世界里，要完成一项工作，往往有多种不同的方式，多多探索，总能发现惊喜。