アサヒコムのような表示方法andタグの応用について

質問

こんばんは。
自分なりにHTMLを勉強してきまして、CSSも少し勉強し始めましたという状況です。

そこで２つほど質問があります。

１，アサヒ．コムのように上２割部分をサイトタイトル画像＋メニュー欄で、下８割部分を表示部分のように分けて、メニューからコンテンツをクリックすると、下８割の部分だけ変える（変えたように見せる）には、具体的にどのような方法が考えられるのでしょうか。
今までフレームを使ってやってきたのですが、解像度の違いによって崩れてしまうので、基本的な８００・６００固定でやりたいと思っています。
ソフトは使う気はないので、必要な言語（具体的に教えてもらえると嬉しいです）、参考になるようなサイトを教えて欲しいです。

２，コンテンツの表示方法は１のような感じでやりたいとおもっているんですが、例えば
http://www.sky.sannet.ne.jp/masapine/homepage/
ここのページのように、左側にリンクバナー欄、右側にメイン、上部にタイトルといった感じでわかれてますよね？
これって、テーブルを使ってるんですか？
なんか、私はもしかしたらテーブルタグは、データをまとめる（エクセルのような）時だけ表にして使うと思ってたんですが、大きな勘違いですかね？
基本的なことは理解したつもりですが、まだまだ初心者なため、それをつかった応用が出来ていない気がするんです。

宜しくお願いします。

回答No.1

Dpop · ベストアンサー

Web屋です。OkWebの様なサイトを設計, 開発する仕事をしています。

> １，アサヒ．コムのように上２割部分をサイトタイトル画像＋メニュー欄で、～

そう言う場合には、ソースの表示で、どの様な構造になっているのか、
HTMLソースを確認しましょう。

asahi.com の場合、ナビゲーション部分は全てのページで共通で表示している様です。
そのため、ナビゲーション部分以下の部分に、コンテンツが読み込まれている様に
見えてしまうのだと思います。

もし、この様なサイトを作りたいのであれば、全てのコンテンツページの
同じ位置に、同じ内容の表示を行う様にすれば良いでしょう。

ただし、ページ数の多いサイトで全てHTMLで作成する事は現実的では無いので、
CGI や PHP, Servletなどプログラミング的手法により、
ナビゲーション部分は固定で持ち、コンテンツ部分はデータベースから
取り込んで表示する。
と言う方法になっていると思います。

個人の場合には、ページ数がさほど多く無いと思いますので(多くても、100ページ止まりだと思います。)、
全てHTMLで組み込んでも良いかも知れません。
CGI や PHP が利用できるなら、プログラミング的手法により、
動的HTMLを作成する方が現実的だと思います。

> ソフトは使う気はないので、必要な言語（具体的に教えてもらえると嬉しいです）、参考になるようなサイトを教えて欲しいです。

基本的には、全てHTMLで作れます。
言語的手法については、HTMLを使いこなせないと意味がありませんので、まずはHTMLである程度作れるまで習得する事が大切でしょう。
CGI や PHP, Servletなどプログラミング的手法に置いても、最終的にはHTMLを作り出し、ブラウザに表示させる必要があるため、
HTMLだけで作れないと、言語的手法を利用する意味が無いのです。

> ２，コンテンツの表示方法は１のような感じでやりたいとおもっているんですが、例えば～

テーブルでもできますし、スタイルシートでもできます。

> 私はもしかしたらテーブルタグは、データをまとめる（エクセルのような）時だけ表にして使うと思ってたんですが、大きな勘違いですかね？

現実的には、table タグのボーダーを表示して、「表」として利用する頻度より、
ボーダーを表示せずに、表示位置を固定化する手法として利用する頻度の方が多いと思います。

本当は。table タグは将来的に廃止が決まっているタグなので、スタイルシートを利用しましょう。
と言うのが、公式なHTMLの文法ではあなるのですが、
現実的には、table タグを利用して、表示位置の固定化を行っているサイトがたくさんあります。

スタイルシートによる表組みは、非常にレベルの高い作業なので、
まず、tableタグによる表組みで、表組みを行う「感覚」を身体に叩き込んで置いた方が無難である。
と言う事もあり、先ずは tableタグを上手に利用する手法を習得すると良いと思います。

参考にしてみて下さい。
不明点があれば、再度質問してください。

お礼

専門家さんのアドバイスありがとうございます！

２は、了解しました。
やはりそうだったんですねぇ。
今までは、上から下に並べて書いていただけだった（超初心者；）。
見やすさでいったらキレイに並んであるのが見やすいですし、今度挑戦してみますね！

１ですが、ソースを見たいとおもって「ソースの表示」を押すんですが、うんともすんとも言いません（－－；）
これはまた別の質問になってしまいそうですが；

そうですね、超個人サイトなので、基本的なページは２０ページまでいかないくらいです；
「同じ位置に同じ内容を」ですね！
たしかにってかんじです。これまた挑戦してみます！

回答No.2

Dpop

#1 です。

Sleipnir と言うタブブラウザを利用すると、
簡単にソース表示ができますよ。

http://sleipnir.pos.to/

ついでに、ソース表示で利用するエディタを、
いろいろな文字コードに対応できるエディタに変更して置くと良いですよ。
たとえば、iesrcview とか。

http://www.ganaware.jp/S/iesrcview/

お礼

再度回答ありがとうございます！

なるほどぉ、タブブラウザなるものが存在するんですね。
教えてくれたサイトに行っていろいろ勉強してみたいと思います。
いろいろありがとうございました（＾＾）