| 実践編 |
３．表をフルに活用する！ |
|
｢ホームページ｣作りに欠かせない＜表＞の使い方 |
ホームページづくりを進めていく上で、まず第１にマスターしなければならないのが＜表＞の活用法である。これは表紙のレイアウトはもとより、定期更新が要求される情報発信のページや売れ筋商品・特価商材などを案内する時に活用するＷｅｂチラシ、あるいはＯＡサプライなどの定番商品を紹介する電子カタログのページを作成する際にもふんだんに使用するので、是非ともマスターしておこう。
まず、表の活用方法では次のことを覚えておく必要がある。
|
●＜表の中に表を挿入する＞
●＜バックに背景画像を使用する時は表の枠（線）を消去する＞
●＜右寄せ・左寄せ・中央揃えで文字の配置をレイアウトする＞
●＜行・列の追加、結合を用いて変更・修正を試行してみる＞ |
これらのことは、ホームページの制作プロにとっては当たり前のことなのだが、入門者にとってはこれが難解で、使い慣れないとなかなか体で理解出来することができない。もっとも、慣れてしまえばこれほど簡単で面白いことはないので、とにかく失敗を恐れず試行錯誤を繰り返すことである。 早速、例題に基き実際にやってみよう。
１行・３列の表を指定し、ｉｎｄｅｘページの上部に引き降ろし、そこにタイトルロゴを貼り付ける。ここまでの作業については既に前記した通りである。１行３列としたのは、まず１列目にタイトルロゴを挿入し、２列目は行間スペース、そして３列目にどういう情報が入っているかを告知する掲載情報の分類項目を入れるためである。この時点での表紙ページは下記図の左のようになる。しかし、この状態では表の枠がそのまま残っているので、これを消去する必要がある。そこで右クリックして表の枠を消去する。そうすると図右のようになる。
もっとも、表の枠は表示した方がいい場合と消去した方がいい場合とがあるので、ケースバイケースで使い分けることだ。ただ、タイトルロゴを貼り付ける場合や、サンプルのように背景画像の上に表を入れるような時には表の枠は消去した方がいいだろう。
| １．１行３列の表をつくり、左の列にタイトルロゴを貼り付ける。 |
|
２．表の線を指定（左クリック）し、そのままの状態で右クリック→＜表の枠を消去＞ |
表Ａの中にさらに表を入れる |
（表の線は表示されたまま）
 |
|
Ａ
|
|
|
 |
（表の枠が消える）
|
|
Ａ
|
|
|
●２段２列
| ::::::: |
:::::::: |
| ::::::: |
::::::: |
●縦４段
| ：：：：：： |
| ：：：：：： |
| ：：：：：： |
| ：：：：：： |
|
次に、上図＜Ａ＞の中に表を挿入してみよう。例えば、メインに訴求したいページが仮に｢情報Ａ｣｢情報Ｂ｣｢特選品｣｢プレゼント｣の場合、２段×２列の表、もしくは縦４段の表のいずれかを挿入するわけだが、まず縦４段の表を挿入する場合、その作業は以下のようになる。＜表の活用〜１＞
１．表の中を左クリックし、＜表の挿入＞から縦４段の表を指定してページ上に貼り付ける、２．表の中の表に
文字入力する→＜Ａ−１＞、３．背景画像が上図サンプルのように黒系統の場合はバックを白抜き（カラーパレット使用）してインパクトを出す→＜Ａ−２＞、３．外の表枠を消去する→＜Ａ−３＞。
また、背景画像が白系統の場合も、下段のように＜ａ-１＞→＜ａ-２＞という同様の作業ステップとなる。ただ、＜ａ-３＞の段階では、背景画像が白系統の場合、逆に表内のバックをベタにして文字を白抜きする方が効果的であることから、カラーパレットを使用して以下のように着色する。
| Ａ-１
|
 |
Ａ-２
|
|
|
Ａ-３
|
文字入力
|
|
表内バックを白抜き
|
|
|
外表枠を消去
|
ａ-１
|
|
ａ-２
|
|
|
ａ-３
|
|
次に、タイトルロゴ（ＡＢＣネット便）の上部にサブタイトルを付けてみよう。この場合は、タイトルロゴを挿入した１列目の表内に１列２段の表を作り、一旦タイトルロゴを切り取って下段に貼り付ける。そして上段にサブタイトル＜オフィスに役立つ情報をお届けします。＞の文字を入力する。次に、背景画像が黒系統なので文字を白抜きにペイントし中央に揃え、表枠を消去する。これで仕上がり＜１−３＞となる。そのステップは以下の通りである。
| １−１ |
| ここにサブタイトルを入力する。 |
|
|
|
Ａ−３
入る。 |
|
| １−２ |
| オフィスに役立つ情報をお届けします。 |
|
|
| １−３ |
| オフィスに役立つ情報をお届けします。 |
|
|
タイトル部の３列はこうして出来上がった。プレビューした時の状態は次のようになる。なお、バックの色は背景画像のカラーを想定し着色したものである。
次に、タイトル部の飾り付けを行なってみよう。タイトル部３列を左クリックしたまま、＜表Ａ＞を呼び出し、｢行の追加｣の中から＜上へ追加＞を選択する。すると、上段に３列の表が追加される。ここにビルダー内にある素材＜区切り線＞の中から好みのものを選択し、飾り付けるわけだが、この場合まず３列の上段を１列に統合（結合）する必要がある。列を結合する作業は前記した｢行の追加｣と同様であり、結合したい列を左クリックした状態で＜表Ａ＞を呼び出し、｢列の結合｣の中から＜右と結合＞を選択する。これで列２が結合されるので、再びこれを繰り返す。すると列３が結合されて上段は１列の状態になるので、ここに区切り線（サンプルｈ）を挿入し表枠を消去する。さらに、下段の２列目の空白部にリストマーク（素材）を挿入して装飾する。こうして出来上がったのが下の＜結合後＞の画像である。
| 結合前 |
| 列の結合（上列を１列にする） |
列２ |
列３ |
|
|
|
|
|
|
|
＜区切り線サンプル＞ |
|
ａ |
 |
|
ｂ |
 |
|
ｃ |
 |
|
ｄ |
 |
|
ｅ |
 |
|
ｆ |
 |
|
ｇ |
 |
|
ｈ |
 |
以下、同様の方法で＜表＞を活用し、検索ボタンやアニメ（素材集からダウンロード）などを貼り付け、表紙ページを装飾して仕上げていく。タイトル下の｢とくとく情報｣の検索ボタンの作成も｢A−３｣の表同様の方法で、これにアイコンの挿入と着色を変えるだけで簡単にできる。また、表紙の一番下には今一番話題性のある大衆商品｢デジタルカメラ｣に関する検索ボタンを、中央には地域の情報（街の話題等）やイベントの案内を告知する検索ボタンをそれぞれ配置してみた。もっとも、これらの部分は販売店各社の取扱い商品構成、及び今何を重点的に売り出したいか（ネット上で）の事情によっても当然異なってくるので、絶対的なものではない。今後のページづくりの中で決めていくとして、とりあえずは便宜上の表紙を完成させると以下のようになる。
|
|
 |
とくとく
情報 |
|
| デジカメ用途提案 |
デジカメ新製品 |
デジカメ特価情報 |
デジカメ売筋動向 |
|
|
|
 |
Ａ |
| :Ｂ:::::::::::::::::::::::::::::::::::: |
|
|
 Ｃ |
|
|
|
▲背景画像に貼り付けた時のイメージ
|
ここで、実際に出来上がった表紙を画面上で見てみよう。これはインターネット上で見る｢ホームページ｣の表紙と考えていただければいいだろう。さぁ、早速、ＡＢＣネット便ＴＯＰをクリックして仕上がりを見てみよう。
次回では、このｉｎｄｅｘページを中継基地とした各情報発信ページの作り方、及びリンクの貼り方などについて解説したい。
|
