ホームページビルダー小技編
ホームページビルダー作成報 > 小技編トップ > テーブルを使ってレイアウト
ページ、レイアウト関連
テーブルに画像を配置する
※実際に切り抜いた画像をどのようにテーブルに配置していくか、設計図を見て、配置箇所とファイル名、またその役割を確認してください。
このサンプルでは、３つのテーブルを利用します。
ひとつのテーブルでまとめるより、管理がしやすく、また、ページ読み込みにかかる時間を若干軽減できます。
<基本となる「表の属性画面」>
- ３つのテーブルに共通して設定することは。
- ● 表の幅を６３０ピクセルに設定すること。
● 「罫線の幅」、「セル内の余白」、「枠表示」を０ピクセルに設定すること
● 「枠表示」にはチェックを入れること。
パート別にテーブルにパーツを組んでいきますが、わからなくなったら「設計図」を確認しながら、画像のサイズやファイル名が違っていないか確認して進めてください。
このボタンをクリックすると設計図をみることが出来ます。
タイトルロゴ(黄色ゾーン)
- 行１×列１の表を作成する
- セル内に「a,gif」の画像を挿入する
- タイトルバー部分完成。
リンクバー等(ピンク色ゾーン)
- 先ほど作成した表の下に、行３×列３の表を作成する
- 表の属性で、表の幅等を設定(基本となる表の属性画面)
- 「b01.gif」 「b02.gif」 「b03.gif」の画像を図のように、真ん中のセルにそれぞれ挿入する
- 両端のセルを下のセルと結合する。
このボタンを使って結合できる。または、表→セルを縦に結合を操作する。
- セルの結合が出来たら、左端セルに「01a.gif」を挿入
- 右端セルに「c.gif」を挿入する
- リンクバー部分完了