| いかがでしたでしょうか 少しずつTIMEをつかったひな形が出来てくるといいですね 今回も 大きく書いてみました 少しずつでいいです 雛形を 見る 使う楽しさから 作る 使う 使ってもらう楽しさも味わってみてくださいね・・・・・ クッピー もうすっかり チャットや 応援団 ジグソー配信のほうばかりはまっていますが 皆さんの配信される雛形を いつも楽しませてもらっています どうぞ 講座を見られている皆さんも ひな形配信に参加してみてください 一緒にひな形つくり やりましょう ひな形配信は こちらへ 哲パパのメールまで ・・・・ エル |
はい エルちゃん 皆さん こんにちは 超ビギナーの為のひな形講座いかがですか？ 第９章まで出来ましたでしょうか？
こんにちは クッピー (*^.^*)エヘッ ┐(￣ヘ￣)┌ フゥゥ〜 私は今 忙しくてね 雛形からとんとご無沙汰だわ (*^.^*)エヘッ(゜ー゜)(。_。)ウンウン エル 忙しそうだものね でもいいわよ 今日は聞くだけにしてね せめて 講座だけでも わかるようにね(ノ´▽｀)ノオオオオッ♪ クリックね ひな形配信でも 皆さん クリック楽しんでいるものね クリック♪ クリック♪ そうね 難しいのではなく それこそ 超初心者の方 対象に わかりやすく説明したいと思います それじゃあね 前回みたいに、 メモ帳を立ち上げてくださいね。 今回も 最初の約束事の ソースを 立ち上げましょうね 皆さんは 皆さんは 前回 オリジナルTIME.htmlというファイルを作成していると思います それを開いて 表示 ソース をみてくださいね <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML
XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META
http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META
http-equiv="Content-Style-Type"
content="text/css">
<TITLE></TITLE>
<STYLE
type="text/css">
<!--
.time{
behavior:url(#default#time2);
}
-->
</STYLE>
<?IMPORT
namespace="t"
implementation="#default#time2">
</HEAD>
<BODY
id="body1">
<!--ここに入力していきます-->
</BODY>
</HTML>
＊まだされていたなかった方や 初めての方は８章を参考にしてくださいね
(・_・。)(._.。)(・_・。)(._.。) ウンウン 私も マイドキュメントに オリジナルTIMEとして 保存していたわ 雛形出来上がったら 上書きじゃなくて 名前をつけて保存だったわね (￣。￣)ホーーォ。 サボっている割には よく覚えているわ (o^-^o)
ウフッ
そうね ヾ(≧▽≦)ノギャハハ☆ それでは 始まる前に 今日の サンプルね 今回は このサイトのカレンダーや 私のＢＢＳに出している 花切手を サンプルとして出しました これで練習してくださいね まずは そのサンプルを 右クリック 名前をつけて 保存してください
 |
 |
 |
 |
 |
 |
 |
| kitte1.gif | kitte2.gif | kitte3.gif | kitte4.gif | kitte5.gif | kitte6.gif | kitte7.gif |
(ノ´▽｀)ノオオオオッ♪ 今日のはまた 綺麗な切手が並びましたね (・_・。)(._.。)(・_・。)(._.。)
ウンウン １週間分ですね これを
切手の下の名前で 保存するのね 保存 右クリックで 名前をつけて保存ね ハイできました あのオリジナルｔｉｍｅ.htmlと同じところに保存でしたね よく覚えているわ σ(^_^)アタシ
(゜ー゜)(。_。)ウンウン それでは 始めましょうね オリジナルtime.htmlを開いて 表示→ソースの表示でメモ帳を出してください
そして <body>と</body>の間に次のソースを コピペしてください
<DIV id="k1" class="time" style="position:absolute;
left : 640px; top : 83px; z-index : 1;"><FONT size="4">６月１日 白のカラー</FONT></DIV>
そして 名前を花切手.html として ファイルの種類を【すべてのファイル】にして 先ほど 画像を保存した場所と同じところに保存してください 花切手．ｈｔｍｌを開くと 左から ６４０ｐｘ 上から８３pxのところに ６月１日 白のカラーが表示されましたよね また ソースを出して 次に 先ほど 保存しました kitte1.gif をつかいまして 下のソースをコピーして メモ帳の先ほどのすぐ下に貼り付けてください
<t:par begin="k1.click">
<IMG id="image1" src="kitte1.gif" style="Z-INDEX:
2;position:absolute; left : 480px; top : 136px;" class="time"
end="image1.begin+1"></t:par>
貼り付けましたか？ そしたらまた メモ帳を上書き保存して 花切手．ｈｔｍｌを更新してみてください
(゜ー゜)(。_。)ウンウン でもね クッピー さっきと同じよ ６月１日 白のカラーだけしか出てないよ ？(゜_。)？(。_゜)？
エル ６月１日 白のカラーをクリックしてみて
(ノ´▽｀)ノオオオオッ♪ 花切手が出てきたわ 素晴らしい
そうそう 出てきたでしょう 上の説明しますね ８章も９章も そうでしたが ＩＤは必ずつけなくてはいけません ＰＣに何をどうするか説明してあげないと ＰＣは動かすことも表示することも出来ないのです 車の運転と一緒ですね あなたが ハンドルを動かすことによって車は止まります ＰＣはあなたの命令どおりに動くわけですから これもそうですね <t:par>で囲んだ中のものを id ｋｌ をクリックすることによって表示する その囲んだものは画像ですね それを 左４８０ 上から１３６に 表示する 終わりはimage1がでてきて１秒後【
end="image1.begin+1"】となっています
同じようにして ↓後の全部もコピーして貼り付けてください
<DIV id="k2" class="time" style="position:absolute; left : 640px; top : 112px; z-index : 3;"><FONT size="4">６月２日 アガバンサス</FONT></DIV>
<t:par begin="k2.click">
<IMG id="image2" src="kitte2.gif" style="z-index
: 4;position:absolute; left : 480px; top : 135px;" class="time"
end="image2.begin+1">
</t:par>
<DIV id="k3" class="time" style="position:absolute;
left : 640px; top : 143px; z-index : 5;"><FONT size="4">６月３日 ゴテチア</FONT></DIV>
<t:par begin="k3.click">
<IMG id="image3" src="kitte3.gif" style="z-index
: 6;position:absolute; left : 480px; top : 132px;" class="time"
end="image3.begin+1">
</t:par>
<DIV id="k4" class="time" style="position:absolute;
left : 640px; top : 181px; z-index : 7;"><FONT size="4">６月４日 カンナ</FONT></DIV>
<t:par begin="k4.click">
<IMG id="image4" src="kitte4.gif" style="z-index
: 8;position:absolute; left : 480px; top : 132px;" class="time"
end="image4.begin+1">
</t:par>
<DIV id="k5" class="time" style="position:absolute; left : 640px; top : 218px; z-index : 9;"><FONT size="4">６月５日 ひるがお</FONT></DIV>
<t:par begin="k5.click">
<IMG id="image5" src="kitte5.gif" style="z-index
: 10;position:absolute; left : 480px; top : 130px;" class="time"
end="image5.begin+1">
</t:par>
<DIV id="k6" class="time" style="position:absolute;
left : 640px; top : 250px; z-index : 11;"><FONT size="4">６月６日 紫陽花</FONT></DIV>
<t:par begin="k6.click">
<IMG id="image6" src="kitte6.gif" style="z-index
: 12;position:absolute; left : 480px; top : 131px;" class="time"
end="image6.begin+1">
</t:par>
<DIV id="k7" class="time" style="position:absolute;
left : 640px; top : 288px; z-index : 13;"><FONT size="4">６月７日 あさぎり草</FONT></DIV>
<t:par begin="k7.click">
<IMG id="image7" src="kitte7.gif" style="z-index
: 14;position:absolute; left : 480px; top : 128px;" class="time"
end="image7.begin+1">
</t:par>
なるほど ７日間の花の名前が出たきた それをそれぞれにクリック (ノ´▽｀)ノオオオオッ♪ 面白いわ
そうね エル 最初のソースだけ入力やコピペをして そのソースを７回貼り付けて行き、 画像ファイル名や配置を変えることも出来ます その場合気をつけなければいけないところは idを必ず 変えることです ひとつでも 違うidをいれると その部分が動かなくなります
(・_・。)(._.。)(・_・。)(._.。) ウンウン じゃあね クッピー この場合 文字をクリックしたでしょう 画像をクリックでももちろんできるよねその場合は どうするの？
うん!(^^) その場合はね 上の<DIV id="k1" class="time" style="position:absolute;
left : 640px; top : 83px; z-index : 1;"><FONT size="4">６月１日 白のカラー</FONT></DIV>の <font>から</font>で囲んでいるところを <IMG
src="画像.gif" >に変えるといいわよ
こういう風にね 例えば こういう風にね
<DIV id="kuppy1" class="time" style="position:absolute;
left : 640px; top : 500px; z-index : 3;"><IMG src="kitte1.gif"
></DIV>
<t:par begin="kuppy1.click">
<IMG id="image11" src="kitte2.gif" style="z-index
: 4;position:absolute; left : 480px; top : 500px;" class="time"
end="image11.begin+1">
</t:par>
(ノ´▽｀)ノオオオオッ♪ 白いカラーをクリックしたら アガバンサスがでてきたわ なるほど (・_・。)(._.。)(・_・。)(._.。)
ウンウンよくわかったわ クリックの雛形も楽しいわね (゜ー゜)(。_。)ウンウン 必ず idのところは ダブらないように気をつけてね エル それで 皆さんが今回の講座でされたことは 次のようにできた筈です サンプル１ はいはい Ｖ(○⌒∇⌒○) ルンルン またまた 雛形について 賢くなったわ 今日だけだけど (≧ｍ≦)ぷっ! (￣-￣
3)ヘ(▽￣*) ミミカシテ…皆さん 私は目下 ジグゾーで ・・・・クッピーには内緒よ [壁]・m・)
プププ ほら 熱弁だから ・・・あああ 今日もクッピーだけコーヒー飲んでいるわ (・−・)・・・ん? 何か言った エル そうそう これが クリックの 今回の講座の応用編です ばらしちゃおうっと 誕生日