課題 1.2: Web サイトの構造を設計する

デモの表示

Web サイトの構造を設計する前に、『課題 1.1: Web プロジェクトを作成する』を完了しておく必要があります。

Web サイトは、Web ページの集合によって構成されています。Web ページは、HTML エレメント、イメージ、およびリンクなど実際のコンテンツを含んでいますが、 一方、Web サイトは、複数の Web ページが互いにどのように適合するかを示す階層設計および編成です。 Web サイトにはハイレベルなゴール (広告リストのために集合エリアを編成して提供するなど) があり、それぞれの Web ページでは、 そのハイレベルなゴールを達成するための特定の目的 (例えば、リストから検索するページ) を提供することができます。

Web サイトの設計を始めるときの最良の方法は、全体のゴールを達成するために、どのような機能を Web サイトに持たせるべきかをよく考えることです。 広告 Web サイトの場合、サイトで実行したい機能がいくつかあります。例えば、 サイトの訪問者がリストを一度にすべて見るだけでなく検索できるようにし、 また訪問者が新しいリストの作成や編集もできるようにしたいという場合があります。

これらの機能を実行する Web サイトを作成するため、この課題では 4 つのページを計画し、次の課題でページ自体を作成します。


  1. 「プロジェクト・エクスプローラー」ビューで、ClassifiedsTutorial を展開します。
  2. 「プロジェクト・エクスプローラー」ビューの「Web サイト・ナビゲーション」をダブルクリックします。 Web Site Designer のナビゲーション・ビューが表示されます。 このツールを使用すると、Web サイトを構成する Web ページの追加、削除、および再配置を行うことができます。
  3. 初めは、「ナビゲーション」ビューに表示されるページ・アイコンはありません。通常、Web サイトの設計のときに最初に考えるページは、トップ・ページまたはサイトのホーム・ページです。 これが、訪問者に対する Web サイトの入り口ページとなります。 「新規ページ」コンポーネントを「パレット」ビューからドラッグし、「ナビゲーション」ビューにドロップします。 ページ・アイコンが、ページのナビゲーション・タイトルがフォーカスされた状態で表示されます。
  4. このページは、データベースのすべての広告を表示するホーム・ページとなります。 ページのナビゲーション・タイトルに広告をすべて表示 (View All Classifieds) と入力します。 ナビゲーション・タイトルを、サイトのナビゲーションを目的としたナビゲーション・ラベルとして使用する方法については後述します。
  5. サイトへの訪問者が自分のリストを掲載するには、 新規リストを作成するためのページが必要です。 ナビゲーション・ビューの「広告をすべて表示 (View All Classifieds)」ページ・アイコンのすぐ下に、 「新規ページ」コンポーネントをドラッグして 2 番目のページ・アイコンを追加します。  
  6. 新規ページにリストの掲載 (Post a Listing) と名前を付けます。 新規ページ・アイコンが「広告をすべて表示 (View All Classifieds)」ページ・アイコンの下に表示され、 線でつながれていることに注意してください。 これは「リストの掲載 (Post a Listing)」と「広告をすべて表示 (View All Classifieds)」が親子の関係であることを意味します。
  7. また、訪問者が既存のリストを編集または削除することができるページも必要になります。例えば、訪問者が自転車のリストを追加して掲載したものの、長い間、応答が無いとします。 この場合、売り手は提示価格を下げたいと思うかもしれません。 「リストの掲載 (Post a Listing)」ページの横にもう 1 つ別のページ・アイコンを追加し、リストの更新 (Update Listing) と名前を付けます。 この新規ページ・アイコンは「リストの掲載 (Post a Listing)」の兄弟であり、「広告をすべて表示 (View All Classifieds)」の別の子であることに注意してください。
  8. 次に、この Web サイトに必要なのは検索機能です。これがあれば訪問者は既存リストの中から興味のあるものを検索して見つけることができます。 検索結果を表示するページを追加するために、「リストの更新 (Update Listing)」ページの横にもう 1 つのページ・アイコンを配置して、フィルター済みリスト (Filtered Listings) と名前を付けます。
    注: 誤って違う場所にページを置いてしまった場合や、ページ構造の再配列をしたい場合は、ページ・アイコンをドラッグするだけでいつでもサイトの再配列ができます。
  9. Ctrl+S を押して、サイトの設計を保管します。ナビゲーション・ビューの外観は、以下のようになります。
ClassifiedsTutorial プロジェクトのための Web サイト・ナビゲーション

それぞれのページ・アイコンの下に小さいアイコンの行があることに注意してください。 最初のアイコンは、まだ表示されていませんが、アイコンに関連した実際のファイルを表し、これらのファイルが作成されると表示されます。 JSP ファイルを作成する場合、このアイコンは青いダイヤです ()。HTML ファイルを作成する場合、このアイコンは 1 組の大括弧です ()。第 2 のアイコン () と第 3 のアイコン () は可視であり、デフォルトで、すべてのページがナビゲーションとサイト・マップにそれぞれ表示されるように設定されていることを示しています。 第 4 のアイコン () は、まだ可視ではありませんが、ページ・アイコンが実際のファイルに関連付けられると、そのファイルには Web サイト・ナビゲーションが何も含まれていないことを示します。 このアイコン () はページのトップで、 まだ可視ではありませんが、ナビゲーション・ルートを表しています。 これらのアイコンおよびページ・アイコン表示の別の側面について、 このモジュールの作業を進めながらさらに詳しく学習していきます。

これで、一般的な Web サイト構造が作成されたので、『課題 1.3: Web サイトに Web ページを取り込む』を始めることができます。

ご利用条件 | フィードバック

(C) Copyright IBM Corporation 2000, 2004. All Rights Reserved.