• 締切済み

DREAM WEAVERにFIRE WORKSを書き出すと余白が・・・

はじめまして。 DREAMWEAVER4とFIREWORKS4を使ってます。 ファイアーワークスでHTMLを書き出してドリームウィーバーに読み込むと、 書き出したテーブルの上隅にフィットせず１ピクセル余白ができてしまいます。 つまりその余白のところだけがラインを引いてるかのように背景色がみえてしまうのです。 ページのプロパティで上・左ともに0（ゼロ）と設定してるのですが、 一体どうすれば余白ができないようにすることができるのでしょうか？ どなたか解る方、ご指導のほどよろしくお願い致します。 ちなみにOSは（関係あるかどうか不明ですが）WIN NT4.0です。 よろしくお願い致します。

みんなの回答

noname#5549
noname#5549
回答No.4

こんにちは。 何だか大変ですね。具合は良くなったのでしょうか。 で、もうちょっと回答しましょう。 僕自身は基本的にPHOTOSHOPなので、あまりFWに詳しくはないのですが... FWで画像を作りますよね。 その時、パーツに分けるためスライスする。 これは分かります。 その後、何故HTMLを書き出す必要があるのかが疑問です。 画像のままで構わないですよ。 そういった画像を配置してHTMLを生成するのがDWの仕事ですから。 仮にFWでスライスする段階で、どうしてもHTMLも書き出さないと作れないのならそれでも構いません。 ただ、そこで書き出されたファイルの中から画像ファイルだけ抜いて、DWで配置してください。 もうひとつ気になるのは、 ＞各フレームにHTMLを配置するというやりかた これです。 分かってやっているのなら構いませんが、 通常、分割した画像はフレームではなくテーブルで配置します。 フレームにするのは内部をスクロールさせたいとか、更新の手間を省きたいなどの場合のみです。 ついでにもうひとつ。 スペーサーを省くとバランスが崩れるとのことですが、テーブルってのは、サイズ指定をしていても、中身がないと勝手にサイズを変更します。 頂いたサンプルは中身がなかったでしょう？ もし、実際もあんな感じの場合は、テーブルを１行追加して、スペーサーで調整する、という手段も当然あります。 何にせよ、FWで書き出すのはJPG、GIF、PNGだけにしておきましょう。

kasa2003
質問者

お礼

こんばんわ、お返事が遅くなりすいません。 折角、ご配慮のお言葉までいただいたのですが、 母は癌のため12月27日をもちまして他界しました。 今思えば充分に親孝行できなかったこと、慙愧に堪えぬ思いです・・・ 年末年始は制作の方も落ち着いて取り組めませんでしたので、 理解の方はあまり進歩してないままです。 本件については、humourさんには4度にわたりコメントしていただいたのに、 まだまだ解消できないでいる問題が多そうです。 きっと基礎知識が不足しているせいですね。本を買って勉強したいと思います。 なにせローカルな地域ですから、近所の書店にWEB制作の書籍があまりないんです・・・ FWで書き出して（HTML化）、DWに配置することが根本的に間違っているようですが、 MAC FANか何かの雑誌にそういう風に書いてあったような気がします。（私はWINですが・・・） スライスした画像それぞれをイメージのみ書き出し、 DW上のテーブルに配置するという方法が本来のあり方なんでしょうか。 だとしたら、制作の手順を１から勉強しなおす必要があるみたいですね。 紀伊国屋書店などに行けばいろいろあると思うんですけど、けっこう遠いので・・・ humourさんのコメント、大変参考になりました。 どうもありがとうございました。

kasa2003
質問者

補足

先程、注意深くFW書き出しのパネルを見ていたら、 書き出しオプションというのがあり、 HTMLの設定→テーブル→スペーサーの種類（以下、選択） ・1ピクセル透明スペーサー ・埋め込みテーブル － スペーサーなし ・シングルテーブル － スペーサーなし というコマンドがありました。 スペーサーなしで書き出し、レイアウトが崩れないかどうかは未確認ですが・・・ 本を買う前に少しこの機能を追究してみたいと思います。 意外と見落としてる人多いと思うんですが・・・ いろいろとありがとうございました。

noname#5549
noname#5549
回答No.3

こんばんは。 えーと、縦２×横１５ですね..... 試しにブラウザに放り込んで見ましたが、 きっと、縦１×横２にしたかったんですよね？ すごい数のスペーサーが入ってしまっています。 試しに <table border="1" cellpadding="0" cellspacing="0" width="690"> としてみてください。 どんだけすごいかわかります。 スペーサーってのは、通常、レイアウト調整などに用いられる無色の画像で、spacer.gifがそれにあたります。 こうなってしまった原因として想像できるのは、 テーブルを作るとき、最初は複数の窓（セル）で出来ていたテーブルを、画像を配置した後、枠をドラッグして不必要なセルを消した、というパターン。 このとき、厳密に消去しなかったために妙なセルが残ってしまった。かな？ なんにせよ、無駄なタグを省くと、 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table border="0" cellpadding="0" cellspacing="0" width="690"> <!-- fwtable fwsrc="トップ7（スライス）.png" fwbase="test.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" --> <tr> <td bgcolor="#6699cc" valign="top" width="687"></td> <td><img name="test_r1_c14" src="top/test_r1_c14.gif" width="3" height="11" border="0"></td> </tr> </table> </body> </html> こんな感じかな。 そもそも、ですが、FWは画像作成がメインですので、 作成した画像をDWで配置する、というのが通常の手順です。 わざわざFWでHTMLではき出したものをさらにDWに読み込む方が妙です。 これを機に、ホームページ作成のプロセスを考え直した方が良いのでは、という気がします。

kasa2003
質問者

お礼

ご回答有難うございました。 お返事が遅くなりまして申し訳ありません。 療養中の母の様態が悪化しばたばたしておりました。 FWで書き出す場合、DWに配置した際に テーブルが崩れないように自動的に高さ１ピクセルのspacerGIFがテーブル上部から右側に沿って 挿入されるようになっているみたいですね。 全然気づきませんでした。 仮にスペーサーGIFを消去するとテーブルが見事に崩れてしまいます。 DW上で配置したテーブルもしくはページの背景を配置したテーブルと同じ色にすると なんとかごまかせなくもないのですが、上下にフレーム分けしている場合、 どうしても不都合が出てきてしまいます。 DWとFWをお使いの皆様はどのようにこの不都合をクリアされているんでしょうか・・・不思議です。というか私が無知なんでしょうが・・・ 私のやり方は、FWで全体のレイアウトとデザインを作り上げ、DWでフレーム分けした各部分ごとのスライスを選択し、書き出し、 各フレームにHTMLを配置するというやりかたですが（間違ってるんでしょうか？） DW、FWのマニュアル本は持ってるのですが、バージョン３の頃のもので、 特にFWはロゴの制作方法などがメインで、あまり詳しくなく書き出しについてはほとんど触れられてないんです。 humour様のおっしゃるとおり我流の見よう見真似でやってきたので、 FW＆DWについての正しい使い方、正しい機能を把握できてないと思います（^^; プロの方はHTMLをコーディングする作業を行うそうですが、 このようにソフトの機能の制限や不都合な部分をソースで修正していくということなんでしょうか。 もっともっと勉強が必要なようです。 このようなことが詳しく解説されているマニュアル本を探してみたいと思います（もし、オススメがありましたらよろしくお願いしますm(_ _)m 修正していただいたソース大変参考になりました。 大変有難うございました。

noname#5549
noname#5549
回答No.2

こんにちは。 いえいえ、DWだろうがFWだろうが、 HTMLであることに代わりはありません。 同じような条件でHTMLで書き出してみて、 その差を見極めればいいのです。 FWのみおかしいと言うことは、 ■TABLEタグで余白設定が出来ていない。 ■TABLE（またはセル）のサイズより画像が小さい。 ■TDの中で何か設定している あたりが考えられます。 CELLPADDING、CELLSPACINGなどを確認してみて下さい。

kasa2003
質問者

補足

たびたびすいませんm(_ _)m ソースがこうなってるんですがどこがおかしいのか全くわかりません・・・ただ、挿入したHTMLは2×1のテーブルなのに随分長いような気はしますが・・・ <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table border="0" cellpadding="0" cellspacing="0" width="690"> <!-- fwtable fwsrc="トップ7（スライス）.png" fwbase="test.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" --> <tr> <td><img src="top/spacer.gif" width="12" height="1" border="0"></td> <td><img src="top/spacer.gif" width="32" height="1" border="0"></td> <td><img src="top/spacer.gif" width="105" height="1" border="0"></td> <td><img src="top/spacer.gif" width="105" height="1" border="0"></td> <td><img src="top/spacer.gif" width="68" height="1" border="0"></td> <td><img src="top/spacer.gif" width="74" height="1" border="0"></td> <td><img src="top/spacer.gif" width="9" height="1" border="0"></td> <td><img src="top/spacer.gif" width="7" height="1" border="0"></td> <td><img src="top/spacer.gif" width="26" height="1" border="0"></td> <td><img src="top/spacer.gif" width="95" height="1" border="0"></td> <td><img src="top/spacer.gif" width="62" height="1" border="0"></td> <td><img src="top/spacer.gif" width="42" height="1" border="0"></td> <td><img src="top/spacer.gif" width="50" height="1" border="0"></td> <td><img src="top/spacer.gif" width="3" height="1" border="0"></td> <td><img src="top/spacer.gif" width="1" height="1" border="0"></td> </tr> <tr> <td colspan="13" bgcolor="#6699cc" valign="top"></td> <td><img name="test_r1_c14" src="top/test_r1_c14.gif" width="3" height="11" border="0"></td> <td><img src="top/spacer.gif" width="1" height="11" border="0"></td> </tr> </table> </body> </html>

noname#5549
noname#5549
回答No.1

こんにちは。 その余白は、ブラウザでプレビューしてもそうですか？ というのは、DreamWeaverは時折、正しく組んだHTMLでも微妙にずれて表示されることがあるからです。 （編集しやすくするためだと思われる） とにかくHTMLを見てみることが一番でしょう。 TABLEタグできちんと設定できていないかも知れませんし。

kasa2003
質問者

補足

早速のご回答、ありがとうございます。 ブラウザでプレビューしてもやはり余白が残されたまま反映されてしまいます。 ソースをみてもおかしな所はないと思うんですが・・・（あまり自信ありません） これは原因を示すヒントになると思うんですが、 ＤＷ上で普通にテーブルを挿入するときちんと隅にフィットするのです。 ＦＷで書き出したＨＴＭＬを挿入する場合にのみ1ピクセルの余白ができてしまうのです。 書き出し時の設定か何かでしょうか・・・うーん、わかりません・・・

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • ドリームウィーバーとファイヤーワークスの連携機能について、教えてくださ

    ドリームウィーバーとファイヤーワークスの連携機能について、教えてください。 「ゼロからのステップアップシリーズ」の「ドリームウィーバーＣＳ４WITHファイヤーワークスＣＳ４」という参考書で独学で学んでいます。 ドリームウィーバーのプロパティーインスペクター部にある［ＦＷ］のアイコンをクリックすると自動でファイヤーワークスが呼び出され、連携機能を使用できると参考書にあります。 確かに一度は、参考書どおりにそのような操作が出来ました。しかし、その後、別の作業でフォトショップを使ったためでしょうか。 プロパティインスペクター部の該当のアイコンはフォトショップの［ＰＳ］に変わり、フォトショップしか呼び出せなくなりました。 プロパティインスペクター部の「呼び出し」を行えるアイコンをもとのファイヤーワークスに変更する方法はあるのでしょうか？

  • ドリームウィーバーとファイヤーワークスの連携

    ドリームウィーバーとファイヤーワークスの連携でこれは便利というものが あれば教えていただけないでしょうか？ ぜひよろしくお願いいたします。

  • ファイヤーワークス４で

    ファイヤーワークス４で保存したpngファイル(テキスト入り)をドリームウィーバーでファイヤーワークスＨＴＭＬとして読みこんだ際にテキスト部分を画像ではなくテキストで出力するにはどうしたら良いのでしょうか？自分でもヘルプを読むなり色々試しましたがダメでした。 ご回答をお待ちしています。よろしくお願いします。

  • Adobeソフトについての質問です。

    webサイト、インタラクティブコンテンツを作ろうと考えた場合、Fireworksは必要でしょうか？ 詳しく言いますと、今現在Adobeソフトの購入を検討しているのですが、デザインスタンダードCS5(イラレ、フォトショ、インデザイン)とDreamweaverを購入するか、デザインプレミアムCS5(イラレ、フォトショ、インデザイン、フラッシュ、ドリームウィーバー、ファイアーワークス)を購入するかで悩んでいます。 購入目的は平面デザイン、webページの作成、フラッシュでのプレゼン資料作成を考えています。 現在、Flash CS4 professional がインストールされている状態なので、デザインプレミアムを購入することでフラッシュCS4が無駄になってしまうのが嫌なのと、なるべく安く済ませたいという思いがあります。 しかし、デザインスタンダードとドリームウィーバーで購入する場合、ファイアーワークスが手に入りません。 そのため、ファイアーワークスがどの程度必要なソフトなのかを伺いたいです。 よろしくお願いします。

  • テーブルでの枠線はどうやって作る？

    ドリームウィーバーでＨＰを作っていますが、Yahooの（どこのページにもありますが）トップページで使われているような、テーブルの枠線を１ピクセルの細さで作成したいのですが、どうやれば1ピクセルで作れるのでしょうか？自分のやり方では、1ピクセルの細さにならないんです。 自分のやり方としては、枠線となる行（列）の高さ（幅）をプロパティインスペクタの入力欄に「１」として背景に色を設定しています。 このやり方だと、明らかに３、４ピクセルの太さになります。 説明がわかりにくかったらすみませんが、わかる方いましたら教えてください。

  • ファイヤーワークス４＆ドリームウェーバー４につきまして

    お世話になります。 わかりにくい文章ですみません。 ホームページを作っています。 ファイヤーワークス４で作ったロールオーバーするボタンを、ドリームウェーバー４にHTMLコードのコピー＆ペーストで配置したのですが、ブラウザーでプレビューではちゃんとボタンが作動しているのですが、実際にプットしてインターネットエクスプローラーで見ましてもオーバーから先は表示されません。（リンク先には移動できます） これはインターネットオプションの詳細設定等を変えれば表示されるのでしょうか？

  • dream weaver プロパティインスペクタが消えました

    いつもお世話になります。 あまりにも基本的なことだからか、調べても分からないので教えてください。 dream weaverCS3を使っているのですが、上から HTMLの窓、実際の画面があり、そのいちばん下になんと言えばいいのでしょうか。 例えば、画像を選択すると、ALTやリンク先を設定できたり、色や、 テーブルの詳細を設定できたり、というような～プロパティインスペクタとうのでしょうか。 その窓が無く、今表示されているものは、結果-バリデータ-ブラウザ互換性チェック-リンクチェク-サイトレポート です。どーすれば表示されますか？どなたか教えてください！

  • ドリームウィーバーとファイヤーワークスの移動法

    今まで使っていたノートPCに入っている ドリームウィーバーとファイヤーワークスを 新しく購入したデスクトップPCに移したいと考えております。 ノートへの上記ソフトのインストールは 友人にしてもらったので、現在そのCDは手元に無く その友人とも連絡が取れない状況です。 ノートからアンインストールしてNEWPCにインストール・・ というような安易な考えは通用するのでしょうか。 現在はまだノートPCでHPの更新作業などを行っているため 慎重になってしまい、ためしでも実行できておりません。 新しく購入する他手は無いのでしょうか。 ソフトは両方MXです。PC初心者です。 宜しくお願い致します。

  • テーブルセル余白（例えば左側だけ、上側だけ、など）

    こんにちは。 宜しくお願いいたします。 テーブル内のコードに、cellpadding="5" は セル余白が上下左右のすべて、5ピクセル空きますが、 左側だけ5ピクセル、とか、上側だけ５ピクセル、のように 指定方向のみ、余白を作ることは可能でしょうか。 その場合のHTML記述を教えてください。 また、ここで質問させていただいている「指定方向への余白指定」と 全体余白指定の「cellpadding="ＸＸ"」は同時に使って 良いものでしょうか。 素人質問ですみません。 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • ファイヤーワークスCS3　アニメーション gif　について

    質問です。 ファイヤーワークスで文字の色を変えてフレームを2個作り それぞれ50/100秒で設定して、アニメーションgifで保存しましたが どうも、フレームの秒が生きておらず。すごい速さで点滅してしまいます。　ファイヤーワークス内でのフレーム再生ではしっかりと ゆっくり動くのですが。保存して。　ドリームウィーバー８の新規ページに貼り付けて、ブラウザでプレビューすると、どうもフレームの秒がいきておらず。早くチカチカしています。　このフレームの秒設定になにかしないといけないことがあるのでしょうか？ わかる方いましたら。教えてくださいませm( __ )m

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する