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

■ホームページの作り方  テーブルレイアウト(枠線の削除、文字入力、リンクの作成)

ハンドマーク ここでは、テーブルのborder(枠線)を消して、文字を書いて、リンクボタン(クリックで別ページが開くボタン)等をそれぞれ作って それなりのページに仕上げます。前ページのテーブルの入れ子に比べると やさしいので安心してすすんでください。

■ホームページ作成!テーブルレイアウト(仕上げ)やってみよう!。。。

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

■ホームページ作成 枠線の削除、文字入力、リンクの作成
☆分からなかったら 下記ソースをコピーしてお使い下さいね。進めて行くうちに 分かってきます。

ハンドマーク 前ページの確認です。
もう一度 ブラウザで確認しましょう。

レイアウト 確認すると微妙な隙間や枠線がありますねこれを削除しますが、やり方はいたって簡単です。それに、管理人だけかも分かりませんが枠線を消すと、なんとなくですが雰囲気がよくなった気がします。みなさんはいかがでしょうか?
それでは、HTMLを書きますのでみてくださいね。分からなかったらそのままコピーして使ってみてください。


■ホームページ作成 枠線削除、文字入力、リンクボタン作成

【HTML-8】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body background="img-hp/haikei-grd.gif">
<center>
<table border="0" width="650" cellspacing="0">
<tr>
   <td height="149" 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 height="500" bgcolor="#ffffc1">
         <table border="0" width="640" height="500">
             <tr>
               <td align="center">
<h2>■サブタイトルを書いて下さい</h2>
<a href="sample-2.html">サンプル</a><font size="2">※リンクボタンはココだけです</font><br>
<hr width="350" size="5" color="green"> <br>

<a href="#">リンクメニュー・・・</a><br>
<hr width="350" size="5" color="green"> <br>

<a href="#">リンクメニュー・・・</a><br>
<hr width="350" size="5" color="green"> <br>

<a href="#">ブログ・・・</a><br>
<hr width="350" size="5" color="green"> <br>

<a href="#">Twitter・・・</a><br>
<hr width="350" size="5" color="green"> <br>

<a href="#">プロフィール・・・</a><br>
<hr width="350" size="5" color="green"> <br>

<a href="#">link集</a><br>
<hr width="350" size="5" color="green"> <br>

<font color="#000000" size="2">
■至ってシンプルですがホームページ作成の基本が組み込まれています。
                           </font>

                                                                       </td>
               <td width="130" background="img-hp/hana-2.jpg"
                 valign="top" align="left">
                         <hr color="red" size="3">
                         <font color="#ffffff"><br>
                         ■link-1<br>
                         ■link-2<br>
                         ■link-3<br>
                         ■link-4<br>
                         ■link-5<br>
                         ■link-6<br>
                         </font>
                 </td>
             </tr>
         </table>
   </td>
</tr>

<tr>
   <td height="80" bgcolor="#000000" align="center">

<font color="#ffffff">
Copyright © 2011   ど素人のホームーページ作成(備忘録)   All Rights Reserved.
</font>

<hr>

   </td>
</tr>
</table>
</center>
</body>
</html>


【HTMLの解説】
■この文字色が新しく追加されたHTMLです。

矢印 <center>は そのままの中央揃えにして下さいという意味です。<center>から</center>の間にあるものは中央揃えになります。

矢印 centerの下のborder="0"で枠線が消えます。このゼロを1にすると1pxの線が引かれます。2にすると2pxの線が引かれます。

矢印 次のalign="right"ですが align="right"がある<td>から</td>の間のものを右に寄せます。"left"にすると左寄せになります。"center"にすると中央揃えになります。

矢印 リンクボタンの作成
リンクとは画面の中の矢印マークが指マークに変ってクリックすると別のページが開く、あれです。記述の仕方は次のとおりです。
<a href="sample-2.html">サンプル</a>ここで サンプルがリンクボタンで "sample-2.html"がサンプルボタンをクリックした時に開くファイルです。サンプルボタンをクリックすると"sample-2.html"が開くという感じです。

矢印 ずっと下におりたところにhr color="red" size="3"がありますが、これは 水平線の指定です。color="red"←これは赤色という意味です。size="3"←これは、太さ3pxの線という意味です。色名と線の太さを色々変えてチェックしてみてください。

ハンドサイン よくぞここまでたどり着いて頂きましてありがとうございます。 大雑把な解説になってしまいましたが、一応トップページの完成です。どうですか? このページが理解できたら後のサブページは簡単なもんです。 色々アレンジしてみてください。また、 下記[ブラウザで確認]ボタンをクリックしてソース【HTML-8】のここが、ここか、というふうにたどって構造を理解してください。ソースコードと実際の表示の関係が分かると かなり先へすすめます。 それと 休憩をとるのも大事ですよ。疲れてくると せっかくのやるきが無くなってきて それっきりなったりします。ちょっと一服してくださいね。。。
矢印結果・・・
トップページの完成!ブラウザで確認しましょう。

 
次は サブページへとまいります。一気に完成させましょう。
 
ホームページ作成テーブルレイアウト  ここはトップページ完成のページです。 SUBページの作成


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