フレーム部分の修正のすべてのページへの反映について

質問

添付の図のようにヘッダー、フッター、ナビゲーション部分をすべてのページにフレームとして利用し、メイン部分のみが変わるサイトがあるとします。
そこで質問です。
(1)このようなフレーム部分を作成する方法を教えてもらえませんか。ファイルをコピーしてメイン部分だけを変更する方法しか分かりません。こうするとフレーム部分を変更する場合、全てのページを変更しなくてはなりません。詳しいことはあまりよくわからないのですが、<div>と外部スタイルシートで各フレームは設定しております。HTMLソースのフレームを使う方法もありますが、スクロールバーが入ったりして見栄えが悪くなります。これら以外のどんな方法でも結構です。
(2)ナビゲーション部分には各ページへのリンクの項目（アイコン）を並べていますが、これらの項目を追加、削除、修正したい場合に１ページを変更すれば、全てのページにその変更を反映させる方法を教えてもらえませんか。
(3)また、メイン部分の情報量によってナビゲーション部分の長さを変えたいのですが、(2)の場合にはどうすればよいのでしょうか。
ソフトはホームページビルダー15を使用しております。
ビルダーを使用しない方法でも結構です。
よろしくお願いします。

回答No.2

naokita

前回答者です（お礼拝見済み）
-----------------------

＞(1)
不具合に遭遇するから。
プロでフレームセットで作る制作者はいないでしょう・・・
「フレームセット　不具合」で検索しましょう。

＞(2)Dreamweaverが必要なんですねえ。
いえ、他のフリーツールでも出来るでしょう。探しましょう。

＞ブラウザ全面にＡが表示されます。
CSSを効かせてないから。または、枠幅が見えないから。
<div style-"width:200px; background:lime;">メニュ</div>

＞ビルダー15でも同じような機能（レイアウト部品の挿入/リンクメニュー）があるようで、
知りません。

＞(3)つきましては
＞<div>メイン</div>が伸びると<div>メニュ</div>も伸びるのでしょうか？
伸びませんが、伸びるように見せる事は出来る。
例(3)を試しましょう・・・

＞あと外部スタイルシートのfloatはどちらもleftにしておいたほうが良いのでしょうか？
例(3)を試しましょう・・・　ケースバイケース。

回答No.1

naokita

テンプレートとなる１ページをつくる。
そのページを複製して、メイン部分を入れ替えれば、サブページが複数できます。
この場合、メイン部分以外は、同じになります。
ここまでは理解しているようですね。
----------------------
(1)
<div>
<div>ヘッダ</div>
<div>メニュ</div>
<div>メイン</div>
<div>フッタ</div>
</div>

あとは、CSSで枠の幅を調整して、floatで廻り込ませる。
フレームセットでもスクロールバーは消せるようですが、
フレームセットは考えない方が良いでしょう。

(2)
置換えソフトを利用：
（自分の場合は、大きいサイトを作る場合：Dreamweaver）
サイト内置換えで、
元のソースに新しいメニューを加えたソースに書き換える。
この時、ファイル単位ではなく、サイト（フォルダ内）単位で全ファイルを置換え。
これで、全ページの置換えが数十秒程度で可能です。

フレームじゃないけど、フレームの様にサーバ設定でも出来ますよ。

(3)
ナビ部分が当然長くなるが、
HTMLの仕様ではテキスト量に合わせて自動で高さが伸びますけど・・・
色分けの話なら、一般的には、テキスト量情報量の多い方に統一するなら(1)に細工する。
枠線や背景色の背景画像で、
リピート-y させるのが簡単なんだけど説明しにくいので、
背景色だけのパターンなら、

<div id="wrap">
<div id="head">ヘッダ</div>
<div id="nav">メニュ</div>
<div id="main">メイン</div>
<div id="foot">フッタ</div>
</div>

#wrap { margin:0 auto; width:800px; background:yellow;}
#head,#main,#foot { background:white;}
#nav { float:left; width:200px;}
#main { float:left; width:600px; background:white;}
#foot { clear:both;}

メインの情報量が増えても、
サイドバーがメインと連動して下まで伸びているように見える。
細かい方法は多々ありますが、これが簡単な方法です・・・

お礼

naokita様早速の回答ありがとうございます。
(1)につきましては仰るとおりfloatを使って回り込みをメニュにはleft、メインにはright、フッターにはnoneを設定しております。
>フレームセットは考えない方が良いでしょう。
これはなぜでしょうか？

(2)Dreamweaverが必要なんですねえ。ビルダー15を買ったので、それの追加購入は厳しい状況です。
メニューリストを別ページ（仮にページ名：Ａとします）（Width200px）で作成し、
<div>メニュ</div>（Width200px）にリンクを貼ってみました。が、ブラウザで確認すると<div>メニュ</div>の枠にＡへのリンクと表示され、そこをクリックするとブラウザ全面にＡが表示されます。ページ幅は合わせてるのですが、サイトにアップすると正常に表示されるのでしょうか？よくわかりません。
偶然見つけたのですが、ビルダー15でも同じような機能（レイアウト部品の挿入/リンクメニュー）があるようで、同じように別ファイルをリンクさせることができるのですが、ブラウザでの表示は上記と同様になります。難しいですね。

(3)つきましては
>HTMLの仕様ではテキスト量に合わせて自動で高さが伸びますけど・・・
ありがとうございます。<div>メイン</div>が伸びると<div>メニュ</div>も伸びるのでしょうか？
あと外部スタイルシートのfloatはどちらもleftにしておいたほうが良いのでしょうか？
もしよろしければご教示いただけないでしょうか？よろしくお願いします。
リピートyも分かります。ありがとうございます。