web制作

話題のコーディングツールZen CodingをDreamweaver8にインストールしてみた。

スポンサーリンク

2010/02/28

-web制作
-

自宅で使用しているDreamweaver8にぜひともZenCodingをインストールしたい!!と思い立ちがんばりました。
公式にサポートがされているのはDreameweaverCS4のため不安でしたが……
なんとかインストール成功しました。
2月28日現在最新のバージョンは0.6なのですが、動作しなかったため0.5を使用します。

環境は
MacOSX 10.5.8-leopard
Dreamweaver8

インストール

[1]ダウンロード
Zen Coding.mxp - zen-coding - Zen Coding for Dreamweaver v0.5 - Project Hosting on Google Code

[2]ダウンロードファイルを展開すると
11ピクチャ 2

が表示されます。
「開く」をクリックしてExtension Managerを開きます。
初めて存在を知りましたExtension Manager(笑)

[3]「インストール」をクリックして、Zen Coding.mxpを選択、もしくはZen Coding.mxpをダブルクリックします。

[4]使用許諾を聞かれるので「承諾する」をクリック
[5]OKが表示されます
ピクチャ 4

[6]Dreamwearverを再起動します。

インストールは以上で完了します。
なんとも簡単です。

doctype宣言のデフォルト設定がenなどになっているため、出力タグを変更する場合はzen_settings.js内の記述を変更します。
zen_settings.js内でタグの出力内容を変更できるようです。

11行目〜の

    'variables': {
    'lang': 'en',
    'locale': 'en-US',
    'charset': 'UTF-8',
    'profile': 'xhtml',

を編集するとデフォルト値を変更可能。

ファイルパス
/Users/********/Library/Application Support/Macromedia/Dreamweaver 8/Configuration/Commands/ZenCoding/zen_settings.js

使い方

キーワードを入力してctrl + , (カンマ)を押すだけ!

div#main

と入力したあとにctrl+,を押すと

<div id="main"></div>

が展開されます。嗚呼半端なく素敵です。

リスト系のタグ時に重宝しそうです。
一番感動したのがtableです。
ぜひ感動をわかちあうためにこの文字列をうってctrl+,を押してください。

table>tr>td*3

参考にさせていただきました。
zen-codingとDreamweaverメモ ? 乱雑モックアップ
コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 - Web:a piece of cake!;
Zen-Condigの基本文法をおさらい | ブログ | ちゃんとWebなホームページ制作会社(東京) エイチツーオー・スペース[H2O Space.]
Zen-CodingをMTで簡単に使うプラグインを試して、変換候補を追加してみた|caraldo.net | WebとiPhoneとロードバイクが大好き!

スポンサードリンク

-web制作
-

おすすめゲーム「ステラクロニクル」

SDキャラのモーションで描かれる100万字以上の濃厚ストーリー『ステラクロニクル』登場
2.5Dで作られた美しいマップ,スライドを使った攻撃アクション、100以上のスキルによるカスタム育成、 DIY自由なお屋敷!かわいいキャラクターからお気に入りをそだてあげよう!

キャラクターのデザイン良◎のスライドコマンドRPG!

「ステラクロニクル 」の"無料ダウンロード"はこちら

 

-web制作
-

Copyright© LAGRANGE BLOG , 2020 All Rights Reserved.