web-dev-qa-db-ja.com

Adobe Edge Reflow-コードの入手方法

リフローを使用してプロジェクトを構築しています。レイアウトを操作したり、ブレークポイントを設定したりできます。完成したページのコード(HTMLおよびCSS)を取得するにはどうすればよいですか?

オプションChromeでプレビューがあり、プレビューファイルを作成しますが、コードは完全ではなく、次のように表示されます:<!-- This code is only meant for previewing your Reflow design. -->

2
strah

現時点では、リフローからHTMLとCSSをエクスポートすることはできません。 Adobe Edge Reflow FAQ から:

Edge ReflowはHTMLエクスポート機能を提供しますか?

いいえ。ただし、WebブラウザーでHTMLデザインをプレビューし、エンドユーザー環境でレスポンシブな動作を体験できます。

また:

Edge Reflowは設計プロセス中にHTMLを作成しますが、このツールはデザイナーがレスポンシブデザインの意図を共有し、デザイナーまたは開発者がWebサイト制作プロセスの一部として使用するためにCSSを抽出できるようにすることに重点を置いています。

Edge Reflowは現時点ではプロトタイプ作成ツールであり、使いやすいHTMLエクスポートを提供するWYSIWYG Webデザインツールではありません。 Adobeは、Photoshopとハンドコーディングの橋渡しとして使用する予定です。

  1. Photoshopでアートアセットを作成します。
  2. 実際のブラウザレンダリングエンジンを使用して、Edge Reflowでデザインのモックアップを作成します。
  3. デザインを自分でコーディングしてください。必要に応じて、画面下部のリフローのナビゲーションバーで各コンテナをクリックしてCSSをコピーします。

Copying CSS in Adobe Edge Reflow

これは、現時点で得られるものとほぼ同じです。ただし、「プレビュー」アプリなので、初期の段階です。

2
Nick

から http://forums.Adobe.com/message/5259055

現在のリフロープロジェクトを保存(または名前を付けて保存)します。プロジェクトフォルダー内を移動し、「assets」サブフォルダーを見つけます。内部には、プロジェクトのすべてのHTML、CSS、およびJavaScriptコードがあります。

0