用于将基于表的HTML布局重构为CSS的工具吗?

时间:2020-03-06 14:54:12  来源:igfitidea点击:

给定一个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绝对是我的首选工具。我很惊讶重构布局被认为是一个棘手的问题。

解决方案

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

我认为问题非常棘手,以至于自动化工具将难以产生良好的,可维护的标记和CSS。

我们在问题中否定了这种方法,但我建议我们在浏览器中截取我们最喜欢的呈现效果的页面的屏幕截图,并声明为参考,然后开始尝试重新创建它。这比我们想像的要容易。我不得不采用老旧的基于表格的布局,并将其转换为采用现代技术完成的CMS模板,这并不是一件坏事。

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

这对我们意味着意味着我们应该尝试重建(使用CSS)使用HTML表获得的外观。如果我们不熟悉此概念,那么我建议使用Googling进行一些CSS初学者教程,甚至可以集中精力学习Table-> CSS布局的概念。

要考虑的另一种工具(可能会进一步)将是某种CSS"框架"。我为此建议使用Blueprint CSS,因为它有助于以最小的工作量创建网格/表格式布局。另一个不错的是Yet-Another-Multicolumn-Layout,它有一个非常整洁的多列布局生成器。

不要只是将其扔入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来完成。

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

如果要提供表格数据,则尝试将内联CSS重构为可重用的类可能是合理的。

如果我们有很多具有内联样式的相似表,则可以通过简单的搜索和替换来逐步重构CSS。
这将为我们提供许多与相似表的子集相匹配的类,以及与某些有点相似的类相匹配的类。
将其分解为布局和表示形式将是一个不错的开始,然后使用每个主题或者语义相关项目的特定类覆盖这些内容。

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

如果需要再次修改页面,那么所花费的时间也将大大减少。

但这根本不可能吗? :D

我现在正在解决一个类似的问题,虽然听起来并不那么麻烦,但是它确实是由糟糕的asp.net Web表单,过分的视图状态以及深度嵌套的服务器控件构成的,这些控件格式化了数据库的搜索结果。导致约50个DB行周数的标记为300400K。

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

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

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

如果我们要格式化的实际"表格数据"很多,而且只有一次,那么我发现excel在某些情况下是我的救星,将数据粘贴到工作表中,然后结合使用串联和填充生成表格数据的标记。

从头开始意味着要回到设计图纸板上。如果我们需要重构这种怪异的东西,那么在所有的时间里,我们都将花费更多的时间来使其变得更好,我们也可能已经进行了完整的重新设计。

如果要摆脱重复和浪费的标签,则需要避开Dreamewaver。一个好的文本编辑器(jedit,emacs,vim,eclipse等)确实是我们所需要的。如果适当地自定义编辑器,我们甚至不会错过Dreamweaver。 (带有nXhtml和yasnippets的Emacs是我的最爱。)