ﾎｰﾑ へ ｻﾝﾌﾟﾙﾍﾟｰｼﾞ ﾃﾞｰﾀﾍﾞｰｽ 13 database13.htm
ﾌｨﾙﾀｰ抽出・ｿｰﾄ表、ﾃﾞｰﾀ（名前・概要・数値・場所・生業など）はXMLﾌｧｲﾙに記述。 DHTML、XML、XSL、HTC。 ﾃﾞｰﾀ、表構造などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。 all 対応。 ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。
ﾃﾞﾓは、分類ｷｰﾜｰﾄﾞ（場所・Type・対象）でのﾌｨﾙｰﾀｰ抽出や、列ﾀｲﾄﾙのｸﾘｯｸでの昇降順ｿｰﾄなどで。 互換表示・設定で。
< ご使用方法 >
・ ﾛｰｶﾙ（=PC）への保存は、database13/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、database13.htm、033021.xml、033021.css、033020.htc、033021.xsl、033022.xsl、dd_down.gifほかを右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。 ※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。
・ このDHTMLの実装方法は、database13.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head> 〜 </head> の任意の行間に (*1)を、さらに
<body> 〜 </body>の任意の行間に (*2) をﾍﾟｰｽﾄします。
･ 編集方法は、hogehoge.html をﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。 下記の（例） (*1) と、(*2)〜 を参考に太字部分の編集を任意に行います。 ※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。
・ 作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 8.x〜 などで開いて。 更新の確認は [F5]ｷｰ を押し、ｻｰﾊﾞｰやﾌﾞﾗｳｻﾞｰのｷｬｯｼｭｸﾘｱｰ、最新ﾃﾞｰﾀ読み込み（≠再ｱｸｾｽ）で行います。
･ ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像
、*.xml、*.xsl、*.htc、*.css なども転送/配置し実施。 ※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。 FTPなどで変わったﾌｧｲﾙ名は要修正。 ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。
･ 関連情報 ：
色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。 Web Development、Web開発、IE10
互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE
API ﾘﾌｧﾚﾝｽ、IE 開発
> HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。
(*1)
： database13.htm （例） 挿入先の <head> 〜 </head> の、〜 部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
|
〔この列ﾍﾟｰｽﾄ不要〕
ｼﾌﾄJIS使用（削除不可）
互換表示
ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）
<style type= 〜
</style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景
body 文字色 背景色 下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ
ﾘﾝｸを新しいWinで開くを標準（削除可）※：target= いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）
|
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<link REL="SHORTCUT ICON" href="favicon.ico">
<style type="text/css"><!--
.xxx0
{ background: #F9F8F9 url('wttec.gif');
}
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9
url('wttec.gif'); text-decoration:none;
}
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4;
text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2;
text-decoration:underline; }
font {font-size:12px;line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
--></style>
<base target="_blank">
<!-- ☆ ----------- ↓ この間をコピー＆ペーストします。
------------ -->
<!--
==== この間､説明を省略｡ ====
<link href="033021.css" rel="stylesheet">
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5"></HEAD>
<!-- ☆ ----------- ↑ この間をコピー＆ペーストします。 ------------ -->
|
(*2)
： database13.htm （例） 挿入先の <body> 〜
</body> の、〜
部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
|
〔この列ﾍﾟｰｽﾄ不要〕
※：<body> 部の編集 背景 ﾘﾝｸ 表示済みﾘﾝｸﾝｸ ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）
表
ﾌｨﾙﾀｰ
背景画像
背景画像
抽出ﾌｫｰﾑ 背景画像
|
<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">
<!-- ★ ----------- ↓ この間をコピー＆ペーストします。
------------ -->
<form method="post" action="" name="frmData">
<div id="divHeader" style="Z-INDEX: 34; LEFT: 2px; WIDTH:
803px; POSITION:
absolute; TOP: 120px; HEIGHT: 149px">
==== この間､説明を省略｡ ====
<th id="thdr" width="20" SortField="ID" class = "SortingGridUp">No.</th>
<th id="thdr" width="110" SortField="FullName" class =
"SortingGridUp">名前</th>
<th id="thdr" width="260" SortField="Description" class =
"SortingGridUp">概要</th>
<th id="thdr" width="60" SortField="Age" class = "SortingGridUp">数値</th>
<th id="thdr" width="77" SortField="Location" class =
"SortingGridUp">場所</th>
<th id="thdr" width="100" SortField="Occupation" class =
"SortingGridUp">対象</th>
<th id="thdr" width="150" SortField="Hobbies" class =
"SortingGridUp">生業</th>
==== この間､説明を省略｡ ====
<div id="main" style="LEFT: 0px; WIDTH: 859px; POSITION: absolute; TOP:
410px; HEIGHT: 29px" tabIndex="11">
<div id="divSearch" style="LEFT: 2px; WIDTH: 804px; POSITION: absolute; TOP:
-408px; HEIGHT: 27px">
<table ID="tblSearchFields" border=1 bgcolor="menu" width="100%">
<tr>
<td
background="../tab_menu12/30tbsd1.gif">
場所 :
<SELECT ID="selLocation" NAME="selLocation" onchange="doFilter()">
<OPTION selected value="西海岸">西海岸</OPTION>
<OPTION value="外房海岸">外房海岸</OPTION>
<OPTION value="海部川">海部川</OPTION>
<OPTION value="庭">庭</OPTION>
</SELECT>
</td>
<td
background="../tab_menu12/30tbsd1.gif">
Type :
海 <INPUT type="radio" value="海" NAME="radType"onclick=doFilter() checked>
陸 <INPUT type="radio" value="陸" NAME="radType" onclick=doFilter()>
</td>
<td
background="../tab_menu12/30tbsd1.gif">
対象 :
<SELECT ID="selOccupation" NAME="selOccupation" onchange="doFilter()">
<OPTION selected value="Not Allowed">Not Allowed</OPTION>
<OPTION value="鮃・鱸・鰈">鮃・鱸・鰈</OPTION>
<OPTION value="渡り鳥・風">渡り鳥・風</OPTION>
<OPTION value="鮎・鰻・岩おやつ">鮎・鰻・岩おやつ</OPTION>
<OPTION value="おやつ">おやつ</OPTION>
<OPTION value="ﾐﾙｸ">ﾐﾙｸ</OPTION>
</SELECT>
</td>
<td background="../tab_menu12/30tbsd1.gif"
width="78">
<Input type=button value="全表示"id=btnShowAll0 name=btnShowAll0
onclick="doShowAll()"></td>
</tr>
</table>
</div>
<div id="divDataFields" style="LEFT: 2px; WIDTH: 804px; POSITION: absolute;
TOP: -379px; HEIGHT: 77px; background-image:
url('../wttec.gif'); border:1px
solid #E1DCEB">
<table >
<tr>
<td>
名前 : <input id="txtFullName" DATASRC="#xmlDSO" DATAFLD="FullName"
style="WIDTH: 100px">
数値 : <input id="txtAge" DATASRC="#xmlDSO" DATAFLD="Age" style="WIDTH: 20px"
NAME="txtAge">
概要 : <input id="txtDescription" DATASRC="#xmlDSO" DATAFLD="Description"
style="WIDTH: 250px">
</td>
</tr>
<tr>
<td>
場所 : <input id="txtLocation" DATASRC="#xmlDSO" DATAFLD="Location"
style="WIDTH: 67px">
対象 : <input id="txtOccupation" DATASRC="#xmlDSO" DATAFLD="Occupation"
style="WIDTH: 100px" NAME="txtOccupation">
生業 : <input id="txtZipCode" DATASRC="#xmlDSO" DATAFLD="Hobbies"
style="WIDTH: 75px" NAME="txtZipCode">
収穫 : <input id="Text3" DATASRC="#xmlDSO" DATAFLD="Income" style="WIDTH:
93px" NAME="Text3">
</td>
</tr>
</table>
<p> </div>
<!-- Last but not least are the buttons that basically do not do anything.
If you click on them, they will tell you. -->
<div id="divPhoto" style="LEFT: 639px; WIDTH: 150px; POSITION: absolute;
TOP: -372px; HEIGHT: 100px">
==== この間､説明を省略｡ ====
<xml id="xslSorted" src="033022.xsl"></xml>
<xml id="xslFilter" src="033021.xsl"></xml>
<xml id="xmlDSO" src="033021.xml"></xml>
<!-- Note: the reason for the xmlDSOorig data island is that the xmlDSO data
island becomes repopulated after
a filtering is performed. If you try to filter a second time, you will need
to start from the original contents. -->
<xml id="xmlDSOorig" src="033021.xml"></xml>
==== この間､説明を省略｡ ====
</script>
<!-- ★ ----------- ↑ この間をコピー＆ペーストします。 ------------ -->
|
(*3)
： 033021.xml （例） ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。
| |
*.xml の編集方法 |
(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。 |
| |
〔この列ﾍﾟｰｽﾄ不要〕
ﾃﾞｰﾀ
画像
以下、同様。
|
<?xml version="1.0" encoding="shift_jis"?>
<root>
<data ID="01" FullName="砂浜 満ち潮1" Description="遙か彼方に、穏やかな水平線。" Age="10"
Location="外房海岸" Occupation="鮃・鱸・鰈" Income="100尾" Hobbies="早朝の散歩" Type="海"
EmpPhoto="http://xml-xsl.sakura.ne.jp/xp01159t.jpg"/>
==== この間､説明を省略｡
====
<data ID="30" FullName="鼻白ちび2" Description="これは、なんだろう？" Age="1" Location="庭"
Occupation="ﾐﾙｸ" Income="1皿" Hobbies="寝る・食う・遊ぶ" Type="陸"
EmpPhoto="http://xml-xsl.sakura.ne.jp/Z17A1L_sl.jpg" />
</root>
|
< 補足 > 適時参照あれ！。
・ Wordpad によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。