ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）

画像と文字のレイアウトメモ帳でタグをうつ・・・・・これが一番確実。かも。

「フレームを使いたい。」そんな要望に。

フレームのサンプル　順番に見ていって下さい。
サンプル１の作り方 サンプル２の作り方 サンプル３の作り方

でもあまり多用すると逆効果です。またこのページでは無料レンタルサーバーを使っているためコマーシャルがたくさんでてしまいます。

　

用意するモノ
文字を入力してみよう最低用意するモノ

そしてmypage“自分の作品フォルダー”の中に

  • frm　　（“フレーム”というフォルダ）

　　　　更にその中に

  • pages　（“ページたち”というフォルダ）

mypage（“自分の作品”フォルダー）
　　┣frm　　（“フレーム”というフォルダ）
　　┃　┗pages　（“ページたち”というフォルダ）

ここから「frm」フォルダを圧縮したfrm.lzhをダウンロードできます。

　

１，ではさっそく　　frm“フレーム”というフォルダー　　の中から作ってみましょう。

　

フレームフォルダーの中にとindex_frame_1.htmlいうファイルを作ります。これはフレームの骨格を作っています。

index_frame_1.html
<HTML><HEAD><TITLE>フレームのリンク例　１</TITLE></HEAD>


<FRAMESET COLS="150,* ">
<FRAME SRC="pages/menu.html" NAME="menu">

<FRAME SRC="pages/main.html" NAME="main">

</FRAMESET>
</FRAMESET>


<NOFRAMES>
<BODY>
フレームに対応したブラウザでないと、このページは表示できません<P>
</BODY>
</NOFRAMES>
</HTML>

　

２，pages“ページたち”というフォルダー　　の中に先ほどの骨格の中に表示するページをつくります

（１）これらは自分の一番の作品：花鳥風月です。

1.html
<html>
<body bgcolor=ffffff>
<!--ここより下を自由に編集する-->

<font size=5 color=ff0000>花のページ　　1.html</font>

<!--ここより上を自由に編集する-->
</body>
</html>

　

2.html
<html>
<body bgcolor=ffffff>
<!--ここより下を自由に編集する-->

<font size=5 color=ff0000>鳥のページ　　2.html</font>

<!--ここより上を自由に編集する-->
</body>
</html>

　

3.html
<html>
<body bgcolor=ffffff>
<!--ここより下を自由に編集する-->

<font size=5 color=ff0000>風のページ　　3.html</font>

<!--ここより上を自由に編集する-->
</body>
</html>

　

4.html
<html>
<body bgcolor=ffffff>
<!--ここより下を自由に編集する-->

<font size=5 color=ff0000>月のページ　　4.html</font>

<!--ここより上を自由に編集する-->
</body>
</html>

（３）これがフレームの左に現れるメニューになります。

menu.html
<html>

<body bgcolor=ffffff>左に現れるメニュー　　menu.html<p>

ターゲットフレームとして「main」を指定<br>
<a href="1.html" target="main">花</a><BR>
<a href="2.html" target="main">鳥</a><BR>
<a href="3.html" target="main">風</a><BR>
<a href="4.html" target="main">月</a><BR><p>
<a href="main.html" target="main">トップへ戻る</a>

</body>
</html>

（４）おまけのくせにとても大きい・・・・メインのフレームにトップのページを入れてみました。無くてもＯＫです。

main.html
<html>

<body bgcolor=ffffff>

メインのフレーム　　main.html

<p>
花鳥風月にはターゲットフレームに何も指定しないリンクです。<br>
<a href="1.html">花</a>/
<a href="2.html">鳥</a>/
<a href="3.html">風</a>/
<a href="4.html">月</a>/
<p>

<a href="index_nonframe.html" target="_top">ターゲットを_topにするとフレームを取り払ってリンクができます。<br>
<a href="http://isweb39.infoseek.co.jp/art/kefi/oo51/index.html" target="_top">他のサイト（紙飛行機）に移動するリンクを作るときは、この target="_top"　を入れましょう。<br>
<a href="http://isweb39.infoseek.co.jp/art/kefi/oo51/index.html" >この target="_top"　を入れないとこのようになってしまいます。

<p>
<a href="../../../index-37.html" target="_top">ここをクリックするとフレームを取り払い、kefi_pallhkariの説明ページに戻ります。
</p>

</body>

</html>

３，これをブラウザで見ると・・・・・index_frame_1.htmlをクリックすると

となります。

本文にもどる

Last update Feb.2,2003