• ベストアンサー
  • 困ってます

スライスのコツ(Fireworks)

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

共感・応援の気持ちを伝えよう!

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

  • ベストアンサー
  • 回答No.1
  • Pochi67
  • ベストアンサー率34% (562/1640)

 お役に立てるかどうかわかりませんが、私がいつもやっている方法は・・・『取り敢えず隙間無く、重複しないようスライスしてしまう』『できるだけ縦のラインを合わせる』です。  スライスで書き出すということは画像をテーブルに入れて組んでいくことなので、隙間を作ってしまうと空白部分が出来、縦のラインの位置があまりにも多いとテーブルが複雑になるからです。  もちろん、どうしても複雑な切り方をしなければいけない場合もありますが、それはHTMLで何とかなることも多いです。 > リンクされるボタンなども・・・ とあるので、画面全体が一枚の画像になっていて、それを切り分けてページを作ろうとしていると仮定して説明を続けます。  リンクボタンは今後増えるのであれば別で作った方が何かと便利です。増えないのであればそのままボタンごとに切ってください。  基本は画像に合わせてスライスしていきます。  但し、リンクボタンとテキストを入れる部分以外はそう気にせず切っていって大丈夫だと思います。  ひとつのスライスが大き過ぎると表示に時間が掛かるため、あまり大きくしないでください。  余分な部分というのはベタ塗り部分のことでしょうか。  テキストの背景など、一色で表現する部分は画像で表示するのではなく、ソースで背景色を設定した方が表示が速くなります。  また、HTMLで表現できるような表なども同様です。  もしくは同じパターンの部分は背景に入れてリピートさせればいいので、小さい画像で書き出してしまうという意味かもしれません。  テキストを入れる部分以外は普通の画像で構わないと思います。  ヘタに背景に設定すると、テーブルの大きさをしっかり決めておかないと画像がリピートしてしまいます。(CSSでリピートしない設定も出来ますが・・・)  角丸や直線でない枠の中にテキストを入れていく場合、全体を9つに切ります。(飾りの無い直線(長方形)はテーブルで表現出来ます)  例えば角丸の長方形の場合、四隅の丸くなっている部分、上下左右の直線部分、中のテキストを入れる部分の9つです。  テーブルの幅が決まっている場合は上下の3つずつは切らなくても良いです。  左右の直線部分はテキスト量で伸縮するよう、背景に入れておきます。  もし枠線が直線でない場合は、リピートした時に不自然にならないよう、スライスの仕方を考える必要があります。  スライスが出来たら、スライスに名前をつけて書き出してください。  HTMLも一緒に書き出すと便利です。  但し現状から追加や削除を行う時はそれなりの知識が必要になってきます。  FWで書き出すと画像全体をひとつのテーブルと考えてコードが作成されますが、実際には入れ子(テーブルの中にテーブルを組むこと)にした方がコードがすっきりしたり変更が容易になったりするためです。  通常、背景に入れた画像は印刷すると出てきません。(ブラウザの設定で印刷に出るようにすることが出来ますが、デフォルトの設定のままでは出てこないという意味です)  印刷することがあるページであれば、そのことを考えて背景に入れるかどうかを決めてもいいと思います。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

関連するQ&A

  • FireWorksで作った画像をDreamWeaverに・・

    お世話になっています。 FireWorksでほぼまるまるトップページを作成して、 ボタン部分をスライスして、 シンプルロールオーバーで、マウスを乗せると色が変わる設定をしました。 FireWorksからブラウザで確認すると、ちゃんとうごきます。 書き出すときに、 ファイルの種類・・HTMLとイメージ HTML・・HTMLファイルを書き出し スライス・・スライスの書き出し を選びました。 これをDreamWeaverに読み込む前に他になにか注意することはありますか・・?DreamWeaverでは動きません・・。 DreamWeaverに読み込むときというのは、ひょっとして 書き出したときにたくさん出てきたスライス部分の 画像を配置するのでしょうか・・? 全然見当違いのことを言ってたらすみません・・。 よろしくお願いします。

  • fireworksでhtml作成に関して

    お尋ねします。 FireWorks CS4を用いてスライスを切ってHTMLを作成。FireWorksで作成したデータは塗りつぶした矩形の中に文字を書いているものです。 このファイルをDreamweaverで読み込みます。矩形の中の文字も画像になってしまっています。 文字はtextとして認識してほしいのですがどうしてもうまくいきません。 どなたかご存知の方、ご教示いただけないでしょうか。

  • fireworks 書き出しについて

    fireworks かなり初心者です。 先日、スライスのコツを教えていただきました。 今度は書き出しでストップしてしまいました。 書き出しをした後にdreamweaver でチェックすると、スペイサーがたくさん入っています。これの処理は、どうすればよろしいのでしょうか? スライスの仕方が悪いのか、それともスペイサーが多量にあっても、それをhtml タグの中で消せばよいのか? また、スライスした時に、名前を変更できると思うのですが、普通に名前をつけたらダーッと、その名前+番号が付くのですが、それで正しいのでしょうか?ひとつひとつ違う名前をつけるわけではないのか疑問です。 また、スライスして最適化する、という作業はひとつずつするものなのですか?それともまとめてできるのでしょうか? 本を見ても、まとめてしているのか分かりにくかったので・・・。 HTML を少し勉強したことがあるのですが、fireworks や dreamweaver 自体初めてで、HP作成ソフトという認識しかもたないので、どう扱ってよいのかわからないのです。 漠然と、fireworks でデザインした画像を、dreamweaver でHTML化する、という風に捉えているのですが、正しいのでしょうか? fireworks でのスライスや書き出しについて、ネットや本でも調べてるのですが、かなり詳しく書いてあるものを見つけることができない為、理解できずにいます。 言葉など、変なところもあるかもしれませんが、教えてくれる方いましたら、よろしくお願いします。

  • Fireworksなどのスライスで、CSSレイアウトで書き出せるの?

    テーブルレイアウトで慣れてるためか、CSSレイアウトがどうしても馴染めません。 Dreamweaverで作ってますが、数倍も難しく感じます。 もしかして、やり方を間違ってるのかも知れません。 私は、Dreamweaverで一つずつ組んでいくため、Fireworksなどの「スライス」機能を使わないのですが、 ●質問1 もしかして、Fireworksでレイアウトしたら、 Fireworksのスライスで、CSSレイアウトで簡単に書き出せるのでしょうか? 多分、テーブルレイアウトでの書き出しだけだと思ったのですが・・・。 私の知識は古いので。 ●質問2 また、HP作成は、Dreamweaverで作るとして、 レイアウト作成や画像作成は、現在の主流は、 Fireworksでしょうか?Photoshopでしょうか? プロは普通どっちを使ってますか? 私はPhotoshopしか使った事ありません。 Fireworksに乗り換えるべきか、考えてます。 よろしくお願いします。

  • fireworks 多角形スライスツールでホットスポットに!?

    たびたびお世話になっています。 fireworks でのスライス、やっと感覚が掴めるようになったのも束の間・・・。 書き出したあと、dreamweaver で開いてみたら、何箇所かホットスポット扱いになっていました。 普通の画像にしたかったのにどうしてかと思い、fireworks でスライスの確認をしたところ、多角形スライスツールを使っている箇所のみホットスポットになっていて、そこで立ち往生してしまいました。 こちらで調べたのですが、類似質問もなく、困っています。 どなたか、分かる方教えていただけますか? よろしくお願いします。

  • Fireworksのスライスとスペーサーについて

    Fireworksでスライスをするときにスペーサーを入れる設定にすると 元の画像が300ピクセルとすると width="300" のテーブルが書き出されます。 しかし、よく見るとテーブル中にはスライスされた元画像の合計300ピクセルと スペーサー1ピクセルの合わせて301ピクセルの画像が入っています。 この場合、Fireworksの設定で回避する方法は無いのでしょうか? このまま使って悪さをしないでしょうか? また、私はこの書き出されたテーブルを更に別のテーブル(これは自分でコーディングした物) にネストしたいのですが、このテーブルを入れる <td> を  width="300" にして大丈夫なのでしょうか? サイズに間違いがあるとブラウザがリロードするのではと思うと心配です。 スライスのテーブルをシングルにすると崩れるといわれていますが、本当にシングルで 使わない方がいいのでしょうか? どなたかご指導くださいませ。

  • DreamweaverとFireworksを使おうと思っていますが,ど

    DreamweaverとFireworksを使おうと思っていますが,どのように使い分けているか教えてください。 現在、自分はスタイルシートの編集とコード編集、テーブル操作をDreamweaver、スライス、画像へのリンク、ホップダウンメニューをFireworksで作成しています。 基本的にはDreamweaverが基本ソフトになるのでしょうが、些か自分には操作が難しく感じられます。皆さんはどのようにされていますか?

  • Dreamweaver CS4とFireworks CS4の連携につい

    Dreamweaver CS4とFireworks CS4の連携について質問です。 連携機能を使ってDreamweaverからFireworksを呼び出して画像を編集し、 編集を終了してDreamweaverに戻るとHTMLの日本語の部分が文字化けしてしまいます。 具体的な手順は以下のとおりです。 ・FireworksでFireworks PNG形式の画像ファイルを作成。 ・作成した画像ファイルからJPGファイルを作成。 ・Dreamweaverで作成したJPGファイルをHTMLに挿入する。 ・Dreamweaverのプロパティインスペクタにある編集ボタンを押してFireworksを呼び出す。 ・Fireworksで画像を編集し、Dreamweaverに戻ると、日本語の部分が文字化けしている。 作業環境はMac OSX 10.5 DreamweaverとFireworksは30日間の試用版を使っています。 解決策があれば教えていただけないでしょうか? よろしくお願いいたします。

  • fireworksから書き出し、その後画像消しでテーブルが大きくなる

    ホームページを作るため fireworks >> deramweaverという工程を進んでおります。 1 fireworksで画像を作成。その後スライスを切って 2 書き出しでhtmlに吐き出します。 3 dreamweaverにてそのファイルを開き、いらない部分の画像を消します。 この3の工程で問題がおきます。(なんというと伝わるのかわからないのですが、がんばります。) (そもそもテーブル<table>というか<td>には最低高さという物があるのでしょうか??だいたいテキスト文字程度の高さです。) その画像を消す際、ある一定の高さ以下(テキスト文字の高さぐらい)の画像を消すと、テーブルの高さがのびてしまうのです。 これはどこでどうすれば、画像だけを消すことができるのでしょうか? また、これに伴う説明のようなサイトがあれば教えて欲しく思います。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Fireworksでのテキストについて ホームページ上で選択できるようにするには???

    はじめまして。早速質問ですが、わたくしFireworksとDreamweaverを利用してホームページを作成しております。 HTMLファイルはFireworksで作成し、Dreamweaverではアップするだけといった感じで進めております。 Fireworks上でテキストを入力し編集をしているのですが、画像として認識されているのかアップするとテキストをl選択できない状態になっております。WEB上でテキストを選択してコピーしたりといったことをしたいのですがごのようにしたらよろしいのでしょうか??? Dreamweaverでテキストを入力した場合はきちんと思うようにWEBうえでも表示されるのですが・・・。 なにぶん初心者でお恥ずかしい質問ですがまったく分からず困っております。 どなたか教えてください!!