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

デモの表示

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

Web サイト・デザイナーのページ・アイコンを使用して 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. ナビゲーション」タブをクリックして Web サイト・デザイナーに戻ります。 「広告をすべて表示 (View All Classifieds)」アイコンが実線のボーダーになり、JSP ファイルが関連付けられていることを示す 小さい青色のダイヤのアイコン () があるのが分かります。 しかし他のページ・アイコンは破線のボーダーのままで、ファイルがまだ作成されていないことを示しています。
    既存のページ・アイコンおよびまだ作成されていないページ・アイコン

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

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

「プロジェクト・ナビゲーター」ビューのページ

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

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

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