заметки дизайнера Заметка 41   29 сентября 2003
Верстка страниц, часть 2 >>
<< История одного упущенного заказа

Верстка страниц - современные технологии

Как рисунки дизайнеров превращаются в HTML-страницу? Пару слов о всех технологиях верстки, используемых в современном веб-дизайне.

Верстка с помощью таблиц

До недавних времен, существовал только один способ превратить рисунок в код — таблицы. Поддержка таблиц одинаково хороша во всех броузерах, поэтому — если знать как — с помощью таблиц можно воплотить дизайн почти неограниченной сложности.

Поскольку табличный дизайн используется так давно, программы разработки имеют хорошую поддержку таблиц вообще и табличной верстки в частности. Dreamweaver, например, имеет специальный режим работы - Layout mode - для рисования табличной основы сайта. Adobe Photoshop умеет разрезать картинки на части и сохранять их уже размещенными в таблице HTML.

В качестве примера того, что можно сделать с таблицами, посмотрите на eBazzar.ru, сделанный студией Артемия Лебедева. Насыщенный графикой, но в то же время пропорционально растягивающийся на всю ширину экрана дизайн труднее всего в разработке, но результат оправдывает затраченные усилия:


eBazaar: первая страница

еBazaar: внутренняя страница

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


eBazaar: выделенные границы ячеек

еBazaar: вложенные таблицы

Сначала сетка таблиц страницы. Выглядит устрашающе, правда? А ниже та же сетка, но с указанием уровней вложенности (1 2 3 4). Теперь представьте себе, что вам нужно добавить несколько элементов (= новых таблиц или ячеек) в такой дизайн... Причем даже мелкая ошибка в таблицах во время разработки может перевернуть все следующее за ней вверх ногами (при этом, правда, обычно нарушается структура HTML, и тогда место ошибки легко находится валидатором).

При таком сложном коде, большой размер страниц не должен быть сюрпризом. Первая страница eBazaar содержит примерно 500 символов и 50 картинок, что в коде страницы вряд ли будет занимать больше 5 Kb. А вся страница весит 23К, то есть сетка таблиц занимает больше 75% от общего объема страницы.

А чтобы вы не думали, что это проблемы конкретного сайта — вот часть интервью с Дугласом Боуменом (Duglas Bowman), который руководил сменой дизайна с таблиц на CSS на сайте Wired News:

Насколько уменьшился размер обычной страницы на Wired News?

HTML ужался с 32 KB до 19 KB, но картинки поднялись с 8 до 13 KB...

Что заставило вас избавиться от таблиц в страницах?

Я помню проект для Lycos, в котором мы вкладывали друг в друга 10 таблиц - я сам их сосчитал. Не все таблицы были нужны для реализации дизайна, но они обеспечивали нужную нам гибкость в случае, если нужно было бы убрать или добавить определенные модули или куски текста. Когда вы доходите до такого состояния, количество кода, которое приходится перелопатить чтобы найти что-нибудь, становится нелепым.

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

Верстка страниц, часть 2 >>

Верстка страниц, часть 2 >>
<< История одного упущенного заказа
Copyright © 2000-03 by Max Timchenko Рассылка заметки дизайнера