Dreamweaver Technique｜JAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTML｜XHTML | XML sample | XSLT sample | RIKO's ASP Trial

テーブルにドロップシャドウを追加する

	角丸テーブルと同様に、Fireworksでイメージを作って、スライス書き出しさせ、テーブルに挿入して各種設定をします。テーブルにイメージを挿入することで、テーブル幅・高さに応じてイメージサイズも変化します。 イメージを利用したものなので、手間がかかりますが、効果的なアクセントになります。

■　ドロップシャドウ用イメージの作成

Fireworksで適当なサイズの四角形を描いて、ライブエフェクトで【ドロップシャドウ】効果を適用します。
ドロップシャドウ部分の、右上角、左下角、右辺、底辺、右下角にスライスを作ります。
このとき、右辺・底辺部分は、HTML上でサイズを調整するので、右辺高さ・底辺幅は数ピクセルずつで十分です。

■　テーブルの挿入とイメージの配置

Dreamweaverでスタンダードビュー・モードで3行3列のテーブルを挿入します。【セル内間隔】【セル内余白】の値はそれぞれ「０」に設定します。
テーブルが挿入できたら、 右上角、左下角、右辺、底辺、右下角のイメージをそれぞれのセルに配置します。

■　イメージとセルの設定

上辺・底辺部分のイメージは、プロパティインスペクタで幅を「100％」に
左辺・右辺部分のイメージは、プロパティインスペクタで高さを「100％」に
設定します。これで、イメージがセルサイズに合わせて幅あるいは高さが自動伸縮されるように設定できました。
続いて各セルの設定を左上・上辺・右上のセルは【縦】を「下」に
左上・左辺・左下のセルは【横】を右に
右上・右辺・右下のセルは【横】を左に
左下・底辺・右下のセルは【縦】を上に
それぞれ設定します。