- ベストアンサー
ホームページの構成について
ホームページで、横に4分割し、上からそれぞれA,B,C,Dと名づけます。比率はだいたいA=10%、B=10%、C=50%、D=30%くらいで、Dを更に半分に割ります。 そしてAにはホームページロゴを、Bにはメニュー(Profile,BBS,Linkなど)をそれぞれ表示し、Bのメニューで選んだコンテンツをCにスクロールバー付きで表示させます。Dには2分割した左にサイトマップを、右に更新情報を常に表示しておきます。 だから、状況としてはトップページにアクセスしたら、A,B,DはそのままでCだけ変化させてサイト観覧ができる状態です。これをフレームを使わずにします。 …という構成にしたいのですが、どうすればよいのか全く分かりません。 誰か詳しくご教授してくださる方、よろしくお願いします。
- みんなの回答 (6)
- 専門家の回答
質問者が選んだベストアンサー
<html> <body bgcolor="#3399FF" leftmargin="0" topmargin="0"> <table width="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> <tr> <td height="30"><br></td> </tr> </table> <table width="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> <tr> <td height="30"><div align="center">| <a href="http://www.yahoo.co.jp/" target="in">yahoo</a> |<a href="http://www.livedoor.com/" target="in"> livedoor</a> | <a href="http://www.goo.ne.jp/" target="in">goo</a> |</div></td> </tr> </table> <table width="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td height="300"> <div align="center"> <iframe src="http://www.yahoo.co.jp/" name="in" width="100%" height="100%" frameborder="0" scrolling="no"></iframe> </div></td> </tr> </table> <table width="500" align="center" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#669900"> <br><br> </td> <td bgcolor="#FFCC00"> <br><br> </td> </tr> </table> </body> </html> こんなとこでしょうか。 なんとかこんなサイトを作りたい!って気持ちでソースとにらみ合うのが一番力がつきますよ~。 がんばってください。
その他の回答 (5)
- 2536san
- ベストアンサー率100% (1/1)
No.3です。 長くなってすみません、ざっくりですがインラインフレームを使ったサンプルのソース貼るのでコピーペーストで見てみてください。 赤がA,灰色がB,白がC、黄色がDです。こんな感じでしょうか。 <!--ソースここから--> <html> <body bgcolor="#3399FF" leftmargin="0" topmargin="0"> <table width="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> <tr> <td height="30"><br></td> </tr> </table> <table width="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> <tr> <td height="30"><div align="center">| <a href="http://www.yahoo.co.jp/" target="in">yahoo</a> |<a href="http://www.livedoor.com/" target="in"> livedoor</a> | <a href="http://www.goo.ne.jp/" target="in">goo</a> |</div></td> </tr> </table> <table width="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td height="300"> <div align="center"> <iframe src="http://www.yahoo.co.jp/" name="in" width="100%" height="100%" frameborder="0" scrolling="no"></iframe> </div></td> </tr> </table> <table width="500" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFCC00"> <tr> <td height="60"><br></td> </tr> </table> </body> </html> <!--ソースここまで--> フレームで検索ページでページの中身だけが引っかかってしまうのは、ページの下の方にでもcopyright~表示やバナーをいれて、サイトのトップページにリンクを貼って対策してます。 ではがんばってくださいね。
お礼
ご丁寧にありがとうございます! すごく参考になります。 Dの部分はさらに半分にはできないですかね? 何度も何度もすみません。。
- yuma85jp
- ベストアンサー率20% (49/234)
こんばんは。#2で回答したものです。 >>それと、捜したところぼくの考えと同じような構成のサイトを見つけたので参考までによろしくおねがいします。 リンク先のサイトはFLASHをつかっていますね。FLASHってご存知ですか?マクロメディア社が開発した技術で、Webサイト上で動きのあるデザインを可能にしたものです。最近のホームページ作成の主流ですね。 ただ、FLASHは独学で勉強するのは大変だという事と、FLASHを作成するには、それ専用のソフトが必要になります。「FLASH MX」などがその代表格ですが、結構値がはります。http://www.macromedia.com/jp/software/flash/ それと、FLASHはソースとか見れないです。HTML言語で書かれているわけではないので。 本格的なホームページを作りたいということでしたら、ソフトを購入しても損はないと思います。 ちなみに、下記に記した僕のホムペも、ロゴの部分はFLASHを使っています。参考にはならないと思いますが。
お礼
FLASHはやっぱり難しいんですね。。 分かりました…参考にさせていただきます。
- 2536san
- ベストアンサー率100% (1/1)
「フレームを使わない」とゆう前提なので全然だめかもしれませんが、インラインフレームをCの部分に適用されるのはどうでしょうか。 可能なら、yuma85jpさんがおっしゃってる方法で、A,B,D部分をSSIで呼び出すか、 あとは、B,C部分のみをFLASHで制作するかでしょうか。 個人サイトなのか商用サイトなのか、sieさんがどのくらいホームページの知識をお持ちなのかが分からないので、まったく見当違いな回答だったらすみません。 とりあえず技術的にはこんな方法があると思います。 ご参考程度に。
お礼
ご回答、ありがとうございました。 インラインフレームをCに適用、と言うことは、全体を横に3分割すると言うことですか?^^; あー、FLASHですかぁ。。それは難しいですか? サイトは、個人サイトで知識はHTMLが分かるくらいです^^;
- yuma85jp
- ベストアンサー率20% (49/234)
いやぁ~、ちょっと無理じゃないでしょうか?通常でしたら、フレームを使うパターンですし…。まぁ、近年フレームを使ってるページは叩かれる風潮がありますが、そこまで頑なに排除するほどデメリットがあるものでもありませんよ? 唯一の手段として思い浮かぶのが、ABDはそのままでCだけ変えたページをいっぱいつくるというやり方です。ちょっと説明しづらいんですが、ページごとにABCDを作るわけです。 ページ1(ABCD)、ページ2(ABC'D)、ページ3(ABC''D)という感じで。ページ1がトップページだとすると、ページ1からページ2に飛んだ場合、C以外の構成を全部同じにしておけば、ブラウザが読み込むデーターがC'のデーターだけですむので、閲覧者から見ると、まるでCの部分だけが変化しているように見えるというわけです。 参考というか、僕が作っていたページも同じ作り方をしています。http://www9.ocn.ne.jp/~yuma/ メニューからリンク先をクリックすると、一見真ん中だけが変わっているように見えますが、実は全く新しいページにリンクされています。 まぁ、このサイトはインラインフレームも多用していますが…。 ただ、このやり方はデメリットがいっぱいあって、メニューとか、履歴を更新するたびに、全てのページを直さねばならないのです。というわけで、更新を頻繁に行うつもりであれば、お勧めできません。
- 参考URL:
- http://www9.ocn.ne.jp/~yuma/
お礼
ご回答、ありがとうございました。 ABDを残してCだけを変えたページをいくつも作る、ということは実際に以前やったことがありまして。。 ただ、ご指摘のとおり、更新情報(2分割したDの右)などを改める場合は他のページも全てやらないといけないんで、大変ですよね…。。 yumaさんのサイト、見させていただきました。 すんごく素敵でしたよ♪
- mario33
- ベストアンサー率19% (7/36)
フレームでは何かいけないことがあるのですか? 多分フレームを使わなければ無理ですが、レイヤーを使っても出来ると思います。しかしレイヤーはネスケの専売特許ですからね(笑)、インターネットエクスプローラーでは表示できません。 ただし、レイヤーと擬似的な機能をテーブルタグで実現することができます。 たくみなJavaScriptの記述がひつようになりますから相当苦労します。それさえできれば、テーブルのある行だけを変化させることができますし、テーブルの表示、非表示などのアクションが可能になります。 問題はやってみればわかりますが、変化後のページの内容まで一つのページで包括するためにかなり重たくなります。 フレームが一番だと思います。
お礼
早速のご回答、ありがとうございました。 フレームのことですが、以前フレームを使うと検索したときに別のページがサーチエンジンで表示されてしまうことがあったので、できればフレームなしで、と言うことだったんです。 テーブルとJavaScriptですか。やっぱりかなり難しいのでしょうか? それと、捜したところぼくの考えと同じような構成のサイトを見つけたので参考までによろしくおねがいします。 http://www.playstation.jp/scej/title/wa4/ ソースを見てみましたが、さっぱりでした。。 こんなサイト構成がいいです・・・。
お礼
うわぁ! ありがとうございますぅ! 参考にして、これからがんばっていこうと思います! ホントにありがとうございました!