dreamweaverCS4にてHP作成をしています

左右にフレーム分けしたページ(menu_Frameset)を作成し…
左(menu_left)には「メニューA」を表示し
右(menu_main)には一寸した?「注意事項」を記載しております

左(menu_left)の「メニューA」にある「項目A」をクリックすると…
右(menu_main)のページに上下にフレーム分けされたページ(koumoku_Frameset)を表示する

右(menu_main)のページに表示された上下にフレーム分けされたページ(koumoku_Frameset)には…
上(koumoku_top)には…「メニューB」が表示されていて…
下(koumoku_main)には…「メニューB」に表示されている「項目B」を
クリックする毎に表示内容を変更する

上記の様なサイトを作成したのですが…
上(koumoku_top)に表示されている「項目B」をクリックすると…
上(koumoku_top)が消えて?しまい…右(menu_main)全体に表示されてしまいます

上下にフレーム分けされたページ(koumoku_Frameset)のみを表示させて試すしてみると…
下(koumoku_main)には問題無く表示されます

dreamweaverCS4にて「コード」を確認すると下記の様になっております
<a href="アドレス" target="mainFrame">項目</a>
※mainFrame=下(koumoku_main)

対処方法や確認すべきポイントなどはありませんでしょうか?
対処方法などがありましたら…アドバイスをお願い致します

A 回答 (1件)

おそらく、フレームの名前(frame要素に与えるname属性)ターゲットの指定が適切ではないのだと思います。

質問文だけだとわかりにくいのですが、もしかして、ファイル名とフレームの名前とターゲット名を混乱して捉えてらっしゃいませんか?
ちょっとこちらでファイル名やターゲット名をわかりやすいものに変えて整理させて頂きました。

(1)index.html…最初に表示する左右に分割したフレーム枠(続く(2)と(3)の親)
(2)menu.html…(1)の左フレームに表示するメニュー(「項目A」を含む)
(3)main_top.html…(1)の右フレームの初期表示(注意事項を記載)
(4)main_a.html…(2)の「項目A」をクリックすると(3)と入れ替わって右フレームに表示される上下に分割したフレーム枠(続く(5)と(6)の親)
(5)main_a_menu.html…(4)の上フレームのメニューの初期表示(「項目B」を含む)
(6)main_a_top.html…(4)の下フレームの初期表示
(7)main_b.html…(5)の「項目B」をクリックすると(4)と入れ替わって下フレームに表示される項目Bの内容

希望通りの表示をする為には、

・(1)と(4)のフレーム枠の記述でそれぞれのフレームに対して適切なname属性を与えること。
・フレームのname属性は重複してはいけない。今回の場合だとフレームのname属性は4つ(上下左右)必要になるが、全て違う値を与えること。
・ターゲット指定の値には所定のフレームのname属性の値を適切に指定すること。

これさえきちんとできていれば、問題なく表示できる筈です。
長くなりますが、以下はサンプルです。
----------------------------------------------------------------------
(1)index.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>フレームサンプル</title>
</head>

<frameset cols="200,*" title="コンテンツ">
<frame src="menu.html" name="menu" title="メニュー" scrolling="auto" noresize>
<frame src="main_top.html" name="main" title="メイン" scrolling="auto" noresize>

<noframes>
<body>
<p>代替内容</p>
</body>
</noframes>

</frameset>
</html>
----------------------------------------------------------------------
(2)menu.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
</head>

<body>
<h1>メニュー</h1>

<ul>
<li><a href="main_a.html" target="main">項目A</a></li>
</ul>
</body>
</html>
----------------------------------------------------------------------
(3)main_top.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
</head>

<body>
<h1>メイントップ</h1>

<p>注意事項</p>
</body>
</html>
----------------------------------------------------------------------
(4)main_a.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>フレームサンプル</title>
</head>

<frameset rows="100,*" title="コンテンツ">
<frame src="main_a_menu.html" name="main_a_menu" title="メインAのメニュー" scrolling="auto" noresize>
<frame src="main_a_top.html" name="main_a_main" title="メインA" scrolling="auto" noresize>

<noframes>
<body>
<p>代替内容</p>
</body>
</noframes>

</frameset>
</html>
----------------------------------------------------------------------
(5)main_a_menu.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
</head>

<body>
<h1>メインAのメニュー</h1>

<ul>
<li><a href="main_b.html" target="main_a_main">項目B</a></li>
</ul>
</body>
</html>
----------------------------------------------------------------------
(6)main_a_top.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
</head>

<body>
<h1>メインAの初期表示</h1>
</body>
</html>
----------------------------------------------------------------------
(7)main_b.html
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
</head>

<body>
<h1>項目Bの内容</h1>
</body>
</html>
----------------------------------------------------------------------
    • good
    • 0
この回答へのお礼

abrilさん
お礼の返信が遅くなりまして申し訳御座いません
ご丁寧な回答を頂きまして有り難う御座います

ご指摘の「name属性」に関しては…私自身…分からない状態でしたが
インターネットで色々と調べて無事に完成出来そうです

追伸…
Sample迄、記載頂きまして本当に有り難う御座います

お礼日時:2009/05/22 09:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報