5

複雑な表ベースのレイアウトと、重複して無駄なタグが多数ある HTML ページがあるとします。たとえば、次のようになります。

td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.

ページをよりコンパクトな形式にリファクタリングするタスクを支援するツールはありますか? たとえば、CSS スタイルとセレクターを自動的に生成するツールはありますか? それはテーブルを div レイアウトに変換しますか?

問題の順序を理解するために、私が見ているページは 8000 行を超える HTML と JavaScript であり、画像を除いて 500Kb にもなります!

更新：再。「あきらめてゼロから始める」コメント。現実の世界では、それはどういう意味ですか？ページを印刷してスキャンし、Dreamweaver で背景画像として設定し、それから始めますか? 真剣に？それは本当にリファクタリングよりも効率的でしょうか?

更新: 私は「ゼロからトレースする」ことを中傷しているわけではありませんし、Dreamweaver が私の選択したツールであるとほのめかしているわけでもありません。レイアウトのリファクタリングが難しい問題だと考えられていることに、私は非常に驚いています。

4

7 に答える 7

2

自動化されたツールがこれを行うのに苦労するだろうという点で、私はTimBに同意します。

表形式のデータを表示する場合は、インライン CSS を再利用可能なクラスにリファクタリングすることを試みるのが合理的かもしれません。

インライン スタイルを持つ同様のテーブルが多数ある場合は、単純な検索と置換によって CSS を徐々にリファクタリングできます。これにより、類似したテーブルのサブセットに一致する多くのクラスと、多少類似したクラスが多数提供されます。これをレイアウトとプレゼンテーションに分割することは良い出発点であり、次にこれらを各テーマまたは意味的に関連するアイテムの特定のクラスでオーバーライドします。

ゼロから始めることをお勧めしますが、おそらくより速くなり、ページを表示するために必要なものだけを再作成でき、要素または要素のコレクションを後で再利用できます。

ページを再度変更する必要が生じた場合にも、費やされた時間は大幅に報われます。

しかし、それはまったくありそうにないですよね？:D

于 2008-09-30T02:49:04.860 に答える
2

私は特定のツールを認識していません。CSS 作業を行っている人なら誰でも知っておくべきcaffeine とFirebugの一般的なツールだけです。

この問題は十分に難しく、自動化されたツールは、保守しやすい優れたマークアップと CSS を作成するのに苦労していると思います。

于 2008-09-30T01:57:30.693 に答える
2

古いテーブルベースのレイアウトを CSS 標準にリファクタリングする、より自動化された手段を探しているようです。ただし、「ゼロから始める」という他のコメントのいくつかには同意します。

これが意味することは、HTML テーブルを使用して達成された外観を (CSS を使用して) 再構築する必要があるということです。この概念が理解できない場合は、いくつかの初心者の CSS チュートリアル、おそらく Table->CSS レイアウトの概念を教えることに焦点を当てたものでさえ、Google をお勧めします..

考慮すべきもう 1 つのツール (さらに役立つ可能性があります) は、ある種の CSS "フレームワーク" です。これにはBlueprint CSSをお勧めします。最小限の労力でグリッド/テーブルのようなレイアウトを作成できるからです。もう 1 つの優れた例は、Yet-Another-Multicolumn-Layoutです。これには、非常にきちんとした複数列レイアウト ビルダーがあります。

于 2008-09-30T02:15:24.800 に答える
1

Dreamweaver などの選択したツールに投げ込んでスライスするだけではありません。純粋にセマンティックなスタイルで HTML を最初に記述します。たとえば、非常に一般的なレイアウトは次のようになります。

<body>
  <div id="header">
    <img id="logo"/>
    <h1 id="title">
      My Site
    </h1>
    <div id="subtitle">Playing with css</div>
  </div>
  <div id="content">
    <h2>Page 1</h2>
    <p>Blah blah blah..</p>
  </div>
  <div id="menu">
    <ul>
      <li><a>Some link</a></li>
      ...
    </ul>
  </div>
</body>

コンテンツに適した方法で HTML を作成します。CSS がまったくない場合でも使用できるはずです。その後、CSS を追加して、目的の外観にします。現在のブラウザー/CSS の状態では、HTML にいくつかのデコレーターを追加する必要があるかもしれません。

ただし、完了すると、CSS で簡単に変更できる非常に柔軟なレイアウトが作成され、身体障害者と検索エンジンの両方がアクセスできるページが作成されます。

コツをつかむまでにはかなりの学習が必要ですが、それだけの価値はあります。あきらめてテーブルベースのレイアウトに戻りたいという誘惑に負けず、ただやり遂げてください。セマンティック HTML と CSS ですべてを実行できます。

于 2008-09-30T02:31:02.830 に答える
0

あなたの質問ではこのアプローチを否定していますが、レンダリングが最も好きなブラウザーでページのスクリーンショットを撮り、それを参照として宣言し、再作成を試みることをお勧めします。思ったより簡単です。汚い古いテーブルベースのレイアウトを採用し、それらを最新の技術で作成された CMS テンプレートに変換する必要がありましたが、それほど悪い仕事ではありません.

于 2008-09-30T02:06:25.697 に答える
0

私は現在、同様の問題に取り組んでいます。これは、これが聞こえるほど面倒ではありませんが、非常に悪いasp.net Webフォーム、誇張されたビューステート、およびデータベースからの検索結果をフォーマットする深くネストされたサーバーコントロールの製品です。結果として、50 DB 行のマークアップが 300 ～ 400K になります。

それをリファクタリングするのに中途半端な合理的な仕事をする自動化ツールは見つけられませんでした。

コードを一貫した方法で再フォーマットするために使用できる Visual Studio のようなツールから始めると役立ちます。次に、正規表現と四角形の選択の組み合わせを使用して、ジャンクを取り除き、冗長なマークアップを取り除き、重要なものとそうでないものを整理し始めてから、提示する効率的なパターンを手動で定義し始めることができます。情報。

秘訣は、扱いやすいチャンクに分割し、そこから構築することです。

書式設定する実際の「表形式のデータ」が多数あり、一度だけ使用する場合は、Excel が私の救世主であることが何度かわかりました。データをシートに貼り付けてから、連結と塗りつぶしの組み合わせを使用します。表形式データのマークアップを生成します。

于 2008-09-30T03:13:25.443 に答える
0

ゼロから始めるということは、設計図に戻ることを意味します。そのような怪物をリファクタリングする必要がある場合は、それを改善するために費やすすべての時間を考慮して、完全な再設計を行った方がよいでしょう。

重複した無駄なタグから逃れたい場合は、Dreamewaver をエスケープする必要があります。優れたテキスト エディタ (jedit、emacs、vim、Eclipse など) があれば十分です。エディターを適切にカスタマイズすれば、Dreamweaver を見逃すことさえありません。(nXhtml と yasnippets を備えた Emacs が私のお気に入りです。)

于 2008-09-30T03:13:38.670 に答える