- Интернет-сайты XXI века
- «Резиновая» CSS-вёрстка веб-страниц
- Оптимизация и реконструкция html-кода существующих сайтов
- Приведение в соответствие стандартам Консорциума W3
Постановка задачи
На дворе конец 2006 года. Львиная доля просматриваемых нами в Сети веб-страниц свёрстана табличным методом: «скелетом» страницы служат один-два (а-то и более) десятка таблиц, вложенных друг в друга таким образом, что разобраться в этом хитросплетении иной раз может быть способен лишь полный отличник, наделённый нечеловеческой усидчивостью. Но не одно лишь это свойство табличной вёрстки напрягает владельцев таких сайтов. Имеются более серьёзные недостатки.
- Медленная загрузка
Содержимое таблицы не выводится на экран монитора, пока не определены полностью габаритные размеры всех её ячеек. А поскольку сей дизайн основан на использовании немеренного количества мелких изображений, рассортированных по ячейкам таблиц (в том числе, прозрачных гифов-распорок), браузеру может потребоваться не одна секунда для того, чтобы считать все ширины и высоты этого легиона изображений. А если габариты хотя бы части (да хоть одного!) изображений явно не указаны, придётся дожидаться их полной загрузки до того, как контент появится на экране.
- Неоправданно большой «вес» файла
Большая часть килобайтов, в которые складывается информационная составляющая такого документа, представляет из себя просто шлак: присутствуя (и даже превалируя) в html-коде, она не несёт абсолютно никакой визуальной нагрузки, но лишь принимает участие в организации пространства страницы.
- Запутанность кода и нелогичность информационного поля документов
Дебри табличной вёрстки чреваты и другими проблемами. В частности, с увеличением глубины вложения таблиц друг в друга ухудшается индексируемость страниц поисковыми машинами, снежным комом растёт нелогичность расположения контента (смысловые фрагменты, находящиеся в неразрывной связи друг с другом, территориально располагаются в самом невообразимом хаосе).
- Невозможность разделения дизайна и структуры документа
Поскольку в исходном тексте страницы все элементы оформления присутствуют явным образом, задача редизайна существующего документа представляется нелёгкой: для её выполнения требуется полностью прересмотреть всю структуру, включая информационный контент, в чём нет прямой необходимости.
- Трудность распечатки документов с широким табличным «скелетом»
Веб-страницы, построенные на основе многоколоночных таблиц, как правило, не умещаются на ширине печатного формата, в следствие чего приходится создавать специальные версии этих документов, предназначенные для печати.
- Низкая применимость к неграфическим браузерам
Парк неграфических браузеров (текстовые браузеры, браузеры мобильного интернета и пр., способные вывести на дисплей лишь организованный текст) растёт с пугающей скоростью, что соответственно снижает конкурентоспособность веб-сайтов с табличной структурой.
Альтернатива табличному методу вёрстки существует — это использование в качестве структурных элементов контейнеров (слоёв). Определение стилевых свойств контейнеров при помощи механизма CSS позволяет устранить все перечисленные минусы табличной структуры.
Примеры
Представляю два варианта одного и того же веб-документа, свёрстанного разными способами (копия реальной страницы реального сайта).
- Первый пример: табличная вёрстка.
Вес html-кода документа (+ CSS) — 17 844 байт
Количество таблиц в документе — 5
Количество изображений в документе — 77
Opera 7.23 — 0.391 сек
Страница с отключенными стилевыми инструкциями.
Исходный html-код страницы.
- Второй пример: контейнерная вёрстка.
Вес html-кода документа (+ CSS) — 10 913 байт
Количество таблиц в документе — 0
Количество изображений в документе — 31
Opera 7.23 — 0.291 сек
Страница с отключенными стилевыми инструкциями.
Исходный html-код страницы.
Выводы
Табличная вёрстка интернет-сайтов не имеет будущего. Консорциум W3 — законодательная организация в сфере стандартов Всемирной Сети — дорабатывает 3-ю редакцию CSS. Всё большее количество веб-мастеров присоединяется к отряду сторонников блочной вёрстки сайтов...
Так не теряйте ж драгоценного времени — приобретайте сайт, сконструированный в соответствии со стандартами. Используйте назревшую необходимость обновления дизайна для полной реконструкции своих веб-страниц. Идите в ногу с веком!
Заполните почтовую форму и отправьте мне письмо. Изложите свои потребности, и мы используем наилучший и безболезненный вариант реконструкции вашего интернет-сайта.
Давайте сделаем это вместе!