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

一、背景

需求一:有如下图一所示的网页素材,将其中红色方框内的”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中显示真实的网页,所有的脚本都可以在其中表示出来。

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180112G0GZ3Y00?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区