- 締切済み
DREAM WEAVERにFIRE WORKSを書き出すと余白が・・・
はじめまして。 DREAMWEAVER4とFIREWORKS4を使ってます。 ファイアーワークスでHTMLを書き出してドリームウィーバーに読み込むと、 書き出したテーブルの上隅にフィットせず1ピクセル余白ができてしまいます。 つまりその余白のところだけがラインを引いてるかのように背景色がみえてしまうのです。 ページのプロパティで上・左ともに0(ゼロ)と設定してるのですが、 一体どうすれば余白ができないようにすることができるのでしょうか? どなたか解る方、ご指導のほどよろしくお願い致します。 ちなみにOSは(関係あるかどうか不明ですが)WIN NT4.0です。 よろしくお願い致します。
- みんなの回答 (4)
- 専門家の回答
みんなの回答
こんにちは。 何だか大変ですね。具合は良くなったのでしょうか。 で、もうちょっと回答しましょう。 僕自身は基本的にPHOTOSHOPなので、あまりFWに詳しくはないのですが... FWで画像を作りますよね。 その時、パーツに分けるためスライスする。 これは分かります。 その後、何故HTMLを書き出す必要があるのかが疑問です。 画像のままで構わないですよ。 そういった画像を配置してHTMLを生成するのがDWの仕事ですから。 仮にFWでスライスする段階で、どうしてもHTMLも書き出さないと作れないのならそれでも構いません。 ただ、そこで書き出されたファイルの中から画像ファイルだけ抜いて、DWで配置してください。 もうひとつ気になるのは、 >各フレームにHTMLを配置するというやりかた これです。 分かってやっているのなら構いませんが、 通常、分割した画像はフレームではなくテーブルで配置します。 フレームにするのは内部をスクロールさせたいとか、更新の手間を省きたいなどの場合のみです。 ついでにもうひとつ。 スペーサーを省くとバランスが崩れるとのことですが、テーブルってのは、サイズ指定をしていても、中身がないと勝手にサイズを変更します。 頂いたサンプルは中身がなかったでしょう? もし、実際もあんな感じの場合は、テーブルを1行追加して、スペーサーで調整する、という手段も当然あります。 何にせよ、FWで書き出すのはJPG、GIF、PNGだけにしておきましょう。
こんばんは。 えーと、縦2×横15ですね..... 試しにブラウザに放り込んで見ましたが、 きっと、縦1×横2にしたかったんですよね? すごい数のスペーサーが入ってしまっています。 試しに <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に読み込む方が妙です。 これを機に、ホームページ作成のプロセスを考え直した方が良いのでは、という気がします。
お礼
ご回答有難うございました。 お返事が遅くなりまして申し訳ありません。 療養中の母の様態が悪化しばたばたしておりました。 FWで書き出す場合、DWに配置した際に テーブルが崩れないように自動的に高さ1ピクセルのspacerGIFがテーブル上部から右側に沿って 挿入されるようになっているみたいですね。 全然気づきませんでした。 仮にスペーサーGIFを消去するとテーブルが見事に崩れてしまいます。 DW上で配置したテーブルもしくはページの背景を配置したテーブルと同じ色にすると なんとかごまかせなくもないのですが、上下にフレーム分けしている場合、 どうしても不都合が出てきてしまいます。 DWとFWをお使いの皆様はどのようにこの不都合をクリアされているんでしょうか・・・不思議です。というか私が無知なんでしょうが・・・ 私のやり方は、FWで全体のレイアウトとデザインを作り上げ、DWでフレーム分けした各部分ごとのスライスを選択し、書き出し、 各フレームにHTMLを配置するというやりかたですが(間違ってるんでしょうか?) DW、FWのマニュアル本は持ってるのですが、バージョン3の頃のもので、 特にFWはロゴの制作方法などがメインで、あまり詳しくなく書き出しについてはほとんど触れられてないんです。 humour様のおっしゃるとおり我流の見よう見真似でやってきたので、 FW&DWについての正しい使い方、正しい機能を把握できてないと思います(^^; プロの方はHTMLをコーディングする作業を行うそうですが、 このようにソフトの機能の制限や不都合な部分をソースで修正していくということなんでしょうか。 もっともっと勉強が必要なようです。 このようなことが詳しく解説されているマニュアル本を探してみたいと思います(もし、オススメがありましたらよろしくお願いしますm(_ _)m 修正していただいたソース大変参考になりました。 大変有難うございました。
こんにちは。 いえいえ、DWだろうがFWだろうが、 HTMLであることに代わりはありません。 同じような条件でHTMLで書き出してみて、 その差を見極めればいいのです。 FWのみおかしいと言うことは、 ■TABLEタグで余白設定が出来ていない。 ■TABLE(またはセル)のサイズより画像が小さい。 ■TDの中で何か設定している あたりが考えられます。 CELLPADDING、CELLSPACINGなどを確認してみて下さい。
補足
たびたびすいません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>
こんにちは。 その余白は、ブラウザでプレビューしてもそうですか? というのは、DreamWeaverは時折、正しく組んだHTMLでも微妙にずれて表示されることがあるからです。 (編集しやすくするためだと思われる) とにかくHTMLを見てみることが一番でしょう。 TABLEタグできちんと設定できていないかも知れませんし。
補足
早速のご回答、ありがとうございます。 ブラウザでプレビューしてもやはり余白が残されたまま反映されてしまいます。 ソースをみてもおかしな所はないと思うんですが・・・(あまり自信ありません) これは原因を示すヒントになると思うんですが、 DW上で普通にテーブルを挿入するときちんと隅にフィットするのです。 FWで書き出したHTMLを挿入する場合にのみ1ピクセルの余白ができてしまうのです。 書き出し時の設定か何かでしょうか・・・うーん、わかりません・・・
お礼
こんばんわ、お返事が遅くなりすいません。 折角、ご配慮のお言葉までいただいたのですが、 母は癌のため12月27日をもちまして他界しました。 今思えば充分に親孝行できなかったこと、慙愧に堪えぬ思いです・・・ 年末年始は制作の方も落ち着いて取り組めませんでしたので、 理解の方はあまり進歩してないままです。 本件については、humourさんには4度にわたりコメントしていただいたのに、 まだまだ解消できないでいる問題が多そうです。 きっと基礎知識が不足しているせいですね。本を買って勉強したいと思います。 なにせローカルな地域ですから、近所の書店にWEB制作の書籍があまりないんです・・・ FWで書き出して(HTML化)、DWに配置することが根本的に間違っているようですが、 MAC FANか何かの雑誌にそういう風に書いてあったような気がします。(私はWINですが・・・) スライスした画像それぞれをイメージのみ書き出し、 DW上のテーブルに配置するという方法が本来のあり方なんでしょうか。 だとしたら、制作の手順を1から勉強しなおす必要があるみたいですね。 紀伊国屋書店などに行けばいろいろあると思うんですけど、けっこう遠いので・・・ humourさんのコメント、大変参考になりました。 どうもありがとうございました。
補足
先程、注意深くFW書き出しのパネルを見ていたら、 書き出しオプションというのがあり、 HTMLの設定→テーブル→スペーサーの種類(以下、選択) ・1ピクセル透明スペーサー ・埋め込みテーブル - スペーサーなし ・シングルテーブル - スペーサーなし というコマンドがありました。 スペーサーなしで書き出し、レイアウトが崩れないかどうかは未確認ですが・・・ 本を買う前に少しこの機能を追究してみたいと思います。 意外と見落としてる人多いと思うんですが・・・ いろいろとありがとうございました。