ページのテンプレート(XHTML+CSS)を作る

■テンプレートを使ったページ作り

個々のページ作りを始める前に各ページの共通部分を記述したテンプレートを作っておくようにします。

あらかじめテンプレートを作っておけば個々のページを作る際には作成したテンプレートをコピーしてそこに「ページによって違う部分(内容素材やパンくずリストなど)」を書き込むだけでページを完成させる事が出来、効率の良いページ作成が行えるようになります。

テンプレートはXHTML+CSS形式で作ります。これにより論理構造と視覚的デザインを切り離したページ作りが可能になります。論理構造(骨組み)部分(XHTML)と視覚的デザイン部分(CSS)を切り離す事による利点には以下のようなものがあります。

余程古いホームページ作成ソフトでなければXHTML+CSS形式のページ作りに対応していますので、初心者でも比較的簡単にXHTML+CSS形式のページを作る事が出来ると思います。

テンプレート作りに入る前に視覚的デザインのために使用する素材...サイトロゴ、ヘッダー画像、背景画像、エントリーヘッダー画像、メニューヘッダー画像、フッター画像、リストマーカーなど...を用意します。

視覚的デザインのための素材のほとんどはCSSドキュメント内で扱う事になります。(サイトロゴなどの一部の画像はXHTMLドキュメント内で扱う事もあります。)

構造(骨組み)とページ共通内容(ホームページ名、グローバルナビゲーション、フッターの著作権表示など)の記述を行ったXHTMLドキュメントを作成します。個別ページを作る際のテンプレートとして使用します。

複数種類のテンプレートが必要になる場合はその数だけテンプレートの種類を用意しておきます。例えば、インデックスページ用、カテゴリーページ用、記事ページ用と言ったようにです。

個別ページを作る際にはこのXHTMLドキュメントをコピーしたものにページ毎の内容素材を組み込んで各ページを作って行くようにします。

CSSドキュメントには視覚的デザインに関する記述を行います。記述を終えたらXHTML側にCSSドキュメントを読み込むための記述を追加しておきます。

ホームページ作成ソフトを使用している場合は難しい事などあまり気にする事も無くテンプレート作りを行えると思いますが、それでもテンプレート作りが思ったように上手く行かないと言う場合は無料配布されているテンプレートを使うと言う方法も考えられます。