Инструменты для рефакторинга табличных HTML-макетов в CSS?

StackOverflow https://stackoverflow.com/questions/151369

Вопрос

Учитывая 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, что составляет 500 КБ не в счет образы!

Обновить:В огне.комментарии: "сдавайся и начинай с нуля".Что это значит в реальном мире?Распечатать страницу, отсканировать ее, установить в качестве фонового изображения в Dreamweaver и начать с этого?Серьезно?Действительно ли это было бы эффективнее, чем рефакторинг?

Обновить:Я не порочу идею "проследить это с нуля" и не имел в виду, что Dreamweaver в любом случае является моим любимым инструментом.Я просто очень удивлен, что рефакторинг макета считается неразрешимой проблемой.

Это было полезно?

Решение

Я согласен с ТимБ в этом случае автоматизированным инструментам будет трудно это сделать, в частности, сделать реляционные переходы для объединения и абстрагирования CSS наиболее эффективным способом.

Если вы представляете табличные данные, это мочь было бы разумно попытаться реорганизовать встроенный CSS для повторно используемых классов.

Если у вас много похожих таблиц со встроенными стилями, вы можете постепенно реорганизовать CSS с помощью простого поиска и замены.Это даст вам множество классов, которые соответствуют подмножеству похожих таблиц, и множество в чем-то похожих классов.Хорошим началом было бы разбить это на макет и презентацию, а затем переопределить их определенными классами для каждой темы или семантически связанного элемента.

Я бы все равно рекомендовал начинать с нуля, вероятно, это будет быстрее, и вы сможете воссоздать только то, что вам нужно для представления страницы, и сможете повторно использовать элементы или коллекции элементов позже.

Потраченное время тоже окупится значительно если когда-нибудь понадобится снова изменить страницу.

Но это вовсе нет вероятно ли это?:D

Другие советы

Я не знаю конкретных средств, только универсальные, содержащие кофеин и Поджигатель, о котором должен знать любой, кто работает с CSS.

Я думаю, что проблема достаточно сложна, чтобы автоматизированные инструменты с трудом создавали хорошую, поддерживаемую разметку и CSS.

Кажется, что вы ищете более автоматизированные средства преобразования старого табличного макета в соответствии со стандартами CSS.Тем не менее, я согласен с некоторыми другими комментариями относительно "начать с нуля".

Для вас это означает, что вы должны попытаться восстановить (используя CSS) внешний вид, который был достигнут с помощью HTML-таблицы.Если эта концепция ускользает от вас, то я бы посоветовал погуглить несколько руководств по CSS для начинающих, возможно, даже некоторые из них будут посвящены обучению концепции Table-> CSS layouts..

Другим инструментом для рассмотрения (который, возможно, мог бы помочь вам еще больше) был бы своего рода CSS-"фреймворк".Я рекомендую Схема действий CSS для этого, поскольку это помогает в создании сетчатых / табличных макетов с минимальными усилиями.Еще один хороший вариант - это Еще-Один-Многоколоночный-Макет, который имеет действительно аккуратный конструктор макетов с несколькими столбцами.

Не стоит просто бросать его в 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 - например, обернуть некоторые вещи в дополнительные divs, просто чтобы иметь возможность получать контент так, как вы хотите.

Однако, как только вы закончите, у вас будет очень гибкий макет, который можно легко изменить с помощью CSS, и у вас будет страница, доступная как для людей с ограниченными возможностями, так и для поисковых систем.

Действительно, потребуется немало времени, прежде чем вы овладеете этим навыком, но это того стоит.Не поддавайтесь искушению сдаться и вернуться к табличным макетам, а просто прорабатывайте свой путь до конца.Все можно сделать с помощью семантического HTML и CSS.

Вы порочите этот подход в своем вопросе, но я бы порекомендовал сделать снимок экрана вашей страницы в браузере, рендеринг которого вам нравится больше всего, объявить это вашей ссылкой и начать пытаться воссоздать ее.Это проще, чем ты думаешь.Мне пришлось взять старые вонючие табличные макеты и превратить их в шаблоны CMS, выполненные с использованием современных технологий, и это не такая уж плохая работа.

В данный момент я решаю аналогичную проблему, не такую запутанную, как кажется, но результат действительно плохой asp.net веб-формы, раздутое состояние просмотра и глубоко вложенные серверные элементы управления, которые форматируют результаты поиска из базы данных.В результате получается ~ 300-400 Тыс. наценок для строк в 50 ДБ - да.

Я не нашел никаких автоматизированных инструментов, которые хотя бы наполовину выполнили бы разумную работу по рефакторингу.

Помогает начать с такого инструмента, как Visual Studio, который вы можете использовать для последовательного переформатирования кода.Затем вы можете использовать комбинации регулярных выражений и прямоугольного выделения, чтобы начать отсеивать ненужное и отбрасывать избыточную разметку, чтобы начать разбираться, что важно, а что нет, а затем начать вручную определять эффективный шаблон для представления информации.

Хитрость заключается в том, чтобы разбить на управляемые куски и создавать их оттуда.

Если у вас много фактических "табличных данных" для форматирования, и это требуется только один раз, я обнаружил, что Excel несколько раз был моим спасителем, вставьте данные в лист, а затем используйте комбинацию concatenate и fill для создания разметки для табличных данных.

Начинать с нуля - значит возвращаться к чертежной доске.Если вам нужно провести рефакторинг такого чудовища, то за все время, которое вы потратите на его улучшение, вы могли бы с таким же успехом провести полный редизайн.

Если вы хотите избавиться от дублирующихся и расточительных тегов, вам нужно сбежать из Dreamewaver.Хороший текстовый редактор (jedit, emacs, vim, eclipse и т.д.) - это действительно все, что вам нужно.Если вы правильно настроите свой редактор, вы даже не пропустите Dreamweaver.(Emacs с nXhtml и yasnippets - мои любимые.)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top