ライブビューが従来の Dreamweaver デザインビューと異なる点は、実際のブラウザ上にページが表示される様子を、編集できないビューとして、より正確にレンダリングできることです。ライブビューは [ブラウザでプレビュー] コマンドの代わりではなく、ブラウザ上で実際に表示される際の "ライブ" 状態を Dreamweaver ワークスペースの外に出ることなく確認するための、もう 1 つの表示方法です。

デザインビューを使用しているときは、いつでもライブビューに切り替えることができます。ただし、Dreamweaver における従来からのビュー切り替え (コード / 分割 / デザイン) と、ライブビューへの切り替えは意味が異なります。デザインビューからライブビューに切り替えることは、単にデザインビューを編集可能な状態から "ライブ" 状態に切り替えることです。

ライブビューを使用している間、デザインビューの動作は停止しますが、コードビューでの編集操作は引き続き可能です。このため、コードに変更を加えてライブビューの表示を更新すれば変更の結果を確認できます。ライブビューの使用中は、ライブコードを確認するための追加オプションが有効になります。これはライブコードビューと呼ばれ、当該ページをレンダリングするためにブラウザで実行される実際のコードが表示されます。ライブビューと同じく、ライブコードビューも編集不可能なビューです。

ライブビューのもう 1 つのメリットは、JavaScript の実行を停止する機能を備えていることです。たとえば、ユーザーの操作に反応して行のカラーが変化するよう Spry ベースのテーブルを設定している場合、ライブビューにおいて行をマウスでポイントするなどの操作を実行するとテーブルが反応します。その時点で JavaScript の実行を停止すると、ライブビュー上のページは現在の状態のまま動かなくなります。これにより、停止した状態で CSS や JavaScript に変更を加え、ページの表示を更新して変更結果を確認することが可能になります。ライブビューの JavaScript 停止機能は、従来のデザインビューでは表示できない、ポップアップメニューなどインタラクティブなエレメントの状態が変化したときのプロパティについて、確認や変更の作業が必要な場合に便利です。

ライブビューの使い方について Dreamweaver エンジニアリングチームが説明する概要ビデオは、www.adobe.com/go/dw10liveview_jp を参照してください。

ライブビュー、関連ファイル、およびコードナビゲータの操作に関するビデオチュートリアルについては、www.adobe.com/go/lrvid4044_dw_jp を参照してください。

1. 現在のビューが、デザインビュー ([表示]-[デザイン]) またはコードおよびデザインの分割ビュー ([表示]-[コードとデザイン]) のいずれかになっていることを確認します。

2. ライブビューボタン  をクリックします。

3. (オプション) コードビュー、[CSS スタイル] パネル、外部 CSS スタイルシート、その他の関連ファイルなどに対して変更を加えます。

   ライブビューは編集不可能ですが、他の領域 (たとえば、コードビューの [CSS スタイル] パネルなど) で編集操作を実行してからライブビュー内をクリックすると、変更の結果が表示に反映されます。

   関連ファイル (CSS スタイルシートなど) をドキュメント上部の関連ファイルツールバーから開くと、ライブビューからフォーカスを外すことなく関連ファイルに対する作業ができます。

4. コードビューまたは関連ファイルに対して変更を加えた場合は、ドキュメントツールバーの [更新] ボタンをクリックするか F5 キーを押して、ライブビューの表示を更新します。

5. 編集可能なデザインビューに戻るには、ライブビューボタンをもう一度クリックします。

ライブコードビューに表示されるコードは、ブラウザでページソースの表示を実行した場合に表示されるコードに近い内容です。ただし、ブラウザのページソース表示は現在表示しているページのソースを見るだけの静的なものであるのに対し、ライブコードビューの表示は動的であり、ライブビューでページを操作するとそれに応じてコードが変化します。

1. 現在のビューがライブビューになっていることを確認します。

2. ライブコードボタン  をクリックします。

   当該ページを実行する際にブラウザで使用されると考えられる実際のコードが表示されます。このコードは黄色でハイライト表示され、編集はできません。

3. 編集可能なコードビューに戻るには、ライブコードボタンをもう一度クリックします。

次のいずれかの操作を実行します。

• F6 キーを押します。

• ライブビューボタンのポップアップメニューから、[JavaScript の停止] を選択します。

ドキュメント上部の情報バーに、JavaScript が停止されていることが表示されます。情報バーを閉じるには、閉じるリンクをクリックします。

ライブビューボタンのポップアップメニュー、または [表示]-[ライブビューオプション] メニュー項目には、[JavaScript の停止] の他にもいくつかのオプションがあります。

JavaScript の停止

JavaScript の影響を受けるエレメントを現在の状態のまま停止します。

JavaScript を無効にする

JavaScript を無効にしてページを再描画し、ブラウザの設定で JavaScript が有効になっていない場合と同様の表示にします。

プラグインを無効にする

プラグインを無効にしてページを再描画し、ブラウザの設定でプラグインが有効になっていない場合と同様の表示にします。

ドキュメントソースにテストサーバを使用

動的ページ (ColdFusion ページなど) で主に使用されるオプションであり、動的ページに対しては初期設定でオンになっています。このオプションがオンの場合は、ライブビュー表示のソースファイルとして、サイトのテストサーバー上にあるバージョンが使用されます。

ドキュメントのリンクにローカルファイルを使用

動的でないサイトに対しては初期設定でオンになっています。テストサーバーを使用する動的サイトに対してこのオプションをオンにすると、ドキュメントにリンクされているファイル (CSS ファイル、JavaScript ファイルなど) について、テストサーバー上ではなくローカルにあるバージョンが使用されます。これにより、関連ファイルに対する変更をローカルで実行し、テストサーバー上にアップロードする前に変更結果を確認できます。このオプションがオフの場合、関連ファイルはテストサーバー上にあるバージョンが使用されます。

HTTP リクエストの設定

ライブデータ表示の値を入力する詳細設定用のダイアログボックスを開きます。詳細については、ダイアログボックスの [ヘルプ] ボタンをクリックしてください。