fireworksを使用したHTML作成と公開用ファイルへの変換方法

このQ&Aのポイント
  • fireworks初心者がランディングページ作成後に画像変更をしたい場合、公開用ファイルに変換する手順が知りたい。
  • fireworksでpngファイルの画像変更が可能だが、html、CSS、imgファイルに変換する方法を知りたい。
  • fireworksを使用したランディングページにおいて、pngファイルの変更後、公開用ファイルに変換する手順について教えてください。
回答を見る
  • ベストアンサー

fireworks によるHTML作成

お世話になっております。 fireworks初心者(これから触る)です。 fireworksを使用してランディングページをある業者さんに作成して頂きました。 その後画像等の変更をすることになりました。 今回は社内で変更するよう指示されておりますが、業者さんから納品されたファイル(公開用のファイル以外)はpng形式のものしかありません。 見よう見まねでfireworksを使用してpngファイルの画像の変更等ができそうだということは何となくわかりましたが、最終的な公開用のファイル(html、CSS、img)に変換するにはどうしたら良いのでしょうか。 的を得ていない質問をしているかもしれませんが、良いお知恵をお貸しください。 宜しくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
回答No.2

http://fw.v-colors.com/ http://www.youtube.com/watch?v=kTWhzGQn8dI http://fw.nijyuman.com/201106/tool_panel1/ 検索するといろいろ出てきます。 これらを観たり、本を読んだりするより、知ってる人にやりたいことを相談して教えてもらうのが一番早いでしょう。 その後でこれらを見ると非常に理解が深まります。 バージョンによって、機能や操作方法が結構違うので気を付けてください。

jipang5054
質問者

お礼

大分ご連絡が遅くなり大変失礼いたしました。 頑張って勉強します。 ありがとうございました。

その他の回答 (1)

回答No.1

fireworksは基本的に2D・画像作成ソフトです。 なのでfireworksで出来るのは、2Dの画像データです。 fireworksでボタンや背景、メイン画像など、パーツごとにimgデータに分割します。これをスライスといいます。 HTMLはテキスト情報ですので画像編集ではなく、テキスト編集ソフトを使います。専用のソフトでなくてもメモ帳などでも十分作成することができます。 HTMLとは画像や文字のなどの配置やクリックしたらどうするか等の情報のことです。 fireworksの姉妹製品だとadobeのdreamweaverなどを使ってHTMLを作成します。 HTMLを作成することをコーディングといいます。 つまりホームページを作成するのは、画編作成したあと、別のソフトでHTML作成するのです。 なので、一部の画像を変更するには、fireworksで画像を変更しスライスした後、その画像を、公開用データの中に変更する前の画像が入っているはずですので、同じところに新しい画像を保存します その画像をどこに貼り付け付けるのか、HTMLデータを編集します。 HTMLデータも公開用データの中にあると思います。 そして重要なのは、修正した画像とHTMLデータをFTPでWEBサーバーにアップすることです。 通常この一連の作業の基礎知識を得るために半年程度の専門の勉強が必要です。

jipang5054
質問者

補足

ご丁寧にご説明頂きありがとうございました。 全般的な概略は大変良く分かりました。 後は、fireworksそのものの使い方を勉強したいと思います。 何か良いサイトはございますでしょうか。 色々調べましたが、なかなか詳しく説明をしているサイトが見つかりません。やはり、参考書を購入した方が宜しいでしょうか。

関連するQ&A

  • FireworksでのHTML書き出しについて

    HTML、CSSを勉強中の初心者です。 初歩的な質問ですが、お答えいただけると幸いです。 Webページ制作について自分なりに色々調べていたところ、一般的にWebページを作る場合、FireworksでHPをレイアウトし、スライス→書き出しをした後に、書き出した画像を一つ一つ(手打ち、もしくはDreamweaverなどで)配置する、というのが主流のようです。 しかし、実際にFireworks CS6を使ってみたところ、書き出し時に「HTMLと画像の書き出し」、「CSSと画像の書き出し」というものがありました。 「HTMLと画像の書き出し」では、テーブルが使用されているため、現在は推奨されないと思いますので、使用されないのはわかるのですが、「CSSと画像の書き出し」では、現在主流となっているCSSでのレイアウトになっているようでした。 書き出されたHTMLを確認してみたところ、表示・ソースも一見問題ないように見えたのですが、この機能があまり使われていないのはなぜでしょうか。 ※もちろん、この書き出しはただ一枚のページを作っただけで、そこから様々な動作をつけるのは自分でやらなければいけないのは理解しています。

  • Fireworksについて

    Fireworks使用の方に質問です。 スライス機能についてですが、 テーブルレイアウト時代なら便利な機能ですが、CSSレイアウトが主流の現在、 逆に不便ではないですか? (X)HTMLで画像やテキストを文書構造に沿って配置し、CSSでレイアウトをする場合、ドリームウィーバーとFireworksの連携ができません。 (スライスで書き出し、その後、DWとFWの連携を取ろうとするとテーブル構造で配置してしまうので) 私はすべてパーツを別ファイルにして管理し、ドリームウィーバーと連携を取っています。が面倒です。 たとえば、スライスしたパーツをgifやjpgに書き出す前に、 スライスしたパーツをすべて別ファイル(png)にして一括保存する方法は無いのでしょうか? もしくはそのような、プラグインソフトがありませんか?

  • fireworks3でgifファイルを編集する方法教えてください。

    私はホームページ作成初心者ですが、会社のHPの更新を任されました。しかし、fireworks3で既存のgifファイルを編集することができません。または方法が分かりません。元ファイルのpngはないようです。 とりあえず、画像のテキストを編集したいだけなのですが。 そこで、fireworks3で試してみると、 新規で***.pngを作成保存すると当然あとで編集できます。 しかし既存の***.gifをfireworks3で***.pngで保存しても後で編集できません。***.gifを別の画像変換ソフトで***.pngで保存しても、fireworks3で編集できません。 同じ拡張子でありながらなぜ編集できないpngなのか、何が違うのか。 とりあえず、fireworks3でgifファイルを編集する方法教えてください。詳しい方教えてください。 ちなみに私はfireworks3も初心者です。使い方そのものが間違っているのかも知れません。お願いします。

  • Fireworksのファイルが変更できない

    とまとです。 友人宅のパソコンでの症状なのですが、Fireworksで画像を開き、修正を加えて保存しようとすると「既存ファイルです。変更しますか?」と聞いてくるくせに、yesを選ぶと「ファイルがありません」とエラーメッセージが出るそうなんです。 一度デフラグしたら少しよくなったらしいのですが、また出るようになったと連絡が来ました。 これってバグなんですか? ちなみに友人宅のパソコンはDELLのノート型で、OSはWindowsXP。 FireworksのVer.は4.0です。 (私はMacerなので、Winの事はよくわかんないんですよねぇ(^-^;))

  • Fireworks→イラストレータにデータ変換する

    今、Fireworks2004で作ったPNGファイルがあるのですが、 これをイラストレータCS3のデータに変換しなくてはいけません。 FireworksからIllustrator7形式で出力できたので、それを イラストレータで開いたのですが、画面がめちゃくちゃで 文字も化けて、画像も入っていませんでした。 どのようにされるのが一般的でしょう。。 よろしくお願いしますm(_ _)m

  • fireworksで最適化

    fireworksMX2004を使用しています。 サイトでボタンとして使用する為fireworksで文字を作成したんですが、.pngだとキャンパスサイズの形に白い枠ができてしまいます。最適化(透明化の設定「透明」)して.zifにすると今度は文字のまわりに白い枠のようなものがでてしまいます。 どのようにしたら綺麗に表示されるのでしょうか? それとサイト制作に当たって画像はpnyよりjpeg,zifのほうがいいんでしょうか? お願いします。

  • pngファイルで納品

    はじめまして。 先月からWeb制作の仕事を始めました。 まだまだ駆け出しで初心者のような質問なのかもしれませんが… アイコンを作成する仕事で 取引先の制作会社の方に「納品はpngで」と言われました。 この場合のpngファイルというのは、 photoshopからのWeb用に書き出し→png選択で作成するpngファイルとは違うのでしょうか? 色々自分でも調べたのですが、Fireworksも関係しているのでしょうか。イラストレーターとフォトショップしか使用できないので、ちょっと理解しにくかったのですが。。。 pngファイルというのは2種類あるのでしょうか? それと、pngで納品という場合は、Fireworksも持っていないと無理なことなのでしょうか? どなたか教えていただけると嬉しいです。 宜しくお願いいたします。

  • 【FireWorks】スライスの画像名入力がめんどう…

    FireWorks8(Win-XP)使用者です。 FireWorksでスライスで画像を切り出すとき、プロパティの「スライス」の入力窓にて画像ファイル名を命名しています。 しかしながらこの入力窓は小さく、はじめからpngファイル名が入っていることもあり入力が面倒です。スライス画像が何十枚もある場合は結構かったるいです。 もっと効率のいい入力方法はないものでしょうか? 複数のスライスを「同じ名前+連番」で命名なんかできたらサイコーなんですけど… お詳しい方、よろしくお願いいたします。

  • 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日間の試用版を使っています。 解決策があれば教えていただけないでしょうか? よろしくお願いいたします。

  • HTML、CSSに詳しい方教えて下さい。

    HTML、CSSに詳しい方教えて下さい。 あるCSSのテンプレートを配布しているサイトからダウンロードし トップの画像を自分で作った画像に書き換えたいのですが、 元々テンプレートのimageフォルダに入っていた画像は表示されるのに オリジナルの画像だけが表示できません。 スペルミスやパスミスなどはチェックしましたが間違いはないようです。 ちなみにその画像は、inkscapeで作成し、pngファイルで保存したのちに、「名前を変更する」からjpgに変換しました。 拡張子の問題なのでは、と思い拡張子をgifやjpgに変更してやってみたんですが、 なぜか変換する前のpngだけ表示されました。 しかしなるべくjpgやgifを使いたいので困っております。 どなたかご回答お願い致します。

専門家に質問してみよう