スライスのコツ（Fireworks）

質問

Fireworks とDreamweaver のことで、困っています。
作成された元のファイルはあるのですが、Fireworksを使って、スライスして書き出したファイルから余分な画像を取りたいのですが、まずスライスするコツが良く分からないのです。
Fireworks とDreamweaver の本を色々と見たのですが、おおまかに、更新する部分と更新しない部分をその項目ごとに分類してスライスするというやり方で合っているのでしょうか？
リンクされるボタンなどもスライスした方が良いのか、コツが良く分かりません。
その後に余分な画像を取る、というのも、どこが余分なものかも分からないのです。
最終的にはテキストを入力出来るようにしたいのですが、テキストを載せるために、元の画像をどう変えていけば良いのか（背景画像として扱う方法）が分からず、困っています。

質問の意味が分からなかったら申し訳ありません。ＨＴＭＬの勉強は少ししたことがあるのですが、Fireworks やDreamweaver などは扱ったことがありません。
よろしくお願いします。

回答No.1

Pochi67 · ベストアンサー

お役に立てるかどうかわかりませんが、私がいつもやっている方法は・・・『取り敢えず隙間無く、重複しないようスライスしてしまう』『できるだけ縦のラインを合わせる』です。
　スライスで書き出すということは画像をテーブルに入れて組んでいくことなので、隙間を作ってしまうと空白部分が出来、縦のラインの位置があまりにも多いとテーブルが複雑になるからです。
　もちろん、どうしても複雑な切り方をしなければいけない場合もありますが、それはHTMLで何とかなることも多いです。

> リンクされるボタンなども・・・
とあるので、画面全体が一枚の画像になっていて、それを切り分けてページを作ろうとしていると仮定して説明を続けます。

　リンクボタンは今後増えるのであれば別で作った方が何かと便利です。増えないのであればそのままボタンごとに切ってください。

　基本は画像に合わせてスライスしていきます。
　但し、リンクボタンとテキストを入れる部分以外はそう気にせず切っていって大丈夫だと思います。
　ひとつのスライスが大き過ぎると表示に時間が掛かるため、あまり大きくしないでください。

　余分な部分というのはベタ塗り部分のことでしょうか。
　テキストの背景など、一色で表現する部分は画像で表示するのではなく、ソースで背景色を設定した方が表示が速くなります。
　また、HTMLで表現できるような表なども同様です。
　もしくは同じパターンの部分は背景に入れてリピートさせればいいので、小さい画像で書き出してしまうという意味かもしれません。

　テキストを入れる部分以外は普通の画像で構わないと思います。
　ヘタに背景に設定すると、テーブルの大きさをしっかり決めておかないと画像がリピートしてしまいます。（CSSでリピートしない設定も出来ますが・・・)

　角丸や直線でない枠の中にテキストを入れていく場合、全体を9つに切ります。（飾りの無い直線（長方形)はテーブルで表現出来ます)
　例えば角丸の長方形の場合、四隅の丸くなっている部分、上下左右の直線部分、中のテキストを入れる部分の9つです。
　テーブルの幅が決まっている場合は上下の3つずつは切らなくても良いです。
　左右の直線部分はテキスト量で伸縮するよう、背景に入れておきます。
　もし枠線が直線でない場合は、リピートした時に不自然にならないよう、スライスの仕方を考える必要があります。

　スライスが出来たら、スライスに名前をつけて書き出してください。
　HTMLも一緒に書き出すと便利です。
　但し現状から追加や削除を行う時はそれなりの知識が必要になってきます。
　FWで書き出すと画像全体をひとつのテーブルと考えてコードが作成されますが、実際には入れ子（テーブルの中にテーブルを組むこと)にした方がコードがすっきりしたり変更が容易になったりするためです。

　通常、背景に入れた画像は印刷すると出てきません。（ブラウザの設定で印刷に出るようにすることが出来ますが、デフォルトの設定のままでは出てこないという意味です)
　印刷することがあるページであれば、そのことを考えて背景に入れるかどうかを決めてもいいと思います。

お礼

とても具体的で、丁寧な回答、ありがとうございます。
大体のイメージがつかめ、大変助かりました。
今から、再度挑戦したいと思います。
本当にありがとうございました！