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

デモの表示

Web サイトにページ・テンプレートを適用する前に、『課題 1.4: Web サイトの外観を設計する』を完了しておく必要があります。

ページ・テンプレートを使用した Web ページのレイアウトについての基本設計を決定しましたので、サイトのページにこのテンプレートを適用する必要があります。個々のページにテンプレートを適用すると、テンプレートに加えたすべての変更が各 Web ページに表示されます。

  1. 「プロジェクト・ナビゲーター」ビューの「Web サイト・ナビゲーション」をダブルクリックしてサイト構造に戻ります。
  2. ポインターをクリックおよびドラッグして 4 つのページ・アイコンすべてを選択し、ページ・アイコンの周囲全体のエリアを囲む選択ボックスを作成します。ボックス内のアイコンはすべて選択されます。
  3. 右マウス・ボタンでクリックして「ページ・テンプレート」>「テンプレートの適用」の順に選択します。 「ページ・テンプレートの適用」ウィザードが開きます。
  4. ユーザー定義ページ・テンプレート」ラジオ・ボタンをクリックします。テンプレートを作成しなかった場合は、提供されているサンプル・テンプレートの 1 つを使用することができます。
  5. サムネール」表示から作成したテンプレートを選択して、「次へ」をクリックします。
  6. Web サイトの中のページにはまだコンテンツがないため、ページ・エレメントをテンプレート・コンテンツ領域にどのようにマップするかは重要ではありません。したがって、デフォルトを受け入れることができます。「次へ」をクリックします。既にテンプレートを適用したいコンテンツがページ内にある場合は、既存のエレメントをテンプレート・コンテンツ領域にマップするサンプル・ページとして、特定のページを選択することができます。さらに詳しく学習するには、『コンテンツ領域のマッピングについてさらに詳しく学習する』を参照してください。
    注: bodyarea という名前のコンテンツ領域を 1 つ作成しただけですが、headarea という名前の第 2 のエリアがあることに気付きます。headarea は、デフォルトでページ・テンプレートに含まれています。
  7. ここでも、「次へ」をクリックしてマッピングのデフォルトを受け入れることができます。これらのオプションは、ページ内の既存のコンテンツが、テンプレートのコンテンツ領域内にどのように配置されるかをコントロールします。
  8. 作成した 4 つのページがすべて「ページ・テンプレートを適用するページ」ボックスに表示され、4 つとも選択されていることを確認します。 ウィザードのこのページ上でこのテンプレートのアプリケーションを検証 することによって、ページ内でマークアップ・エラーが確実に起こらないようにすることができることに注意してください。
  9. 完了」をクリックします。 テンプレートがページに適用され、ページ・アイコンが青いバンドに更新されて、それぞれのページにテンプレートが関連付けられたことを示します。
    テンプレートが適用された Web サイト・ナビゲーション

  10. Web サイト・ナビゲーションを保管します。

これで、ページ・テンプレートが Web サイトに適用され、サイトの外観をコントロールできるようになりました。サイトのページ・レイアウトとカラー・スキームを変更することを決め、サイト内の各ページに共通のエレメントを追加したいときは、このページ・テンプレート 1 つを編集するだけでできます。サイト内の個々のページにテンプレートが適用されたので、テンプレートへの変更は、テンプレート・ファイルを保管するたびにそれぞれのページに適用されます。さらに詳しく学習するには、『ページ・テンプレートを適用する他の方法についてさらに学習する』を参照してください。

これで『課題 1.6: Web サイトのダイナミック・ナビゲーションを実現する』を始めることができます。

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

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