ページのプレビュー

リアルタイムプレビューでは、ページのコードを変更したときに、その結果をブラウザーでリアルタイムにプレビューできます。

ライブビューでは、ページが web でどのように表示されるかをプレビューし、コードビューで様々なアイテムを編集できます。

ページが web でどのように表示されるかは、デザインビューでもプレビューできます。ただし、ブラウザーとまったく同じように表示されるわけではありません。

「ブラウザーで開く」機能を使用すると、ブラウザーにおけるページ表示を確認できます。これはリアルタイムではないので、データベースから動的データを使用するページに適しています。

詳しくは、Dreamweaver のプレビューオプションの種類に関する説明を参照してください。

Dreamweaver で web ページのコード作成またはデザインを実行しているときに、web ページをリアルタイムでプレビューできます。この機能を使用すると、web ページのコードを作成しているときに、web ページを複数のブラウザーで同時にプレビューできます。 

ブラウザーでのプレビューの環境設定

リアルタイムプレビューとブラウザーでのプレビューを切り替えることができます。サイトのプレビュー時にブラウザーを使用する場合の環境設定と、初期設定のプライマリブラウザーおよびセカンダリブラウザーを定義します。

これらのブラウザーの環境設定は、リアルタイムプレビューを使用してサイトをライブでプレビューするか、ブラウザーでページを開くかに関係なく使用されます。

静的ブラウザープレビューを既定値に設定  これにより、ユーザーはブラウザーでファイルをプレビューするモードを選択できます。チェックボックスをオンにすると、ユーザーはメニューの「ブラウザーで開く」とショートカットを使用してファイルをプレビューできます。チェックを外すと、ブラウザーでファイルをプレビューするためにリアルタイムプレビューが使用されます。デフォルトでは、チェックボックスはオフになっており、ブラウザーでファイルをプレビューするためにリアルタイムプレビューが使用されます。

ライブビュー内でのページのプレビュー

ライブビューが従来の Dreamweaver デザインビューと異なる点は、実際のブラウザー上にページが表示される様子を、より正確にレンダリングできることです。また、これを編集することも可能です。 

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

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

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

ページをライブビューでプレビューするには：

ライブコードのプレビュー

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

ライブコードの環境設定を変更するには、編集／環境設定（Windows）または Dreamweaver／環境設定（macOS）を選択し、コードカラーリングカテゴリを選択します。

JavaScript の停止

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

• F6 キーを押します。

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

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

ライブビューのオプション

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

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

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

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

ライブコードで変更をハイライト表示 ライブコードでの変更のハイライト表示をオンまたはオフに切り替えます。

新規タブでライブビューページを編集 ブラウザーナビゲーションツールバーまたはリンク先を表示機能を使用して参照しているサイトドキュメント用の新しいタブを開きます。新しいタブを作成するには、最初にドキュメントを参照してから「新規タブでライブビューページを編集」を選択する必要があります。

リンク先を表示 ライブビューで次にクリックするリンクをアクティブにします。または、Control キーを押しながらライブビューのリンクをクリックして、リンクをアクティブにすることもできます。

リンク先を連続表示 ライブビューのリンクを無効に戻すか、ページを閉じるまで、連続してリンクをアクティブにします。

自動でリモートファイルを同期 ブラウザーナビゲーションツールバーの更新アイコンをクリックしたときに、ローカルファイルとリモートファイルを自動的に同期します。両方のファイルが同期するように、更新の前に Dreamweaver によってファイルがサーバーに配置されます。

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

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

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

ブラウザーで開く

任意の時点でページをブラウザーで開くことができます。事前にページを web サーバーにアップロードしておく必要はありません。必要なプラグインや ActiveX コントロールがブラウザーにインストールされている状態でページをプレビューすると、JavaScript ビヘイビアー、ドキュメント相対リンクと絶対リンク、ActiveX® コントロール、ブラウザー プラグインなど、すべてのブラウザー関連の機能が動作します。

ドキュメントをブラウザーで開く場合、開く前に保存します。保存しないと、最新の変更がブラウザーに表示されません。