課題 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 サイト・デザイナーのナビゲーション・ビューが表示されます。 このツールを使用すると、Web サイトを構成する Web ページの追加、削除、および再配置を行うことができます。
  3. 初めは、「ナビゲーション」ビューに表示されるページ・アイコンはありません。 通常、Web サイトの設計のときに最初に考えるページは、トップ・ページまたはサイトのホーム・ページです。 これが、訪問者に対する Web サイトの入り口ページとなります。 「新規ページ」コンポーネントを「パレット」ビューからドラッグし、「ナビゲーション」ビューにドロップします。 ページ・アイコンが、ページのナビゲーション・タイトルがフォーカスされた状態で表示されます。
  4. このページは、データベースのすべての広告を表示するホーム・ページとなります。 ページのナビゲーション・タイトルに「広告をすべて表示 (View All Classifieds)」と入力します。 ナビゲーション・タイトルを、サイトのナビゲーションを目的としたナビゲーション・ラベルとして使用する方法については後述します。
  5. では、訪問者はどのようにして Web サイトに自分のリストを掲載するのでしょうか。新規のリストを作成するページを作成する必要があります。 ナビゲーション・ビューの「広告をすべて表示 (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 を押すか、または「保管」ボタン保管ボタンをクリックして保管します。 ナビゲーション・ビューの外観は、以下のようになります。
Web サイト・ナビゲーション

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

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

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

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