HTML編 36/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
フレームで画面を分割する
リンク先を表示する画面を指定する
リンク先を表示する画面が常に一定の場合




リンク先を表示する画面を指定する

●<FRAME SRC="n" NAME="n">
●<A HREF="n" TARGET="n" >
先ほどから作ってきたフレームは、リンクボタンをクリックすると、変な画面に表示されていたと思います。これはクリックしたボタンのある側のフレームにリンク先を読み込んでしまっていたためです。そこでリンクボタンをクリックしたとき、リンク先を読み込むフレームを指定してみましょう。
リンク先を指定するには、まずFRAME SRCタグにNAMEオプションでそれぞれのフレームに名前を付けておいて、リンクボタンのリンクタグに、読み込ませたいフレームをその名前で指定します。
ここでは左のフレームを「hidari」、右のフレームを「migi」と名付けました。

<FRAME SRC="menu.html" NAME="hidari"〜>
<FRAME SRC="contents.html" NAME="migi"〜>

「profile」の「menu.html」のボタンに付けるリンクタグには、「リンクする」の項目の「新しいウィンドウにリンク先を表示する」でやったようにTARGETオプションで、今名付けた名前を指定します。

<A HREF="../index.html" TARGET="migi">

こうすることで、トップページへのボタンをクリックすると右側のフレームにリンク先を読み込み、常に左側はメニューが表示されるようになります。Macintoshやtravel、アンケートのボタンにもTARGETを指定してみましょう。
index.html

<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>

<FRAMESET COLS="170,*" BORDER="0" FRAMESPACING="0" FRAMEBORDER="0">

<FRAME SRC="menu.html"
NAME="hidari" MARGINWIDTH="25" MARGINHEIGHT="25" NORESIZE>
<FRAME SRC="contents.html"
NAME="migi" MARGINWIDTH="25" MARGINHEIGHT="25">

<NOFRAMES><BODY>このページはFRAME機能を使用しています。<P>
申し訳ありませんが,FRAME機能をサポートしているブラウザでご覧ください。</BODY></NOFRAMES>

</FRAMESET>
</HTML>

menu.html View

<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>

------略-------

<!--★★トップページへのボタン★★-->
<A HREF="../index.html"
TARGET="migi"><IMG SRC="../img/BTonTop.gif" ALT="トップページへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★プロフィールへのボタン★★-->
<IMG SRC="../img/BToffProf.gif" ALT="プロフィール" BORDER="0" WIDTH="96" HEIGHT="26">

------略-------

<!--★★Macintoshへのボタン★★-->
<A HREF="../macintosh/index.html"
TARGET="migi"><IMG SRC="../img/BTonMac.gif" ALT="Macintoshへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★トラベルへのボタン★★-->
<A HREF="../travel/index.html"
TARGET="migi"><IMG SRC="../img/BTonTravel.gif" ALT="トラベルへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★アンケートへのボタン★★-->
<A HREF="../enquete/index.html"
TARGET="migi"><IMG SRC="../img/BTonEnquete.gif" ALT="アンケートへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★メール★★-->
<A HREF="mailto:abc@defghijk.ne.jp?subject=木村宛のメールです"><IMG SRC="../img/BTonMail.gif" ALT="メール" BORDER="0" WIDTH="96" HEIGHT="26"></A>

</TD></TR></TABLE>
</CENTER>
</BODY>
</HTML>




リンク先を表示する画面が常に一定の場合

●<BASE TARGET="n">
上の例では<FRAME SRC="menu.html" NAME="hidari"〜>と指定したにも関わらず、リンク先を表示するのは全て右側ですので、リンクボタンに<A HREF="〜.html" TARGET="hidari">とは指定しませんでした。「hidari」と指定すれば、もちろんリンク先は左側のメニュー部分に表示されます。これはTARGETオプションを指定しなかった場合と同じ事です。
どうせ全て右側に表示するならリンクタグ全てにいちいちTARGETオプションを付けなくても、まとめて指定してしまえるタグがあります。<BASE TARGET="n">がそれです。<HEAD>タグ内にこれを書き込んでしまえば、全てのリンク指定はこの指示に従います。
View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>

<BASE TARGET="migi">

<META HTTP〜
------略-------

<!--★★トップページへのボタン★★-->
<A HREF="../index.html"><IMG SRC="../img/BTonTop.gif" ALT="トップページへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★プロフィールへのボタン★★-->
<IMG SRC="../img/BToffProf.gif" ALT="プロフィール" BORDER="0" WIDTH="96" HEIGHT="26">

------略-------

<!--★★Macintoshへのボタン★★-->
<A HREF="../macintosh/index.html"><IMG SRC="../img/BTonMac.gif" ALT="Macintoshへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★トラベルへのボタン★★-->
<A HREF="../travel/index.html"><IMG SRC="../img/BTonTravel.gif" ALT="トラベルへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★アンケートへのボタン★★-->
<A HREF="../enquete/index.html"><IMG SRC="../img/BTonEnquete.gif" ALT="アンケートへ" BORDER="0" WIDTH="96" HEIGHT="26"></A>

------略-------

<!--★★メール★★-->
<A HREF="mailto:abc@defghijk.ne.jp?subject=木村宛のメールです"><IMG SRC="../img/BTonMail.gif" ALT="メール" BORDER="0" WIDTH="96" HEIGHT="26"></A>

</TD></TR></TABLE>
</CENTER>
</BODY>
</HTML>

backindexnext