Question

鉴于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布局？

为了了解问题的顺序，我正在查看的页面是＆gt; 8000行HTML和JavaScript，即500Kb 不计算图像！

更新：重新。 “放弃并从头开始”评论。在现实世界中，这意味着什么？打印页面，扫描它，在Dreamweaver中将其设置为背景图像，然后从那开始？真的吗？这真的比重构更有效吗？

更新：我不是在诋毁“从头开始追踪”，也不是说暗示Dreamweaver绝对是我选择的工具。我很惊讶重构布局被认为是一个棘手的问题。

Answer 1

我不知道具体的工具，只有咖啡因和Firebug的通用工具，任何从事CSS工作的人都应该知道。

我认为问题非常严重，自动化工具很难产生良好的，可维护的标记和CSS。

Answer 2

好像您正在寻找更加自动化的方法，将旧的基于表格的布局重新分解为CSS标准。但是，我同意其他一些“从头开始”的评论。

这对您意味着您应该尝试使用HTML表重建（使用CSS）外观。如果这个概念逃脱了你，那么我会建议谷歌搜索一些初学CSS教程，甚至可能一些专注于教授表格＆gt; CSS布局的概念..

另一个需要考虑的工具（可能会进一步帮助你）将是某种CSS“框架”。我为此推荐Blueprint CSS，因为它有助于以最小的努力创建网格/表格式布局。另一个好的是Yet-Another-Multicolumn-Layout，它有一个非常整洁的multi-column layout builder。

Answer 3

我同意TimB，因为自动化工具在执行此操作时会遇到麻烦，特别是使关系跳转能够以最有效的方式组合和抽象CSS。

如果您要呈现表格数据，可能可以合理地尝试将内联CSS重构为可重用的类。

如果你有很多类似的内联样式表，你可以通过简单的搜索和替换逐步重构CSS。这将为您提供许多类，这些类匹配类似表的子集和许多类似的类。将其分解为布局和演示将是一个良好的开端，然后用每个主题或语义相关项的特定类来覆盖它们。

我仍然建议从头开始，它可能会更快，并且您只能重新创建展示页面所需的内容，并且可以在以后重复使用元素或元素集合

如果需要再次修改页面，花费的时间也将支付显着。

但根本不是可能是吗？：d

Answer 4

不要只是将它扔在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中添加一些装饰器 - 例如，将一些东西包装在额外的div中，只是为了能够以你想要的方式获取内容。

一旦完成，您将拥有一个非常灵活的布局，可以使用CSS轻松修改，并且您将拥有一个可供残疾人和搜索引擎访问的页面。

在获得它的诀窍之前确实需要相当多的学习，但这是值得的。抵制放弃的诱惑，回到基于表格的布局，然后继续努力。一切都可以使用语义HTML和CSS完成。

Answer 5

你在你的问题中诋毁了这种方法，但我建议你在浏览器中截取你的页面的屏幕截图，你最喜欢它的渲染，声明它是你的参考，并开始尝试重新创建它。它比你想象的容易。我不得不采用基于表格的旧式布局，并将它们转换为使用现代技术完成的CMS模板，这并不是一件坏事。

Answer 6

我现在正在处理类似的问题，不像听起来那么混乱，但是asp.net网页形式非常糟糕，视图状态过于夸张，以及从数据库格式化搜索结果的深层嵌套服务器控件的产物。导致50个DB行的标记为~300 - 400K - yeek。

我还没有找到任何自动化工具来完成重构的合理工作。

从像visual studio这样的工具开始，您可以使用该工具以一致的方式重新格式化代码。然后，您可以使用正则表达式和矩形选择的组合来开始清除垃圾，并剥离冗余标记，开始排除重要和不重要的内容，然后手动开始定义一个有效的模式来呈现信息。

诀窍是打破可管理的块，然后从那里构建它。

如果你有很多实际的“表格数据”来格式化，并且只是一次性的，我发现excel在几次成为我的救世主，将数据粘贴到表格中，然后使用组合连接和填充以生成表格数据的标记。

Answer 7

从头开始意味着回到设计绘图板。如果你需要重构这样的怪物，那么你总是会把它做得更好，你也可以完全重新设计。

如果你想摆脱重复和浪费的标签，你需要逃离Dreamewaver。一个好的文本编辑器（jedit，emacs，vim，eclipse等）就是你真正需要的。如果您正确地自定义编辑器，您甚至不会错过Dreamweaver。（带有nXhtml和yasnippets的Emacs是我最喜欢的。）

用于将基于表格的HTML布局重构为CSS的工具？

7 个答案: