Ferramentas para refatoração layouts HTML baseados em tabelas para CSS?

https://stackoverflow.com/questions/151369

02-07-2019
|

Pergunta

Dada uma página HTML que tem um layout baseado em tabela complexa e muitas marcas que são duplicados e desperdício, por exemplo:.

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

Existem ferramentas para auxiliar a tarefa de refatoração a página em uma forma mais compacta? Por exemplo, uma ferramenta que gera automaticamente os estilos CSS e seletores? Que converte tabelas em layouts div?

Apenas para dar um sentido da ordem do problema, a página que eu estou olhando é> 8000 linhas de HTML e JavaScript, que é 500Kb sem contar imagens!

Update: Em re. "Desistir e começar do zero", comenta. O que isso significa, no mundo real? Imprimir a página, digitalizá-lo, defini-la como imagem de fundo no Dreamweaver, e começar com isso? Seriamente? Teria que ser realmente mais eficiente do que a refatoração?

Update: Eu não estou denegrindo "rastreá-lo a partir do zero" nem eu quero dizer que Dreamweaver é por qualquer meio a minha ferramenta de escolha. Eu só estou muito surpreso que refatoração um layout é considerado um problema intratável.

Solução

Eu concordo com TimB em que ferramentas automatizadas vão ter problemas para fazer isso, em particular fazendo os saltos relacionais para combinar e CSS abstrato da forma mais eficiente.

Se você está apresentando dados tabulares, ele pode ser razoável para tentar refatorar o CSS inline para classes reutilizáveis.

Se você tem um monte de tabelas semelhantes com estilos inline você pode gradualmente refatorar o CSS por busca simples e substituir. Isto lhe dará muitas classes que correspondam a um subconjunto de tabelas e um monte de aulas um pouco semelhante semelhantes. Quebrar este se em layout e apresentação seria um bom começo, em seguida, substituindo-os com classes específicas para cada tema ou item semanticamente relacionados.

Eu ainda recomendaria começando do zero , ele provavelmente vai ser mais rápido, e você só o que você precisa para apresentar a página pode recriar, e pode reutilizar elementos ou coleções de elementos em uma data posterior .

O tempo gasto também vai pagar significativamente se a página é sempre necessária a ser modificado novamente.

Mas isso é não em todos é a probabilidade? : D

Outras dicas

Eu não estou ciente de ferramentas específicas, apenas os genéricos de cafeína e Firebug , que qualquer um que faz CSS trabalho deve estar ciente de.

Eu acho que o problema é suficientemente duro que ferramentas automatizadas que luta para produzir bons, marcação sustentável e CSS.

Parece como se você está à procura de meios mais automatizados de re-factoring um layout baseado em tabela antiga para os padrões CSS. No entanto, concordo com alguns dos outros comentários para "começar do zero".

O que isto significa para você é que você deve tentar reconstruir (usando CSS) o olhar que foi conseguido usando uma tabela HTML. Se este conceito escapa-lhe, então eu sugiro Googling para alguns tutoriais novato CSS, talvez até mesmo alguns com foco em ensinar o conceito de Tabela-> layouts CSS ..

Outra ferramenta a considerar (que poderia ajudá-lo ainda mais) seria algum tipo de CSS "quadro". Eu recomendo Blueprint CSS para isso, uma vez que ajuda na criação de grade / table-like layouts com o mínimo esforço. Outro bom é Yet-outra-Multicolumn-Disposição , que tem um realmente puro multi-coluna layout do construtor .

Não basta jogá-lo no Dreamweaver ou qualquer ferramenta de escolha e cortá-lo. Escrever o HTML primeiro, no estilo puramente semântica. por exemplo, um layout muito comum acabaria sendo:

<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>

Faça o HTML de uma maneira que faz sentido com o seu conteúdo. Deve ser útil se você não tem CSS em tudo. Depois disso, adicione o CSS para torná-la da maneira que quiser. Com o estado de navegadores / CSS agora, provavelmente você ainda tem que adicionar alguns decoradores ao HTML - por exemplo, enrole algumas coisas em divs extra, apenas para ser capaz de obter o conteúdo da maneira que quiser

Assim que estiver pronto, porém, você vai ter um layout muito flexível que pode ser modificada facilmente com CSS, e você terá uma página que é acessível, tanto para as pessoas com deficiência e os motores de busca.

Ele faz ter um pouco de aprendizagem antes de você pegar o jeito dele, mas vale a pena. Resista à tentação de desistir e voltar para layouts de mesa com base, e apenas trabalhar o seu caminho. Tudo pode ser feito com HTML semântica e CSS.

Você denegrir esta abordagem na sua pergunta, mas eu recomendo tomar um tiro de tela de sua página no navegador cuja tornando você mais gosta, declarar que, para ser sua referência, e começar a tentar recriá-lo. É mais fácil do que você pensa. Eu tive que tomar layouts baseados em tabelas antigas skanky e transformá-los em CMS moldes feito com técnicas modernas e não é que o trabalho de um ruim.

Estou enfrentar um problema semelhante no momento, não tão confuso como o que este sons, mas o produto de muito ruim formas ASP.NET Web, estado de exibição exagerada, e controles de servidor profundamente aninhadas que os resultados de pesquisa formato de um banco de dados . Resultando em ~ 300 - 400K de marcação para 50 linhas DB -. Yeek

Eu não foram encontradas quaisquer ferramentas automatizadas que irá fazer um meio caminho trabalho razoável de refatoração-lo.

Começando com uma ferramenta como o visual studio que você pode usar para reformatar o código de uma maneira consistente ajuda. Você pode então usar combinações de regexs e selecionando retangular para começar eliminando o lixo, e descascar volta a marcação redundante, para começar a separar o que é importante eo que não é, e então começar a definir, à mão, um padrão eficiente de presente a informação.

O truque é quebrar em pedaços gerenciáveis, e construí-lo a partir daí.

Se você tem um monte de "dados tabulares" real para o formato, e é apenas uma vez fora, eu encontrei excel para ser meu salvador em algumas ocasiões, colar os dados em uma folha, e, em seguida, usar uma combinação de concatenar e enchimento para gerar a marcação para os dados de quadro.

A partir de meios scratch volta à prancheta de desenho indo. Se você precisar refatorar tal monstruosidade, em seguida, por todo o tempo que você vai gastar torná-lo melhor, você poderia muito bem ter feito um redesenho completo.

Se você quiser ficar longe de marcas duplicados e desperdício, você precisa escapar Dreamewaver. Um editor de texto bom (jedit, emacs, vim, eclipse, etc.) é realmente tudo o que você precisa. Se você personalizar o seu editor corretamente, você não vai mesmo perder Dreamweaver. (Emacs com nXhtml e yasnippets é o meu favorito.)

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow