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
<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>タグ内にこれを書き込んでしまえば、全てのリンク指定はこの指示に従います。
<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>