拡張機能とiPhoneシュミレーター

Zen-Cording

Zen-Codingサイト
http://code.google.com/p/zen-coding/

サイトトップ画面の左はじにある「Show all »」から、Dreamweaver
拡張機能をDLする。

「Zen-Coding for Dreamweaver」をインストール

ADOBE EXTENTION MANARGER」上に表示されれば完了

Zen-Cordingのカスタマイズ

カスタマイズするZen-Codingの設定ファイルの場所

カスタマイズするjsの場所はソフトにより違います。

例としてZen-Codingの設定ファイルの場所は以下のような場所にあります。

DreamweaverWindows

Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver “バージョン”/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js

DreamweaverMac

ユーザ名/ライブラリ/Application Suppor/Adobe/Dreamweaver “バージョン”/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js


Dreamweaverで入力

html:5

選択

若しくはショートカットMacは「Comand+E」
Windowsは「control+,」(カンマ)

表示

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

入力

div#content>ul#nav>li*3>a

表示

<div id="content">
<ul>
<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>