課題 1.5: Web サイトにページ・テンプレートを適用する
Web サイトにページ・テンプレートを適用する前に、『課題 1.4: Web サイトのルック・アンド・フィールを設計する』を完了しておく必要があります。
ページ・テンプレートを使用して
Web ページのレイアウトについての基本設計が決定したので、サイトのページにこのテンプレートを適用する必要があります。個々のページにテンプレートを適用すると、テンプレートに加えたすべての変更が各 Web ページに表示されます。
- 「プロジェクト・エクスプローラー」ビューの「Web サイト・ナビゲーション」をダブルクリックしてサイトの構造に戻ります。
- ポインターをクリックおよびドラッグして 4 つのページ・アイコンすべてを選択し、ページ・アイコンの周囲全体のエリアを囲む選択ボックスを作成します。ボックス内のアイコンはすべて選択されます。
- 右クリックして「ページ・テンプレート」>「テンプレートの適用」の順に選択します。
「ページ・テンプレートの適用」ウィザードが開きます。
- 「ユーザー定義ページ・テンプレート」ラジオ・ボタンをクリックします。テンプレートを作成しなかった場合は、提供されているサンプル・テンプレートの 1 つを使用することができます。
- 「サムネール」表示から作成したテンプレートを選択して、「次へ」をクリックします。
- Web サイトの中のページにはまだコンテンツがないため、ページ・エレメントをテンプレート・コンテンツ領域にどのようにマップするかは重要ではありません。したがって、デフォルトを受け入れることができます。「次へ」をクリックします。既にテンプレートを適用したいコンテンツがページ内にある場合は、
既存のエレメントをテンプレート・コンテンツ領域にマップするサンプル・ページとして、
特定のページを選択することができます。『コンテンツ領域のマッピングについてにさらに学習したい方に』を参照してください。
注: bodyarea という名前のコンテンツ領域を 1 つ作成しただけですが、headarea という名前の第 2 のエリアがあることに気付きます。headarea は、デフォルトでページ・テンプレートに含まれています。
- ここでも、「次へ」をクリックしてマッピングのデフォルトを受け入れることができます。これらのオプションは、ページ内の既存のコンテンツが、テンプレートのコンテンツ領域内にどのように配置されるかをコントロールします。
- 作成した 4 つのページがすべて「ページ・テンプレートを適用するページ」ボックスに表示され、4 つとも選択されていることを確認します。ウィザードのこのページ上でこのテンプレートのアプリケーションを検証することによって、
このテンプレートを使用しても、ページ内でマークアップ・エラーが起こらないことを確認できることに注意してください。
- 「終了」をクリックします。テンプレートがページに適用され、ページ・アイコンが青いバンドに更新されて、それぞれのページにテンプレートが関連付けられたことを示します。
- Web サイト・ナビゲーションを保管します。
これで、ページ・テンプレートが Web サイトに適用され、サイトのルック・アンド・フィールをコントロールできるようになりました。サイトのページ・レイアウトとカラー・スキームの変更を決定するとともに、サイト内の各ページに表示される共通のエレメントを追加するため、この単一ページ・テンプレートの編集ができます。
これでサイト内の個々のページにテンプレートが適用され、テンプレートへの変更が、テンプレート・ファイルを保管するたびにそれぞれのページに適用されます。『ページ・テンプレートを適用するための他の方法をさらに学習したい方に』を参照してください。
これで『課題 1.6:
Web サイトの動的ナビゲーションを実現する』を始めることができます。