ホーム へ       サンプルページ  データベース 2  database2.htm

”*.CSV ファイル” のデーターを1件ずつ表示。   画像付きプロフィールの応用例。   DHTML。    データベ-スの編集は、*.CSV ファイルを ”テキストエディター” か、”Excel” で開き行います。   Internet Explorer4.x〜対応。    コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、 ボタンでデータをスクロールします。   データは全て架空値です。

 

<ご使用方法>

 ・ ローカル(=PC)への保存は、 database2.htmdatabase2.csv、 〔以下画像は任意にpointer.gifpointer_hm.gifpointer_kr.gifpointer_us.gifpointer2.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 DevelopmentWeb開発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="MS Pゴシック" 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="MS Pゴシック" 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="MS Pゴシック" 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="MS Pゴシック" 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="MS Pゴシック" 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ソース(タグ)を見ながらの直接編集方法。