ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾃﾞｰﾀﾍﾞｰｽ 2　　database2.htm

”*.CSV ﾌｧｲﾙ”　のﾃﾞｰﾀｰを1件ずつ表示。　　　画像付きﾌﾟﾛﾌｨｰﾙの応用例。　　　DHTML。　　　　ﾃﾞｰﾀﾍﾞ-ｽの編集は、*.CSV ﾌｧｲﾙを　”ﾃｷｽﾄｴﾃﾞｨﾀｰ”　か、”Excel”　で開き行います。　　　Internet Explorer4.x〜対応。　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、　ﾎﾞﾀﾝでﾃﾞｰﾀをｽｸﾛｰﾙします。　　　ﾃﾞｰﾀは全て架空値です。

　

<ご使用方法>

　・　ﾛｰｶﾙ（=PC）への保存は、　database2.htm、database2.csv、 〔以下画像は任意にpointer.gif、pointer_hm.gif、pointer_kr.gif、pointer_us.gif、pointer2.gif、あるいは画像 〕を右ｸﾘｯｸします。　　　[対象をﾌｧｲﾙに保存]あるいは、[名前を付けて画像を保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで行います。　　　　※1:ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は多少ある）。　　　 ※2:hogehoge.html ： 制作者が名付けた挿入先ﾌｧｲﾙの総称。

　・　PCに保存したﾌｧｲﾙを WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　このDHTMLの実装方法は、database2.htm、database2.csv　をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、挿入先（新しいﾍﾟｰｼﾞ 1 や hogehoge.html） の、 　<head>　〜　</head>の間の任意の行に (*1)を、さらに　　<body>　〜　</body>の間の任意の行に、(*2) をﾍﾟｰｽﾄします。

　･　編集方法 ： 下記の（例）(*1)と、(*2)　を参考に太字部分の編集を行います。　　　　ﾃﾞｰﾀﾍﾞ-ｽの編集〔画像やﾌﾟﾛﾌｨｰﾙﾃﾞｰﾀの追加/削除、変更……〕は、ﾃｷｽﾄｴﾃﾞｨﾀｰかExcelで　database2.csv  を開き行います。　　　

　･　画像の変更は、database2.csv　への記述で。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 4.x〜 などで開き行います。　　　　更新非反映にﾌﾞﾗｳｻﾞｰのｷｬｯｼｭの前ﾃﾞｰﾀがあります。　　目的のﾍﾟｰｼﾞを表示、F5ｷｰ を押し最新ﾃﾞｰﾀを読み込みます。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に 　database2.csv、や画像ﾌｧｲﾙなどを転送/配置後に実施します。　　　ｽｸﾘﾌﾟﾄ中への改行混入は非作動原因。

　･　関連情報 ： 色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。　　　Web Development、Web開発、IE10 互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE API ﾘﾌｧﾚﾝｽ、IE 開発 > HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。

　

(*1) ：　 database2.htm　（例）　　　　　　　挿入先の 　<head> 〜 </head>　の、〜 部分にﾍﾟｰｽﾄします。

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

　

　

　

　

<style type 〜 </style>は（削除可）

ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ　 背景色　下線表示

　

非ﾏｳｽｵｰﾊﾞｰ時の（逆も可）下線非表示

　

　

 　

<style>

TD {COLOR: #250032}

LABEL {FONT-WEIGHT: bold}

</style>

<style type="text/css"><!-- A:hover {

COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: underline

}

A {

TEXT-DECORATION: none

}

-->

</style>

　

(*2) ：　 database2.htm　（例）　　　　　　　挿入先の 　<body> 〜 </body>　の、〜 部分にﾍﾟｰｽﾄします。　　上の　　と同じ。

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

　

　

　

ﾒﾆｭｰﾞｻｲｽﾞ

*.CSVﾌｧｲﾙ名

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

表（ﾃｰﾌﾞﾙ）

（以下同じ）

　

　

　

　

　

　

　

　

　

　

項目名

 　

<table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">

<tr>

<td width="33%"><!--webbot bot="HTMLMarkup" startspan --><p><font face="ＭＳ Ｐゴシック" size="3">

<object id="tdcStaff" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" width="192"

height="192">

<param name="DataURL" value="database2.csv">

<param name="UseHeader" value="True">

<param name="TextQualifier" value=",">

</object>

</font></p>

<script LANGUAGE="Javascript">

function moveNext()

{

tdcStaff.recordset.MoveNext();

if(tdcStaff.recordset.eof)

{

tdcStaff.recordset.MoveFirst();

}

}

function movePrevious()

{

tdcStaff.recordset.MovePrevious();

if(tdcStaff.recordset.bof)

{

tdcStaff.recordset.MoveLast();

}

}

</script>

<table BORDER="0" CELLPADDING="0" CELLSPACING="1" width="383" bgcolor="#400161">

<tr BGCOLOR="#9B908C">

<td width="125" bgcolor="#F8F5F5"><font face="ＭＳ Ｐゴシック" size="3"><input

TYPE="button" ONCLICK="tdcStaff.recordset.MoveFirst();" VALUE=" &lt;&lt; "

ALT="Move First" style="background-color: rgb(80,0,138); color: rgb(255,250,213)"> <input

TYPE="button" ONCLICK="movePrevious();" VALUE=" &lt; " ALT="Back"

style="background-color: rgb(108,11,255); color: rgb(255,255,255)"> <input TYPE="button"

ONCLICK="moveNext();" VALUE=" &gt; " ALT="Next"

style="background-color: rgb(108,11,255); color: rgb(255,255,255)"> <input TYPE="button"

ONCLICK="tdcStaff.recordset.MoveLast();" VALUE=" &gt;&gt; " ALT="Move Last"

style="background-color: rgb(80,0,138); color: rgb(255,250,213)"></font></td>

<td width="215" bgcolor="#F8F5F5"><font face="ＭＳ Ｐゴシック" size="3"><span

style="color: rgb(89,0,132)"><label>区分 : </label></span><span

style="color: rgb(97,51,1)"><span DATASRC="#tdcStaff" DATAFLD="Dept">　　　</span></span></font></td>

</tr>

</table>

<table BORDER="0" CELLPADDING="0" CELLSPACING="1" bgcolor="#3D0059" width="585">

<tr BGCOLOR="#F4F2F2">

<td bgcolor="#E7E6EB" width="375"><font face="ＭＳ Ｐゴシック" size="3"><img

DATASRC="#tdcStaff" DATAFLD="Picture"> </font></td>

<td VALIGN="TOP" width="406"><table CELLPADDING="0" CELLSPACING="0" BGCOLOR="#590084"

HEIGHT="100%" width="442">

<tr BGCOLOR="#004A8C">

<td width="102" bgcolor="#F2F1EE"><span style="color: rgb(77,0,113)"><label>おしごと　名前

: </label></span></td>

<td NOWRAP width="281" bgcolor="#F2F1EE"><span style="color: rgb(85,1,109)"><font

face="ＭＳ Ｐゴシック" size="3"><span DATASRC="#tdcStaff" DATAFLD="FirstName"></span>&nbsp;<span

DATASRC="#tdcStaff" DATAFLD="LastName"></span></font></span></td>

</tr>

<tr>

<td width="102"></td>

</tr>

<tr BGCOLOR="#004A8C">

<td width="102" bgcolor="#F4F2F2"><span style="color: rgb(77,0,113)"><label>Email : </label></span></td>

<td width="281" bgcolor="#F4F2F2"><div DATASRC="#tdcStaff" DATAFLD="Email"></div></td>

</tr>

<tr>

<td width="102"></td>

</tr>

<tr BGCOLOR="#004A8C">

<td width="102" bgcolor="#F4F2F2"><span style="color: rgb(77,0,113)"><label>電話 : </label></span></td>

<td width="281" bgcolor="#F4F2F2"><div DATASRC="#tdcStaff" DATAFLD="Telephone"></div></td>

</tr>

<tr>

<td width="102"></td>

</tr>

<tr BGCOLOR="#004A8C">

<td width="102" bgcolor="#F4F2F2" height="60"><span style="color: rgb(77,0,113)"><label>ﾌﾟﾛﾌｨｰﾙ

: </label></span></td>

<td width="281" bgcolor="#F4F2F2"><div DATASRC="#tdcStaff" DATAFLD="About"></div></td>

</tr>

<tr BGCOLOR="#004A8C">

<td width="102" bgcolor="#F4F2F2" height="60"><span style="color: rgb(77,0,113)"><label>Webｻｲﾄ

: </label></span></td>

<td width="281" bgcolor="#F4F2F2"><div DATASRC="#tdcStaff" DATAFLD="url"></div></td>

</tr>

</table>

</td>

</tr>

</table>

<!--webbot bot="HTMLMarkup" endspan i-checksum="16291" --></td>

</tr>

</table>

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

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