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

(about 21 hours ago)
RT @SavingDylan_com: Dylan enjoying the weather on a after his surgery in June. Dylan will have a VIP visitor next week from the USA pleaseā€¦


(6 days ago)
CSS Radio Button Styles From CodePen https://t.co/FNBvXAblo6


(21 days ago)
Github Stars !== Usage: React is still blowing Vue and Angular Away https://t.co/KybO16U0Vs


(about 1 month ago)
Speak out against the cruel Yulin dog meat festival via @HSIGlobal. https://t.co/j6NEh9oJWl


Top of page