Fireworks と Dreamweaver の併用

Adobe Dreamweaver® と Fireworks では、リンク、画像マップ、テーブルスライスなどの変更を含め、互いの多くのファイル編集機能を認識し、共有することができます。Dreamweaver と Fireworks を同時に使用すると、HTML ページで合理的に Web グラフィックファイルの編集、最適化、配置ができるようになります。

Dreamweaver ファイルへの Fireworks 画像の配置

Fireworks JPEG ファイルを Dreamweaver に挿入すると、ファイルの画質が自動的に計算されます。一部のファイルでは、値は 79 になります。

注意:

これらの手順を使用する前に、HTML の設定ダイアログボックスで Dreamweaver が HTML のタイプとして選択されていることを確認してください。

ファイルパネルを使用した Dreamweaver への Fireworks 画像の挿入

  1. Fireworks から Dreamweaver で定義されているローカルサイトフォルダーに、画像を書き出します。

  2. Dreamweaver ドキュメントを開き、デザインビューになっていることを確認します。

  3. 画像をファイルパネルから Dreamweaver ドキュメントにドラッグします。

挿入メニューを使用した Dreamweaver への Fireworks 画像の挿入

  1. Dreamweaver ドキュメントウィンドウで、画像を表示する位置に挿入ポイントを置きます。

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

    • 挿入/イメージを選択します。

    • 「挿入」バーの「一般」カテゴリで、イメージポップアップメニューから「イメージ」を選択します。

  3. Fireworks から書き出された画像に移動し、「OK」をクリックします。

Dreamweaver のプレースホルダーからの新規 Fireworks ファイルの作成

イメージプレースホルダーを使用すると、最終的なアートワークを作成する前に様々な Web ページレイアウトをシミュレーションすることができます。また、イメージプレースホルダーを使用することで、後で Dreamweaver に配置する Fireworks 画像のサイズと位置を指定することもできます。

Dreamweaver のイメージプレースホルダーから Fireworks 画像を作成すると、選択されたプレースホルダーと同じサイズで新しい Fireworks ドキュメントが作成されます。

注意:

Fireworks に適用されたビヘイビアーはすべて保持され、Dreamweaver に書き戻されます。同様に、イメージプレースホルダーに適用された大半の Dreamweaver ビヘイビアーも、Fireworks の起動と編集中に保持されます。ただし、Dreamweaver のイメージプレースホルダーに適用されたジョイントロールオーバーを Fireworks で開いて編集した場合、そのビヘイビアーは保持されません。

Fireworks での作業を終了し Dreamweaver に戻ると、作成した新しい Fireworks のグラフィックが先ほど選択したイメージプレースホルダーと置き換わります。

  1. Dreamweaver で、目的の HTML ドキュメントを Dreamweaver サイトフォルダー内に保存します。

  2. ドキュメントの目的の位置に挿入ポイントを置き、次のいずれかの操作を行います。

    • 挿入/イメージオブジェクト/イメージプレースホルダーを選択します。

    • 「挿入」バーの「一般」カテゴリで、イメージポップアップメニューから「イメージプレースホルダー」を選択します。

  3. イメージプレースホルダーの名前、サイズ、色および代替テキストを入力します。

    Dreamweaver ドキュメントにイメージプレースホルダーが挿入されます。

    イメージプレースホルダー
    イメージプレースホルダー

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

    • イメージプレースホルダーを選択し、プロパティインスペクターで「作成」をクリックします。

    • Ctrl キー(Windows)または Command キー(Mac OS)を押しながら、イメージプレースホルダーをダブルクリックします。

    • イメージプレースホルダーを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して、イメージの作成 Fireworks を選択します。

      Fireworks が起動し、イメージプレースホルダーと同じサイズの空白のカンバスが表示されます。ドキュメントウィンドウの上部には、Dreamweaver から画像を編集していることを表すメッセージが表示されます。

  5. Fireworks で画像を作成し、「終了」をクリックします。

  6. ソースの PNG ファイルの名前と場所を指定します。

  7. 書き出す画像ファイルの名前を指定します。

    これらは Dreamweaver で表示される画像ファイルです。

  8. 書き出す画像ファイルを保存する場所を Dreamweaver サイトフォルダー内で指定し、「保存」をクリックします。

    Dreamweaver に戻ると、初めに選択したイメージプレースホルダーが新しい Fireworks 画像またはテーブルで置き換えられています。

    新しい Fireworks 画像で置き換えられたイメージプレースホルダー
    新しい Fireworks 画像で置き換えられたイメージプレースホルダー

Dreamweaver への Fireworks HTML コードの配置

Fireworks ファイルを Dreamweaver に書き出すには、まず、Fireworks からファイルを直接 Dreamweaver サイトフォルダーに書き出します。この結果、HTML ファイルと関連する画像ファイルが指定された場所に生成されます。次に、「Fireworks HTML の挿入」機能を使用して、Dreamweaver に HTML コードを配置します。

  1. Fireworks HTML ドキュメントを HTML 形式で書き出します。

  2. Dreamweaver で定義したサイトフォルダーにドキュメントを保存します。

  3. HTML を挿入するドキュメント上で、コードを配置したい位置に挿入ポイントを置きます。

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

    • 挿入/イメージオブジェクト/Fireworks HTML を選択します。

    • 「挿入」バーの「一般」カテゴリで、イメージポップアップメニューから「Fireworks HTML」を選択します。

  5. 表示されるダイアログボックスで「参照」ボタンをクリックして、目的の Fireworks の HTML ファイルを選択します。

  6. (オプション)「挿入後削除する」を選択すると、作業後に不要になった HTML ファイルがごみ箱に移動されるか(Windows)、完全に削除されます(Mac OS)。

    このオプションは、HTML ファイルに関連付けられているソース PNG ファイルには影響を与えません。

  7. 「OK」をクリックすると、関連する画像、スライスおよび JavaScript と共に、HTML コードが Dreamweaver ドキュメントに挿入されます。

Dreamweaver への Fireworks HTML コードのコピー

Fireworks HTML コードをクリップボードにコピーすると、Fireworks ドキュメントに関連するすべての HTML および JavaScript コードが Dreamweaver ドキュメントにコピーされ、画像が指定された場所に書き出されます。同時に、ドキュメントから画像への相対リンクを含む HTML コードが更新されます。

注意:

この方法は Dreamweaver だけに使用できます。他の HTML エディターには使用できません。

  1. Fireworks でクリップボードに HTML コードをコピーし、Dreamweaver ドキュメントにペーストします。

注意:

書き出された Fireworks HTML ファイルを Dreamweaver で開いてから、必要な部分だけを別の Dreamweaver ドキュメントにコピー&ペーストすることもできます。

Dreamweaver に書き出された Fireworks HTML の更新

注意:

ラウンドトリップ HTML は、Dreamweaver に書き出された HTML を操作するときに多くのメリットがあります。詳しくは、ラウンドトリップ HTML についてを参照してください。

  1. Fireworks で PNG ドキュメントを変更します。

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

  3. 更新する HTML が含まれた Dreamweaver ファイルを指定し、「開く」をクリックします。

  4. 更新された画像ファイルを配置するフォルダーに移動して、「開く」をクリックします。

    Dreamweaver ドキュメント内の HTML テーブルと JavaScript コードが更新されます。また、HTML に関連付けられている更新した画像が書き出され、指定されたフォルダーに画像が配置されます。

    注意:

    対応する HTML コードが Fireworks で見つからない場合、Dreamweaver ドキュメントに新しい HTML コードを挿入することもできます。新しい HTML がドキュメントに挿入されると、ドキュメントの先頭の新しいコードに JavaScript セクションが挿入され、ドキュメントの最後に HTML テーブルまたは画像へのリンクが配置されます。

Dreamweaver ライブラリへの Fireworks ファイルの書き出し

ライブラリ項目は、サイトルートフォルダーのライブラリという名前のフォルダーにある HTML ファイルの一部です。ライブラリ項目は、Dreamweaver のアセットパネルのカテゴリとして表示されます。Dreamweaver では、ライブラリ項目により、頻繁に使用する Web サイトのコンポーネントの編集と更新が簡単になります。ライブラリ項目(.lbi 拡張子のファイル)をアセットパネルから Web サイト内の任意のページにドラッグできます。

Fireworks で作成したライブラリ項目を Dreamweaver ドキュメント内で直接編集することはできません。編集できるのはマスターライブラリ項目だけです。その後、Dreamweaver で、Web サイトに配置されたその項目のすべてのコピーを更新できます。Dreamweaver のライブラリ項目は Fireworks シンボルによく似ています。マスターライブラリ(LBI)ドキュメントへの変更は、サイトにあるすべてのライブラリインスタンスに反映されます。

注意:

Dreamweaver のライブラリ項目は、ポップアップメニューをサポートしていません。

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

  2. 書き出しポップアップメニューから「Dreamweaver ライブラリ」を選択します。

    ファイルの場所として、Dreamweaver サイト内の Libraryというフォルダー名を選択するか、このフォルダーがない場合は新規に作成します。名前では大小文字が区別されます。

    注意:

    書き出したファイルはライブラリフォルダーに保存しない限り、Dreamweaver によってライブラリ項目として認識されません。

  3. ファイル名を入力します。

  4. (オプション)画像にスライスが含まれている場合は、スライスオプションを選択します。

  5. 別のフォルダーに画像を置く場合は、「サブフォルダーに画像を置く」を選択して、フォルダーを選択します。

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

Dreamweaver での Fireworks ファイルの編集

ラウンドトリップ HTML 機能によって、Fireworks と Dreamweaver が密接に統合されます。ラウンドトリップ HTML を使用すると、片方のアプリケーションで行った変更が、もう片方にもシームレスに反映されます。

ラウンドトリップ HTML について

変更されたリンク、編集された画像マップ、HTML スライス内で編集されたテキストと HTML、Fireworks と Dreamweaver の間で共有されるビヘイビアーなど、Dreamweaver でドキュメントに対して行われた編集の大半は、Fireworks でも認識し、保持することができます。Dreamweaver のプロパティインスペクターを利用して、Fireworks で生成された画像、テーブルスライス、およびドキュメント内のテーブルを確認できます。

Fireworks では、Dreamweaver による各種編集のほとんどがサポートされています。ただし、Dreamweaver でテーブルの構造を大幅に変更すると、2 つのアプリケーションの間に解決できない違いが生じる可能性があります。テーブルのレイアウトを大きく変更するときは、Dreamweaver の起動と編集機能を使用して Fireworks でテーブルを編集します。

注意:

Dreamweaver は Fireworks の技術を使用することで、外部の画像編集アプリケーションがなくても画像を修正できる基本的な画像編集機能を実現します。Dreamweaver の画像編集機能は、JPEG および GIF 画像ファイル形式にのみ適用されます。

Dreamweaver に配置した Fireworks 画像の編集

注意:

Dreamweaver で Fireworks のグラフィックを編集する前に、あらかじめしなければならない作業があります。詳しくは、起動と編集オプションの設定を参照してください。

  1. Dreamweaver でウィンドウ/プロパティを選択して、プロパティインスペクターを開きます。

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

    • 画像を選択します(プロパティインスペクターにより、選択部分が Fireworks 画像として認識され、この画像の PNG ソースファイル名が表示されます)。プロパティインスペクターで「編集」をクリックします。

    • Ctrl キー(Windows)または Command キー(Mac OS)を押しながら、編集する画像をダブルクリックします。

    • 画像を右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、ショートカットメニューから「エディターを指定して編集」を選択します。

  3. メッセージが表示された場合は、配置した画像に対応する Fireworks ソースファイルを検索するかどうかを指定します。

  4. Fireworks で画像を編集します。

    適用する編集内容は Dreamweaver で維持されます。

  5. 「終了」をクリックして、現在の最適化設定を使用して画像を書き出し、Dreamweaver で使用されている GIF ファイルまたは JPEG ファイルを更新し、ソースファイルを選択した場合は PNG のソースファイルを保存します。

    注意:

    Dreamweaver のサイトパネルから画像を開いた場合、Dreamweaver の環境設定で設定した、そのファイル形式の初期設定のエディターでファイルが開かれます。この場所から画像を開いた場合、元の PNG ファイルが開かれることはありません。Fireworks との統合機能を使用するには、Dreamweaver のドキュメントウィンドウから画像を開きます。

Dreamweaver に配置した Fireworks テーブルの編集

注意:

Dreamweaver から Fireworks のテーブルを編集する前に、あらかじめ行う必要のある起動と編集の作業があります。詳しくは、起動と編集オプションの設定を参照してください。

  1. Dreamweaver でウィンドウ/プロパティを選択して、プロパティインスペクターを開きます。

  2. 次のいずれかの操作を行い、ソース PNG ファイルをドキュメントウィンドウで開きます。

    • テーブルの内部をクリックして、ステータスバーの <table> タグをクリックし、テーブル全体を選択します(プロパティインスペクターにより、選択部分が Fireworks テーブルとして認識され、このテーブルの PNG ソースファイル名が表示されます)。プロパティインスペクターで「編集」をクリックします。

    • テーブルの画像を選択してから、プロパティインスペクターで「編集」をクリックします。

    • 画像を右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、ショートカットメニューから「エディターを指定して編集」を選択します。

  3. Fireworks で必要な編集を行います。

    Dreamweaver は、Fireworks で行ったテーブルへの編集内容をすべて認識し、保持します。

  4. テーブルの編集が完了したら、ドキュメントウィンドウで「完了」をクリックします。

    現在の最適化設定を使用して、テーブルに対応する HTML ファイルとスライスされた画像ファイルが書き出されます。その後、Dreamweaver に配置されたテーブルが更新され、PNG ソースファイルが保存されます。

    注意:

    Fireworks で生成されたオリジナルのテーブルの内部に別のテーブルを埋め込み、Dreamweaver でラウンドトリップ編集を使用してテーブルを編集しようとすると、Dreamweaver でエラーが発生する場合があります。詳しくは、Adobe の Web サイトで TechNote 19231 を参照してください。

Dreamweaver のサポートされているビヘイビアーとサポートされていないビヘイビアー

Dreamweaver ドキュメントにスライスされていない Fireworks ドキュメントを 1 つ挿入し、Dreamweaver ビヘイビアーを適用すると、Fireworks で開いて編集したときに、このグラフィックの上にスライスが 1 つ表示されます。初期状態では、このスライスは非表示になっています。これは、Dreamweaver ビヘイビアーが適用されたスライスされていないグラフィックを開いて編集すると、スライスが自動的にオフになるためです。スライスを表示するには、レイヤーパネルの「Web レイヤー」で表示オプションをオンにします。

Fireworks で、Dreamweaver のビヘイビアーが割り当てられたスライスのプロパティを表示すると、プロパティインスペクターの「リンク」テキストボックスに javascript:; と表示されることがあります。このテキストは削除しても問題ありません。必要に応じて URL で上書きし、その後 Dreamweaver に戻っても、ビヘイビアーは以前のままで何も変更されていません。

Dreamweaver からラウンドトリップ HTML を操作する場合、Fireworks は CFM や PHP などのサーバーサイドファイル形式をサポートしています。

Dreamweaver では、ロールオーバーやボタンで必要とされるビヘイビアーを含め、Fireworks に適用されたビヘイビアーがすべてサポートされます。

注意:

Dreamweaver のライブラリ項目は、ポップアップメニューをサポートしていません。

Fireworks では、起動と編集機能中に次の Dreamweaver のビヘイビアーがサポートされます。

  • シンプルロールオーバー

  • スワップ画像

  • スワップ画像を復元

  • ステータスバーテキストを設定

  • ナビゲーションバー画像を設定

  • ポップアップメニュー

注意:

Fireworks では、サーバーサイドビヘイビアーを含め、ネイティブ形式以外のビヘイビアーをサポートしていません。

Dreamweaver に配置された Fireworks の画像やアニメーションの最適化

Dreamweaver に配置された Fireworks 画像の最適化設定の変更

  1. Dreamweaver で画像を選択し、次のいずれかの操作を行います。

    • コマンド/イメージを最適化を選択します。

    • プロパティインスペクターで「最適化」ボタンをクリックします。

    • 画像を右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、ポップアップメニューから「最適化」を選択します。

  2. メッセージが表示された場合は、配置した画像に対応する Fireworks ソースファイルを開くかどうかを指定します。

  3. 書き出しのプレビューダイアログボックスで編集を行います。

    • 最適化設定を編集するには、「オプション」タブをクリックします。

    • 書き出された画像のサイズと領域を編集するには、「ファイル」タブをクリックします。Fireworks で画像のサイズを変更する場合、Dreamweaver に戻ってから、プロパティインスペクターで画像のサイズをリセットする必要もあります。

    • 画像のアニメーション設定を編集するには、「アニメーション」タブをクリックします。

  4. 画像の編集が終了したら「OK」をクリックして画像を書き出し、Dreamweaver で画像を更新し、PNG を保存します。

    画像の形式を変更した場合は、Dreamweaver のリンクチェッカーから、画像への参照を更新するよう求めるメッセージが表示されます。

アニメーション設定の変更

アニメーション GIF ファイルを開き、最適化する場合、アニメーションの設定も編集できます。書き出しのプレビューダイアログボックスのアニメーションオプションは、Fireworks のステートパネルのオプションと同様のものです。

注意:

Fireworks アニメーション内の個々のグラフィック要素を編集するには、Fireworks アニメーションを開いて編集する必要があります。

起動と編集オプションの設定

ラウンドトリップ HTML を効果的に使用するには、Fireworks を Dreamweaver のプライマリエディターに設定して、Fireworks で起動と編集の環境設定を行い、Dreamweaver でローカルサイトを定義しておくなど、あらかじめしておかなければならない作業があります。

Fireworks を Dreamweaver のプライマリエディターに設定

Dreamweaver では、特定の種類のファイルを編集する際に、対応する特定のアプリケーションが自動的に起動されるように設定できます。Fireworks の起動と編集機能を使用するには、Dreamweaver で、Fireworks が GIF、JPEG、PNG ファイルのプライマリエディターとして設定されていることを確認してください。

注意:

この環境設定は、Dreamweaver 内から Fireworks を起動できない場合にのみ必要です。

  1. Dreamweaver で編集/環境設定を選択し、「ファイルタイプ/エディター」を選択します。

  2. 「拡張子」リストで、Web 画像ファイル名拡張子(.gif、.jpg、.png)を選択します。

  3. 「エディター」リストで「Fireworks」を選択します。Fireworks がリストにない場合は、プラス記号(+)ボタンをクリックし、ハードディスクから Fireworks アプリケーションを探して、「開く」をクリックします。

    Dreamweaver の環境設定
    Dreamweaver の環境設定

  4. 「プライマリエディターに設定」をクリックします。

  5. その他の Web 画像ファイル拡張子についても手順 2 から 4 を繰り返して、Fireworks をプライマリエディターに設定します。

Fireworks ソースファイルの起動と編集の環境設定

Fireworks の起動と編集の環境設定では、別のアプリケーションから Fireworks ファイルを開くときに、ソース PNG ファイルをどのように扱うかを指定することができます。

Dreamweaver で Fireworks の起動と編集の環境設定が認識されるのは、Fireworks のテーブルの一部ではなく、ソース PNG ファイルへの正しいデザインノートパスが含まれない画像を開いて最適化している場合だけです。Fireworks 画像の起動と編集を含め、その他のすべての場合は、Dreamweaver により自動的にソース PNG ファイルが開かれます。また、ソースファイルが見つからない場合は、ソースファイルの場所を指定するダイアログボックスが表示されます。

  1. Fireworks で、編集/環境設定(Windows)または Fireworks/環境設定(Mac OS)を選択します。

  2. 「起動と編集」カテゴリをクリックし、オプションを設定します。

    詳しくは、起動と編集環境設定を参照してください。

デザインノートとソースファイルについて

保存されたソース PNG ファイルから Dreamweaver サイトに Fireworks ファイルを書き出すと、Fireworks によってこの PNG ファイルに関する情報がデザインノートに記述されます。Dreamweaver で Fireworks 画像を開いて編集する場合、このファイルのソース PNG を探すためにデザインノートが使用されます。スムーズに作業を進めるため、Fireworks のソース PNG ファイルと書き出されたファイルを Dreamweaver サイトに必ず保存してください。こうすることにより、サイトを共有するすべてのユーザーが Dreamweaver から Fireworks を起動するときに、必ずソース PNG が検索されます。

ファイル管理ボタンを使用したサイトのファイルの移動

ドキュメントウィンドウの上部にあるファイル管理ボタンを使用して、ファイル移動コマンドに簡単にアクセスできます。このボタンは、ドキュメントが Dreamweaver サイトフォルダー内にある場合、およびサイトからリモートサーバーにアクセスできる場合に使用できます。Fireworks でフォルダーをサイトとして認識するには、Dreamweaver のサイトの管理ダイアログボックスを使用して、ターゲットフォルダー(コンテナフォルダー)をサイトのローカルルートフォルダーとして定義します。

注意:

Fireworks のチェックインオプションとチェックアウトオプションを使用する前に、ドキュメントがある Dreamweaver サイトに対して「ファイルのチェックイン/チェックアウト」オプションを選択してください。

取得

ファイルのリモートバージョンをローカルサイトにコピーし、そのリモートコピーでローカルファイルを上書きします。

チェックアウト

ファイルをチェックアウトし、ローカルファイルをリモートコピーで上書きします。

配置

ファイルのローカルバージョンをリモートサイトにコピーし、そのローカルコピーでリモートファイルを上書きします。

チェックイン

ローカルファイルをチェックインし、リモートファイルをローカルコピーで上書きします。

チェックアウトの取り消し

ローカルファイルのチェックアウトを取り消してチェックインし、ローカルファイルをリモートコピーで上書きします。

注意:

ファイル管理コマンドは、ドキュメントが Dreamweaver でリモートサーバーが定義されたサイトフォルダー内に存在する場合にのみ有効になります。各ファイル管理コマンドは、ローカル/ネットワークおよび FTP 転送メソッドを使用するサイト内のファイルに対してのみ使用できます。ただし、SFTP または SourceSafe、WebDAV、RDS など、サードパーティの転送メソッドを使用するサイト内のファイルは、Fireworks とリモートサーバー間で転送することはできません。

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

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