ﾎｰﾑ　へ　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　frame_sample1- 説明書3　全種類ﾌﾚｰﾑｻﾝﾌﾟﾙ、応用方法、ﾋﾝﾄ。　　setumeisyo3.htm

左右ﾌﾚｰﾑ+ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ（実行ﾎﾞﾀﾝ → ｼﾞｬﾝﾌﾟ）の作成・応用方法です。　　　　説明では、左右ﾌﾚｰﾑ様式を構成する、HNpd.htm−左・中ﾌﾚｰﾑ + ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ　と、hidari-pd.htm−左ﾌﾚｰﾑ用ﾍﾟｰｼﾞ + ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ、naka.htm−中 ﾌﾚｰﾑ用ﾍﾟｰｼﾞ　の3ﾌｧｲﾙを使用。　　　ｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰ や、ＨＰ制作ｿﾌﾄのＨＴＭＬ編集ﾒﾆｭｰで行います。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単・すぐ、Webで応用できまっ。　　　　　

関連情報 ：　左右ﾌﾚｰﾑ+ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ（選択即ｼﾞｬﾝﾌﾟ）、上下ﾌﾚｰﾑ+ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ（実行ﾎﾞﾀﾝ → ｼﾞｬﾝﾌﾟ）、上下ﾌﾚｰﾑ+ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ（選択即ｼﾞｬﾝﾌﾟ）、setumeisyo.htm - 左・上・中・下・右の各ﾌﾚｰﾑのﾊﾞﾘｴｰｼｮﾝ、setumeisyo2.htm -左右ﾌﾚｰﾑ様式ﾍﾟｰｼﾞ。

ﾃﾞﾓは、　HNpd.htm　を開き、Winｻｲｽﾞを変えｽｸﾛｰﾙﾊﾞｰの出現/隠蔽 や、 ”ﾌﾚｰﾑ間ﾘﾝｸ”、ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ の作動や、境界にｶｰｿﾙを置き、” ←→” を移動させたりを、吟味できるサ…*。

　

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、HNpd.htm、hidari-pd.htm、naka.htmを右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このHTMLの応用方法は、HNpd.htm、hidari-pd.htm、naka.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、 hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <html>　〜　</html> の 該当部分や、ﾃｷｽﾄﾌｧｲﾙに (*1) 、(*2)、(*3) をﾍﾟｰｽﾄするサ。

　･　編集方法は、hogehoge.html や、ﾃｷｽﾄﾌｧｲﾙを WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き、HTMLﾀｸﾞ･ｿｰｽをみながら編集します。　　　　下記の（例） (*1) と、(*2) 、(*3)を参考に太字部分の編集を任意に行います。　　 　ﾃｷｽﾄﾌｧｲﾙ（xxxx.txt）は、ﾌｧｲﾙ名を、xxxx.htm　や、xxxx.html　に変えて保存します。（xxxxx 部分は、任意の半角英数字）　 　　　WordpadでHTML Documentを編集後は、”ﾃｷｽﾄ文書”様式を選択し、ﾌｧｲﾙ名は xxxx.html などを保持し保存します。　　　ﾄｯﾌﾟﾍﾟｰｼﾞをﾌﾚｰﾑにする場合は、HNpd.htm　相当ﾌｧｲﾙを、index.htm か index.html のﾌｧｲﾙ名に変更します。　ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰに関する記述は、該当のﾌﾚｰﾑﾍﾟｰｼﾞ〔 hidari-pd.htm 〕のみに必要。　　　ﾌｧｲﾙ名の修正方法。　　　同様の編集で、setumeisyo.htm - 左・上・中・下・右の各ﾌﾚｰﾑのﾊﾞﾘｴｰｼｮﾝの応用で、いろいろのﾌﾚｰﾑがすぐ作成できます。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 4.x〜 などで開いて。　　　　更新の確認は、ie、Netscapeやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieでＦ５ｷｰを押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。　　　Netscaperは、Ctrl+Ｒｷｰで。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用するﾌｧｲﾙなどを転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽ〔src="  "や、<a href="　"部分〕は要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。

　･　関連情報 ：色記号5 、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web Development、Web開発、MSDN IE8 HTMLとCSS

　

(*1) ：　HNpd.htm　左・中（下）フレーム + ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ （例）　　　　　挿入先の 　<html> 〜 </html>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  HNpd.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

<html>と、
<head>　は、一個

　

ｼﾌﾄJIS使用（削除不可）

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名

</head>　は、一個

cols="160,*"　ﾌﾚｰﾑ列幅ｻｲｽﾞ、ﾋﾟｸｾﾙ（Winｻｲｽ変化に非変化、解像度で変化）、　cols="30%,*"　Winｻｲｽﾞ比（Winｻｲｽﾞ変化で変化） 。　またrows="80,*"　はﾌﾚｰﾑ行高さ　0=非表示、隠しﾌﾚｰﾑ　　固定は、　noresize　を追記　0 =境界線を掴めなくなります。　1=枠表示　　

※：ﾌﾚｰﾑ名の宣言　ﾀｰｹﾞｯﾄ（ 標準にする、表示対象ﾌﾚｰﾑ名）　左 ﾌﾚｰﾑに初期表示のﾍﾟｰｼﾞのﾌｧｲﾙ名（URL可）　ｽｸﾛｰﾙﾊﾞｰ自動表示、no=非表示

※：ﾌﾚｰﾑ名の宣言　ﾀｰｹﾞｯﾄ（ 標準にする、表示対象ﾌﾚｰﾑ名）　中ﾌﾚｰﾑに初期表示のﾍﾟｰｼﾞ　 のﾌｧｲﾙ名（URL可）　ｽｸﾛｰﾙﾊﾞｰ自動表示、no=非表示

※：　target=　いろいろ
　　　同じフレーム target="_self"
　　　ページ全体　　target="_top"
　　　親フレーム　 target="_parent"
　　　新しいWin　　 target="_blank"
　　　ﾌﾚｰﾑ名（例）　target="main"

<body>と、
</body>　は、一個

ｻｲﾄ=ﾍﾟｰｼﾞの紹介文などを記述します。　検索ｴﾝｼﾞﾝの、”ｻﾏﾘｰ”に表示されたりします。　検索ｷｰﾜｰﾄﾞ抽出さます。　※：→ 　”Q7: ﾎｰﾑﾍﾟｰｼﾞにﾌﾚｰﾑを使用しているのですが、登録されますか？”　（ﾗｲｺｽ）

”<!-- 　から　　-->　迄”　は ｺﾒﾝﾄ、削除しても動作に無関係。　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

</html>　は、一個

 　

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>左中　フレーム+プルダウンメニュー</title>

</head>

<frameset cols="160,*" framespacing="1" border="0" frameborder="0">

<frame name="hidari" target="naka" src="hidari-pd.htm" scrolling="auto">

<frame name="naka" target="_self" src="naka.htm" scrolling="auto">

<noframes>

<body>

ここに、サイト=ページの紹介文などを記述します。　検索エンジンの、”サマリー”に表示されたりします。　検索キーワードも抽出されます。

</body>

</noframes>

</frameset>

<!--　　以下、説明文。　カスタマイズ・編集は、それぞれ下記に該当部分で。

【タイトル】

<title>左中　フレーム</title>

【枠線】　

frameborder="0"　　1=枠幅　

framespacing="1" 　0 =境界線を掴めなくなります。

【スクロールバー】

scrolling="auto" no =スクロールバー非表示　

【フレームサイズ】

cols="160,*"　　　　フレーム列幅、ピクセル（Winサイズ変化に非変化、解像度で変化）　　

cols="30％,*"　　 　フレーム列幅、Winサイズ比（Winサイズ変化で変化）

scrolling="auto" noresize>　　固定は、noresize を追加。

rows="80,*"　　　　 フレーム行高さ、ピクセル（Winサイズ変化に非変化、解像度で変化）　　　

【表示先】

target="hidari"

【初期・デフォルトでフレームに表示するページ】

src="hidari.htm"　　URLでも可。

src="naka.htm"

-->

</html>　

　

(*2) ：　　hidari-pd.htm−左ﾌﾚｰﾑ用ﾍﾟｰｼﾞ + ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ　（例）　　　　　挿入先の 　<html> 〜 </html>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  hidari-pd.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

<html>と、
<head>　は、1個

　

ｼﾌﾄJIS使用（削除不可）

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

</head>　　<body　は、一個

ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰの記述は、　<SCRIPT　から　　</P>　　迄

　

　

　

　

　

　

　

　

　

　

新しいWin幅　  Win高　yesまたはno 　新しいWinの位置（pixels）

※：ｵﾌﾟｼｮﾝ指定 ： status=ｽﾃｲﾀｽﾊﾞｰ、resizable=Winｻｲｽﾞ可変、directories=ｱﾄﾞﾚｽﾊﾞｰ、scrollbars=ｽｸﾛｰﾙﾊﾞｰ、screenX=左上隅からの横位置,left=横位置、screenY=縦位置,top=縦位置（ie、nn双方の値）

　

　

　

　

背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

　

　

　

　

初期ﾒﾆｭｰ のURLの後方に記述します。（例）は、ﾒﾆｭｰのｶﾞｲﾄﾞ文字　”φ(.. ) 選ぶ”　を初期値に設定。

新しいWinで開く　指定ﾌﾚｰﾑで開く　任意のページの ﾌｧｲﾙ名・URLに変更して使用。　リンクの表示文字

ﾘﾝｸの加減は、　<OPTION =VALUE　…　　行の追加、削除で。

　

　

　

　

　

　

　

　

　

　

　

　

説明のための記述、削除します。

　

　

任意のページの ﾌｧｲﾙ名・URLに変更して使用。 （例）の不要部分などは、行単位で削除し、使用します。

表示先フレーム（名）の指定〔 　<frame name="naka" 　などで宣言したものなど使用。〕　　リンクの表示文字

※：　target=　いろいろ
　　　同じフレーム target="_self"
　　　ページ全体　　target="_top"
　　　親フレーム　 target="_parent"
　　　新しいWin　　 target="_blank"
　　　ﾌﾚｰﾑ名（例）　target="main"

　

　

　

　

　

　

　

　

　

　

　

</body> と、
</html>　は、一個

 　

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>左 ページの名称を記述</title>

</head>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at

The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

function leapto(form) {

var uid = new Date().getTime(); // unique ID to name popup

var myindex=form.dest.selectedIndex; // number of selection

str = new String(form.dest.options[myindex].value); // value of selection

strarray = str.split(/,/); // splits value on a comma

if (strarray[0] == "frame") // loads in frames

parent.naka.location.href = strarray[1];

else // load in popup window

window.open(strarray[1], uid, "width=600,height=400,status=yes,resizable=yes,directories=no,scrollbars=

yes,screenX=170,left=170,screenY=2,top=2");

myindex = 0; // reset pulldown menu

}

// End -->

</SCRIPT>

　

<body bgcolor="#F4FFD7" link="#54006C" vlink="#62000D" alink="#00FFFF">

<P>

<!-- Configure each item as a popup or frame item using the examples below -->

<LEFT>

<FORM NAME="myform">

<SELECT NAME="dest" SIZE=1>

<OPTION VALUE="" SELECTED>　φ(.. ) 選ぶ

<OPTION VALUE="popup,http://www.google.com/intl/ja/">Googleを新しいWinで

<OPTION VALUE="frame,http://www.zdnet.co.jp/news/">ZDNetを中ﾌﾚｰﾑで

<OPTION VALUE="frame,http://www.ftv.com/vmc/clips.asp">Fashion TVを中ﾌﾚｰﾑで

<OPTION VALUE="popup,http://www.ftv.com/vmc/clips.asp">Fashion TVを新しいWinで

<OPTION =VALUE"popup,../image_change2a.htm">画像切替を新しいWinで

<OPTION VALUE="frame,http://xml-xsl.sakura.ne.jp/ firework.htm">花火-Javaを中ﾌﾚｰﾑで

<OPTION VALUE="popup,../random_message2.hta">御神籤を新しいWinで

</SELECT>

<INPUT TYPE="BUTTON" VALUE="Go" onClick="leapto(this.form)">

</FORM>

</LEFT>

</P>

<P>

<b>左</b><br>

hidari.htm<br>

xxxx.htm をさまざまなフレームで表示する（例）：

</P>

<a href="xxxx.htm" target="_top">ページ全体で表示</a><br>

<a href="xxxx.htm" target="_blank">新しいWinで</a></br>

<a href="xxxx.htm" target="_self">同じフレームで</a></br>

<a href="xxxx.htm" target="_parent">親フレームで</a></br>

<a href="xxxx.htm" target="hidari">左フレームで</a></br>

<a href="xxxx.htm" target="migi">右フレームで</a></br>

<a href="xxxx.htm" target="ue">上フレームで</a></br>

<a href="xxxx.htm" target="naka">中フレームで</a></br>

<a href="http://www.google.com/intl/ja/" target="naka">中フレームでGoogleを</a></br>

<a href="xxxx.htm" target="sita">下フレームで</a></br>

<p>

<a href="hidari.htm#top" target="hidari">左フレームに左ページを表示</a><br>

<a href="migi.htm#top" target="migi">右フレームに右ページを表示</a><br>

<a href="ue.htm#top" target="ue">上フレームに上ページを表示</a><br>

<a href="naka.htm#top" target="naka">中フレームに中ページを表示</a><br>

<a href="sita.htm#top" target="sita">下フレームに下ページを表示</a><br>

</p>

</body>

</html>

　

(*3) ：　naka.htm　　中（下）フレーム用ページ（例）　　　　　挿入先の 　<html> 〜 </html>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  naka.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

<html>と、　　
<head>　は、1個

ｼﾌﾄJIS使用（削除不可）

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

</head>　は、1個

背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

削除

　

　

　

任意のページの ﾌｧｲﾙ名・URLに変更して使用。 （例）の不要部分などは削除し、使用します。

表示先フレーム（名）の指定〔 　<frame name="naka" 　などで宣言したものなど使用。〕　　リンクの表示文字

※：　target=　いろいろ
　　　同じフレーム target="_self"
　　　ページ全体　　target="_top"
　　　親フレーム　 target="_parent"
　　　新しいWin　　 target="_blank"
　　　ﾌﾚｰﾑ名（例）　target="main"

　

　

　

　

　

　

　

　

　

　

　

　

　

</body> と、
</html>　は、一個

 <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

<title>中 ページの名称を記述</title>

</head>

<body bgcolor="#FFFFFF" link="#54006C" vlink="#62000D" alink="#00FFFF">

<P>

<b>中</b><br>

naka.htm

xxxx.htm をさまざまなフレームで表示する（例）

</P>

<a href="xxxx.htm" target="_top">ページ全体で表示</a><br>

<a href="http://www.google.com/intl/ja/" target="_top">Googleをページ全体で表示(フレームを破棄)</a><br>

<a href="xxxx.htm" target="_blank">新しいWinで</a></br>

<a href="http://www.google.com/intl/ja/" target="_blank">Googleを新しいWinで</a></br>

<a href="xxxx.htm" target="_self">同じフレームで</a><br>

<a href="href="http://www.zdnet.co.jp/news/" target="_self">ZDNetを同じフレームで</a><br>

<a href=" href="http://www.ftv.com/vmc/clips.asp" target="_self">Fashion TVを同じフレームで</a><br>

<a href="xxxx.htm" target="hidari">左フレームで</a></br>

<a href="xxxx.htm" target="migi">右フレームで</a></br>

<a href="xxxx.htm" target="ue">上フレームで</a></br>

<a href="xxxx.htm" target="naka">中フレームで</a></br>

<a href="xxxx.htm" target="sita">下フレームで</a></br>

<p>

<a href="hidari.htm#top" target="hidari">左フレームに左ページを表示</a><br>

<a href="migi.htm#top" target="migi">右フレームに右ページを表示</a><br>

<a href="ue.htm#top" target="ue">上フレームに上ページを表示</a><br>

<a href="naka.htm#top" target="naka">中フレームに中ページを表示</a><br>

<a href="sita.htm#top" target="sita">下フレームに下ページを表示</a><br>

</p>

</body>

</html>

　

　

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。