2段テーブルレイアウト

レイアウトのテンプレートなんで、かな～り味気ないですがご了承を。
また、上にあるメニューの内容は適当です。各自必要なメニューに作り変えてください。
さらに、リンク先のファイルを作ってないので、クリックしても何も起きないです。

上にメニュー、下にメインコンテンツを持ってきたタイプのレイアウトです。
テーブルレイアウトを使用しています。

なお、ページの横幅は可変です。ブラウザのウィンドウサイズに合わせて変化します。もちろん横幅を固定することも可能です。

このように上下レイアウトにすると、ページの横幅がかなり広く取れるのが魅力ですよね。その代わり、メニューが大量にあるような情報サイトの場合、最初に表示されたときページの上半分がメニューなんていう間抜けなことにもなりかねないのでご注意を。つまり、メニュー数があまり多くないサイト向きのレイアウトといえるかな？ (javascriptによるドロップダウンメニューなんて方法を使えばその辺も解決できますが、javascriptを無効にしている人にはメニューがそのようなタイプだとメニューすら全部表示されないという事態になってしまうので、もし興味のある人がいるとしてもドロップダウンメニューの導入は良く考えてからにしましょう。)

なお、このタイプは上部のメニューのさらに上にサイトロゴなんかを配していることも多いです。その辺はご自分で試行錯誤してみてください。 (HTMLは書き換えれば直ぐに結果が分かるので、色々いじるのも楽しいですよ＾＾)

以上、サンプル用に何を書こうか悩んでた時に頭に浮かんだおまけ話でした。
なお、このレイアウトで使用しているindex.htmlとstyle.cssに関する簡単な説明をhelp.htmlに用意してますので、これを参考に自分なりに変更を加えていきましょう！