課題 1.3: Web サイトに Web ページを取り込む

デモの表示

Web サイトに Web ページを取り込む前に、『課題 1.2: Web サイトの構造を設計する』を完了しておく必要があります。

Web Site Designer のページ・アイコンを使用して Web サイトのレイアウトができたら、ページの作成を始めることができます。ページ・アイコンは現在、破線のボーダーになっています。これはページ・アイコンが表すファイル、つまり実際のページが存在していないことを示しています。 ファイルが作成されると、ページ・アイコンのボーダーは実線になります。

  1. 「広告をすべて表示 (View All Classifieds)」ページ・アイコンをダブルクリックします。「ページの作成」ダイアログが開きます。
  2. このチュートリアルでは、「Faces JSP」オプションを選択する必要があります。 このオプションは、JavaServer Faces テクノロジーを使用できる JSP Web ページを作成します。『JavaServer Faces および Faces コンポーネントについてさらに学習したい方に』を参照してください。 また、「JavaServer Faces を使用して動的情報を Web ページに表示する」のチュートリアルで、Faces コンポーネントを使用して Web サイトにデータ接続を追加する方法についても学習できます。
  3. OK」をクリックします。 「新規 Faces JSP ファイル」ウィザードが表示されます。
  4. デフォルト・フォルダー (/ClassifiedsTutorial/WebContent) を受け入れます。
  5. ファイル名」フィールドに新規ファイルの名前 all_records を入力します。このファイルに、 サイトをレイアウトしたときにページに割り当てたナビゲーション・ラベルと同じ名前を付けると便利ですが、 ファイルにはローカル・システムのリソースとして意味が通じる名前を付け、 ナビゲーション・ラベルを将来のナビゲーションのための命名規則用としてのみ使用することもできます。
  6. マークアップ言語」フィールドでは、必ず「HTML」を選択してください。 残りのフィールドについては、デフォルトを受け入れます。
  7. 拡張オプションの構成」チェック・ボックスはチェックを外しておきます。 作成した新規ファイルに、追加のタグ・ライブラリーなどのオプションを構成したい場合、このウィザードを使用して追加オプションを指定することができます。 しかし、このチュートリアルの目的からは、デフォルトを受け入れることができます。
    注: 新規ファイルは、Web プロジェクトを作成したときに作成された Master.css を自動的に参照します。
  8. 終了」をクリックします。新規ファイルが Page Designer に開きます。
  9. ナビゲーション」「 - 広告チュートリアル (Classifieds Tutorial)」タブをクリックして、Web Site Designer に戻ります。「広告をすべて表示 (View All Classifieds)」アイコンが実線のボーダーになり、小さい青色のダイヤのアイコン () は JSP ファイルが関連付けらたことを示しています。 しかし、他のページ・アイコンは破線のボーダーのままで、ファイルがまだ作成されていないことを示しています。
    存在しているページ・アイコンと存在していないページ・アイコン

  10. 他のページ・アイコンについても、各アイコンをダブルクリックし、「新規 Faces JSP ファイル」ウィザードを完了させて、Faces JSP ページの作成を続けます。 このチュートリアルでは、以下のような命名規則に従っています。
  11. Ctrl+S を押して Web サイト・ナビゲーションを保管します。

4 つのページの作成を終了すると、「プロジェクト・ナビゲーター」ビューの「WebContent」フォルダーの下に新規リソースがすべて表示されます。

ページの入った「プロジェクト・エクスプローラー」ビュー

これで、Web サイトの中のそれぞれのページについて、 ブランク・ページが作成されました。 ここで、『課題 1.4: Web サイトのルック・アンド・フィールを設計する』を始めることができます。

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

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