■第三段階・ファイルの転送(FFFTP)つかい方↓

■ホームページの作り方  サブページの作成テーブルレイアウト

ハンドマーク ここでは、今まで学習したことを利用して簡単なサブページを作成してみましょう。特に難しいことはありませんので気楽な気分でどうぞ。

■ホームページ作成!サブページ作成やってみよう!。。。

☆なんとなくですが テーブルのイメージはつかめましたか?分からなくても後で分かってきますので安心してください。
 

■ホームページ作成 サブページ作成
☆分からなかったら 下記ソースをコピーしてお使い下さいね。進めて行くうちに 分かってきます。

ハンドマーク 前ページの確認です。
これから作成するサブページ↓↓を ブラウザで確認してみましょう。

レイアウト いっけん複雑そうに見えますが よーくみると大したことはありません。同じことの繰り返しで構成されていますので 簡単です。そのわりは それなりに仕上がってると思うのですがいかがでしょうか?ここでつかわれている画像はダウンロードしてお使い下さい。皆さんがお持ちの写真をお使いになってもかまいません。


■ホームページ作成 サブページのHTML

【HTML-9】

<html> <head> <title>サンプルサイト</title> </head> <body background="img-hp/haikei-grd.gif"> <center> <table width="650" border="0" cellpadding="10"> <tr> <td height="130" background="img-hp/hana.jpg" align="right"> <h1><font color="#ffffff"> ここにメインタイトルを書いてください</font> </h1> <b><font color="#ffffff"> メインタイトルの補足等を書く・・・</font></b><br> <font color="#ffffff" size="2"> ど素人のホームーページ作成(備忘録)</font> </td> </tr> <tr> <td bgcolor="#ffffc1" align="left" padding="3"> | <a href="#">リンクメニュー</a> | <a href="#">リンクメニュー</a> | <a href="#">リンクメニュー</a> | <a href="#">ブログ</a> | <a href="#">Twitter</a> | <a href="#">プロフィール</a> | <a href="#">link集</a> | <h3>■下記内容のタイトルを書いて下さい</h3> <p> <font size="2" color="red"> ◇文字だけの段落です。 </font> <font size="2"> ☆ホームページを作りたいけど全く分からない、 ホームページって何!?どうな ってんの!?と 思っておられる方は 「ど素人のホームページの作り方」 が  ホームページ作成とはどんものか入り口まで ご案内いたします。 管理人も初めはパソコンの「パ」も分かりませんでした。 初心者の ホームページ作成関連の本を 何冊も読みましたが分かりませんでした(汗)。 参考書を読んでいるうちに「ここは こう書いてもらえたら  分かりやすいのになあ」 というところがたくさんありましたので  出来るだけ専門用語はさけてご説明したいと思います。 そして 「なんや こうやったらええんかぁ~」と ホームページ作成の「コツ」 を掴んでいただけたら と思います。<br> <div align="right"> <a href="sample.html">sampleトップページへ戻る</a> </div> </font> <hr width="600" size="1" color="green"> </p> <h3>■下記内容のタイトルを書いて下さい</h3> <p> <img src="img-hp/sample-hana3.jpg" align="left"> <font size="2" color="red"> ◇画像左に配置してみました画像を入れると それらしくなってきたと思いませんか?でも、 画像と文字が近すぎて窮屈ですね。 </font> <font size="2"> ☆ホームページを作りたいけど全く分からない、 ホームページって何!?どうな ってんの!?と 思っておられる方は 「ど素人のホームページの作り方」 が  ホームページ作成とはどんものか入り口まで ご案内いたします。 管理人も初めはパソコンの「パ」も分かりませんでした。 初心者の ホームページ作成関連の本を 何冊も読みましたが分かりませんでした(汗)。 参考書を読んでいるうちに「ここは こう書いてもらえたら  分かりやすいのになあ」 というところがたくさんありましたので  出来るだけ専門用語はさけてご説明したいと思います。 そして 「なんや こうやったらええんかぁ~」と ホームページ作成の「コツ」 を掴んでいただけたら と思います。<br> <div align="right"> <a href="sample.html">sampleトップページへ戻る</a> </div> </font> <hr width="600" size="1" color="green"> </p> <h3>■下記内容のタイトルを書いて下さい</h3> <p> <img src="img-hp/sample-hana2.jpg" align="left" hspace="10" vspace="5"> <font size="2" color="red"> ◇窮屈だったので 画像と文字間に 余白をとってみました。 上下に5ピクセル左右に10ピクセルです。 なんかええ感じですね。 </font> <font size="2"> ☆ホームページを作りたいけど全く分からない、 ホームページって何!?どうな ってんの!?と 思っておられる方は 「ど素人のホームページの作り方」 が  ホームページ作成とはどんものか入り口まで ご案内いたします。 管理人も初めはパソコンの「パ」も分かりませんでした。 初心者の ホームページ作成関連の本を 何冊も読みましたが分かりませんでした(汗)。 参考書を読んでいるうちに「ここは こう書いてもらえたら  分かりやすいのになあ」 というところがたくさんありましたので  出来るだけ専門用語はさけてご説明したいと思います。 そして 「なんや こうやったらええんかぁ~」と ホームページ作成の「コツ」 を掴んでいただけたら と思います。 <br clear="all"> <div align="right"> <a href="sample.html">sampleトップページへ戻る</a> </div> </font> <hr width="600" size="1" color="green"> </p> <h3>■下記内容のタイトルを書いて下さい</h3> <p> <img src="img-hp/sample-hana.jpg" align="right" hspace="10" vspace="5"> <font size="2" color="red"> ◇今度は画像の配置を換えて 文字の回り込みを解除しました。 </font> <font size="2"> ☆ホームページを作りたいけど全く分からない、 ホームページって何!?どうな ってんの!?と 思っておられる方は 「ど素人のホームページの 作り方」が  ホームページ作成とはどんものか 入り口までご案内いたします。 管理人も初めはパソコンの「パ」も 分かりませんでした。初心者の ホームページ作成 関連の本を何冊も読みましたが 分かりませんでした(汗)。 <br clear="all"> ☆参考書を読んでいるうちに  「ここはこう書いてもらえたら  分かりやすいのになあ・・・」というところがたくさん ありましたので  出来るだけ専門用語はさけて ご説明したいと思います。そして 「なんや  こうやったらええんかぁ~」とホームページ作成の 「コツ」 を掴んでいただけたらと思います。<br> <div align="right"> <a href="sample.html">sampleトップページへ戻る</a></div> </font> <hr width="600" size="1" color="green"> </p> | <a href="#">リンクメニュー</a> | <a href="#">リンクメニュー</a> | <a href="#">リンクメニュー</a> | <a href="#">ブログ</a> | <a href="#">Twitter</a> | <a href="#">プロフィール</a> | <a href="#">link集</a> | </td> </tr> <tr> <td bgcolor="#000000" height="50"> <font color="#ffffff"> Copyright &copy; 2011 &nbsp;&nbsp;ど素人のホームーページ 作成(備忘録)&nbsp;&nbsp; All Rights Reserved. </font> <hr> </td> </tr> </table> </center> </body> </html>

【HTMLの解説】
☆ここは 殆どが今までの解説の応用で出来ていますが、少しだけ新しい内容がありますので その部分だけ ご説明いたします。

矢印 htmlを一行目として その下2行目から数えて7行目の cellpadding="10"はセル(表の升目)の中に文字を書いた時に 文字からセルまでの距離の指定です。 この場合セルの中に文字を書いた時、文字の周りに10pxの余白ができます。読みやすくなりますね。

矢印 20行目のpadding="3"もセルと文字の余白の指定です。この場合は3pxの余白が出来ます。 7行目のように cellpadding となってないのは 一つのセルだけに指定しているからです テーブルのセル全体に指定する時は  cellpadding と指定します。

矢印 22行目あたりの <a href="#">リンクメニュー</a> ですが、これはリンクボタンです。リンクメニューがボタンで "#"マークのところにジャンプ先のファイル名を書いてください。半角の小文字です。

矢印 分かりにくくて申し訳ないですがhtmlから96行目あたりの hspace="10" vspace="5"ですが これは 画像の上下 左右の余白の指定です。 hspace="10"が左右の余白指定、vspace="5"が上下の余白していです。この場合は左右に10pxと上下に5pxの余白が出来て画像と文字のバランスがよくなり ホームページを見やすくなります。

矢印 一番下の</html>から上へ10行目のところにある &copy;ですが これは著作権表示の©マークとして表示されます。

※サブページは こんな感じです。画像等はあなたの好きなものをつかって下さい。始めのうちはトップページを含めて5ページくらいで公開されるのがいいかと思います。 本当のホームページ作りは 公開してから始ります。更新を繰りかえすうちにそれはそれはよくなってきます。サブページは一気に仕上げましたが分かりにくいところがあれば何度も読み直してみてください。そして 完成させてくださいね。管理人も楽しみにしております。

ハンドサイン 何度も申し上げますが、よくぞここまでたどり着いて頂きました。ありがとうございます。 ここで休憩されますか?遠慮せずに休憩してください。・・・・・・・・・・・・
やはり 続けられますか。 じゃあ 次も一気に あなたのホームページを世界に向けて公開してみましょう。それでは 最後の総仕上げとまいりましょう。。。
矢印結果・・・
サブページの完成!ブラウザで確認しましょう。
※これにて第二段階終了です。  (^-^)/

 
■次は 最終の第三段階です。作ったHTMLファイルを御契約プロバイダーに転送します。
そうすると出来上がったホームページを世界中の方々が見ることが出来るようになります。

あなたのホームページを世界の人に見てもらいましょう。FFFTPダウンロードインストール
 
ホームページ作成TOP完成  ここはSUBページの作り方です。 FFFTPダウンロード・インストール


■第三段階・ファイルの転送(FFFTP)つかい方↓