首页 开发工具 dreamweaver Dreamweaver支持Emmet的方法介绍(图)

Dreamweaver支持Emmet的方法介绍(图)

Sep 29, 2018 pm 04:05 PM
dreamweaver

本篇文章给大家带来的内容是关于Dreamweaver支持Emmet的方法介绍(图),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

鉴于某些原因,每个 Coder 所钟爱的 IDE 各不相同。而作为一个软件爱好者,我几乎所有 IDE 都使用过一段时间,目前是 Dreamweaver + Sublime Text 2 共用。不过不管你是普通的 Notepad++,文艺的 Sublime Text,还是二逼的Dreamweaver,甚至装逼的 Vim,有些插件总是必不可少的,例如大名鼎鼎的 zencoding(目前已改名 Emmet,并且很好的支持 DW)。

Emmet 是一款快速编写 HTML/CSS 的工具,例如输入:

ul.nav>li>a.n_$*6
登录后复制

然后按下快捷键 Ctrl+E,即可生成如下一段代码:

<ul class="nav">
    <li>
        <a href="" class="n_1"></a>
        <a href="" class="n_2"></a>
        <a href="" class="n_3"></a>
        <a href="" class="n_4"></a>
        <a href="" class="n_5"></a>
        <a href="" class="n_6"></a>
    </li></ul>
登录后复制

看了这些代码是不是已经蠢蠢欲动了,更多规则可在文末下载附件查看。接下来谈谈 DW 如何安装这款插件。首先你要确定你的DW已经装上了扩展管理器(Extension Manager),如何没有的话可以重新在安装DW时不要去掉扩展管理器前面的勾,或者到Adobe官网下载>>http://www.adobe.com/exchange/em_download/。

emmet_01

如果你已经安装的扩展管理器,只须要下载Emmet的DW插件http://download.emmet.io/dreamweaver/Emmet.zxp,双击进行安装,看到提示后继续一步步下去,直到成功。如果此时提示菜单没有更新成功,则打开以下路径C:\Users\Administrator\AppData\Roaming\Adobe\Dreamweaver CS6\zh_CN\Configuration\Menus(Win7/Dw CS6),找到该目录下的 menus.xml 重新命名备份(例如menus.xml_bak),接着重新进行安装。

emmet_02

注:解析 Emmet 规则默认是 Ctrl+E 不过由于 DW 自身快捷键太多,重复了。此时打开【编辑】-【快捷键】,然后选择 Dreamweaver Standard,接着再点击右边第一个按钮复制副本,名称随意。

emmet_03

然后再找到【菜单命名】下的【插入】,将【标签】的快捷键修改为其它,例如 Ctrl+R。

emmet_04

至此,你可以大胆的在 DW 中使用 Emmet了。不过 Emmet for DW 默认没有设置其它操作的快捷键,所以你也可以按这些操作,设置上一个编辑点,下一个编辑点等快捷键。这样就能够放弃鼠标更好的在代码快中的位置切换。

emmet_05

以上是Dreamweaver支持Emmet的方法介绍(图)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

dreamweaver怎么调整文字位置 dreamweaver怎么调整文字位置 Apr 09, 2024 am 02:24 AM

Dreamweaver 中调整文本位置可以通过以下步骤完成:选择文本,使用文本位置调整器进行水平调整:左对齐、右对齐、居中对齐;2. 进行垂直调整:上对齐、下对齐、垂直居中;3. 按 Shift 键并使用方向键微调位置;4. 使用快捷键快速对齐:左对齐(Ctrl/Cmd + L)、右对齐(Ctrl/Cmd + R)、居中对齐(Ctrl/Cmd + C)。

dreamweaver网页制作怎么加入视频 dreamweaver网页制作怎么加入视频 Apr 09, 2024 am 01:42 AM

使用 Dreamweaver 嵌入视频:插入视频元素。选择并上传视频文件。设置视频类型、URL、尺寸、自动播放和控件。插入视频。可选:自定义视频外观。

dreamweaver怎么调整行间距 dreamweaver怎么调整行间距 Apr 09, 2024 am 03:00 AM

在 Dreamweaver 中调整行间距分四步进行:选择文本、打开“段落”面板、调整“行距”选项,最后单击“确定”应用更改。

dreamweaver怎么添加图片 dreamweaver怎么添加图片 Apr 09, 2024 am 03:30 AM

要在 Dreamweaver 中插入图片,请单击“插入”菜单并选择“图像”,然后导航到图片文件并选择它。其他方法包括:拖放文件或直接插入 HTML 代码。调整属性包括更改大小、对齐、添加边框和输入替代文本。

网页设计软件dreamweaver怎么设置为中文 网页设计软件dreamweaver怎么设置为中文 Apr 09, 2024 am 12:39 AM

要将 Dreamweaver 设置为中文,请按以下步骤操作:打开 Dreamweaver;在首选项中将“用户界面语言”更改为“简体中文”或“繁体中文”;重新启动 Dreamweaver;检查“帮助”菜单中的“关于 Dreamweaver”项以验证语言设置。

dreamweaver字体怎么设置 dreamweaver字体怎么设置 Apr 09, 2024 am 02:54 AM

可以在 Dreamweaver 中通过以下方式设置字体:使用“属性”面板选择字体、字号、颜色。使用 CSS 设置整个网站或特定元素的字体。在 HTML 代码中直接使用“font”标签设置字体。

dreamweaver怎么添加文本框 dreamweaver怎么添加文本框 Apr 09, 2024 am 01:15 AM

在 Dreamweaver 中添加文本框:打开新文档,插入表格文本域。通过“属性”面板设置文本框属性,包括名称、高度、宽度和换行。双击文本框输入文本,使用文本编辑功能设置文本样式。通过 CSS 自定义文本框的外观和行为。使用“属性”面板的“HTML”选项卡查看和编辑文本框代码。

dreamweaver怎么设置文字大小 dreamweaver怎么设置文字大小 Apr 09, 2024 am 02:18 AM

在 Dreamweaver 中设置文字大小,只需:选择文本进入“文本”菜单选择“字体大小”选择所需大小按 Enter 保存

See all articles