0

Web UI の操作は初めてです。コードを取得し、結果の HTML 5 と CSS 3 を多数の JavaScript で生成する複雑なセットアップがあります。デザイナーと協力してレイアウトを微調整できるように、UI をいくつかのワークフロー (理解できない JavaScript DOM の変更を開始する) で取得した後、結果の HTML/CSS をキャプチャできるようにする必要があります。そして、変更するために開発者に還元します。

これを行う方法はありますか？Firebug から HTML をコピーすることはできましたが、まだサーバー上の CSS への参照があり、CSS をダウンロードして HTML をローカルで参照するように更新する簡単な方法はありませんでした。

ありがとう！

4

1 に答える 1

1

次のページは、コピーした HTML を firefox または chrome を使用してボックスに貼り付けると、ダウンロード リンクが作成されます。

<html>

<b>Select All, Copy, and paste below to download the full copied HTML</b>

<div id=drop contentEditable 
  style="padding: 1em; height: 30em; background:#bbb;overflow:hidden; ">
</div>

<a id=out download=copied.html style=display:none> Download </a>

<script>

var out=document.getElementById("out"), 
   drop=document.getElementById("drop");


drop.onpaste=function doPaste(){
    setTimeout(function(){
        out.href="data:x-application/html,"+
          escape(drop.innerHTML);
        drop.style.display="none";
        out.style.display="block";
    }, 50);
};

</script>
</html>

あなたのサイトで使用するために、

  1. ページを変更するための操作を行ってから、ページの背景の空白の領域をクリックし、[CTRL]+[A] (win) または [CMD]+[A] (mac) を押します。
  2. 右クリックまたはキーボードを使用してコピーする
  3. 上記のファイルのボックスに貼り付けます
  4. 「ダウンロード」をクリックして、結果のhtmlファイルをダウンロードします。

それは小さなファイルなので、試してみることができるようにオンラインでコピーを投げました。このページではかなりうまく機能します。

スタイル情報はスタイル属性に変換されるため、css ファイルは必要ありませんが、同時に、適用されたスタイルのファイル名がないため、デザイナーによっては必要になる場合があります...

于 2013-04-30T00:25:58.610 に答える