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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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