テンプレートの作り方・使い方
デザインの章でテンプレートのデザインというのがありましたね。実際の実装方法には多種多様な方法がありますが、今回はもっとも古典的な、すべて手作業によるテンプレートの作り方＆使い方を解説します。
テンプレートの概念と実装の流れ
テンプレートは繰り返しの無駄とミスを省くために使います。
基本的な流れは下記のようになります。
|
作成の流れ
- デザイン確定
- プロトタイプ作成
- エリアごとパーツに分解＆配置ルール確定
- ベーステンプレート作成（パーツ含む）
- 各コンテンツごとの派生テンプレ作成
- テンプレートから個々のページを作成
|
|
|
使う前に
扱うページ数が少なければ、「最初に作ったページをコピーして使う」で十分です。無理に使う必要は全くありません。
初歩的なテンプレート
テンプレート慣れるために、まず初歩的なテンプレートを作ってみましょう。利用する項目は、タイトルと本文です。
|
初歩的なテンプレート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<TITLE><!-- ＃タイトル --></TITLE>
</HEAD>
<BODY>
<!-- コンテンツ -->
<DIV>
<!-- コンテンツエリア開始 -->
<H1><!-- ＃タイトル --></H1>
<HR>
<!-- ＃本文 -->
<!-- コンテンツエリア終了 -->
</DIV>
</BODY>
</HTML>
※判別しにくい要素は任意に判別し扱う。
|
|
|
新たなページを作る際にはこのファイルをコピーして、
<!-- ＃タイトル -->に「タイトル」、<!-- ＃本文 -->にHTML化した「本文」をいれます。
ナビと組み合わさった場合
まずはデザインで設計したエリアごとにパーツとしてタグを組みましょう。このパーツの組み合わせを必要に応じてテンプレートに貼り付けます。
テンプレートに貼り付ける位置をマーク（<!-- ＃ナビ -->など）しておくとさらに便利です。
|
ナビ部品の例
<!-- ＃ナビ -->に設置するパーツ
<!-- SAMPLE PARTS1 -->
<DIV>
<A HREF="〜">HOME</A> <A HREF="〜">CONTENTS</A>
</DIV>
※SAMPLE PARTS1と書いてあるのは管理用の固有のパーツ名。
|
|
|
|
設置例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE><!-- ＃タイトル --></TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
</HEAD>
<BODY>
<!-- ＃上位ナビ -->
<!-- コンテンツ -->
<DIV>
<!-- コンテンツエリア開始 -->
<H1><!-- ＃タイトル --></H1>
<HR>
<!-- ＃本文 -->
<!-- コンテンツエリア終了 -->
</DIV>
<!-- ＃下位ナビ -->
</BODY>
</HTML>
|
|
|
<!-- ＃部品名 -->などにそれぞれエリアごと作ったタグを当てはめます。
ナビ自体にちょっとした小細工（たとえば現在位置のリンクの背景を反転させる）などしたい場合は、パーツを細分化するか、派生したパーツを複数用意して使うと良いでしょう。
注意するべき点は、サイト構造によってリンクやファイルなどのURLの参照先があわなくなる可能性がありますので階層ごとにパーツを用意するなどして使いましょう。
次はテンプレートやパーツ自体の更新方法です＞＞
| 
