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

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

我认为这个问题非常困难，以至于自动化工具很难生成好的、可维护的标记和 CSS。

于 2008-09-30T01:57:30.693 回答
2

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

这对您意味着您应该尝试重建（使用 CSS）使用 HTML 表格实现的外观。如果这个概念让你无法理解，那么我建议你在谷歌上搜索一些 CSS 初学者教程，甚至可能专注于教授 Table->CSS 布局的概念。

另一个需要考虑的工具（可能会进一步帮助您）是某种 CSS“框架”。我为此推荐Blueprint CSS，因为它有助于以最小的努力创建类似网格/表格的布局。另一个不错的是Yet-Another-Multicolumn-Layout，它有一个非常简洁的多列布局构建器。

于 2008-09-30T02:15:24.800 回答
2

我同意TimB的观点，因为自动化工具在执行此操作时会遇到麻烦，尤其是通过关系跳转以最有效的方式组合和抽象 CSS。

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

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

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

如果需要再次修改页面，所花费的时间也将得到显着回报。

但这根本不可能是吗？:D

于 2008-09-30T02:49:04.860 回答
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 添加一些装饰器 - 例如，将一些东西包装在额外的 div 中，以便能够以您想要的方式获取内容。

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

在掌握它的诀窍之前确实需要相当多的学习，但这是值得的。抵制放弃并回到基于表格的布局的诱惑，并按照自己的方式进行操作。一切都可以用语义 HTML 和 CSS 来完成。

于 2008-09-30T02:31:02.830 回答
0

您在您的问题中贬低了这种方法，但我建议您在浏览器中截取您最喜欢其呈现效果的页面，声明它作为您的参考，然后开始尝试重新创建它。这比你想象的要容易。我不得不采用基于表格的旧式布局，并将它们转换为使用现代技术完成的 CMS 模板，这并不是一项糟糕的工作。

于 2008-09-30T02:06:25.697 回答
0

我目前正在处理一个类似的问题，虽然不像听起来那么混乱，但真正糟糕的 asp.net web 表单、过度的视图状态和深度嵌套的服务器控件会格式化来自数据库的搜索结果。导致 50 个数据库行的标记约为 300 - 400K - 是的。

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

从 Visual Studio 之类的工具开始，您可以使用该工具将代码重新格式化为一致的方式会有所帮助。然后，您可以使用正则表达式和矩形选择的组合来开始清除垃圾，剥离多余的标记，开始整理什么是重要的，什么不是，然后开始手动定义一个有效的模式来呈现信息。

诀窍是分解成可管理的块，然后从那里构建它。

如果你有很多实际的“表格数据”要格式化，而且只是一次，我发现 excel 在某些情况下是我的救星，将数据粘贴到工作表中，然后使用连接和填充的组合为表格数据生成标记。

于 2008-09-30T03:13:25.443 回答
0

从头开始意味着回到设计绘图板。如果您需要重构这样一个怪物，那么您将花费所有时间使它变得更好，您还不如进行完整的重新设计。

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

于 2008-09-30T03:13:38.670 回答