2010年07月06日

Dreamweaverで使っていましたか?「ライブビュー」「ライブコード」

開発部だより 第90回


最近、ちょっとDreamweaverで感動した機能があったので、ご紹介しようかと!

Dreamweaverの「ライブビューとライブコード」機能ぴかぴか(新しい)です。

まあ自分が、Dreamweaverを主にColdFusionのコードエディターとしてしか使用していなかったせいもあるのですが、いや〜久しぶりに、CSSでのデザインにはまってしまいましたよ(苦笑)ダッシュ(走り出すさま)

普段は、社内にデザイン部があるので、Webサイトや制作するページのデザインなどのコンセプトやイメージを伝えてデザインを行なってもらっているんですが、今回は、実行時に動的にページが作成され、ブラウザからはソースが隠されてしまっていたので頼めなかったんですよ。

自分でやり始めたのですが、最近はFlexでのプログラムがメインでしたので、既存のHTML(JavaScriptで動的に作成)を改編するのって、デザインが大変あせあせ(飛び散る汗)
なぜって、動的に生成されるページが、ブラウザでソースを表示しても、その部分が表示されずどんなタグ構成になっているか分らないんです。
内部のタグ構成が複雑な為、CSSを適用しても、意図したとおりに表示されなかったりするんですよね〜
上手くいったと思って、IE以外で表示テストをすると、動的に作成したコンテンツ領域の背景が透けてしまっていたり・・・がく〜(落胆した顔)
IEのバージョンによって、表示の仕方も異なるので、大変でした。たらーっ(汗)

そんな時に、役にたったのが、Dreamweaver CS4(まだ、最新版は使っていないので)の「ライブビュー」機能!

Dreamweaver CS4のライブビューとライブコードのボタン画像

これは、Dreamweaver CS4から搭載された機能で、Dreamweaver上で、JavaScriptの動作やSCCの適用状態をブラウザなしで確認できる機能なのですが、「ライブビュー」中に「ライブコード」を表示すると、ボタンの動作など操作でスクリプトが実行されてリアルタイムにソースコードが変わるのが見えるんです。
JavaScriptで生成されるコードが見えるので、どんなタグ構造になっているのか、動作をさせて確認ができるので、大変助かりました。


余談ですが、IEのバージョン毎にタグやCSSを切り替える場合は、「Internet Explorerの条件分岐コメント」を使うといいですよ。
検索キーは、「IE 条件分岐コメント」。
覚えておくと便利ですよ。

ではでは、たっくんでした手(パー)


posted by たっくん at 20:52
開発部だより | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック