動的ページのデザイン

ページのデザイン

Web サイトのデザインにおいて重要な手順は、動的なサイトの場合も静的なサイトの場合も、そのページの視覚的なデザインの設計手順です。 動的エレメントを web ページに追加する場合、その操作性にはページのデザインが大きく影響します。 ユーザーが個別ページおよび web サイト全体をどのように使用するかをよく考えてください。

動的コンテンツを web ページに組み込むには、コンテンツを表示するためのテーブルを作成してから、動的コンテンツをテーブルのセルに読み込む方法が一般的に用いられます。 この方法を使用すると、構造化されたフォーマットで様々な種類の情報を表示できるようになります。

動的コンテンツのソースの作成

動的 web サイトにはコンテンツソースが必要で、データはそのコンテンツソースから抽出された後に web ページ上に表示されます。 Web ページでコンテンツソースを使用するには、事前に次の操作を実行する必要があります。

• データベースなどの動的コンテンツソースへの接続と、ページを処理するアプリケーションサーバーへの接続を作成します。 バインディングパネルを使用してデータソースを作成します。これにより、ページでデータソースを選択および挿入できるようになります。

• レコードセットを作成して、データベースのどの情報を表示するか、またページにどの変数を含めるかを指定します。 レコードセットダイアログボックスからクエリーをテストし、必要な調整を行ってから、そのクエリーをバインディングパネルに追加することもできます。

• 動的コンテンツエレメントを選択し、選択したページに挿入します。

Web ページに動的コンテンツを追加します。

レコードセットやその他のデータソースを定義し、バインディングパネルに追加すると、レコードセットが表す動的コンテンツをページに挿入できるようになります。 Dreamweaver のメニュー方式のインターフェイスでは、バインディングパネルから動的コンテンツを選択し、現在のページ内の適切なテキスト、イメージ、またはフォームオブジェクトに挿入するだけで、簡単に動的コンテンツエレメントを追加できます。

動的コンテンツエレメントまたはその他のサーバービヘイビアーをページに挿入すると、Dreamweaver によってサーバーサイドスクリプトがページのソースコードに挿入されます。 スクリプトは、定義されたデータソースからデータを取得し、その結果を web ページ内に描画するようにサーバーに指示します。 Web ページに動的コンテンツを配置するには、以下のいずれかの操作を行います。

• コードビューまたはデザインビューから、挿入ポイントに動的コンテンツを配置します。

• テキスト文字列またはその他のプレースホルダーを置き換えます。

  動的コンテンツを HTML 属性内に挿入します。 例えば、動的コンテンツで、イメージの src 属性やフォームフィールドの value 属性を定義できます。

ページにサーバービヘイビアーを追加します。

動的コンテンツを追加するだけでなく、サーバービヘイビアーを使用して複雑なアプリケーションロジックを web ページに組み込むことができます。 サーバービヘイビアーとは、アプリケーションロジックを web ページに追加する定義済みのサーバーサイドコードで、これによって相互作用と機能性が向上します。

Dreamweaver サーバービヘイビアーによって、自分でコードを記述しなくてもアプリケーションロジックを web サイトに追加できます。 Dreamweaver で提供されるサーバービヘイビアーは、ColdFusion、ASP、および PHP ドキュメントタイプをサポートします。 サーバービヘイビアーは、高速、安全、および堅牢なものになるように、作成およびテストされています。 組み込みのサーバービヘイビアーは、異なるプラットフォーム上ですべてのブラウザー用の web ページをサポートするよう設計されています。

Dreamweaver のポイント＆クリックインターフェイスでは、テキストおよびデザインエレメントを挿入するときと同じように、動的コンテンツと複雑なビヘイビアーを簡単にページに適用できます。 使用できるサーバービヘイビアーは、次のとおりです。

• 既存のデータベースからのレコードセットを定義します。 定義したレコードセットは、バインディングパネルに保存されます。

• 1 つのページに複数のレコードを表示します。 テーブル全体を選択するか動的コンテンツを含む個別のセルまたは行を選択して、各ページビューに表示するレコードの数を指定します。

• 動的テーブルを作成してページに挿入し、テーブルをレコードセットと関連付けます。 プロパティインスペクターを使用してテーブルの外観を、また「リピート領域」サーバービヘイビアーを使用してリピート領域を、それぞれ後から修正できます。

• 動的テキストオブジェクトをページに挿入します。 挿入するテキストオブジェクトは、定義済みレコードセットのアイテムで、どのデータフォーマットも適用できます。

• レコードナビゲーションおよびステータスコントロール、マスター/詳細ページ、およびデータベースの情報を更新するためのフォームを作成します。

• データベースレコードでレコードを複数表示します。

• ユーザーが、データベースレコードの前後のレコードを表示できるようにする、レコードセットナビゲーションリンクを作成します。

• 返されたレコード数およびどこに結果が返されたかがわかるように、レコードカウンターを追加します。

Dreamweaver サーバービヘイビアーは、独自のサーバービヘイビアーを作成するか、サードパーティ製サーバービヘイビアーをインストールすることによって拡張できます。

ページをテストおよびデバッグします。

動的ページまたは web サイト全体を web に公開する前に、その機能をテストすることをお勧めします。 また、アプリケーションの機能が、障害のある人にどのような影響を与えるかを考慮する必要があります。