解 説

Zen Codingの進化形であるEmmetを導入するとコーディングが楽になります。コーダーを目指す方は必須のアイテムとなるでしょう。

導入方法

Dreamweaverの代わりにSublime Textを導入している人も多いと思います。Sublime Text3での導入の説明です。
Package Controlが入っているものとして、Ctrl + Shift + Pを押し、Install Packageを選択します。
「Emmet」を指定してインストールします。

Dreamweaverにも対応しています。インストール方法はこちらが参考になります。[Adobe] Dreamweaver CC 2014 に Emmet(Zen-Cording)を インストール!
ダウンロードする場所がわかりにくいです。説明にも書かれていますが、「Installation 項目の中にある [Emmet.zxp] のリンク先です。」Downloadページの本文の中のリンク先からダウンロードします。
GitHubのDownload Zipからではありませんので注意。

使い方

まずはびっくりマークだけ「!」を入力してCtrl+Eキーで基本構造ができあがります。lang=”en”となっているのでjaに変更するだけです。

lang属性をjaにする方法またCDNでjQueryを読み込む方法

びっくりマークだけ「!」を入力して基本構造ができあがりますが、lang=”en”となっているため微妙に面倒です。
これは「preferences」→ 「Package」→ 「Setting」→ 「Emmet」→ 「Setting-User」のファイルに次の記述を行うとOKです。ついでにjQueryのCDNを読み込むスニペットも作成しています。

これでjQueryのCDNは「jq」と入力してCtrl+Eキーで展開できます。

emmet6

タグを入力するのも< >は不要です。p要素ならpと入力するだけで閉じタグまでできます。
さまざまな便利入力機能がありますので活用をオススメします。

Emmet導入と最初の一歩はこちらが参考になります。
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

CSS記述の高速化はこちらが参考になります。
CSSの記述を高速化する

ところで、最近Sublime Textに代わる勢いのAtomも注目です。無料ですからぜひお試しを。。
AtomにもEmmetは対応しています。