ホームページビルダー基礎講座2

タイトル見出し、テーブルレイアウト

１.タイトルを入れてみる。(重要）

ホームページビルダー起動後、トップページを開く。
ホームページの内的変更の基本は、属性の変更から可能。
属性の変更の出し方は、3通り。
  1. メニューバーから「編集」クリック後、「属性の変更」クリック！
  2. 右クリックして「属性の変更」クリック！
  3. 属性の変更画像「BODY」をクリック後、「BODYの属性」をクリック！
    4. 　　　　
「属性」でページのプロパティで、「ページタイトル」に自分のホームページのタイトルをいれる。
「OK」をクリック！
または、「HTML」ソースタブから直接、<title></title>タグ内に、タイトルを入れてみる。
あくまで、このタイトルはページには、表示されません。
ブラウザタイトルバーには、表示されます。
<h1>タグにて、見出しを表示させる。
<body></body>内に<h1></h1>でタイトル（見出し１）を表示させる。
見出しタグ表示のさせ方画像適当に打ち込んだあと、ここで、見出しタグ<h1>に変更できる。
見出しタグ<h1>は、ページ上では、必ず、ひとつだけである。複数表示は構造上矛盾となる。
見出し２<h2>以降は、順位さえ理解して使えば複数表示も可。

2.ページに色を付けてみる。

カラーパレットを表示させる。
パラーパレットは、カラーパレットアイコンをクリックすればOK！
あるいは、メニューバー「表示」クリック後、カラーパレットアイコンをクリック！
ページ全体に色を付けたい場合は、パラーパレットが、「背景色」となっていることを確認後、使いたい色を指定後、「適用」クリック！

3.テーブルレイアウトを理解する。

テーブル(表）を使ってみる。
  1. 今後、表のことをテーブルと言いますので覚えておいてください。
  2. 表の挿入アイコンをクリック！
  3. 行数2、列数2の「田の字」の表を作る。
  4. 操作しやすいように、テーブル全体をセンタリンクをします。(センタリンクアイコンをクリック！）
  5. テーブル全体を指定して、「属性の変更」を表示させる。
  6. テーブルの幅をたとえば、600pxにしてみる。
  7. テーブルの高さをたとえば、600pxにしてみる。
テーブルセルの概念。
テーブルの中のそれぞれの口を、セルという。
  1. セルにも「見出しセル」<th>と「データセル」<td>がある。
  2. 見出しセルは、初期設定が、太文字中央揃えとなっている。
  3. 必要に応じて、見出しセルにしたり、データセルにしたりできるが、あくまで、見出しとしての使用用途以外には、変更してはいけない。
  4. セルごとに属性の変更も可能。
  5. セルごとに色を付けることができる。
  6. セルの高さを矛盾しないように指定してみる。
テーブルの枠と罫線を理解する。
テーブルの枠を非表示にすることができる。
表の属性の変更の「枠の非表示」のチェックをはずすと枠が表示されない。
テーブルの枠を非表示し、テーブルの背景色とセルの背景色と罫線を利用して、きれなレイアウトをつくってみる。
※幾度か実践してみる。
セルを隣のセルと結合してみる。
一番上のセルを隣のセルと結合してみる。
そこに、見出しをいれてみる。
向かって右側セルと左側セルの活用。
たとえば、向かって左側を、サイドボックスとして、向かって右側をメインボックスとする。
右セルと左セルの横幅サイズを矛盾なく設定する。
行と列を理解する。
行は、横。列は、縦。行も列も、追加ができる。
※いろいろ実践してみる。
基本的なテーブルレイアウトは、「田の字」。
テーブルレイアウトを細かくセルに分割することはできるだけ避ける。
できればセルの中に、もうひとつのテーブルを入れ子状態にしてレイアウトするほうがいい。

最後にサイズをもう一度指定しなおして、各セルに色を付けてレイアウト完成。

※基礎講座としてはテーブルレイアウトを指導しているが、将来的に、<div>タグでスタイルシートを使ったレイアウトを理解していかなければならない。あくまでテーブルレイアウトは、基礎講座であって、アクセシビリティの観点などを考えると、スタイルシートを使ったレイアウト構造を勉強してゆきましょう！

スタイルシートに関してはこちら、

次は、HB基礎講座3、サイト作成、リンク、インラインフレームへ