Dreamweaverの拡張機能で使える「Zen Coding」が便利で良いです。

いろいろなところで紹介されている「Zen Coding」
Dreamweaverの拡張機能としてインストールできるので、使用してみました。
短い記述だけでHTML・CSSコードを生成、展開してくれます。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

ダウンロードしたZen Coding v.0.7.5.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストールします。
インストールが完了したら早速使ってみましょう。

使い方は簡単、Ctrl+,(コントロール+カンマ)を押すと変換・展開されます。
※注意点は変換前の文末にカーソルをあてること、スペースなどを途中にいれないこと。

例1

変換前

div#content

変換後

<div id="content"></div>

例2

変換前

div#page>div.logo+ul#navigation>li*5>a

変換後

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

展開される時のlangやlocaleを日本に設定する

C:\Documents and Settings\【ユーザ名】\Application Data\Adobe\Dreamweaver 【バージョン】\ja_JP\Configuration\Commands\ZenCoding

にあるzen_settings.jsを自分の環境に合わせます。

var zen_settings = {
	/** 
	 * Variables that can be placed inside snippets or abbreviations as ${variable}
	 * ${child} variable is reserved, don't use it 
	 */
	'variables': {
		'lang': 'ja',
		'locale': 'ja-JP',
		'charset': 'UTF-8',
		'profile': 'xhtml',

		/** Inner element indentation */
		'indentation': '\t'	 // TODO take from Aptana settings
	},

もう少し例を紹介しておきます。

HTML5の雛形を生成

変換前

html:5

変換後

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

XHTMLのDOCTYPE宣言strictを生成

変換前

html:xs

変換後

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	
</body>
</html>

コメントつきでタグを展開

変換前

div#wrapper>div#container>div#contents+div#footer|c

変換後

<!-- #wrapper -->
<div id="wrapper">
	<!-- #container -->
	<div id="container">
		<!-- #contents -->
		<div id="contents"></div>
		<!-- /#contents -->
		<!-- #footer -->
		<div id="footer"></div>
		<!-- /#footer -->
	</div>
	<!-- /#container -->
</div>
<!-- /#wrapper -->

その他にもいろいろな活用法があります。以下のサイトが参考になります。
TechBlog 「マークアップ効率化 – zen-codingでコーディングを倍速に」

ちなみに私が良く使っているテキストエディタ「Notepad++」でもZen Codingが使えるらしく、導入方法が紹介されてます。
Notepad++ではCtrl+Eらしいですね。
乱雑モックアップ 「メモ / Notepad++でzencoding」

  

共有やブックマークなど