締切済み

dreamweaverMXテーブル背景に影を付けたいのですが…。

2008/06/16 14:30

いつもお世話になっております。会社のHP作成をまかされたのですが、HP作成はまったくの未経験のため悪戦苦闘しています。けど、何とかクオリティの高いものを作りたいです。いろいろ参考書も読みましたが、CSSとかいまいち理解できません。 HPのテーブルがシャドウによって浮き出ているようにしたいです。 http://www.lithmatic.net/lithApService/ このようなイメージです。スクロールしても切れる事無く、なおかつ最後尾には下影で終わる(参考urlのような感じで)にしたいのですが、どうすれば良いのでしょうか？テーブルで影を付ける方法なら分かるのですが、それだとスクロールでは切れてしまいますよね？背景としてシャドウを使いたいと思います。色々調べて、こちらのサイトで http://oshiete1.goo.ne.jp/qa3551329.html の回答を見て、illustratorにて同じ比率のバックでで壁紙を作成しました。ただ、作成HPの幅は800pxにしているので800pxのボックスにシャドウを作っているような形です。ですが、ページプロパティの背景で入れると、横に作成したはずなのに縦に配置されてしまいます。 CSSにてY軸繰り返し(？)で作成したものの、今度は作った壁紙がまったく反映してくれません。真っ白なままです。どうすればいいか分かりません。あと最後尾部分のシャドウはイメージを貼付ける方法しか思い浮かばなかったのですが、壁紙として作る事は可能なのでしょうか？初心者のため分かりやすく教えて頂けると助かります。使用ソフトDreamweaverMX　MacOS10.4になります。アドバイス宜しくお願い致します。

noname#99542

ホームページ作成ソフト
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

みんなの回答

yosoho
ベストアンサー率59% (19/32)

2008/06/16 23:06 回答No.3

>作成HPの幅は800px <body>の幅が800pxでしたら、その内側に<div>（下記ソース<wrapper>）を配置し、その内側に<header><contents>を配置します。最後に<footer>部を配置します。両側の影は<wrapper>の背景に「両側影付き幅横棒画像」をY軸にrepeatし、 <footer>部の背景に「両横＋下影付き角丸画像」を指定します。なお、背景画像は予め画像処理ソフトで準備しておき、 CSSで背景としてリンクします。ラフですが、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEST</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> HEADER</div> <div id="contents">CONTENTS</div> <div id="footer">FOOTER</div> </div> </body> </html> で、どうでしょう。

質問者

お礼 2008/06/17 10:11

回答ありがとうございます。教えて頂いたタグなのですが、 dreamweaver上でうまく表示されなくて、レイアウトも崩れてしまって…。色々ネットを見て、 http://blog.info-rich.jp/archives/2007/03/post_99.html というサイトを参考にしたら無事できました。ありがとうございました。

kabuni
ベストアンサー率54% (268/494)

2008/06/16 14:52 回答No.2

言葉でうまく説明できるかどうか。。。。まずイラストレーターなどで角丸で陰付画像を作ります。画像をスライスツールで９つのパーツにわけます。左上かどまる・上線・右上かどまる中縦線左・真ん中空白・中縦線右左下かどまる・下線・右下かどまるこれを書き出しするとパーツが縦３・横３のテーブルに配置された状態になります。（GIF書き出しがオススメです。）見本のサイトのように作るなら上行の3つのセル（枠）を削除して設定で上のアキ（マージン）を０にしてやります。真ん中空白部分の画像を削除し、テーブル背景を白に設定して本文を作成します。縦に伸ばしたい場合は「中縦線左」と「中縦線右」の画像を伸ばしたいサイズぶん伸ばしてやります。つまり、背景でなく、画像をテーブルの中に貼り付ける方法がベストだと思いますよ。

質問者

お礼 2008/06/16 14:59

回答ありがとうございます。実はテンプレートを途中迄作ってしまっています。なのでできれば背景で作りたかったのですが…。テーブルだと伸縮すると何か変になったりしたのが気になったりもしたので。参考urlは背景でやっていますよね？ちょっと初心者にはハードルが高すぎたのでしょうか(><)

nori_007
ベストアンサー率35% (369/1048)

2008/06/16 14:50 回答No.1

スタイルシートを利用するなら、DreamweaverMX は忘れた方が良いと思います。希望の回答は、ホームページのソースを読むの一番です。全て CSS を利用するか、単にテーブルタグを利用するかの違いで、基本的な考え方は同じです。ボディーに相当する部分背景画像を用意する。最下部は、フッター領域を作り３方向の影の有る画像を用意する。というのが回答ですが、具体的な方法は参考にしているサイトのソースをまねるのが一番良いと思います。正直な話「DreamweaverMX」が有れば言う次元ではないと思います。クオリティの高いサイトをご希望であれば、プロにご依頼ください。社内でご相談ください。

質問者

お礼 2008/06/16 14:55

早速の回答ありがとうございます。え、と結局はどういう風にすればいいのでしょうか…？すみませんまったく分かりませんでした。ソースを読み込んでも、チンプンカンプンです。＞正直な話「DreamweaverMX」が有れば言う次元ではないと思います。？？どういう意味でしょうか…。うちの会社はプロに頼むお金なんてとてもないみたいで私に丸投げされました。私は紙媒体専門でやってきたのでイラレ、フォトショは使えますがWeb媒体はまったく分からず、正直しんどいです。けどテキトーに作ればデザインが気に入らないと文句言われるし…。愚痴が出てしまいますが、結局自分がやるしかないんです。作った壁紙だとダメだったので、細かく教えて頂けると助かります。

dreamweaverMXテーブル背景に影を付けたいのですが…。