デザインビューで、ページ上のテキストを選択するか、動的テキストを追加する場所をクリックします。
最終更新日 :
2024年4月25日
メモ
Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。 そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。 詳しくは、こちらの記事を参照してください。
動的コンテンツの追加について
動的コンテンツの引用元を 1 つまたは複数定義した後、その引用元を使用してページに動的コンテンツを追加できます。コンテンツソースには、レコードセット内の列、HTML フォームによって送信される値、サーバーオブジェクトに含まれる値、またはその他のデータが含まれます。
Dreamweaver では、Web ページまたはその HTML ソースコード内のほぼどこにでも動的コンテンツを配置できます。挿入ポイントに動的コンテンツを配置したり、文字列を置き換えたり、HTML 属性として挿入したりできます。例えば、動的コンテンツは画像の src 属性やフォームフィールドの value 属性を定義できます。
バインディングパネルでコンテンツ引用元を選択することで、ページに動的コンテンツを追加できます。Dreamweaver はページのコードにサーバーサイドスクリプトを挿入し、ブラウザーによってページが要求されたときに、コンテンツ引用元からページの HTML コードにデータを移行するようにサーバーに指示します。
特定のページ要素を動的にする方法は複数あることが多いです。例えば、画像を動的にするには、バインディングパネル、プロパティインスペクター、または挿入メニューの画像コマンドを使用できます。
初期設定では、HTML ページには一度に 1 レコードだけを表示できます。 レコードセット内の他のレコードを表示するには、レコードを1つずつ移動するためのリンクを追加するか、繰り返し領域を作成して単一ページに複数のレコードを表示することができます。
動的テキストについて
動的テキストは、既存のテキストまたは挿入ポイントに適用されているテキスト書式を採用します。例えば、カスケーディングスタイルシート（CSS）スタイルが選択したテキストに影響する場合、それを置き換える動的コンテンツもそのスタイルの影響を受けます。Dreamweaverのテキスト書式設定ツールを使用して、動的コンテンツのテキスト書式を追加または変更できます。
動的テキストには、データフォーマットを適用することもできます。 例えば、データが日付で構成されている場合、米国では 04/17/00 のような特定の日付書式を指定できます。カナダの訪問者の場合は 17/04/00 です。
テキストを動的にする
既存のテキストを動的テキストに置き換えたり、ページ上の指定した挿入ポイントに動的テキストを配置したりできます。
動的テキストの追加
バインディングパネル（ウィンドウ > バインディング）で、リストからコンテンツソースを選択します。レコードセットを選択した場合は、レコードセットで使用する列を指定します。
コンテンツソースとして使用するのは、その内容がプレーンテキスト（ASCII テキスト）のものです。 プレーンテキストには HTML も含まれます。 リストにコンテンツソースが表示されない場合、または使用可能なコンテンツソースがニーズに合わない場合は、プラス（+）ボタンをクリックして新しいコンテンツソースを定義します。
（オプション）テキストのデータフォーマットを選択します。
「挿入」をクリックするか、コンテンツソースをページにドラッグします。
動的コンテンツプレースホルダーが表示されます。 （ページ上でテキストを選択した場合、プレースホルダーがテキスト選択範囲を置き換えます。）レコードセットコンテンツのプレースホルダーは {RecordsetName.ColumnName} の構文を使用します。ここで、Recordset はレコードセットの名前、ColumnName はレコードセットから選択した列の名前です。
動的テキストのプレースホルダーが長すぎると、ドキュメントウィンドウでページのレイアウトが歪む場合があります。次のトピックで説明するように、空の中括弧をプレースホルダーとして使用することで、この問題を解決できます。
動的テキストのプレースホルダーを表示する
編集／環境設定／非表示要素（Windows）またはDreamweaver／環境設定／非表示要素（Macintosh）を選択します。
「動的テキストの表示形式」ポップアップメニューで{ }を選択し、
「OK」をクリックします。
イメージを動的にする
ページ上のイメージを動的にすることができます。 例えば、チャリティーオークションの販売アイテムを表示するページをデザインするとします。各ページには説明テキストと 1つのアイテムの写真が含まれます。ページの一般的なレイアウトは各アイテムで同じままですが、写真（と説明テキスト）は変更することができます。
デザインビューでページを開いた状態で（表示／
デザイン）、ページ上で画像を表示したい場所に挿入ポイントを配置します。
挿入／イメージを選択します。
イメージソースの選択ダイアログボックスが表示されます。
「データソース」オプション（Windows）または「データソース」
ボタン（Macintosh）をクリックします。
コンテンツソースのリストが表示されます。
リストからコンテンツソースを選択し、「OK」をクリックします。
コンテンツソースは、画像ファイルへの パスを含むレコードセットである必要があります。サイトのファイル構造によって、パスは絶対パス、ドキュメント相対パス、またはルート相対パスにすることができます。
メモ
Dreamweaverは現在、 データベースに保存されたバイナリ画像をサポートしていません。
リストにレコードセットが表示されない場合、または 利用可能なレコードセットがニーズに合わない場合は、 新しいレコードセットを定義します。
HTML 属性を動的にする
HTMLアトリビューションをデータにバインドすることで、 ページの外観を動的に変更できます。例えば、テーブルのbackground属性をレコードセットのフィールドにバインディングすることで、テーブルの背景画像を変更できます。
HTMLアトリビューションは、 バインディングパネルまたはプロパティインスペクターでバインドできます。
バインディングパネルでHTMLアトリビューションを 動的にする
ウィンドウ＞バインディングを選択して、バインディングパネルを開きます。
バインディングパネルに使用したい
データソースがリストされていることを確認します。
コンテンツソースには、バインドしたい HTMLアトリビューションに適したデータが含まれている必要があります。リストにコンテンツソースが 表示されない場合、または利用可能なコンテンツソースがニーズを 満たさない場合は、プラス（+）ボタンをクリックして新しいデータソースを定義します。
デザインビューで、HTML オブジェクトを選択します。
例えば、HTMLテーブルを選択するには、テーブル内をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで<table>タグをクリックします。
バインディングパネルで、リストから
コンテンツソースを選択します。
「バインド先」ボックスで、ポップアップメニューから HTML 属性を選択します。
「バインド」をクリックします。
次回ページがアプリケーションサーバーで実行されると、データソースの値がHTML属性に割り当てられます。
プロパティインスペクターでHTMLアトリビューションを 動的にする
デザインビューで、HTMLオブジェクトを選択し、プロパティインスペクター（ウィンドウ／プロパティ）を開きます。
例えば、HTMLテーブルを選択するには、テーブル内をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで<table>タグをクリックします。
動的コンテンツソースをHTML属性にバインドする方法は、その場所によって異なります。
バインドしたい属性がプロパティインスペクターでフォルダーアイコンの横にある場合は、フォルダーアイコンをクリックしてファイル選択ダイアログボックスを開き、「データソース」オプションをクリックしてデータソースのリストを表示します。
バインドしたい属性にフォルダーアイコンがない場合は、インスペクターの左側にある「リスト」タブ（2つのタブの下の方）をクリックします。
プロパティインスペクターのリストビューが表示されます。
バインドしたい属性がリストビューに表示されていない場合は、プラス（+）ボタンをクリックし、属性名を入力するか、小さな矢印ボタンをクリックしてポップアップメニューから属性を選択します。
属性の値を動的にするには、属性をクリックしてから、属性の行の最後にある稲妻アイコンまたはフォルダーアイコンをクリックします。
稲妻アイコンをクリックした場合、データソースのリストが表示されます。
フォルダーアイコンをクリックした場合、ファイル選択ダイアログボックスが表示されます。「データソース」オプションを選択して、コンテンツソースのリストを表示します。
コンテンツソースのリストからコンテンツのソースを選択し、「OK」をクリックします。
コンテンツソースには、バインドしたいHTML属性に適したデータが含まれている必要があります。リストにコンテンツソースが表示されない場合、または使用可能なコンテンツソースがニーズを満たさない場合は、新しいコンテンツソースを定義します。
次回ページがアプリケーションサーバーで実行されるとき、データソースの値がHTML属性に割り当てられます。
ActiveX、Flash、その他のオブジェクトパラメーターを動的にする
Javaアプレットやプラグインのパラメーターだけでなく、ActiveX、Flash、Shockwave、Director、Generatorオブジェクトのパラメーターも動的にできます。
開始する前に、レコードセット内のフィールドに、バインドしたいオブジェクトパラメーターに適したデータが含まれていることを確認してください。
デザインビューで、ページ上のオブジェクトを選択し、プロパティインスペクター（ウィンドウ／プロパティ）を開きます。
「パラメーター」ボタンをクリックします。
パラメーターがリストに表示されない場合は、プラス（+）ボタンをクリックし、「パラメーター」列にパラメーター名を入力します。
パラメーターの「値」列をクリックし、稲妻アイコンをクリックして動的な値を指定します。
データソースのリストが表示されます。
リストからデータソースを選択し、「OK」をクリックします。
データソースには、バインドしたいオブジェクトパラメーターに適したデータが含まれている必要があります。リストにデータソースが表示されない場合、または使用可能なデータソースがニーズを満たさない場合は、新しいデータソースを定義します。
