![]() |
| |||||
|
ヘッダとフッタを外部から読み込むサンプルと機能サイトの全てのページの上下(ヘッダ・フッタ)を同じデザインにする場合、1つのHTMLファイルを用意しておき、それを各ページから呼び出す方法があります。この方法の利点は、1つのファイルを修正するだけで全てのページにそれが適用されることにあります。 ヘッダにはサイトのタイトルを、フッダにはCopyrightなどを表記するといいでしょう。 → Sample 1: JavaScriptで呼び出す場合 → Sample 2: インラインフレームで呼び出す場合 どちらで呼び出すかは好みですが、JavaScriptで呼び出す場合は、ユーザーのブラウザがJavaScriptを使えなければ表示されませんし、インラインフレームで呼び出す場合はNN4などの古いブラウザでは表示されません。 SSIやPHPなどが使用できる人は、そちらから呼び出すといいかもしれません。 (ちなみに、このサイトの場合は、上記の方法を使用せず、全てのページに同じ記述をしています。) Sample1 サンプル・ソース緑の文字が変更箇所で、赤い文字が対応するソースです。"/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → 呼び出すファイル(Sample 1: JavaScriptで呼び出す場合)
→ header.js(改行不可、Sample 1: JavaScriptで呼び出す場合)
→ footer.js(改行不可、Sample 1: JavaScriptで呼び出す場合)
Sample2 サンプル・ソース緑の文字が変更箇所で、赤い文字が対応するソースです。"/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → 呼び出すファイル(Sample 2: インラインフレームで呼び出す場合)
→ header.html(Sample 2: インラインフレームで呼び出す場合)
→ footer.html(Sample 2: インラインフレームで呼び出す場合)
解説・注意点など拡張子が"js"のファイルは、改行すると上手くいかない場合があります。また、内容にシングルクォーテーション「'」を使わないで下さい。 呼び出すファイルを指定する時のパスは、階層などを間違わないようにして下さい。 面倒な人は"http://aeu.jp/header.js"のように絶対パスを使うことをお勧めします。
|
|
| |||||||||||||||||||||||||
|
Copyright(C) 2004. Aeu, Gundam, eWeb, Web Opening and Management Guide. All rights reserved. - Home - |