前回はトップページを作る時に、
どういうことに気をつけたらいいのかという話をしました。
トップページに限らず、どのページを作るに関しても、あてはまることではと思っております。
前回の解析結果から見ても、ホームページというのは、いろいろな人が見ていることが
わかりまして 、それを実際に数値化してみると、イメージがわいたかと思いますが、
あなたのホームページは、あなたが見るのではなく、他人見ているのですから、
それらを仮定して、いろいろなディスプレイのサイズで確認して、
ブラウザも、入れて、実際に、最低でも、ＩＥとネスケで
動くと、より多くの人が楽しめるＨＰが作れると私は思います。
他の環境によって、あなたのサイトが違うように表示され、
それであなたが我慢できる範囲であるのであれば、それでいいと思うのですが、
もし、やはりしっかりと表示をさせたいと思うのであれば、
めんどくさくても、最初のサイト構築はしっかりとしておきましょうね。
さて、今回はテンプレートファイルの作成です。
まず、テンプレートファイルとはなんぞや？
とお思いの方がいるかもしれません。
テンプレートファイルとは、「雛型となるファイル」のことです。
つまり、小説などを書くときに、１話ずつ、レイアウトが違っていたらおかしいですよね？
だから、統一したレイアウトを作るのですが、
それを１つ１つ作っていたら大変です。
なので、雛形（基準）となるファイルを作成して
それを複製して、複製したファイルに作成したテキストを流し込んだり、
画像を張り付けたりすることで、同じレイアウトのＨＰが、手軽につくれるので
サイトを全体見ても統一性がとれているのですね。
その雛形がテンプレートファイルです。
テンプレートファイルは、主に、
<html>
<head>
<title>
<body>
それに
<table>
などを記述したファイルを作っておくといいでしょう。
（あと背景画像の指定なども）
また、後に記述しようかと思っているのですが、ページの体裁を整える
「スタイルシート」というものを記述して
それを元にテンプレートファイルを作ってみてもいいかもしれませんよね。
テンプレートファイルを作成するにあたって、気をつけることは、
前回のトップページを作成するときの注意点と代わりがないと思うのですが
他に、これをしておくと便利だぞ！
と思いますのは、テンプレートファイルに、
「トップページに戻るボタン（リンク）」もつけておくといいと思います。
ミディリンもこのボタンがないところが多々あり、このようなことを言うのは
ちょっと心苦しいのですが（笑）
ページを見ているうちに、そこのページから、トップページに戻れなくて
「ブラウザの戻るボタン」でしかないというようなことを避けるために、
あらかじめ、全ページに戻るボタンをつけておくと、
ページを見る人にも親切な設計だと思いますので、
テンプレートファイルに「戻るボタン」をつけておくと
あとで、戻るボタンをつけなくても、すべてのページにつくので使いやすいですよね。
また、コンテンツによって、フォルダを作ると思いますが
（たとえば、日記なら、diaryとか、写真だったらphotoとか）
階層が違うと、画像パスや、トップページに戻ってくる「戻るボタン」のパスが違うので、
”テンプレートファイルは、各フォルダごとに作成”しましょう。
これはどういうことかというと、例をあげましょう。
フォルダとして
「dq」と「ff」がありこの下に
「dq」の下に「dq1」、「dq2」、「dq3」があり、
「ff」の下に「ff1」、「ff2」、「ff3」があり、
その各フォルダの下に、
「novel」と「picture」というフォルダがあるとします。
実際に、フォルダ名を書くと、
dq/
dq/dq1/
dq/dq2/
dq/dq3/
dq/dq1/novel/
dq/dq1/picture/
dq/dq2/novel/
dq/dq2/picture/
dq/dq3/novel/
dq/dq3/picture/
ff/
ff/ff1/
ff/ff2/
ff/ff3/
ff/ff1/novel/
ff/ff1/picture/
ff/ff2/novel/
ff/ff2/picture/
ff/ff3/novel/
ff/ff3/picture/
というようになりますよね。
それぞれのフォルダの中に、temp.htmlというテンプレートファイルをつくりまして、
そこから、トップページ（index.htmlとします）に戻る場合を考えて見ましょう。
| 各フォルダ |
トップページに戻るパス |
dq/
dq/dq1/
dq/dq2/
dq/dq3/
dq/dq1/novel/
dq/dq1/picture/
dq/dq2/novel/
dq/dq2/picture/
dq/dq3/novel/
dq/dq3/picture/
ff/
ff/ff1/
ff/ff2/
ff/ff3/
ff/ff1/novel/
ff/ff1/picture/
ff/ff2/novel/
ff/ff2/picture/
ff/ff3/novel/
ff/ff3/picture/ |
../index.html
../../index.html
./../index.html
./../index.html
./../../index.html
./../../index.html
./../../index.html
./../../index.html
./../../index.html
./../../index.html
../index.html
../../index.html
./../index.html
./../index.html
./../../index.html
./../../index.html
./../../index.html
./../../index.html
./../../index.html
./../../index.html |
このように、各テンプレートファイルに戻るボタンをつけた場合、
階層によってパスをそれぞれ、書き換える必要があります。
１つのテンプレートファイルを作成すれば、あとは、そのパスを書き換えをしないと
リング切れになってしまいますので、パスを書き換えるのを忘れないようにしてくださいね。
余談ですが、第７話で少しふれた「Dreamweaver」というＨＰ作成ツールは、
自動的にパスを書き換えてくれる機能があります。
なので、トップページに戻るボタンだけでなく、
他にもテンプレートファイルにリンクをたくさん作る場合
（例えば、テンプレートファイルに、メニュー項目で複数のリンクをつけるときなど）
に、テキストエディタなどで、ＨＴＭＬを組んでいると、
手動で、１つずつ、他のパスを書き換える手間があるのですが、
Dreameweaverは、自動的に書き換えをおこなってくれますので
こういう便利なソフトを使うともっとテンプレートファイルの作成が楽になり、
時間の節約にもなります（＾＾）
テンプレートファイルに背景画像をつけたとき、
画像のパスも同じように、テキストエディタだと、
手動で１つずつ、画像のパスを書きなえないといけませんが、
これらも、自動変換をしてくれます。
|
