Adobe Edge Code - HTML5与CSS3开发工具

  次阅读 作者:智能小宝 来源:互联网 2016-01-19 11:21 我要评论(0)

这篇文章介绍的核心对象是Adobe于去年面向HTML5开发而发布的一款开发工具,名称叫做Adobe Edge Code。而本文的核心内容则是围绕Adobe Edge Code展开以下几个部分的讨论:了解Adobe Edge Code与开源项目Brackets、Adobe Edge Code的几个重要功能、Adobe Edge Code扩展:WebFont服务。

Edge Code是一款轻量级的Web开发工具,它主要为Web前端开发者提供一个可以编写HTML,CSS和JavaScript代码的工具。2012 年,Adobe向Web前端开发者发布了一个开源项目(MIT License),名称为Brackets,这个开源项目就是Edge Code这款工具的核心。Brackets由来自于Adobe和Web社区的众多开发者共同在Github上维护的开源项目 (https://github.com/adobe/brackets),Brackets这款开源的Web前端代码编辑工具推出后,版本更迭的非常之 快,短短6个月的时间,稳定的更新Build达到了20个,图1是Brackets工具的使用界面。

图1.Brackets的使用界面

Brackets这个工具在某些功能上与一些已经非常流行的前端开发工具类似,具备了代码编辑,代码高亮,关联提示,文件结构等很好用的功能。但是 Brackets也有自己非常明显的几个特徵:

第一,开源。这个工具的开源意味着前端的开发者可以深度定制这款工具为自己所用,从扩展的插件到hack的功能都可以完全按照开发者不同的需求来定 制。

第二,与浏览器可以实现Live Development同步,使用Brackets可以跟开发者的浏览器进行实时开发同步,在Brackets上编辑的功能能即时的在浏览器端出现效果。

第三,简洁高效,Brackets没有复杂的设定和UI,简洁的UI,高速的响应,很少的资源占用,让Web开发者更有效率的进行代码编写工作。

继承了Brackets的这些特点,Adobe Edge Code在2012年下半年正式通过Adobe创意云发布了。

我们可以通过登录Adobe Creative Cloud来获取免费的Edge Code工具,如图2所示。

图2. 登录creative.adobe.com后在app栏目中可以找到EdgeCode

CreativeCloud会自动检测你登录所使用的操作系统,从而提供对应版本的EdgeCode。继承了开源工具Brackets的特 点,Edge Code这款工具拥有以下几个最出色的功能:

第一,高效的Quick Edit功能。在很多Web前端开发者传统的代码编写过程中,修改一个Web页面可以牵扯到对很多文件的修改,主要包括了html,css和js文件的改 动,通常这些修改都是按顺序逐个的修改正确后,Web页面才会呈现出修改后的效果,这种工作方式就变的容易出错。EdgeCode工具为了改善这种繁琐的 工作流程,提高代码修改时的工作效率,引入了Quick Edit功能。接下来我们将关注如何在Edge Code中使用Quick Edit。首先,我们通过Edge Code的菜单File->Open Folder...选项打开一个要处理的html页面所在的文件夹,Edge Code会在打开文件夹后在Edge Code左侧显示出该文件夹的文件结构目录,如图3所示。

图3. EdgeCode打开的一个本地网页所在的文件夹

上图中红色框中的htdocs是选择打开的文件夹,该文件夹下的Edge文件夹内的index.html就是我们要示範Quick Edit的目标文件。单击index.html文件,Edge Code会在右侧打开此页面的源代码编辑环境,如图4所示。图4中红色圆圈框中的箭头表示编辑的是左侧的哪一个文件。

图4. EdgeCode进行html代码编辑的窗口界面

我们在编辑代码窗口中找到第66行,将div的class属性值 hero-unit 选中,然後按快捷键CMD+E(Windows系统是 Ctrl+E),Edge Code将会在编辑区域出现一个有关 hero-unit 的内置编辑器,将与 hero-unit 相关联的文件和代码显示在其中,如图5所见。

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...