勉強中の和気あいあいの雰囲気

（２）　今月の勉強会　

テーマ：　見栄えのよいウェブ・ページの作り方

（Ａ）表（Ｔａｂｌｅ）利用の仕方の復習

　　　見栄えのよいウェブ・ページ作成の最も基本的なことは、Ｔａｂｌｅを十分利用して、
　　　その中に入るコンテンツ（内容）を整然と配置（Ｌａｙｏｕｔ）することです。
　　　その為には、Ｔａｂｌｅの作り方やその属性の変更の仕方をじっくり復習する必要があります。
　　　　　
　　　　☆　表の挿入　
　　　　　　　新規の表を作成するには、残念なことにホームページ・ビルダーでは２ステップが必要です。
　　　　　　　　ａ．　メニュー｢表｣　→　｢表の挿入｣　→　＜表の縦ｘ横を指定＞　→　＜左端に小さな表が出来る＞
　　　　　　　　ｂ．　＜この小さな表を指定＞　→　メニュー｢編集｣　→　＜表の属性で表のレイアウトを指定する＞

　　　　☆　表の属性編集
　　　　　　　表の属性の編集は当該表を指定してから：
　　　　　　　　ａ．　メニュー｢編集｣　→　｢表の属性ダイログ｣表示　→　＜属性編集（変更）＞
　　　　　　　　ｂ．　＜画面右上隅にあるＯｂｊｅｃｔ指定ボタンをクリック＞　→　＜Ｔａｂｌｅを選択＞　→　
　　　　　　　　　　　｢表の属性ダイログ｣表示　→　　＜属性編集（変更）＞

　　　　　　　初級者は主として上の　ａ．　の方法を採るが、Ｏｂｊectの属性編集の一般的操作としては、
　　　　　　　上の　　ｂ．　の方法をお勧めしたい。

　　　　☆　表自体の配置とサイズ
　　　　　　　表をコンテンツ配置の手段として利用する場合は、表自身は｢中央揃え｣にするのが原則です。
　　　　　　　表のサイズは先ず表全体の横幅だけを指定する。
　　　　　　　　　ウェブ・サイトの読者がノートＰＣを持っていると想定すれば、７００～９００ピクセルが適当です。
　　　　　　　表の高さは、コンテンツによって自在に決まるので指定する必要はない。

　　　　☆　表の各セルの中のコンテンツの配置
　　　　　　　
　　　　　　　Ｏｂｊｅｃｔとして該当のセルを指定してから、＜Ｏｂｊｅｃｔ指定ボタンをクリック＞　→　
　　　　　　　＜ＯｂｊｅｃｔとしてＴＤの属性を選択＞　→　｢セルの属性｣　→　＜中央揃え、上揃え等を指定＞

（Ｂ）段落の作成と段落毎の属性

　　　　先ず、セルの中の段落（パラグラフ）を意識する必要があります。
　　　　入力の際、ピンク色の囲みが現れますが、これがホームページ・ビルダーが認識する段落（パラグラフ）
　　　　です。　段落の中で一旦、左揃えなどという属性を設定すると、その属性はその段落の中では一定で変
　　　　えることが出来ません。

　　　　属性を変えるには、段落を変えて新しい段落にしなければなりません。
　　　　段落を変えるには、Ｓｈｉｆｔ＋Ｅｎｔｅｒ　で、新しいピンク色の囲み、即ち新しい段落を作らねばなりません。

　　　　Ｅｎｔｅｒキーを押す場合は、Ｓｈｉｆｔキーを同時に押すのと単にＥｎｔｅｒキーを押すのとの違いを
　　　　ハッキリ認識して下さい。

（Ｃ）　<P> ～　</P> と　その属性の利用

　　上で述べた段落の作成は、時には巧く行かないことがしばしばあります。

　　この段落を明確にブラウザーに指示するＨＴＭＬタグが<p> 　～　</p>です。

　　　　　<P> 　はＰａｒａｇｒａｐｈ (段落)を意味します。

　　　　　<p　align="center"> 　～　</p> とすれば、この～の部分のコンテンツは中央揃えとなります。

　　　　　　　　属性には：　align="left"　 や　align="right"　　等があります。
　　

（Ｄ）　<DIV> ～　</DIV>　と　その属性の利用

　　　　<DIV>　はＤｉｖｉｓｉｏｎ（範囲）を意味し、指定した特定範囲内だけの属性を設定できます。

　　　　この<DIV>の利用法の一つは、同一のセル内では一般的に文章は｢左揃え｣にします。
　　　　この文章の中に写真を挿入しますと、写真も｢左揃え｣になります。
　　　　然し、写真だけは｢中央揃え｣にしたい場合は、ホームページ・ビルダーでは面倒を見てくれません。
　　　　編集モードを｢ＨＴＭＬソース｣モードにして；

　　　　　　　写真の前に；　<DIV align="center">
　　　　　　　写真の後に；　</DIV>

　　　　を自分で挿入します。

　　　　｢ホームページ同好会の"test_site"｣に示した例題の中にもこのケースを入れてありますので、
　　　　よく確認下さい。

（Ｅ）　Ｗｏｒｄ等他のアプリケーションで作成された文書をコピーして利用する場合の注意

　　　　ＷｏｒｄやＩＥの文書をコピーしてホームページ・ビルダーの編集画面に貼り付けると、練習時間中に
　　　　ご覧になったように、ホームページ・ビルダーが元の文書の書式を適当に解釈して、とんでもない書式
　　　　のコードを生成します。　生成された余分な書式コードをＨＴＭＬソース編集モードで取り除く作業は大変
　　　　面倒です。

　　　　これを避けるためには、オリジナル文書をコピーした後、一旦｢メモ帳｣や｢ワードパッド｣に貼り付けて
　　　　ピュア・テクストにしてから、ホームページ・ビルダーの編集画面に貼り付けると余分な書式コードは
　　　　生成されません。

　　　　ウェブ・ページの書式の設定はその上で、サイトの中で統一性がとれたものの設定すべきです。

（３）　｢ホームページ同好会の"test_site"｣の演習

　　　　この例題は”たそがれ長兵衛”の土佐の国お遍路の平成２２年４月７日（水）の冒頭の一部です。
　　　　上で勉強した内容が応用できるように意図して選択されたものです。
　　　　ご自宅でじっくり時間をかけて練習して下さい。