HTML編 31/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
フレームで画面を分割する
フレームの構造




フレームの構造

トップページがようやく完成しました。ずいぶん色々とやってきましたが、これだけの量がこの後ページ数分あるわけではありませんので、もう少し頑張ってみてください(笑)。と言うのも、今までやってきた事で、ほぼ、基本的な作り方の説明は終えているからです。これからやる「フレーム」と「フォーム」の2つの新しい項目を除けば、あとは今までやったことの応用だからです。

では2ページ目「Profile」のページを作ってみましょう。上のSAMPLEを見ると解るように、Profile、Macintosh、Travelのページは同じフォーマットで出来ています。左側にリンクボタンを配置した緑色のスペースがあり、右側に内容が表示されています。左右は完全に独立していて、右側をスクロールしても左側は動かず、常にリンクボタンが固定された位置に表示されています。このような仕組みをフレームといいます。
トップページは1枚のHTMLファイルに全てを書き込み、それを表示しました。しかし、このようにフレーム機能によって独立分割されたページを作るには、最低でも3枚のHTMLファイルを作ることになります。Profileページの場合、右側のリンクボタンが配置された緑色のページのHTMLファイルが1枚、右側の内容が掲載されたページのHTMLファイルが1枚、そしてその2枚を1つの画面に統合するためのHTMLファイルが1枚必要になります。左右のページの作り方ははトップページと同じ要領ですので、もう、ほとんどご自分で作ることが出来るはずです(もちろん中で使っている細かいテクニックはあとで説明します)。ここではこの左右2枚のHTMLファイルを統合するためのタグの書き方を説明します。
※フレーム構造になっている画面は、HTMLを書き換えてからブラウザの「再読込ボタン」を押しても変更部分が反映されない場合があります。その場合はshiftを押しながら再読込をクリックするか、ファイルメニューから開くで再表示してみてください。

とりあえず左右のページを作ってしまいましょう。
まずは左のページです。ファイル名は「menu.html」としてprofileフォルダ内に保存します。全体のBGCOLORを#99cc66に、BACKGROUNDに「BG.gif」という画像を敷き詰めました。全体をテーブルで囲みCENTERタグでで画面の左右中央に配置します(もちろんDIV ALIGNでcenterを指定しても構いません)。各ページへのリンクボタンをspacer.gifでスペース調整しながら配置していきます。ボタンの名前やサイズ、ALTなどは上の「images」を参照してください。リンク先は各ディレクトリのindex.htmlとします。相対パスが正しいかどうか実際にクリックして確認してみましょう。
またProfile、Macintosh、Travelそれぞれのページで、自分のいるページのボタンは出っぱらないようにしたいので、Profileページの場合Profileのボタンだけは「BToffProf.gif」を使い、とうぜんリンクは張りません。Mailのボタンはブラウザのメールを立ち上げるようにします。
タイトルは基本的には入れなくても良いのですが、とりあえず「Kimura's Room:Profile」と入れておいてください。これは後ほど説明します。
menu.htmlは下のようになります。
View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>

<BODY BACKGROUND="../img/BG.gif" BGCOLOR="#99cc66">

<CENTER>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" >
<TR><TD>

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

</TD></TR><TR><TD>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="30">

</TD></TR><TR><TD>

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

</TD></TR><TR><TD>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="5">

</TD></TR><TR><TD>

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

</TD></TR><TR><TD>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="5">

</TD></TR><TR><TD>

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

</TD></TR><TR><TD>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="5">

</TD></TR><TR><TD>

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

</TD></TR><TR><TD>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="30">

</TD></TR><TR><TD>

<!--★★メール★★-->
<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>

「BToffProf.gif」の左右幅が足りないので横にもタイリングして表示されていますが、今は気にしないでください。
右側のページには「prof-face.gif」に「クライアントサイドクリッカブルマップ」というリンクが仕込まれていたり、少々複雑なテーブルがありますが、これも後でやることにします。今はProfileと右端に入った緑の帯だけ作ってください。ファイル名は「contents.html」として「Profile」フォルダに保存します。
View
<HTML>
<HEAD>
<TITLE>Kimura's Room:Profile</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec" LINK="#009933" ALINK="#FF0000" VLINK="#999999">
<CENTER>
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="97%" BGCOLOR="#009933">
<TR>
<TD ALIGN="right"><FONT COLOR="#ffffff"><B>Profile</B></FONT></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

backindexnext