サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> Webデザインテクニック >> ページのヘッダとフッタを出力する

ページのヘッダとフッタを出力する



サンプルと機能

サイトの全てのページの上下(ヘッダ・フッタ)を同じデザインにする場合、1つのHTMLファイルを用意しておき、それを各ページから呼び出す方法があります。
この方法の利点は、1つのファイルを修正するだけで全てのページにそれが適用されることにあります。
ヘッダにはサイトのタイトルを、フッダにはCopyrightなどを表記するといいでしょう。

Sample 1: JavaScriptで呼び出す場合
Sample 2: インラインフレームで呼び出す場合

どちらで呼び出すかは好みですが、JavaScriptで呼び出す場合は、ユーザーのブラウザがJavaScriptを使えなければ表示されませんし、インラインフレームで呼び出す場合はNN4などの古いブラウザでは表示されません。

(ちなみに、このサイトの場合は、上記の方法を使用せず、全てのページに同じ記述をしています。)


Sample1 サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー&貼り付けして編集してください。

呼び出すファイル(Sample 1: JavaScriptで呼び出す場合)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<SCRIPT src="header.js"></SCRIPT>
本文を書きます
<SCRIPT src="footer.js"></SCRIPT>
</BODY>
</HTML>

header.js(改行不可Sample 1: JavaScriptで呼び出す場合)
document.write('<TABLE border="0" bgcolor="#0000ff" width="600" cellspacing="0" cellpadding="0" height="40"><TR><TD>&nbsp;<FONT color="#ffffff" size="4">ウェブデザインテクニックのページ</FONT></TD></TR></TABLE>')

footer.js(改行不可Sample 1: JavaScriptで呼び出す場合)
document.write('<TABLE border="0" bgcolor="#0000ff" width="600" cellspacing="0" cellpadding="5" height="25"><TR><TD align="right"><FONT color="#ffffff" size="2">Copyright(C) 2004. All rights reserved.</FONT></TD></TR></TABLE>')


Sample2 サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー&貼り付けして編集してください。

呼び出すファイル(Sample 2: インラインフレームで呼び出す場合)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<IFRAME src="header.html" name="header" width="600" height="40" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></IFRAME>
本文を書きます
<IFRAME src="footer.html" name="footer" width="600" height="25" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></IFRAME>
</BODY>
</HTML>

header.html(Sample 2: インラインフレームで呼び出す場合)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
ヘッダの内容を書きます
</BODY>
</HTML>

footer.html(Sample 2: インラインフレームで呼び出す場合)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
フッタの内容を書きます
</BODY>
</HTML>


解説・注意点など

拡張子が"js"のファイルは、改行すると上手くいかない場合があります。
また、内容にシングルクォーテーション「'」を使わないで下さい。

呼び出すファイルを指定する時のパスは、階層などを間違わないようにして下さい。
面倒な人は"http://aeu.jp/header.js"のように絶対パスを使うことをお勧めします。


 
 

Webデザインテクニックに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, Web Design Techniques. All rights reserved. - Home