High speed development with Emmet coding

Posted: 24 September 2013, Category: Coding

RubyMine, Dreamweaver, Notepad++ and vast majority of other text editors used for web development purposes support or already have integrated functionality called Emmet coding also known as Zen coding

This blog post will describe how to use Emmet coding in Dreamweaver as this is probably the most popular web development software.

In order to get Emmet coding working in Dreamweaver, a specific plug-in must be installed. Searching for "Emmet coding plug-in for Dreamweaver" gives plenty of results but I decided to get one from Emmet coding official website http://emmet.io/download/ which actually redirect me to https://github.com/emmetio/dreamweaver website.

After Adobe Extension Manager finishes plug-in installation you will need to restart Dreamweaver, if open to pick up the changes made.

The simplest way to check if Emmet plug-in is installed click on Commands window at the top of Dreamweaver. The very first result will be Zed Coding.

Now is time to introduce shortcut CTRL+, which will trigger Emmet to do its job. This shortcut is default when plug-in is installed but can be easily changed by going to Edit -> Keyboard Shortcuts -> Commands -> Zed Coding -> Expand Abbreviation

Here are some Emmet shortcuts to speed up your web development.

HTML

HTML document structure.

html:5 (CTRL+,) generates


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>

</body>
</html>

Head elements.

link:css (CTRL+,) generates


<link rel="stylesheet" type="text/css" href="${1:style}.css" media="all">

script:src (CTRL+,) generates


<script type="text/javascript" src=""></script>

cc:ie (CTRL+,) generates


<!--[if IE]>
  
<![endif]-->

Body elements.

div (CTRL+,) generates


<div></div>

p (CTRL+,) generates


<p></p>

img (CTRL+,) generates


<img src="" alt="" />

a (CTRL+,) generates


<a href=""></a>

a:link (CTRL+,) generates


<a href="http://"></a>

div#wrapper (CTRL+,) generates


<div id="wrapper"></div>

p*3 (CTRL+,) generates


<p></p>
<p></p>
<p></p>

ul>li*3 (CTRL+,) generates


<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

ul>li*3>a (CTRL+,) generates


<ul>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
</ul>

div#wrapper>header+article+footer (CTRL+,) generates


<div id="wrapper">
   <header></header>
   <article></article>
   <footer></footer>
</div>


Some extra Emmet commands not mention in this post can be found by clicking on Commands -> Zen Coding

I found Emmet plug-in very useful and it speeded up my web development as no other web application.

Emmet plug-in also offers support for generating css code which did not work on Dreamweaver CS5.5 version which I own but I highly encourage you to visit http://emmet.io/ for more information.

Back to Blog page

Blog categories

Twitter feed

(11 days ago)
Ruby on Rails 5.2.0 Changes and New Features https://t.co/Bqdo081cvS via @driftingruby


(29 days ago)
Popular CSS Button Hover Effects Explained https://t.co/7rvOZtDRtK via @ddrivegeorge


(about 1 month ago)
Tracking Errors with Sentry https://t.co/21W2ml22jD via @driftingruby


(about 1 month ago)
Chrome to force .dev domains to HTTPS via preloaded HSTS https://t.co/mUz84bAVV1 via @mattiasgeniar


Top of page