Web サイトを設計する

Web サイトを設計するには、サイト内のページ間の相互関係を判別し、 サイト全体に適用される密着した設計を作成する必要があります。

Web Site Designer は、Web サイトを設計および作成するために提供されている ツールです。Web Site Designer を使用すると、一貫性のあるテーマ (レイアウトおよびスタイル) を持つ複数の Web ページから成る Web サイトを作成することができます。レイアウトは ページ・コンポーネントの位置を定義します。例えばページ・テンプレートを使用して、 Web サイトでナビゲーション・バーが常に各ページの上部に来るように指定することが できます。スタイルは Cascading Style Sheet (CSS) を使用してページの外観を 定義します。Web Site Designer から Web サイトのすべてのページの CSS を 指定することができます。CSS はページ・テンプレートで定義することもできます。Web サイト の計画と設計が終わったら、Page Designer など、多くの Web ツールを使用して 個々の Web ページを作成することができます。

Web Site Designer を ファイル関係のビジュアル・マップとして使用することができます。Web Site Designer は、 トップ・ページから始まるすべてのレベルを持つ階層としてサイト構造を表示します。
階層としてのサイト構造
サイト構造は、 Web プロジェクトの Web ページ間の関係を確立することにより 作成することができます。 Web プロジェクト内のファイル間の関係を作成するためには、 Web Site Designer にページを追加する順序でトップ・ページとその子ページの間 のリンクを作成します。トップ・ページの子ページを確立した後は、 子ページについてそのプロセスが繰り返されます。上記の例では、索引ページがトップ・ページです。 製品ページとフィードバック・ページは索引ページの子です。販売ページは 製品ページの子です。

すべてのリンク・ページがサイト構造に追加されると、 プロセスが完了します。Web Site Designer は子ページと兄弟ページを、ページが 確立された順序で表示します。Web Site Designer は開発時にサイト構造の レイアウトを作成したり、サイト実動中にサイト訪問者によって使用される ナビゲーションを生成するのに最適です。

Web サイトの設計では、次の 2 つの メイン・アクティビティーが実行されます。
  1. ページ間の相互関係を判別する
  2. 密着した Web サイト設計を作成する

ページ間の相互関係を判別する

新規 Web サイトを作成するための Rational® Developer の方法では、実ページの設計を移植する前に、Web サイトとページの関係を概念化する 必要があります。Web サイトは Web ページがどのように共に適合するかを示す、 階層設計および編成です。Web サイトにはハイレベル・ゴールがあり、 各 Web ページはそのハイレベル・ゴールに到達するために特定の目的を果たします。

Web ページ 間の相互の関係を作成したり、Web サイトを設計するためには、 まずすべての Web アプリケーション・リソースを入れる Web プロジェクトを 作成する必要があります。それから、Web サイト構造を作成します。

Web ページ間の 相互関係を作成したり、Web サイトを設計するには、以下のようにします。
  1. Web プロジェクトを作成またはインポートする。
  2. Web サイト構造を作成する

密着した Web サイト設計を作成する

密着した Web サイト設計を 作成することにより、Web サイトのすべての Web ページで一貫性のあるルック・アンド・フィール を設計します。Web サイトに共通のルック・アンド・フィールを 制御するには、以下を実行するのが最適です。
  1. ページ・テンプレート を作成する

    ページ・テンプレートは、Page Designer での新規 HTML、XHTML、JSP、 または Faces JSP ページの作成に使用できるパターンです。それぞれの新規ページは ページ・テンプレートのように見え、通常はそのページに特定の情報を追加するための ページのセクションが含まれています。ページ・テンプレートを使用すると、 Web サイト全体で一貫したルック・アンド・フィールを維持することができます。複数ページ で一貫性のあるフォーマットにしたり、各ページで同じグラフィックを 使用することができます。例えば、Web サイトの各ページが会社のロゴと同一ヘッダーを 持つことができます。ページ・テンプレートを変更すると、更新されたページ・テンプレートを 保管したときに、そのページ・テンプレートを使用するすべてのページが自動的に 更新されます。Web サイトは複数のページ・テンプレートを使用することができます。また、 ページ・テンプレートから CSS ファイルにリンクしてサイト全体のスタイル・シートを 作成することもできます。

  2. Web サイト・スタイルを 定義する

    Cascading Style Sheet (CSS) は、Web ページと CSS が 別々に保守されているため、Web サイト全体で一貫したスタイルを持っているかを 確認するために使用できる単一ファイルです。CSS を更新するたびに、その CSS にリンクする サイト内のすべての Web ページに変更が自動的に適用されます。

サイトのレイアウトと構造の設計について学習するには、 以下のチュートリアルを実行してください。

チュートリアル: Web サイトの レイアウトと構造を設計する

候補ウィンドウを使用して DBCS 漢字を入力する
注:

Linux のみ。 Site Designer では、候補ウィンドウを使用して DBCS 漢字を 入力することはできません。Web Site Designer では、canna の候補ウィンドウを 使用してテキスト・フィールドを編集する場合、DBCS 漢字を入力すると失敗します。この問題を 回避するには、canna ではなく Wnn を使用してください。詳しくは、オペレーティング・システムの インストール・マニュアルを参照してください。

関連概念
Web プロジェクト
Cascading Style Sheet (CSS) Designer
関連タスク
Web サイト開発
Web サイト方針を定義する
Web ページと Web リソースを作成またはインポートする
Web サイトをテストする
Web サイトを公開する
Web サイトを保守する
Web サイト構造を作成する
ページ・テンプレートを作成する
ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.