最適化を終了すると、グラフィックやドキュメントを書き出したり、オリジナルのファイル形式によっては保存したりできます。

ドキュメントを 1 つの画像として GIF、JPEG または他のグラフィックファイル形式に書き出すか、または保存することができます。また、ドキュメント全体を HTML ファイルおよび関連する画像ファイルとして書き出すか、選択したスライスだけを書き出すか、指定した領域だけを書き出すこともできます。さらに、Fireworks のステートとレイヤーを別の画像ファイルとして書き出すことも可能です。

ファイルが書き出される場所の初期設定は、次の順序で決定されます。

  1. ドキュメントの現在の書き出しの環境設定。以前にドキュメントを書き出し、PNG ファイルを保存したことがある場合に定義されています。

  2. 書き出し先または保存先として現在設定されている場所。これは、保存、別名で保存、書き出しのいずれかのダイアログボックスで示される初期設定の場所とは異なる場所を書き出し先として指定すると定義されます。

  3. 現在のファイルの場所。

  4. 新規ドキュメントまたは画像がオペレーティングシステム上に保存される際の初期設定の場所。

    これとは対照的に、ドキュメントが初期設定で保存される場所は、別の条件によって決定されます。詳しくは、Fireworks ファイルの保存を参照してください。

画像ファイルとしてのページの書き出し

  1. ファイル/書き出しを選択します。

  2. 書き出すファイルの保存場所を選択します。

  3. 次のいずれかの操作を行います。

    • 書き出しポップアップメニューから「画像のみ」を選択し、「現在のページのみ」チェックボックスを選択または選択解除します。最適化パネルで設定した画像形式でページが書き出されます。

    • 書き出しポップアップメニューで「ページからファイルへ」を選択し、書き出し形式ポップアップメニューで「画像」を選択します。最適化パネルで設定した画像形式でページが書き出されます。

    • 書き出しポップアップメニューで「ページからファイルへ」を選択し、書き出し形式ポップアップメニューで「Fireworks PNG」を選択します。ページは、それぞれ Fireworks 8 との下位互換性がある別個の PNG ファイルとして書き出されます。

    注意:

    すべてのページを選択した形式で書き出すには、すべてのページを選択して、設定を最適化します。

1 つの画像の書き出し

Fireworks で開いた既存の画像で作業している場合、書き出すのではなく保存することができます。詳しくは、他の形式でのドキュメントの保存を参照してください。

注意:

ドキュメント内の特定の画像のみを書き出すには、まずドキュメントをスライスし、次に必要なスライスのみを書き出す必要があります。

  1. 最適化パネルでファイル形式を選択し、形式に固有のオプションを設定します。

  2. ファイル/書き出しを選択します。

  3. 画像ファイルを書き出す場所を選択します。

    Web グラフィックの場合、通常は、ローカル Web サイト内のフォルダーに保存します。

  4. 拡張子を除いたファイル名を入力します。拡張子は、ファイル形式に応じて書き出し時に追加されます。

  5. 書き出しポップアップメニューで「画像のみ」を選択します。

  6. 「保存」をクリックします。

スライスしたドキュメントの書き出し

初期設定では、スライスした Fireworks ドキュメントを書き出すと、HTML ファイルおよび関連する画像が書き出されます。書き出した HTML ファイルは Web ブラウザーで表示できるほか、別のアプリケーションに読み込んでさらに編集を加えることもできます。

書き出す前に、HTML の設定ダイアログボックスで適切な HTML スタイルが選択されていることを確認してください。HTML 書き出しオプションの設定を参照してください。

すべてのスライスの書き出し

  1. ファイル/書き出しを選択します。

  2. ハードディスク上の書き出し先フォルダーを指定します。

  3. 書き出しポップアップメニューから「HTML と画像」を選択します。

  4. 「ファイル名」ボックス(Windows)または「名前」ボックス(Mac OS)にファイル名を入力します。

  5. HTML ポップアップメニューで「HTML ファイルの書き出し」を選択します。

  6. スライスポップアップメニューで「スライスの書き出し」を選択します。

  7. (オプション)「サブフォルダーに画像を置く」を選択します。

  8. 「保存」をクリックします。

選択したスライスの書き出し

  1. 複数のスライスを選択するには、Shift キーを押しながらクリックします。

  2. ファイル/書き出しを選択します。

  3. 書き出したファイルを保存する場所を選択します。例えばローカル Web サイト内のフォルダーを指定します。

  4. 書き出しポップアップメニューから「HTML と画像」を選択します。

  5. 拡張子を除いたファイル名を入力します。拡張子は、ファイル形式に応じて書き出し時に追加されます。

    複数のスライスを書き出す場合は、レイヤーパネルやプロパティインスペクターを使用してカスタム名を設定しているものを除いて、書き出したすべてのグラフィックのルート名として入力した名前が使用されます。

  6. スライスポップアップメニューで「スライスの書き出し」を選択します。

  7. 事前に選択したスライスのみを書き出す場合は「選択したスライスのみ」を選択し、「スライスのない領域も含める」オプションがオフになっていることを確認します。

  8. 「保存」をクリックします。

スライスの更新

スライスしたドキュメントを既に書き出していて、その後オリジナルドキュメントを Fireworks で変更した場合は、変更した画像またはスライスだけを更新できます。置換するスライスを見つけやすいように、スライスにはカスタム名を付けます。

  1. スライスを非表示にして、このスライスの下にある領域を編集します。

  2. スライスをもう一度表示します。

  3. スライスを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「選択したスライスの書き出し」を選択します。

  4. オリジナルのスライスと同じフォルダーを選択して、同じファイル名を指定して「保存」をクリックします。

  5. 既存のファイルを置き換えるかどうかを確認するメッセージが表示されたら「OK」をクリックします。

    注意:

    Fireworks での元の書き出しサイズを超えるようなスライスのサイズ変更は避けてください。そのようなサイズ変更を行うと、スライスの更新時に HTML ドキュメントに予期しない結果が生じることがあります。

アニメーションの書き出し

アニメーションを作成して最適化すると、書き出せる状態になります。アニメーションは、次のいずれかのファイル形式で書き出すことができます。

アニメーション GIF

アニメーション GIF を使用すると、クリップアートやマンガ風のグラフィックで最良の結果が得られます。

Flash SWF または Fireworks PNG(書き出し不要)

アニメーションを SWF ファイル形式で書き出すと、Flash に読み込むことができます。Fireworks PNG のソースファイルを Flash に直接読み込めば、書き出しが不要になります。この方法を使用すると、Flash でアニメーションのすべてのレイヤーとステートを読み込み、さらに編集できます。Flash の使用を参照してください。

複数ファイル

アニメーションのステートやレイヤーを複数のファイルとして書き出す方法は、異なる複数のレイヤーに同じオブジェクトの多数のシンボルがある場合に便利です。例えば、会社名のそれぞれの文字をグラフィックでアニメーションにする場合は、バナー広告を複数のファイルとして書き出すようにします。複数ファイルとしてのステートまたはレイヤーの書き出しを参照してください。

ドキュメント内に複数のアニメーションが含まれている場合は、スライスを挿入し、ループやステートディレイなどの異なるアニメーション設定を使用して、それぞれのアニメーションを書き出すことができます。

アニメーション GIF の書き出し

  1. 選択/選択を解除を選択し、すべてのスライスやオブジェクトの選択を解除します。次に最適化パネルでファイル形式として「アニメーション GIF」を選択します。

  2. ファイル/書き出しを選択します。

  3. ファイルの名前を入力し、書き出し先を選択します。

  4. 「保存」をクリックします。

異なるアニメーション設定での複数のアニメーション GIF の書き出し

  1. Shift キーを押しながら各アニメーションをクリックし、すべてのアニメーションを選択します。

  2. 編集/挿入/長方形スライスまたは多角形スライスを選択します。

  3. メッセージボックスで「複数」をクリックします。

  4. それぞれのスライスを個別に選択し、ステートパネルを使用してスライスごとに別のアニメーション設定を指定します。

  5. アニメーション化するすべてのスライスを選択し、最適化パネルでファイル形式として「アニメーション GIF」を選択します。

  6. 各スライスを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「選択したスライスの書き出し」を選択して、各スライスを別個に書き出します。書き出しダイアログボックスで各ファイルの名前を入力し、書き出し先を選択して、「保存」をクリックします。

複数のファイルとしてのステートまたはレイヤーの書き出し

Fireworks では、最適化パネルで指定した最適化設定を使用して、ドキュメント内の各ステートまたはレイヤーを個別の画像ファイルとして書き出すことができます。レイヤー名またはステート名によって、それぞれの書き出しファイルの名前が決まります。アニメーションの書き出しに、この書き出し方法を使用することがあります。

  1. ファイル/書き出しを選択します。

  2. ファイル名を入力し、書き出し先のフォルダーを選択します。

  3. 書き出しポップアップメニューから、オプションを選択します。

    ステートからファイルへ

    ステートを複数のファイルとして書き出します。

    レイヤーからファイルへ

    レイヤーを複数のファイルとして書き出します。

    注意:現在のステート上のすべてのレイヤーが書き出されます。

  4. 各ステートのオブジェクトだけを含めるように書き出す画像を自動的に切り抜くには、「画像を切り抜き」を選択します。カンバス全体を含めるには(オブジェクト以外の空白の領域も含む)、このオプションの選択を解除します。

  5. 「保存」をクリックします。

ドキュメント内の領域の書き出し

  1. ツールボックスで書き出し領域ツール を選択します。

  2. ドラッグして、ドキュメント内の書き出す領域を囲みます。

    注意:

    ドラッグしながら選択範囲の位置を調整できます。マウスボタンを押しながらスペースバーを押した状態で、選択範囲をカンバスの別の位置にドラッグします。スペースバーを放して、選択範囲の描画を続けます。

    マウスボタンを放すと、書き出し領域が選択された状態になります。

  3. 必要に応じて、書き出し領域のサイズを変更します。

    • 縦横比を固定して書き出し領域の選択範囲のサイズを変更するには、Shift キーを押しながらハンドルをドラッグします。

    • 選択範囲のサイズを中心から変更するには、Alt キー(Windows)または Option キー(Mac OS)を押しながらドラッグします。

    • 縦横比を固定して中心から選択範囲のサイズを変更するには、Shift + Alt キー(Windows)または Option + Shift キー(Mac OS)を押しながらドラッグします。

  4. 線で囲まれている書き出し領域内をダブルクリックして、画像プレビューを表示します。

  5. 画像プレビューダイアログボックスで設定内容を調整し、「書き出し」をクリックします。

  6. ファイル名を入力し、書き出し先のフォルダーを選択します。

  7. 書き出しポップアップメニューで、「画像のみ」を選択します。

  8. 「保存」をクリックします。

    注意:

    書き出し処理を実行しないで設定をすべて取り消すには、線で囲まれている書き出し領域の外側をダブルクリックするか、Esc キーを押すか、他のツールを選択します。

HTML の書き出し

別のファイル形式を指定しない限り、スライスした Fireworks ドキュメントを書き出すと、HTML ファイルとその画像が書き出されます。HTML の書き出し方法を定義するには、HTML の設定ダイアログボックスを使用します。

Fireworks では、ほとんどの Web ブラウザーや HTML エディターで読み込める純粋な HTML が生成されます。初期設定では、書き出しに UTF-8 エンコーディングが指定されます。

Fireworks HTML を書き出すには、様々な方法があります。

  • HTML ファイルを書き出します。このファイルは、後から HTML エディターで開いて編集できます。

  • Fireworks ファイル内の各ページを、別個の HTML ファイルに書き出します。

  • HTML コードを Fireworks でクリップボードにコピーしてから、そのコードを既存の HTML ドキュメントに直接ペーストします。

  • HTML ファイルを書き出し、そのファイルを HTML エディターで開き、ファイル内のコードセクションを手動でコピーして、別の HTML ドキュメントにペーストします。

  • HTML を Cascading Style Sheet(CSS)レイヤーと XHTML として書き出します。

  • 「HTML の更新」コマンドを使用して、以前に作成した HTML ファイルに変更を加えます。

    Fireworks では、HTML を Generic、Dreamweaver、Microsoft® FrontPage®、Adobe GoLive® の各形式で書き出すことができます。

    注意:Adobe Dreamweaver は、Fireworks と緊密に統合することができます。Fireworks では、Dreamweaver への HTML の書き出しを、他の HTML エディターに書き出す場合とは異なる方法で処理します。Fireworks の HTML を Dreamweaver に書き出す方法については、Dreamweaver の使用を参照してください。

    チーム環境で作業している場合は、Fireworks HTML を他のアプリケーションに書き出す方法が適しています。この方法では、ワークフローを個々の要素に分割できるようになるので、最初の担当者があるアプリケーションで行った作業を、後から他の担当者が別のアプリケーションで引き継ぐことができます。

書き出す HTML へのコメントの追加

Fireworks HTML のコメントは <!-- で始まり、--> で終わります。この 2 つのタグの間にあるものは、HTML コードや JavaScript コードとして解釈されません。

  1. 書き出しを実行する前に、HTML の設定ダイアログボックスの「一般」タブで「HTML コメントを含める」オプションをオンにします。

書き出しの結果

Fireworks から HTML を書き出しまたはコピーすると、次のものが生成されます。

  • スライスされた画像を再構成するのに必要な HTML コード。さらに、ドキュメントにインタラクティブな要素が含まれている場合は JavaScript コードが生成されます。Fireworks で生成される HTML には、書き出し画像に対するリンクが含まれています。また、Fireworks の HTML では、Web ページの背景カラーがカンバスカラーに設定されます。

  • 1 つまたは複数の画像ファイル。ファイルの数は、ドキュメント内のスライスの数、ボタンに設定した状態の数によって異なります。

  • spacer.gif(必要な場合)。これは、スライス画像を HTML テーブルで再構成する際に間隔を調整するために Fireworks で使われる、透明な 1 ピクセル四方の GIF ファイルです。このファイルを書き出すかどうかを選択することもできます。

  • ポップアップメニューを書き出した場合、mm_css_menu.js および CSS ポップアップメニューのコードが含まれる .css ファイル。ポップアップメニューにサブメニューが含まれている場合は、arrows.gif ファイルも書き出されます。

  • HTML を Dreamweaver に書き出すか、またはコピーする場合、デザインノート。これはFireworks と Dreamweaver の統合を容易にするファイルです。デザインノートファイルの拡張子は .mno です。

Fireworks HTML の書き出し

  1. ファイル/書き出しを選択します。

  2. ハードディスク上の書き出し先フォルダーを指定します。

  3. 書き出しポップアップメニューから「HTML と画像」を選択します。

  4. 「オプション」ボタンをクリックし、HTML の設定ダイアログボックスの「一般」タブで HTML スタイルポップアップメニューから HTML エディターを選択します。使用する HTML エディターが一覧に表示されない場合は、「Generic」を選択します。

    注意:

    HTML スタイルとして HTML エディターを選択し、ボタンやロールオーバーなどのインタラクティブな要素が、HTML エディターに読み込んだときに正しく機能するようにすることが重要です。

  5. 「OK」をクリックします。

  6. HTML ポップアップメニューで「HTML ファイルの書き出し」を選択します。

  7. ドキュメントにスライスが含まれている場合は、スライスポップアップメニューから「スライスの書き出し」を選択します。

  8. 画像を別のフォルダーに保存するには、「サブフォルダーに画像を置く」を選択します。特定のフォルダーを選択するか、Fireworks の初期設定の画像フォルダーを使用します。

  9. 複数ページの Fireworks ドキュメントを書き出す場合は、「現在のページのみ」チェックボックスの選択を解除して、すべてのページを個別の HTML ドキュメントに書き出します。

  10. 「保存」をクリックします。

    書き出しが終了すると、Fireworks から書き出されたファイルがハードディスク上に保存されます。書き出しダイアログボックスで指定した場所に、画像ファイルと HTML ファイルが作成されます。

クリップボードへの HTML コードのコピー

Fireworks で HTML コードをクリップボードにコピーするには、「HTML コードをコピー」コマンドを使用する方法と、書き出しダイアログボックスのオプションとして「クリップボードにコピー」を選択する方法があります。その後で、コピーした HTML を HTML エディターでドキュメントにペーストします。

Fireworks HTML を他のアプリケーションにペーストする方法を決めるときは、HTML コードをクリップボードにコピーする方法には次の短所があることを考慮します。

  • 画像をサブフォルダーに保存することはできません。画像は、コピーした HTML のペースト先の HTML ファイルと同じフォルダー内に格納しなければなりません。ただし、HTML を Dreamweaver にコピーする場合は例外です。

  • Fireworks のポップアップメニューで使用されているリンクやパスは、ハードディスクにマップされます。ただし、HTML を Dreamweaver にコピーする場合は例外です。

  • Dreamweaver や Microsoft FrontPage 以外の HTML エディターを使用している場合、ボタン、ビヘイビアー、ロールオーバー画像に関連する JavaScript コードはコピーされますが、正しく機能しない可能性があります。

    これらの点から問題が発生する場合は、HTML をクリップボードにコピーする方法の代わりに「HTML の書き出し」オプションを使用してください。

    注意:HTML コードをコピーする前に、適切な HTML スタイルを選択していること、HTML の設定ダイアログボックスの「一般」タブで「HTML コメントを含める」がオンになっていることを確認してください。

「HTML コードをコピー」オプションを使用した Fireworks HTML のコピー

  1. 編集/HTML コードをコピーを選択します。

  2. ウィザードの指示に従います。プロンプトが表示されたら、画像の書き出し先のフォルダーを指定します。この書き出し先には、後で HTML ファイルを保存する場所を指定する必要があります。

    注意:

    ただし、HTML コードを Dreamweaver にペーストする場合、画像の書き出し先は、コードをペーストする HTML ファイルと同じ Dreamweaver サイト内であれば、自由に指定できます。

書き出しダイアログボックスを使用した Fireworks の HTML のコピー

  1. ファイル/書き出しを選択します。

  2. 書き出しダイアログボックスで、画像の書き出し先のフォルダーを指定します。この書き出し先には、後で HTML ファイルを保存する場所を指定する必要があります。

    注意:

    ただし、HTML コードを Dreamweaver にペーストする場合、画像の書き出し先は、コードをペーストする HTML ファイルと同じ Dreamweaver サイト内であれば、自由に指定できます。

  3. 書き出しポップアップメニューから「HTML と画像」を選択します。

  4. HTML ポップアップメニューから「クリップボードにコピー」を選択します。

  5. ドキュメントにスライスが含まれている場合は、スライスポップアップメニューから「スライスの書き出し」を選択します。

  6. 「オプション」ボタンをクリックし、HTML の設定ダイアログボックスで HTML エディターを選択して、「OK」をクリックします。

  7. 「保存」をクリックします。

Fireworks からコピーした HTML の HTML ドキュメントへのペースト

  1. HTML エディターで、既存の HTML ドキュメントを開くか、新規の HTML ドキュメントを作成します。画像の書き出し先と同じ場所にドキュメントを保存します。

    注意:

    ただし、Dreamweaver を使用する場合は、画像の書き出し先と同じ場所に HTML ファイルを保存する必要はありません。画像を Fireworks から Dreamweaver サイトに書き出し、そのサイト内のどこかに HTML ファイルを保存していれば、関連する各画像へのパスが Dreamweaver で自動的に解決されます。

  2. HTML コードを表示し、<BODY> タグの間に挿入ポイントを置きます。

    注意:

    Fireworks からコピーされた HTML コードには、<HTML> タグと <BODY> タグは含まれていません。

  3. HTML コードをペーストします。

    可能であれば、クリップボードにコピーするときに、Web サイトで実際に置かれる場所に画像を書き出すことをお勧めします。Fireworks ではドキュメントに対する相対パスの URL が使用されるので、HTML や画像を移動すると、URL リンクが壊れてしまいます。

書き出した Fireworks ファイルからのコードのコピーと別の HTML ドキュメントへのペースト

  1. 書き出した Fireworks HTML ファイルを HTML エディターで開きます。

  2. 必要なコードをハイライトして選択し、クリップボードにコピーします。

  3. 既存の HTML ドキュメントを開くか、新規の HTML ドキュメントを作成します。

  4. コードを新しい HTML ファイルにペーストします。<HTML> タグと <BODY> タグは既にコピー先の HTML ドキュメントにあるので、コピーする必要はありません。

    Fireworks の HTML の設定ダイアログボックスで「HTML コメントを含める」チェックボックスをオンにしている場合は、コメント内の説明に従って、適切な場所にコードをコピー&ペーストします。

  5. Fireworks ドキュメントにインタラクティブな要素が含まれる場合は、JavaScript コードをコピーします。

    JavaScript コードは、<SCRIPT> タグで囲まれ、ドキュメントの <HEAD> セクション内に配置されます。ペースト先のドキュメントに既に <SCRIPT> セクションがある場合を除き、<SCRIPT> セクション全体をコピー&ペーストします。既存の <SCRIPT> セクションがある場合は、そのセクションの内容を上書きしないように注意しながら <SCRIPT> セクションの内容だけを既存のセクションにコピー&ペーストします。また、コードをペーストした後で、<SCRIPT> セクション内で JavaScript 関数が重複していないことを確認してください。

書き出した HTML の更新

更新を行うと、以前に書き出した Fireworks HTML ドキュメントを変更できます。この機能は、ドキュメントの一部だけを更新したい場合に便利です。

注意:

Dreamweaver ドキュメントを使用して「HTML を更新」コマンドを実行すると、他の HTML ドキュメントを使用した場合とは異なる機能が実行されます。詳しくは、Dreamweaver の使用を参照してください。

更新を行うときには、変更された画像だけを置き換えるように指定できるほか、すべてのコードと画像を上書きするように指定することもできます。変更された画像だけを置き換えるように指定した場合、Fireworks を使用せずに HTML に加えた変更はすべて保持されます。

注意:

ドキュメントのレイアウトを大幅に変更する場合は、Fireworks で変更を加え、その HTML ファイルをもう一度書き出してください。

  1. ファイル/HTML を更新を選択します。

  2. 更新するファイルを選択します。

  3. 「開く」をクリックします。

  4. 次のいずれかの操作を行います。

    • Fireworks で生成した HTML が見つからない場合には、「OK」をクリックすると、新規 HTML がドキュメントの末尾に挿入されます。

    • Fireworks で生成した HTML が見つかった場合、次のいずれかを選択して、「OK」をクリックします。

      画像と関連 HTML を置換

      旧バージョンの Fireworks HTML が置き換わります。

      画像のみ更新

      画像のみが上書きされます。

  5. 画像フォルダーを選択ダイアログボックスが表示された場合は、フォルダーを選択して「開く」をクリックします。

CSS レイヤーの書き出し

CSS レイヤーは重ねて表示することができます。Fireworks では、通常の HTML を重ねて表示することはできません。

  1. ファイル/書き出しを選択します。

  2. ファイル名を入力し、書き出し先のフォルダーを選択します。

  3. 書き出しポップアップメニューから「CSS と画像」を選択します。

    • 現在のステートのみ書き出すには、「現在のステートのみ」を選択します。

    • 現在のページのみ書き出すには、「現在のページのみ」を選択します。

    • 画像用フォルダーを選択するには、「サブフォルダーに画像を置く」を選択します。

  4. 「オプション」をクリックして、HTML ページのプロパティを設定します。

  5. 「参照」をクリックして、背景画像を指定し、背景画像の並べ方を設定します。

    • 画像を 1 回だけ表示する場合は、「no-repeat」を選択します。

    • 画像を垂直方向と水平方向で繰り返す(並べる)場合は、「repeat」を選択します。

    • 画像を水平方向に並べる場合は、「repeat-x」を選択します。

    • 画像を垂直方向に並べる場合は、「repeat-y」を選択します。

  6. ブラウザーでのページの配置(left、center、right)を選択します。

  7. 「OK」をクリックしてから、「保存」をクリックします。

XHTML の書き出し

XHTML は、Web ページの書式設定と表示の現在の標準である HTML と、XML(eXtensible Markup Language)を融合させたものです。XHTML は、現在使われているほとんどの Web ブラウザーで表示可能であるという下位互換性を備えているだけでなく、PDA、携帯電話、他のハンドヘルドデバイスなど、XML コンテンツを表示するあらゆるデバイスで読み取ることもできます。

Fireworks は、XHTML を読み込むこともできます。HTML ファイルからの Fireworks PNG ファイルの作成を参照してください。

XHTML について詳しくは、World Wide Web Consortium(W3C)の XHTML 仕様(www.w3.org)を参照してください。

  1. ファイル/HTML の設定を選択し、「一般」タブの HTML スタイルポップアップメニューから XHTML スタイルを選択して「OK」をクリックします。

  2. HTML の書き出しまたはコピーを実行する方法のいずれかを使用して、ドキュメントを書き出します。HTML の書き出しを参照してください。

    注意:

    Fireworks で XHTML を書き出すときには、UTF-8 エンコーディングが使用されます。

UTF-8 エンコーディングを使用した(または使用しない)ファイルの書き出し

UTF-8(Universal Character Set Transformation Format-8)は、Web ブラウザーで同一の HTML ページ上に複数の異なるキャラクタセット(中国語と英語など)を表示することを可能にするテキストエンコーディング方式です。UTF-8 エンコーディングは初期設定でオンになっています。

また、UTF-8 エンコーディングを使用しているドキュメントを読み込むこともできます。HTML ファイルからの Fireworks PNG ファイルの作成を参照してください。

UTF-8 エンコーディングを使用しないドキュメントの書き出し

  1. ファイル/HTML の設定を選択します。

  2. 「ドキュメントの詳細」タブで、「UTF-8 エンコーディング」チェックボックスをオフにし、「OK」をクリックします。

  3. HTML の書き出しまたはコピーを実行する方法のいずれかを使用して、ドキュメントを書き出します。

HTML 書き出しオプションの設定

HTML の設定ダイアログボックスでは、HTML ファイルをどのように書き出すかを設定できます。「ドキュメントの詳細」タブでの変更内容は、現在のドキュメントだけに適用されます。「一般」および「テーブル」の設定は、全体に影響する環境設定であり、新規のドキュメントすべてに適用されます。

  1. 次のいずれかの操作を行います。

    • ファイル/HTML の設定を選択します。

    • 書き出しダイアログボックスで「オプション」ボタンをクリックします。

  2. 「一般」タブで任意のオプションを選択します。

    HTML スタイル

    書き出す HTML のスタイルを選択します。

    Generic HTML は、どの HTML エディターでも使用できます。ただし、ドキュメントにビヘイビアーや他のインタラクティブな内容が含まれている場合は、一覧に表示された特定のエディターを選択してください。

    XHTML 標準を使用してドキュメントを書き出す場合は、ポップアップメニューから適切な XHTML スタイルを選択します。

    拡張子

    ポップアップメニューからファイルの拡張子を選択するか、または新たに拡張子を入力します。

    HTML コメントを含める

    選択すると、コピー&ペーストする場所に関する HTML コメントが書き込まれます。ドキュメントにボタン、ビヘイビアー、ロールオーバー画像などのインタラクティブな要素が含まれている場合は、このオプションを選択することをお勧めします。

    小文字のファイル名

    選択すると、ファイルの書き出し時に HTML ファイルと関連する画像ファイルの名前が小文字になります。

    注意:拡張子ポップアップメニューで大文字の拡張子を選択した場合、このオプションを選択しても、HTML ファイルの拡張子は小文字になりません。

    ポップアップメニューに CSS を使用

    選択すると、ポップアップメニューのコードに JavaScript ではなく CSS が使用されます。Dreamweaver を使用して、メニューのインデックスを作成したり、コード内のリンクを更新したりできます。

    CSS を外部ファイルに書き込む

    選択すると、CSS コードが外部の .css ファイルに記述されます。このファイルは、HTML ファイルと同じ場所に書き出されます。.css ファイルの名前は、ファイル拡張子以外は HTML ファイルの名前と同じになります。また、このオプションを選択すると、mm_css_menu.js というファイルが HTML ファイルと同じ場所に書き出されます。

    注意:このオプションは、「ポップアップメニューに CSS を使用」オプションを選択した場合にのみ使用できます。

    ファイルクリエイター(Mac OS)

    ポップアップメニューから、関連付けるアプリケーションを選択します。ハードディスク上に書き出された HTML ファイルをダブルクリックすると、選択したアプリケーションで自動的にファイルが開かれます。

  3. 「テーブル」タブで、HTML テーブルの設定を選択します。詳しくは、HTML テーブルの書き出し方法の定義を参照してください。

  4. 「ドキュメントの詳細」タブで、次のオプションから選択します。

    スライスファイル名

    ポップアップメニューから、スライス名を自動生成するための設定を選択します。初期設定を使用できるほか、独自にオプションを選択できます。

    注意:最初の 3 つのメニューのいずれかに「なし」を選択すると、書き出されたスライスファイルが次々に上書きされ、最終的にグラフィックとテーブルが 1 つずつ書き出されます。書き出されたテーブルの各セルには書き出されたグラフィックが表示されます。

    デフォルトの ALT タグ

    Web からのダウンロード中にすべての画像の代わりに表示するほか、ダウンロードできない画像の代わりに表示するテキストを入力します。ブラウザーによっては、ポインターを画像上に置いたときにツールヒントとしても表示されます。これは、視覚障害を持つ Web ユーザーを支援する目的でも使用されます。

    複数のナビゲーションバーを含む HTML ページを書き出し(フレームセットなしで使用)

    複数のページをリンクするナビゲーションバーを書き出すときに選択します。Fireworks では、ナビゲーションバー内のボタンごとに個別のページが書き出されます。

    スライスオブジェクトのない領域も含める

    スライスがないカンバス領域を選択して含めます。

    UTF-8 エンコーディング

    初期設定で、オンになっています。書き出すドキュメントに複数のキャラクタセットの文字を表示できます。このオプションをオフにするには、チェックボックスの選択を解除します。

  5. これらの設定をグローバルな初期設定として保存するには、「デフォルトに設定」をクリックします.

Adobe PDF ファイルの書き出し

Fireworks のデザインをプリントしたり、レビューのために配布する必要がある場合は、Adobe PDF に書き出します。レビュー担当者は、Adobe Reader® または Acrobat® を使って、コメントを追加したり、他の関係者のコメントに回答したりできます。PDF のレビューの設定について詳しくは、Acrobat ヘルプを参照してください。

書き出される PDF ファイルではすべてのページおよびハイパーリンクが維持されるので、レビュー担当者は Web と同じようにページを移動できます。ただし、HTML のプロトタイプとは異なり、Adobe PDF には、レビュー担当者がデザインを編集したりコピーしたりできないようにするセキュリティ設定があります。

  1. ファイル/書き出しを選択します。

  2. 書き出しポップアップメニューから、「Adobe PDF」を選択します。

  3. 書き出すページを選択し、「書き出し後 PDF を表示」を選択して、PDF が Adobe Reader または Acrobat で自動的に開くようにします。

  4. PDF をカスタマイズするには、「オプション」をクリックし、次の設定を調整します。

    互換性

    書き出すファイルを開くことができる Adobe PDF アプリケーションを指定します。

    圧縮

    画像を圧縮してファイルサイズを縮小する方法を指定します。一般に、写真などのカラーグラデーションを含む画像に対しては、JPEG 圧縮および JPEG 2000 圧縮を使用すると高い圧縮率が得られます。単色の部分が大きい画像には ZIP が最適です。

    画質

    JPEG または JPEG2000 圧縮には、画質の設定があります。「最高」を選択すると、画質が高い大きいサイズのファイルが作成されます。

    グレースケールに変換

    すべての画像をグレースケールに変換し、ファイルサイズを小さくします。

    テキストの選択を有効にする

    レビュー担当者が、書き出されたファイルからテキストをコピーできるようにします。このオプションを選択解除すると、ファイルのサイズが小さくなります。

    裁ち落とし値

    各ページで画像を囲む空白の枠の幅をピクセル単位で指定します。例えば、値 20 を指定すると、各画像が 20 ピクセルの枠で囲まれます。

    ドキュメントを開くためのパスワードを使用

    書き出したファイルを開くときに、文書を開くパスワードを要求します。

    タスクを制限するためのパスワードを使用

    プリント、編集、コピーおよびコメントの入力のような、選択した機能を実行するときに、保護パスワードを要求します。

  5. 「OK」をクリックしてオプションダイアログボックスを閉じます。

  6. ファイル名と保存場所を指定して、「保存」ボタンをクリックします。

    注意:

    Fireworks ドキュメント内のページに透明なカンバスがある場合、PDF に書き出すと透明が適用されたオブジェクトは透明ではなくなります。これを防ぐには、PDF に書き出す前にカンバスの背景を透明以外に設定します。

ビデオ

Fireworks を使用してクライアントプルーフを PDF または HTML ファイルとして作成する(00:05:32)(英語)

Fireworks の書き出しメニューを使用して、顧客の承認やチームでのレビュー用に PDF または HTML ドキュメントを用意する方法について説明します。

出演:トム・グリーン

書き出した PDF ファイルを Adobe Acrobat または Adobe Reader で表示する場合は、次の設定を使用してください。

  1. Adobe Acrobat または Adobe Reader で編集/環境設定を選択します。

  2. 左パネルで「ページ表示」を選択します。

  3. 「カスタム解像度」を 72 ピクセル/インチに設定します。

  4. 「ズーム」を 100 %に設定します。

FXG ファイルの書き出し

FXG は、Flash Catalyst、Fireworks、Illustrator、Photoshop でサポートされているファイル形式です。FXG 書き出し機能を使用して、ベクトル画像とビットマップ画像が含まれているファイルを書き出すと、<filename.assets> という名前の個別のフォルダーが作成されます。フォルダーには、ファイルに関連付けられているビットマップ画像が格納されます。

関連付けられているファイルをこのフォルダーから削除すると、読み込み操作が失敗します。

注意:

FXG に対応するマッピングタグがない要素、フィルター、描画モード、グラデーションおよびマスクはビットマップ画像として書き出されます。

  1. ファイル/書き出しを選択して、ファイルの保存先に移動します。

  2. FXG ファイルのファイル名を入力します。

  3. 書き出しダイアログボックスで、書き出しメニューから「FXG と画像」を選択します。

  4. 「保存」をクリックします。

注意:

書き出した FXG ファイルを Flash Catalyst で開くと、Fireworks でカンバスの領域を超えるオブジェクトが完全に表示されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー