Отправляет email-рассылки с помощью сервиса Sendsay

Заметки Дизайнера

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр Левитас

Статистика

56.649 подписчиков
-141 за неделю
←   Все выпуски   →

Заметки Дизайнера : Верстка страниц - современные технологии


Информационный Канал Subscribe.Ru

заметки дизайнера
41 (29.09.2003)

Как рисунки дизайнеров превращаются в 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, с табличным дизайном невозможно.

В следующей заметке: есть ли альтернатива у табличного дизайна? Большие обещания и настоящее состояние технологии CSS.

"Заметки" (С) 2000-03 MaxVT, все права сохранены, etc.
пишите письма: maxvt@yahoo.com
письма и присланные материалы могут быть опубликованы. Если
вы не хотите гласности, то укажите это в теле или заголовке письма.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное