体で覚えた初めてのホームページ作り

テンプレート化

投稿者：admin 投稿日時：2008/12/11（木） 10:45

<div>によるレイアウト構成を行うと、各パーツを外出しして、テンプレート化することが、やり易くなります（邪道かもしれませんが・・・(^_^;)）

このようにすると、テンプレートのパーツを１つメンテナンスすると、その変更がサイト全体に反映するようになります。

サイトのページ数がかなりの量に増えてしまうことが予測されるときは、このように対応しておくと、例えば、ページ下部のコピーライトの年などを修正したり、メニュー項目を追加したり、広告用のタグを変更したりすることなどが容易になります。

サーバーで、php、又は、SSIが利用できる必要があります。

枠組みの作成

例えば、
まず、<div>を用いた枠組みを作成します。
スタイルシートの設定は、http://homepage.ok-jp.com/stylesheet/01
を参考にして下さい。

<html>

<head>

　　　【全ページ共通の内容を記述】

　　　　　　　・キーワード
　　　　　　　・ディスクリプション
　　　　　　　・スタイルシート
　　　　　　　など

　　　 <title>ページ別のタイトルを記述　</title>

</head>

　　　　【サイトの上部の全頁共通の内容をHTMLで記述】

　　　　　　　 </div>
　　　　　　　 <div id="main">
　　　　　　　　　　　 <div id="leftmenu">
　　　　【メニューの全頁共通の内容をHTMLで記述】

　　　　　　　　　　　 </div>
　　　　　　　　　　　 <div id="contents">

　　　　 ※ページ別のコンテンツを記述

　　　　　　　　　　　 </div>
　　　　　　　 </div>
　　　　　　　 <div id="footer">

　　　　【ページ下部の全頁共通の内容をHTMLで記述】

　　　　　　　　　　　
　　　　　　　 </div>
　　　 </div>
</body>
</html>

テンプレート化

"/public_html"配下にテンプレート専用のディレクトリ"/public_html/templete"を作成します。（ここは趣味の問題なので、あまり重要ではありませんが、別ディレクトリに置く方が管理がしやすいと思います。）

各パーツ用のファイルを作成

そこに、各共通で使用するパーツのHTMLの記述をしたファイルを保存します。
【例】

head.html
header.html
menu.html
footer.html

各コンテンツファイルのテンプレート化

それらのファイルを読み込むようにテンプレートを変更します。

<html>

<head>

　　　　 head.htmlファイルをインクルードする記述

　　　 <title>ページ別のタイトルを記述　</title>

</head>

　　　　 header.htmlファイルをインクルードする記述

　　　　　　　 </div>
　　　　　　　 <div id="main">
　　　　　　　　　　　 <div id="leftmenu">
　　　　　 menu.htmlファイルをインクルードする記述

　　　　　　　　　　　 </div>
　　　　　　　　　　　 <div id="contents">

　　　　※ページ別のコンテンツを記述

　　　　　　　　　　　 </div>
　　　　　　　 </div>
　　　　　　　 <div id="footer">
　
　　　　 footer.htmlファイルをインクルードする記述
　　　　　　　　　　　
　　　　　　　 </div>
　　　 </div>
</body>
</html>
　

パーツデータの読み込み方法（include）

ファイルのインクルードの方法は、phpによるものとSSIによるものがあります。
※サーバーで、php、又は、SSIが利用できる必要があります。

includeについての詳しいことは、他のサイトで調べてみて下さい。

PHPによる読み込み（include）

<?php include("templete/＊．html"); ?>
<?php include_once("templete/＊．html"); ?>
　　※複数同じファイルを読み込む記述をしても、最初の１回しか読み込まれない。

PHPを利用する場合は、テンプレートのファイル名は、＊．phpとし、サイトの各ファイルもそのようなネーミングにします。
パーツファイルの拡張子は特に何でも良いようです。

SSIによる読み込み（include）

SSIを利用する場合は、テンプレートのファイル名は、＊．shtmlとし、サイトの各ファイルもそのようなネーミングにします。
パーツファイルの拡張子は特に何でも良いようです。

テンプレート化

枠組みの作成

テンプレート化

各パーツ用のファイルを作成

各コンテンツファイルのテンプレート化

パーツデータの読み込み方法（include）

PHPによる読み込み（include）

SSIによる読み込み（include）

関連書籍

ブックナビゲーション

ブログ

ナビゲーション

ユーザログイン

RSS配信

最近のコメント