• ベストアンサー

ドリームウィーバーでの文字の影の付け方とページデザインについて

 まず1点はタイトルやサブタイトルの文字に影を付けるにはどのようにすればよいのでしょうか?  2点目はドリームウィーバーに入っているページデザインを使って作っているのですが、背景のグレー色を変えたいのですがそのやり方がどうしても分かりませんのでどなたか教えていただけないでしょうか。  またglobal linkというタグとその下のメインページの枠が始めは揃っていたのですが、作っているうちに微妙にずれてしまいましてそれを揃えるにはどのようにしたら良いのでしょうか。これもいろいろとやってみたのですがどうもうまくいきません。枠だけ初期設定に戻せないものでしょうか?テキストやイメージは入れてしまったので全て初期設定にしては白紙からのやり直しになってしまいますのでそれは避けたいのです。

質問者が選んだベストアンサー

  • ベストアンサー
  • s_hukami
  • ベストアンサー率66% (98/148)
回答No.2

ご質問の内容からでは、ソースコードが全くわかりませんので、想像で回答します。 背景のグレー部分というのは body{ background: #cccccc url("bg_grad.jpg") fixed; } の箇所のことでしょうか? この部分を変更したい場合は、#ccccccを別の色に変更すると同時に、bg_grad.jpgに変わる画像を作成して差し替える必要があります。 Fireworks,Photoshopなどといった画像を作成できるソフトで画像を作成するか、「url("bg_grad.jpg") fixed;」の部分を削除して背景色だけ変更してください。 filterでの影付きテキストはWin IEでしか反映されません。 どのブラウザでも影付きで表示したい場合にはFireworksなどで画像で作成した方が良いのではないかと思います。 あまりおすすめはしませんがCSSなどで影付きテキストを表現する方法としては例えば CSSに ----------------- #siteName { z-index: 2; position: relative; left: 0px; top: 0px; } #siteName h1{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; font-size: 24px; } #siteNameShadow { color: #333333; position: relative; left: 3px; top: -31px; margin: 0px; padding: 0px; font-size: 24px; width:169px; height:24px; z-index: 1; } ----------------- HTMLの<body>~</body>に ----------------- <div id="siteName"><h1>Site Name</h1></div> <div class="siteNameShadow">Site Name</div> ----------------- などと記述すると影付き風に表示できます。 ID名「global link」の箇所を修正したい場合は、CSSで #globalLinkと#pagecell1の「left: ○px(または%);」を同数値にしてみたり、「#breadCrumb」のpaddingやwidhtなどを調整したりすると良いのではないかと思います。 枠だけ初期設定に戻す事は難しいので、別のファイル名で別フォルダ保存にして、新規にサンプルHTMLとCSSを作成をしてソースコードを突き合わせながら修正してみてはいかがでしょうか。 より正確な回答・アドバイスを得るには差し支えない限りの修正したい部分のHTML,CSSのソースコードを開示していただけるとよろしいのではないかと思います。

bobwaits
質問者

お礼

早速かつ詳細なご回答本当にありがとうございました。背景の色の差し替えを今からやってみたいと思います。 なんせ素人ですのでいろいろとやってみるしかありません。本も4冊そろえたのですが、細かいことが書いてあるのかないのか・・・それすらも分かりません。 いろいろとやっていくうちにデザイン面で気に入らないことろがでてくるので困っています。ご回答を参考に挑戦してみます。ありがとうございました。

その他の回答 (1)

  • crepon133
  • ベストアンサー率51% (399/776)
回答No.1

1.影付きの画像にするかテキストにスタイルを適用する  テキストに影を付ける  http://www.mco.ne.jp/~splan/javascript/Project01.html  http://www.mco.ne.jp/~splan/javascript/kage.html 2.CSSで設定されているのではないでしょうか。master.css(?)を見てください。 3.この情報だけでは分かりません。

bobwaits
質問者

お礼

早速のご回答ありがとうございます。このサイトで試してみたのですが素人なのでコードにペーストしてみたのですがうまくいきませんでした。私のやり方が間違っていたのでしょう。master.css(?)というのはhelpか何かにあるのでしょうか?なんとかしたいのでまた試行錯誤してみます。ありがとうございました。