Инструменты для рефакторинга макетов HTML на основе таблиц в CSS? - PullRequest
5 голосов
/ 30 сентября 2008

Учитывая HTML-страницу со сложным макетом на основе таблицы и множеством тегов, которые дублируются и расточительны, например ::100100

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 - это мой инструмент выбора. Я просто очень удивлен, что рефакторинг макета считается неразрешимой проблемой.

Ответы [ 7 ]

2 голосов
/ 30 сентября 2008

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

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

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

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

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

Но это совсем не вероятно, не так ли? : D

2 голосов
/ 30 сентября 2008

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

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

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

2 голосов
/ 30 сентября 2008

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

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

1 голос
/ 30 сентября 2008

Не просто бросайте это в ткач сновидений или любой другой инструмент по выбору и нарежьте его. Сначала напишите 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.

0 голосов
/ 30 сентября 2008

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

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

0 голосов
/ 30 сентября 2008

Я сейчас занимаюсь аналогичной проблемой, не такой сложной, как кажется , В результате ~ 300 - 400K разметки для 50 строк БД - yeek.

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

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

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

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

0 голосов
/ 30 сентября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...