Переходим с TABLE’ичной верстки на DIV’овую

Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема.

О том и поговорим.

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

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

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

То, что расположено в таблице:

может быть представлено в виде блочной (дивовой) верстки:

, и это занимает гораздо меньший объем дискового пространства.

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

Как говорится, все приходит с опытом, поэтому, видимо, несколько месяца назад, когда я решил попробовать DIV’ы, такой тип верстки вызвал у меня неподдельный интерес и с тех пор является для меня фаворитом.

Вот какие преимущества я вижу блочной верстки по сравнению с табличной:

• Существенное уменьшение размера страницы, как правило в 2–3 раза (в зависимости от сложности структуры страниц), что значительно уменьшает время загрузки веб-сайта. При этом незначительно вырастет размер CSS-файла, но, благодаря тому, что он единожды кэшируется браузером юзера и при обращении к другим страницам считывается уже с его компьютера, в результате сайт грузится гораздо быстрее, чем табличный.
• Снижение общемирового интернет-трафика. Следствие 1-го пункта.
• Снижение нагрузки на сервер. Опять же следствие 1-го пункта.
• Значительно удобнее менять оформление страниц сайта, вынесенное в CSS-файл. При этом практически отсутствует необходимость редактирования HTML-кода.

• Легкость манипулирования элементами сайта. Любой SEO-специалист подтвердит, что чем выше контент страницы располагается в HTML-коде, тем боле значима такая страница с точки зрения поисковой оптимизации. Поисковые системы отдадут больше респекта такой странице и быстрее проиндексируют ее.

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

• Визуально приятна прозрачность кода дивовой страницы – нет никаких нагромождений тегов, все очень красиво и компактно.

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

Теперь непосредственно к практике.

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

Итак, вот какие источники я посоветую. Полезно будет изучить тем, кто хочет перейти на DIV’ы и развить свои навыки в CSS.

• Webmascon – Наверное, самый популярный сайт по теме. Жаль только, что он больше не обновляется. Кроме всего прочего, на сайте размещены несколько глав из книг Михаила Дубакова «Создание Web-страниц. Искусство верстки» и «Веб-мастеринг средствами CSS», которых я, к сожеланию, нигде найти не мог (хочется почитать). Очень рекомендую этот сайт!
• Библиотека Сайтостроительства – Достаточно много как теоретической, так и практической информации, изложенной простым языком. Рекомендую!
• Заметки HTML кодера – есть много интересных примеров применения CSS.
• Tigir.com о web-технологиях – тоже есть интересные примеры.
• CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
• htmlbook.ru – Учебники по HTML, CSS, дизайну, графике и созданию сайтов.
• Дэйв Ши, Молли Хольцшлаг. «Философия CSS-дизайна» – В этой книге на примере широко известного сайта CSS Zen Garden рассматривается применение каскадных таблиц стилей. Здесь нашли отражение такие вопросы, как подготовка HTML-разметки для последующего применения стилей, синтаксис языка CSS, принципы верстки, методы работы с графикой, особенности использования цвета, типографские эффекты и многое другое. Не осталась без внимания проблема неодинакового уровня поддержки CSS разными браузерами; авторы рассказывают о приемах, с помощью которых можно добиться межбраузерной совместимости.

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

  «Философию CSS-дизайна» можно скачать в Интернете в формате PDF (23 Mb). Однако качество сканирования на удовлетворительном уровнем, поэтому изучать ее в таком форме совсем неудобно. Именно по этой причине я купил реальную книгу в Интернете, чего и Вам советую, если проявите интерес.

• Layout Gala – примеры вариантов верстки дивами. Есть множество решений, как для страниц с фиксированной шириной блоков, так и для процентной.
• Генератор HTML+CSS шаблонов – Web 2.0 сервис, одним из создателей которого является автор этого блога. Данный инструмент в соответствии с выбранными параметрами генерирует 2 файла: CSS и HTML, которые представляют базовую основу (каркас) для будущего сайта. Большинство выдаваемых сервисом вариантов основано на структуре макетов вышеуказанного сайта Layout Gala, но они лишены одного бага, который присутствует в макетах Layout Gala.
• Учебник по CSS-верстке – систематизированный список популярных статей для быстрого освоения принципов CSS-верстки. Рассчитано на специалистов, имеющих опыт веб-разработки.

Вот еще несколько книг, которые мне рекомендовали к прочтению в одном из дискуссионных листов Subscribe.Ru:

• Джеффри Зельдман. «Web-дизайн по стандартам.» (общие вопросы проблематики современной верстки, исторический экскурс)
• Дэн Седерхольм. «Пуленепробиваемый web-дизайн.» (сугубо практика и трюки)
• Эрик Мейер. «CSS-каскадные таблицы стилей. Подробное руководство.» (говорят, что это просто библия!)

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

В отдельной статье, которая периодически обновляется, я собрал хаки для разных современных интернет-браузеров: Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome.

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

Также хочу обратить внимание на следующее свойство, которое требуется для задания минимальной ширины страницы при блочной верстке, чтобы при сужении браузера, информация не съезжала в кучу (если ширина страницы “резиновая”):

На этом пока все.