ホームページを楽しむ会
第10回 勉強会
表（Ｔａｂｌｅ）を使う
フレームを使ったページに見せかける方法 他
１．フレーム風のページ作り
フレームを使ったページは、（１）フレーム宣言だけのＨｔｍｌ文、（２）各ページのＨｔｍｌ文 の最低でも３つのＨｔｍｌ文が必要であり、どうしても容量が大量となる。
そこで、Ｔａｂｌｅ（表）を用いて見た目はフレームを使ったページだが、実際には１つだけのＨｔｍｌ文だけでページ作りを行う方法がある。
実例 電子商取引
商業ベースのページを参照してほしい。多くのページがこの方法をかつようしている。その理由はフレームを用いるよりも早く表示されることである。
右図のようなページをフレームで作成すると３つのＨｔｍｌ文が必要です。
右図をフレーム風にＴａｂｌｅを用いて１つのＨｔｍｌ文で記述することができる。
- index.html（フレーム宣言Html）
- menu.html（右図ではＡ）
- main.html（右図ではＢ）
<table>
<tbody>
<tr>
<td>Ａの記述</td>
<td>Ｂの記述</td>
</tr>
</tbody>
</table>
但し、各ページとも、同じ記述方法をしなくてはならないので、更新などのメンテナンス時には十分に注意をしてほしい。
２．棒グラフを作る
右図の棒グラフはどのように作られているのだろうか。
- 青色のイメージと赤色のイメージを用意する
今回は幅３ピクセル・縦３ピクセルのものを用意した。- Ｔａｂｌｅを使って、次の項目を表示する枠を用意した
・項目名
・グラフ
・データ例
- 実際にはどうするのか
<TABLE bgcolor="#cccccc" width="300">
<TBODY>
<TR>
<TD>男性</TD>
<TD width="207"><IMG src="blue.gif" width="120" height="15" border="0"></TD>
<TD width="126"> ８０例 40%</TD>
</TR>
<TR>
<TD>女性</TD>
<TD width="207"><IMG src="red.gif" width="180" height="15" border="0"></TD>
<TD width="126">１２０例 60%</TD>
</TR>
</TBODY>
</TABLE>
こうすると項目数の棒グラフをイメージで用意することなく、横幅widthを変化させるだけで簡単に棒グラフができる。軽いページを作る方法である。
男性 ８０例 40% 女性 １２０例 60%
３．その他
- Ｔａｂｌｅの入り子（Ｔａｂｌｅの中にＴａｂｌｅを入れる）
ページ内に沢山の項目を見易いように設置するのに用いられている。
このページもＴａｂｌｅの中にＴａｂｌｅをいれています。
- 原則として位置決めはSTYLEを用いるが
位置決めするのに、STYLEを使用することが原則とされるが、フリーのＨＰの場合だと、勝手にコマーシャルの位置を動かしたりされることがあり、それにつれて消えたり、動いたりすることがあるので、TABLE使用も止むを得ないかと思われる。
４．参加者からの質問他
- 江田からの質問
Ｑ「絵を額縁入りにしたところ、圧縮が強くて絵が荒くなった、何か手立てはないか？」
Ａ額縁を加えた画像は絵画だけと比べて色数が多くなる為、圧縮率は低くなり容量が大きい。また、圧縮率を高めるとその分だけ絵画部分の色が思うようにはならず、絵が荒くなってしまう。回避する方法は額縁と絵画部分を分割するのが一番。
分割するソフトとして「FIREWOSKS」というソフトがあるが何万円もする。
そこで、ウェブアートデザイナーの「フレーム」の中の適当な額縁を、コーナー部、直線部と８個に「切り抜き」を使って分割して、それをブラウザ上で３×３のTABLEに割り付けて、再組立すると、画と額縁とを一緒に圧縮することなく、額縁は額縁、画は画で扱えるので、問題なくなる。
なお、ウェブアートデザイナー上で小さくした画をHPB上で拡大すると、画素数が希薄になり絵が荒れるので、拡大をしなくて済む程度の大きさで作りHPBにて貼りこむほうがよい。
→
- 豊田さんからの質問
Ｑ「COOLでHPをアップする場合、FTPで立ち上げるのか？。」
Ａ COOLは掲示板もあり使い易い。FTPでアップする。
Ｑ「メモ帳で書き換えた文書を上書きした時、ＩＥでソースを見たら、勝手に書き換えられたように感じたが、そのようなことはあり得るか？」
考えられない。何か別の操作をしたに違いない。メモ帳は勝手に変える機能がないのが特徴である。
なお、リンクについて、同一フォルダー外にリンクすることは出来ないので、自分で絶対アドレスに直したことはある。
- 若木さんの作品
「E-COMMERCE」の続きで、ハイフンを形を良くした。フレームとアンカーとで、必要な項目を検索出きるようにすることが出来た。フレームの分割に際し、アスタリスクを使った。以上の説明があった。
コメントとして、フレーム巾は,見る人のＰＣ画面を考慮して巾は８００が良い。又、文字サイズがＰＣで変わり、行を溢れることがあるので、ロゴを利用する方が無難である。
- 瓜阪さんの質問
Ｑ 「ウェブアートデザイナーからコピーしたボタンを２個、少し離して、中央に配置したいのだが、うまく行かない。理由がよく分からない。」
Ａ ソースを調べるとボタンの位置が文書の中にあり、ボタンだけ独立して動かせないことになっていた。HPBでは文書のブロックがあり、ピンク色に出ているが、その中に入れてあると、独立では動かない。ワープロ感覚とはそこが違う。別の枠の中にボタンを配置すべきである。TABLEを利用するのも一法である。
５．次回予定
- 日程 ９月１０日（日）午後２時〜
- 会場 塩見小宅
＜戻る＞
