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)
RT @Netlify: ⚡️Announcing that we have raised an additional $30m led by @kpcb’s Mamoon Hamid, with @a16z and the founders of @SlackHQ @Yelp…


(20 days ago)
CSS Filter Playground https://t.co/ZOl7SOGI5S


(20 days ago)
“5 steps to speed up your image heavy website” by @BrandonMorelli https://t.co/UE1G7EQjlQ


(25 days ago)
“How browser rendering works — behind the scenes” by @OhansEmmanuel https://t.co/NJY1YzEgU4


Top of page