テーブルの背景イメージを利用する
背景イメージはWeb全体にだけでなく、テーブルや各セルに対して設定することもできます。
ページ内の減退した部分にだけ背景イメージを使用したい場合には、テーブルを利用します。
レイアウトテーブル・レイアウトセルを利用すると思い通りの場所に背景イメージを表示させます。
テーブルの背景イメージ機能を利用して、ページレイアウトを行ってみましょう。
このようにして、2枚のイメージを重ねた上にさらにテキストを書き加えたりイメージを挿入したりすることができます。 さらに CSSスタイルを追加することもできます。 |
||
レイアウトビューモードにして、【レイアウトテーブルを描画】ボタンをクリックして、レイアウトテーブルを描画します。
テーブルの背景イメージは、イメージよりテーブルのサイズが小さいとリピート表示されてしまいますので、1枚絵をそのまま使用したい場合はイメージよりテーブルサイズの方が若干小さくなるように設定しておきます。次に、【レイアウトセルを描画】ボタンをクリックして、上にのせるイメージの分と文字をのせる部分のレイアウトセルを描画します。
レイアウトテーブルとレイアウトセルの描画が完成したら、一旦スタンダードっビューモードに切り替えます。
ウィンドウ左下にあるタグセレクタで<table>タグを選択して、プロパティインスペクタの【背景イメージ】で、テーブルの背景として使用するイメージを指定します。【ＣＳＳスタイル】パネルで、【新規ＣＳＳスタイル】ボタンをクリックし、【新規ＣＳＳスタイル】ダイアログで【名前】を設定します。（上の作例では、「bg」という名をつけています）
【タイプ】は、【カスタムスタイルの作成（クラス）】を、【定義場所】は【現在のドキュメントのみ】を 選択して、【OK】をクリックします。
【スタイル低後】ダイアログが表示されたら、【カテゴリ】から【背景】を選択し、「背景イメージ」で背景用のイメージファイルを指定します。
【繰り返し】ポップアップメニューから「リピートなし」を選択して【OK】ボタンをクリックします。テーブル背景の上にイメージをのせたい位置のセル内をクリックします。
ウィンドウ左下にあるタグセレクタで<td>タグを選択して、右クリックをしてコンテキストメニューを出し【クラス設定】-【bg】を選択します。
