x01sampl.html は出来るだけ簡単な html タグを使用して作ったものです。

後述のご説明に当り、あなたのパソコン環境や２つ３つの前提を記載しておきますね。
大変失礼な表現があるかも知れませんが、ご容赦願います。

◆　パソコンのＯＳは windows であること。 (私は MAC OS を全く知りませんので)

◆　「メモ帖」など、テキストエディターを使用出来る。

◆　エクスプローラーの操作について。

　　フォルダーとファイルの違いが分かり、新フォルダーを作ったり、ファイルの移動やコピーが出来る。

◆　以上から、画像ファイルや htmlファイルをＦＴＰ出来る。

◆　ホームページビルダーで作成した画像ファイルや htmlファイルがどのフォルダーに保存してあるかを知っている。

◆　ホームページビルダーで作成した htmlファイルのソースを
　　見ることが出来る。

◆　使用しているブラウザーは　インターネットエキスプローラーである。



１．　http://www2s.biglobe.ne.jp/~tyam/x01sampl

この画面を、ご自分のパソコンに、このまま保存するには。

　　(1) この画面を表示する
　　(2) 「ファイル」→「名前をつけて保存する」

　　　　この時、保存するフォルダー名を控えておいて下さいね。　ファイル名は仮に　aa とつけて下さい。

これで、この画面の保存は完了しました。

保存したフォルダーの中に、aa.files　というフォルダーと　aa.htm　(又は aa.html) というファイルが出来ています。

aa.files　というフォルダーの中には画像が保存されています。

エクスプローラーでこれを見て、aa.htm　というファイルをダブルクリックしますと、保存した画面が表示されます。

尚、このaa.htm　というファイルは、このままではソースとしては使用出来ませんので、ご注意下さい。


この画面のソースを、ご自分のパソコンに保存するには。

２．　http://www2s.biglobe.ne.jp/~tyam/x01sampl

　　(1) この画面を表示する
　　(2) 「表示」→「ソース」

　　　　ソースが表示されましたら仮に　bb.html　という名前をつけて
　　　　前述１．の　aa.files　というフォルダーに保存して下さい。

エクスプローラーでこれを見て、bb.html　というファイルを
ダブルクリックしますと、保存した画面が表示されます。

　　これで、もう　aa.htm　というファイルは不要です。

　　この　bb.html　というhtmlファイルは、このままソースファイルとして
　　使用することが出来ます。



ソースをご自分用に修正　◆◆◆部　　● バナー類はすべて、このまま使用することも出来ます。

１．<title>　と　</title>　の間に記載した内容は、ブラウザーで見た時、画面の一番上の左に表示されます。

　　サンプルでは　　<title>花リレー　本人名(都道府県名)</title>　となっています。

◆◆◆　本人名の文字を、あなたの名前
◆◆◆　都道府県名の文字を、あなたの都道府県名　　　　に置換えて下さい。

　　　　都 府 県 の文字を省略しないで下さいね。　( )は前後共に半角ですのでご注意願います。


２．<!-- から -->　の間のタグは、このままにしておいて下さい。

　　文字の大きさや、文字の色、バックの色を変更する場合は、
　　<!-- から -->　の間のタグを修正します。　詳細は別の機会に。


３．<img src="x01title.jpg"  border="0">
　　x01title.jpg　という画像を表示しています。　border="0"　は、画像枠を表示しない・・の意です。

◆◆◆　x01title.jpgをあなたのタイトルバナーの　ファイル名と置換えて下さい。


４．<br>
　　改行の指定です。

　　<br>　が記載されておりませんと、この場合、タイトルバナーの右側に
　　　　　更新日が表示されてしまいます。

　　コメントを２行以上記載される場合は、各行の後に付けて下さい。


５．更新日　2003.06.01<br>

　　年月日を全角で表示する場合は　　更新日　２００３．０６．０１<br>　　となります。

　　年月日の数字と区切りの符号は、全角または半角で統一して下さいね。

　　更新日はメインの花をアップした日付です。　先日付は表示しないで下さい。

◆◆◆　日付の置換えはお分かりですね？


６．<table border="10">

　　このborder="10"はテーブル枠の太さです。　　"6"　とか　"1"　にすると、細くなります。

　　"0"　にしますとテーブル枠は表示されません。　それではテーブルにした意味がなくなります。
　　それだったら寧ろ　<img src="x01hana.jpg" border="0">　だけでいいのですから


７．<img src="x01hana.jpg" border="0">

◆◆◆　x01hana.jpgをあなたのメインの花の　ファイル名と置換えて下さい。


８．<table border="1" width="50%">

　　width="50%"は画面全体の　50%　を指定しています。
　　長いお名前が含まれる場合や、バナーの幅がこの例より広い場合は　60%〜70%で確認願います。

　　border="1"　は、一番細いテーブル枠の指定です。


９．<td width="33%">

　　width="33%"　は、ここでは、
　　テーブル全体の幅が画面の　50%　を指定していますので
　　その更に 33% という意味なのです。

　　<td>(テーブルの最小単位) が、<tr>(テーブル１行分)の中に
　　３つ(３列)ありますから、33%　34%　33%　で 100% という訳です。

◆◆◆　両隣さんのＵＲＬは仮のＵＲＬが入っていますので
　　　　正しいＵＲＬと置換えて下さい。

　　　　ＨＴＭＬソースでは上の方から先に表示されます。
　　　　即ち、画面上では左側から先に表示されます。

　　　　<a href=の後の " " の間にリンクするＵＲＬを挿入します。

10．<a href="http://wwwww.wwwwwww.ne.jp/hhhhh/index.html">

　　http://wwwww.wwwwwww.ne.jp/hhhhh/index.html　を
　　あなたのホームページＵＲＬと置換えて下さい。


11．<img src="x01home.jpg"  border="0">

　　x01home.jpgをあなたのＨＰバナーのファイル名と置換えて下さい。


12．<A HREF="mailto:xxxx@xxx.xxxxxxx.ne.jp">

　　xxxx@xxx.xxxxxxx.ne.jpをあなたのメールアドレスと置換えて下さい。


13．<img src="x01mail.jpg"  border="0">

　　x01mail.jpgあなたのメールバナーのファイル名と置換えて下さい。


注１　ホームページへリンクされない方は
　　　<a href="http://wwwww.wwwwwww.ne.jp/hhhhh/index.html">
　　　<img src="x01home.jpg"  border="0"></a>
　　　を削除して下さい。

注２　メールリンクをされない方は
　　　<A HREF="mailto:xxxx@xxx.xxxxxxx.ne.jp">
　　　<img src="x01mail.jpg"  border="0"></a>
　　　を削除して下さい。

注３　両方共表示されない方は、両方共削除願います。


●●●　ソースの修正中は時々「上書保存」をしましょう。

●●●　前述１．の　aa.files　というフォルダーに、
　　　　予めあなたが使用される画像ファイルをコピーしておきますと
　　　　ソース「上書保存」の都度、修正結果が確認出来て便利です。

●●●　修正が完了し、画面確認の結果がＯＫでしたら
　　　　あなたの花リレーページのファイル名で再保存して下さい。

●●●　あとは、このソースと関連画像をＦＴＰ更新するだけです
　　　　ＦＴＰ更新が完了しても安心しないで、必ずインターネットで
　　　　もう一度、結果を確認して下さいね。。

■■■　html と 画像ファイルを　ＦＴＰするサーバーのフォルダーが
　　　　別々のフォルダーである場合は、このソースは使用出来ません。