zen-codingをmasterしよう！ Recommend web tools zen-coding

はじめに

Dreamweaver8でzen-cording version0.7が使えました。
これで入れ子のタグが展開できるので改めて覚え直ししようと思います。
環境:Mac OS10.5.8
editor:Dreamweaver8,zen-coding version0.7

ダウンロード

Downloads - zen-coding - Project Hosting on Google Codeよりダウンロード

ダウンロード後、解凍します。
解凍後、「Zen Coding v.0.7.mxp」を起動し、規約に承認後インストールします。

Expand Abbreviationのショートカットを有効にする

なぜかMac版Dreamweaver8ではExpand Abbreviationで使用するショートカットに
行検索のショートカットが割り当てられているので、コレを変更します。(Expand Abbreviationの方を変更でも可)

メニュー >　Dreameweaver > キーボードショートカット

より行検索のショートカットを変更する

追加項目

Balance Tag Inward/Outward

選択したタグのInward(内側)/Outward（外側）を選択する.

Select Line

カーソルがある行を選択する

Split/Join Tag

tagを連結する

Remove Tag

tagを除去する

Toggle Comment

選択部をHTMLコメント化する

Increment number by1

選択した数値を+１する

Decrement number by1

選択した数値を-１する

Increment number by10

選択した数値を+10する

Decrement number by10

選択した数値を-10する

Increment number by0.1

選択した数値を+0.1する

Decrement number by0.1

選択した数値を-0.1する

Evaluate Math Expression

選択した数式を計算する

入れ子

version0.5でできなかったのでこれを覚えます。
version0.7では「#」もしくは「.」のみをつけて展開させるとdivでhtmlが展開するようです。
<div id="wrap">で展開させる場合は下記のように書き、Expand Abbreviationを実行します。

#wrap

入れ子の表現は「()」で表します。
tagを前後に加える場合は「+」でつないでいきます。

sample

実行前

[code language="html"]
#header+(.content>table>tr*2>th+td)+#footer
[/code]

実行後

[code language="html"]
<div id="header"></div>
<div class="content">
<table>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>
</div>
<div id="footer"></div>
[/code]

お試しテンプレートsample

[code language="html"]
(#wrap>#wrap_inner)+(#content>#content_inner)+(#footer>#footer_inner)
[/code]
■html5っぽく
[code language="html"]
html:5>(header>h1)+(nav>ul>li5)+(article>h2+h3)+(aside>h4+h5)+footer
[/code]
■定義リスト
[code language="html"]
dl>(dt+dd)4
[/code]
■テーブル
[code language="html"]
table>tr*2>th+td
[/code]

終わりに

沢山テンプレートを用意しておくとcodingの効率があがりそうです。