擬似フレーム

質問

フレームだらけのHPを，擬似フレームを使用したHPに改造しようと色々と試行錯誤していますが，JavaScript等が良く判らず，難儀しております．

理想としているのは，「擬似フレーム（疑似フレーム）」の作り方（IE6 にも対応、スタイルシート(CSS)、JavaScript使用）」http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html のサイトです．

このサイトを参考にした，「高密度商業地域 - 擬似フレーム」http://komitsudo.blog70.fc2.com/blog-entry-32.html にある
「実際に動作しているサンプルページ」http://blog-imgs-27-origin.fc2.com/k/o/m/komitsudo/index.html
と同様の本文がスクロールするHPは作れたのですが，ヘッダー・サイトマップ・フッターの共用の仕方がわかりません．

よろしくお願い致します．

回答No.2

Sylar · ベストアンサー

＞参考にしたサイトではJavaScriptを使用してメニューを読み込むようなのですが・・・・・・．
あ～、そういうことか。
単純にサイトに書いてることの説明になりますが

別のファイル「menu.js(仮)」を作って
document.write("<ul class='menu'>");
document.write("<li><a href='1.html'>page1</a></li>");
document.write("<li><a href='2.html'>page2</a></li>");
document.write("<li><a href='3.html'>page3</a></li>");
document.write("</ul>");
としておいて、

html側から
<div class="menu">
<script type="text/javascript" src="menu.js"></script>←これがメニュー部分
</div>
という感じで呼び出してます。

ちなみにヘッダーもフッターも同様に別ファイルから呼び出してますね。
ようするに複数ページの共通部分を外部から書き出すという感じでしょう。

ただ、このやり方だとSEO的にはあんまり効果なしだと思います。
SEO無視するなら擬似フレーム使わないでもいいと思うし。

＞ダウンロードできるようなサンプルファイルが無いので，全容が理解出来ないのです．
そういう場合はソースを見て外部ファイルへ直接アクセスしてみてください。
サイトでもこの部分の説明が書いてあったりする。
　　↓
自動生成メニューの作り方
（http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/auto_menu.html）

お礼

Sylar様．

無事外部ファイルを読み込めるようになりました．
色々とありがとうございました．

回答No.1

Sylar

とりあえずソースを見ないと何がどう分からないのか分かりませんが・・・。
サンプルサイトの通りにしてみてはいかがですか？
カンタンにやるなら
HTML
<div class="head">ヘッダー</div>
<div class="main">
<div class="menu">メニュー</div>
<div class="frame">擬似フレーム</div>
</div>
<div class="foot">フッター</div>

CSS
.head{
width:100%;
height:10%;
background:#333333;
}
.main{
width:100%;
height:80%;
background:#eeeeee;
}
.menu{
width:20%;
height:100%;
float:left;
}
.frame{
width:80%;
height:100%;
overflow:auto;
float:left;
}
.foot{
width:100%;
height:10%;
background:#333333;
}
こんな感じで。

補足

Sylar様．

上記の例の場合，擬似フレーム側の内容が変わっても(別頁に移動しても)，メニュー側を一定にする(外部からメニューを読み込む)にはどのようにしたら良いのでしょうか？

参考にしたサイトではJavaScriptを使用してメニューを読み込むようなのですが・・・・・・．

なお，最初にあげた2つのサイト共に，ダウンロードできるようなサンプルファイルが無いので，全容が理解出来ないのです．

よろしくお願い致します．