Web サイトにページ・テンプレートを適用する

ページ・テンプレートを使用して、Web サイト内のすべての Web ページで共通のエレメントを制御します。サイトにページ・テンプレートを適用した後は、 個々のページに何度も変更を行うのではなくテンプレートで 1 回変更を行うことにより、 その後の設計の変更に要する労力を最小化することができます。

前提条件:
  1. Web プロジェクトを作成する。
  2. Web サイトを作成する。
  3. Web Site Designer で Web ページを作成するか、または Web サイトに既存の Web ページを追加する

サイト内での整合性を 維持するための推奨方法は、Site Designer ツールで提供されているページ・テンプレートを使用することです。Web Site Designer は、Web サイト全体のルック・アンド・フィールを編集するために提供されています。ページ・テンプレートを使用することにより、サイト全体でルック・アンド・フィールを整合させることができます。ページ・テンプレート には、Web Site Designer ツールを使用して作成される Web サイト・ナビゲーション (ナビゲーション・バー、ナビゲーション・トレール、 およびナビゲーション・メニューなど) が含まれています。

ページ・テンプレートを適用するには、 以下のようにします。

  1. Web パースペクティブのプロジェクト・エクスプローラー・ビューで Web プロジェクトを展開する。
  2. Web サイト・ナビゲーション」をダブルクリックして、 Site Developer で Web サイトを開く。
  3. CTRL キーを押しながらページ・アイコンをクリックして、ページ・テンプレートを適用したいページを選択する。
  4. 右マウス・ボタンをクリックし、「ページ・テンプレート」>「テンプレートの適用」 を選択する。ページ・テンプレートの適用ウィザードが開きます。
  5. ウィザードの「ページ・テンプレートの指定」ページで、 使用したい「ページ・テンプレート・タイプ」を選択する。
    1. RationalR Developer で提供されているサンプル・テンプレートからページ・テンプレートを選択するには、以下のようにします。
      1. サンプル・ページ・テンプレート」ラジオ・ボタンをクリックする。
      2. サムネール表示で、使用したいページ・テンプレートのサムネールをクリックする。
      3. 次へ」をクリックする。
    2. ユーザー定義ページ・テンプレートを選択するには、以下のようにします。
      1. ユーザー定義ページ・テンプレート」ラジオ・ボタンをクリックする。
      2. 参照」をクリックしてページ・テンプレートのロケーションを指定する。
      3. サムネール表示で、使用したいページ・テンプレートのサムネールをクリックする。
      4. 次へ」をクリックする。
    制約事項: 少なくとも 1 つのコンテンツ領域を持つページ・テンプレート を選択する必要があります。
  6. ページ・テンプレートを適用したい 1 つのページを選択した場合、そのページがエレメント・マッピングのベースとなるモデルとして使用される。このステップをスキップして、このトピックの残りのステップを続けます。ページ・テンプレートの適用先として複数のページを選択した場合は、 エレメント・マッピングのモデルとして Web ページを選択する必要があります。ウィザードの「ページ・テンプレートの適用方法を指定するための Web ページを選択」ページで、 Web ページのコンテンツ領域をページ・テンプレートのコンテンツ領域に マップします。マップに使用するページを選択します。「次へ」をクリックします。
    制約事項:
    • ページ・テンプレートから異なるエンコードを持つページを選択することはできません。
    • すでにページ・テンプレートを持っているページを選択することはできません。
    • フレームを使用するページを選択することはできません。
    • ページ・テンプレートが XML スタイル JSP によって記述されていない場合は、 XML スタイル JSP によって記述されているページを選択することはできません。
    • ページ・テンプレートが XML スタイル JSP によって記述されている場合は、 XML スタイル JSP によって記述されていないページを選択することはできません。
  7. ウィザードの「ページ・エレメントをページ・テンプレートにマップ」 ページで、ページ・テンプレートでのページ・コンテンツの表示方法を指定する。

    コンテンツ領域のソースは、ページ・テンプレートのコンテンツ領域リストに定義されています。ウィザードの前のページで選択する Web ページの エレメントが、ページ・エレメント・リストに表示されます。ページ・テンプレートのコンテンツ領域リストで、コンテンツ領域を選択します。ページ・エレメント・リストで、コンテンツ領域をマップしたいエレメントを選択します。その後、「マップ」ボタンをクリックします。それぞれの コンテンツ領域ごとにこれを実行してください。これによりページ・テンプレートのコンテンツ領域が Web ページのエレメントと関連付けられます。

    例えば、 サンプル・ページ・テンプレートの 1 つを選択すると、 headareabodyarea コンテンツ領域が事前定義されます。headarea コンテンツ領域を選択して、それを HEAD (開始 HEAD タグと終了 HEAD タグの間にあるもの) と関連付ける ことができます。headarea コンテンツ領域に対してページ・テンプレートに定義された 属性が既存の Web ページの HEAD エレメントに適用されます。
    ページ・テンプレートのコンテンツ領域をページ・エレメントにマップした例。
    プレビュー・ボックスには現行ページと、テンプレートの適用後にそのページがどのように見えるかを示したプレビューが表示されます。

    ヒント:
    • ページ・エレメント・リストでページ・エレメントを選択することにより、 現行ページのプレビューで特定のエレメントを強調表示することができます。
    • 現在のページのプレビュー」を右クリックして、ポップアップ・メニューから「オリジナル・サイズで表示」を選択すると、拡大されたプレビューを 表示することができます。
    ページ・テンプレートの適用先として 1 つのページを選択した場合は、 「終了」をクリックします。テンプレートが Web ページに適用されます。ページ・テンプレート の適用先として複数のページを選択した場合は、「次へ」をクリックします。
  8. ウィザードの「ページの選択 - ページ・テンプレートの適用」ページ で、ページ・テンプレートを適用したい Web ページを選択する。 Web ページがすでに関連付けられたページ・テンプレートを持っている場合、 2 番目のページ・テンプレートを適用することはできません。さらに、Web ページが フレームを使用している場合は、ページ・テンプレートを適用できません。
    注: ページ・テンプレートは、ウィザードの「ページ・テンプレートの適用方法を指定するための Web ページを選択」ページで、 仕様セットを使用して選択したすべての Web ページに適用されます。同じエレメントが他の Web ページで検出されると、そのエレメントが正しいコンテンツ領域に挿入されます。他の Web ページで同じエレメントが検出されないと、挿入されるエレメントは拡張されてから、コンテンツ領域に 挿入されます。ウィザードが終了した後に不必要なエレメントを削除することにより、 Web ページを手動で変更することができます。
    制約事項: Web ページ のエンコードがページ・テンプレートのエンコードと異なる場合は、 そのページ・テンプレートを適用することはできません。ページ・テンプレートまたは Web ページの いずれかが XML スタイル JSP によって記述されている場合は、ページ・テンプレートを適用できません。ページ・テンプレートを適用できないページは、 ウィザードの「ページ・テンプレートを適用するページ」リストでエラー・メッセージを受け取ります。
  9. 終了」をクリックする。テンプレートが Web ページに適用されます。
Faces を含むページ・テンプレートを適用する
重要:
  • Faces モデルを持つページ・テンプレートを Faces ページと Faces 以外のページの両方に適用することはできません。Faces モデルのページ・テンプレートを適用するには、まずテンプレートを Faces ページに適用してから、その後でそのテンプレートを Faces 以外のページに別々に適用してください。
  • 「Faces コンポーネントを含むテンプレート」モデルを使用するページ・テンプレートを適用した後は、サーバーでページを実行するために、非 Faces JSP にサーブレット URL を 設定する必要があります。サーブレット URL を設定するには、メインメニューから「編集」> 「サーブレット URL」>「サーブレット URL の設定」をクリックしてください。
重要: JSP-*.jtpl という名前のサンプル・ページ・テンプレートの適用後または JSP ナビゲーション・バーの挿入後、「問題」ビューに以下のエラー・メッセージが 表示されます。
  • リンク切れ - http://java.sun.com/jsp/jstl/core
  • リンク切れ - http://www.ibm.com/siteedit/sitelib
  • リンク切れ - com.ibm.etools.siteedit.sitelib.core.SiteNavBean
  • JspCompile: パッケージ com.ibm.etools.siteedit.sitelib.core が存在しません
これらのエラーおよび警告を除去するにはプロジェクト・エクスプローラー・ビューで Web プロジェクトを右クリックし、「妥当性検査の実行」を選択してください。
関連概念
Cascading Style Sheet (CSS) Designer
関連タスク
ページ・テンプレートにコンテンツを追加する
ダイナミック・ナビゲーションをページ・テンプレートに追加する
ナビゲーション・オブジェクトの外観を変更する
ナビゲーションの仕様を編集する
Web ページのナビゲーションを編集する
フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.