- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。詳しくは、こちらの記事を参照してください。
動的コンテンツの追加について
動的コンテンツのソースを定義すると、そのソースを使用してページに動的コンテンツを追加できます。コンテンツソースの内容として可能なものには、レコードセットの列、HTML フォームを使用して送信された値、サーバーオブジェクトに含まれている値およびその他のデータがあります。
Dreamweaver では、Web ページやその HTML ソースコードのほとんどすべての場所に動的コンテンツを配置できます。動的コンテンツを挿入ポイントに配置したり、テキストストリングを置き換えたりできる他、HTML 属性として挿入することもできます。例えば、動的コンテンツを使用して、イメージの src 属性やフォームフィールドの value 属性を定義することができます。
バインディングパネルでコンテンツのソースを選択して、ページに動的コンテンツを追加できます。Dreamweaver によってページのコードにサーバーサイドスクリプトが挿入されます。これは、ブラウザーからこのページが要求されたときに、コンテンツソースからページの HTML コードにデータを転送することをサーバーに指示するものです。
あるページエレメントを動的にする(ダイナミック化する)には、通常、複数の方法があります。例えば、イメージを動的にする場合は、バインディングパネル、プロパティインスペクター、または挿入メニューの「イメージ」コマンドを使用することができます。
初期設定では、HTML ページには一度に 1 レコードだけを表示できます。レコードセットの他のレコードを表示するには、一度に 1 つずつレコード間を移動するリンクを追加します。または、リピート領域を作成して、複数のレコードを同じページに表示します。
動的テキストについて
動的テキストには、既存のテキストまたは挿入ポイントに設定されているテキストフォーマットがすべて適用されます。例えば、選択したテキストに CSS(Cascading Style Sheet)スタイルが設定されている場合は、そのテキストを置き換える動的コンテンツにもそのスタイルが適用されます。動的コンテンツのテキストフォーマットは、Dreamweaver のテキストフォーマットツールを使用して追加または変更できます。
動的テキストには、データフォーマットを適用することもできます。例えば、データに日付が含まれている場合、米国のビジターには 04/17/00、カナダのビジターには 17/04/00 など、特定の日付フォーマットを指定することができます。
テキストを動的にする
既存のテキストを動的テキストで置き換えることも、動的テキストをページ上の特定の挿入ポイントに挿入することもできます。
動的テキストの追加
-
デザインビューで、ページ上のテキストを選択するか、動的テキストを追加する場所をクリックします。
-
バインディングパネル(ウィンドウ/バインディング)のリストからコンテンツソースを選択します。レコードセットを選択する場合は、レコードセット内の希望の列を指定します。
コンテンツソースとして使用するのは、その内容がプレーンテキスト(ASCII テキスト)のものです。プレーンテキストには HTML も含まれます。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、「+」ボタンをクリックして新しいコンテンツソースを定義します。
-
(オプション)テキストのデータフォーマットを選択します。
-
「挿入」をクリックするか、コンテンツソースをページにドラッグします。
動的コンテンツプレースホルダーが表示されます。ページ上のテキストが選択されている場合は、選択範囲がプレースホルダーで置換されます。レコードセットコンテンツを表すプレースホルダーのシンタックスは {RecordsetName.ColumnName} です。ここで、Recordset はレコードセットの名前、ColumnName はレコードセットから選択した列の名前です。
動的テキストのプレースホルダーの長さによっては、ドキュメントウィンドウでのページのレイアウトが変形することがあります。この問題を解決するには、次のトピックで説明されているように、空の波カッコをプレースホルダーとして使用します。
動的テキストのプレースホルダーの表示
-
編集/環境設定/不可視エレメント(Windows)または Dreamweaver/環境設定/不可視エレメント(Mac OS)を選択します。
-
動的テキストの表示方法ポップアップメニューで { } を選択して、「OK」をクリックします。
イメージを動的にする
ページ上のイメージを動的にすることができます。例えば、チャリティオークションで販売する商品を表示するページをデザインするとします。1 ページに 1 つの商品の説明と写真を掲載します。ページの基本的なレイアウトは全商品に共通ですが、写真と説明は商品によって異なります。
-
デザインビュー(表示/デザイン)でページを開き、イメージを表示する場所に挿入ポイントを置きます。
-
挿入/イメージを選択します。
イメージソースの選択ダイアログボックスが表示されます。
-
「データソース」オプション(Windows)または「データソース」ボタン(Mac OS)をクリックします。
コンテンツソースのリストが表示されます。
-
リストからコンテンツソースを選択し、「OK」をクリックします。
コンテンツソースは、イメージファイルへのパスを含むレコードセットであることが必要です。サイトのファイル構造によって、パスは絶対パス、ドキュメント相対パス、ルート相対パスのいずれかになります。
注意:現在、Dreamweaver はデータベース内に格納されているバイナリイメージをサポートしていません。
リストにレコードセットがまったく表示されない場合や、表示された中に必要なレコードセットがない場合は、新しいレコードセットを定義します。
HTML 属性を動的にする
HTML 属性をデータにバインドすることにより、ページの外観を動的に変更できます。例えば、テーブルの background 属性をレコードセットのフィールドにバインドすると、テーブルの背景イメージを変えることができます。
HTML 属性をバインドするには、バインディングパネルまたはプロパティインスペクターを使用します。
バインディングパネルを使用して HTML 属性を動的にする
-
ウィンドウ/バインディングを選択し、バインディングパネルを開きます。
-
バインディングパネルに、使用するデータソースが表示されていることを確認します。
コンテンツソースには、バインドする HTML 属性に対して適切なデータが含まれている必要があります。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、「+」ボタンをクリックして新しいコンテンツソースを定義します。
-
デザインビューで、HTML オブジェクトを選択します。
例えば、HTML テーブルを選択するには、テーブルの内側をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで <table> タグをクリックします。
-
バインディングパネルのリストからコンテンツソースを選択します。
-
「バインド先」ボックスのポップアップメニューで HTML 属性を選択します。
-
「バインド」をクリックします。
次にアプリケーションサーバーでページが実行されるときは、このデータソースの値が HTML 属性に割り当てられます。
プロパティインスペクターを使用して HTML 属性を動的にする
-
デザインビューで、HTML オブジェクトを選択し、プロパティインスペクターを開きます(ウィンドウ/プロパティ)。
例えば、HTML テーブルを選択するには、テーブルの内側をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで <table> タグをクリックします。
-
動的コンテンツソースを HTML 属性にバインドする方法は、動的コンテンツソースの位置によって異なります。
プロパティインスペクターで、バインドする属性の横にフォルダーアイコンが表示されている場合は、そのフォルダーアイコンをクリックするとファイル選択ダイアログボックスが表示されます。次に「データソース」オプションをクリックすると、データソースのリストが表示されます。
バインドする属性の横にフォルダーアイコンがない場合は、プロパティインスペクターの左側の「リスト」タブ(2 つあるタブのうち下のもの)をクリックしてください。
プロパティインスペクターのリストビューが表示されます。
バインドする属性がリストビューに表示されていない場合は、「+」ボタンをクリックして属性名を入力するか、小さい矢印ボタンをクリックしてポップアップメニューから属性を選択します。
-
属性の値を動的にするには、属性をクリックして、稲妻アイコンをクリックするか、属性の行の最後にあるフォルダーアイコンをクリックします。
稲妻アイコンをクリックした場合は、データソースのリストが表示されます。
フォルダーアイコンをクリックした場合は、ファイル選択ダイアログボックスが表示されます。「データソース」オプションを選択して、コンテンツソースのリストを表示します。
-
コンテンツソースのリストからコンテンツのソースを選択して、「OK」をクリックします。
コンテンツソースには、バインドする HTML 属性に対して適切なデータが含まれている必要があります。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、新しいコンテンツソースを定義します。
次にアプリケーションサーバーでページが実行されるときは、このデータソースの値が HTML 属性に割り当てられます。
ActiveX、Flash およびその他のオブジェクトのパラメーターを動的にする
ActiveX、Flash、Shockwave、Director、および Generator オブジェクトのパラメーターだけでなく、Java アプレットやプラグインのパラメーターも動的にすることができます。
作業を始める前に、レコードセットのフィールドに、バインドするオブジェクトパラメーターに対して適切なデータが含まれていることを確認してください。
-
デザインビューで、ページ上のオブジェクトを選択し、プロパティインスペクターを開きます(ウィンドウ/プロパティ)。
-
「パラメーター」ボタンをクリックします。
-
動的にするパラメーターがリストに表示されない場合は、「+」ボタンをクリックして「パラメーター」列にパラメーター名を入力します。
-
パラメーターの「値」列をクリックし、稲妻アイコンをクリックして動的な値を指定します。
データソースのリストが表示されます。
-
リストからデータソースを選択し、「OK」をクリックします。
データソースには、バインドするオブジェクトパラメーターに対して適切なデータが含まれている必要があります。リストにデータソースがまったく表示されない場合や、表示されたデータソースの中に要求を満たすものがない場合は、新しいデータソースを定義します。