Переходим с TABLE’ичной верстки на DIV’овую
Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема.
О том и поговорим.
Поскольку вопросы оптимизации сайта при его разработке для меня всегда стоят не на последнем месте, важный начальный шаг в этом процессе – создание кода страниц оптимального размера, то бишь использование как можно меньшего количества параметров для тэгов с вынесением их в отдельный файл каскадных таблиц стилей (CSS).
Практика 3-х с лишним лет опыта показала – как ни пытайся уменьшить размер страницы при табличном способе верстки, все-таки количество самих тегов используется просто огромное, потому что приходится множественно вкладывать одни таблицы в другие для получения требуемого результата.
Ведь по сути таблицы придуманы именно для вывода табличных данных, а не для разметки элементов страницы.
То, что расположено в таблице:
<table>
<tr>
<td>текст</td>
</tr>
</table>
может быть представлено в виде блочной (дивовой) верстки:
<div>текст</div>, и это занимает гораздо меньший объем дискового пространства.
Разница в масштабах страницы и, тем более, целого сайта, становится весьма существенной и непосредственно сказывается на скорости загрузки веб-ресурса, к чему и следует стремиться любому веб-мастеру.
Как говорится, все приходит с опытом, поэтому, видимо, несколько месяца назад, когда я решил попробовать 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-хаки – это зло.
Также хочу обратить внимание на следующее свойство, которое требуется для задания минимальной ширины страницы при блочной верстке, чтобы при сужении браузера, информация не съезжала в кучу (если ширина страницы “резиновая”):
#wrapper {
width: expression((documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':''); /* Internet Explorer <= 6.0 */
min-width: 1000px; /* Opera & FireFox & Safari & Google Chrome & Internet Explorer 7+ */
}На этом пока все.
Смотрите также
Простая техника позиционирования изображения при обтекании текстом
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т.е. должно это выглядеть вот так: ...
5 советов верстальщику
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что “пинок” получил от трех человек. 1) Читайте блоги специалистов в данной ...
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Комментарии (87)
“На порядок больше” – означает больше в 10 раз.
“На два порядка” – в 100 раз.
Какбэ синоним слова “разряд”… кхм….
Эта величина – 40px – вычисляется опытным путем?
был вопрос о том как сделать СДВИГ слева, и был приведен ПРИМЕР того как это можно сделать, хотя и вопрос и ответ оставляют желать лучшего
ставьте хоть 400 пикселей, хоть 40000 пикселей, “вычисляется” это лишь теми инструментами, которые вы используете в верстке (в моем случае – блокнот, firebug и pixelperfect) и дизайном, по которому предстоит верстать сайт.
Каков вопрос, таков и ответ =)
ну так именно это я и сказал : )
Что не говори, а таблицы удобны при быстрой верстке в визуальном редакторе. Повставлял таблиц и сразу все видно, а с дивами так не покатит :)
p.s. я не сторонник ни таблиц и ни дивов, я вообще программер :)
Господа, вы забыли упомянуть одну из важнейших (на мой взгляд) особенностей табличной верстки: чтобы отобразить таблицу с содержимым, браузеру надо сначала загрузить ВСЁ её содержимое. Поэтому типичное поведение насыщенного графикой и наворотами табличного сайта для пользователя с dial-up’ом (да-да, таких в России весьма немало на сегодняшний день!) – это показ в течении 1-2-3 минут абсолютно пустой страницы. Значительная часть их просто не дожидается и уходит. А блоки можно расположить сверху вниз по значимости и посетитель сразу увидит основной контент, попозже загрузится меню, и в последнюю очередь – всякие украшательства…
Спасибо за дополнение. Действительно, забыл про это.
P.S. раз уж коммент оказался полезным…
Доводилось видеть такое: старается человек, делает совершенно грамотную вёрстку, а в последний момент вставляет всё в “одну-единственную” простую таблицу из двух строк (“чтобы подвал к низу прижать…”). И всё. Этим напрочь убиваются все преимущества от правильной вёрстки.
Чтобы подвал к низу прижать:
Полный бред! ВСЕ повторяю для Апачи(индейцев) ВСЕ браузеры умеют рисовать таблицы по мере загрузки. Добро пожаловать в будущее господа СТАРпёры.
DIV – это не плохо, но только полнейший ЛАМО может сказать “Онли DIV фаревор”.
Таблицы проектировать ПРОЩЕ чем рассчитывать ДИВы! Сдишь с линейкой и вымеряешь миллиметры..
Да и про вертикальное выравнивание забыли написать? а? в IE супергеморойно через дивы делается вертикальное выравнивание. В некоторых случаях DIV отображается непредсказуемо, в разных браузерах по разному! Таблицы на этом фоне более крассбраузерны, более талерантны!
Да, да, все это конечно верно, но так может высказываться полный ламо, ничего не смыслящий в верстке дивами, да и вообще, мне кажется в верстке.
Знания и опыт побеждают все ваши вертикальные выравнивания и непредсказуемое поведение блоков в разных браузерах, ага :)
Хотя я сам не вижу ничего зазорного в использовании таблиц, но только там, где это оправдано.
div блоками делают лишь некоторые части сайта. полностью верстать сайт блоками долго, а нормальные люди экономят время.
+ таблица красивее и лучше смотрится на сайте…
Некоторые возможности таблиц, например увязывать размеры одних элементов с размерами др. элементов, достаточно востребованны для верстки. Имеет ли смысл эмулировать данные уникальные свойства с помощью блочной верстки?
На мой взгляд , нет.
Страдает визуальная прозрачность кода, которая указывалась, как преимущество блочной верстки. Естественно и времени на создание страницы требуется больше.
Приведу пример.
Я знаю, что Вы ,Dimox, работали над проблемой эмуляции одинаковой высоты колонок. Было представлено довольно интересное и нетривиальное решение. Я не сразу понял, что вы использовали большие отступы и границы, в качестве подложки для сайдбаров. Не сомневаюсь , что решение станет еще более интересным, если колонок будет больше.
Сверстать таблицей намного проще, быстрее и доступнее для понимания.
Из всего вышеизложенного не следует, что я являюсь противником блочной верстки, просто, по-моему не стоит так рьяно открещиваться от верстки с помощью таблиц.
У дивов есть свойство разъезжаться и разваливаться.
Например у меня на сайте всё в дивах. Но правая колонка зачастую ломается и съезжает вниз под комментарии(обычно это из-за не закрытой цитаты на верно или большой картинки)
Может кто-то знает как избежать этого?
Кстати если убрать или добавить у меня в html закрывающий или открывающий див, то сайт весь развалиться в прямой смысле.
Спасибо за генератор! Не знал что такие есть, оказалось это то что мне нужно!
С точки зрения веб-бизнеса коммерческих сайтов с CMS – вёрстка div ами убыток чистой воды, нужно иметь верстальщика ну очень выского уровня чтобы не было столько косяков сколько их при вёрстки div ами. В нашей компании запрещено верстатть исключительно div ами. Нужно верстать и div ами и таблицами – всё должно быть оптимально. Все косяки какие были связаны с вёрсткой сайтов за 5 лет, связаны именно с вёрсткой div. Причем если ошибка в табличной верстки – то визуально она небольшая, а если ошибка в div то – весь сайт съезжает. Для коммерческих сайтов, где работать могут несколько человек – верстка div ами – это убыток.
Совершенно согласен Максом. Самый оптимальный вариант с точки зрения бизнеса – общая табличная верстка с применением div’ов для задач сео (вынос контента вверх кода) и “извратов” дизайна, когда дизайнер рисует “красотищу” и его не ипет, как это потом верстать. Когда в работе параллельно штук 5 сайтов + штук 40-50 на поддержке – извращаться в дивами ради непонятной “красоты кода”…
<html>
<head>
<title>$TITLE$</title>
</head>
<body>
<div id="contanier">
<div id="wrap">
<div id="topPick">
<div id="dataBar">
<div id="rssBlock">$RSS_LINK$</div>
</div>
<div id="sidebar">
<div class="menuTable">$SITE_MENU$</div>
</div>
<div id="content">
<div id="logo">$SITE_LOGO$</div>
<div id="textBlock">$BODY$ </div>
</div>
<div id="footer">$POWERED_BY$</div>
</div>
</div>
</div>
</body>
</html>
Да, кода мало. Но представьте, что верстал это один дизайнер, а сегодня он занят и я даю сделать что-то другому. Да он не меньше часа потратит на то, чтобы разобраться что куда и как. А если сайт не такой простой по дизайну, как предложенный вариант?
Мне самому нравятся дивы за то, что гораздо проще позволяют сделать некоторые дизайнерские задумки, скриптовые меню и другие красоты современного инета. Но весь сайт на дивах? И потом ждать с ужасом в какой момент тебе позвонит заказчик и скажет, что у его папы дома на ие4 или 5 сайт весь расколбасило. И заказчику не скажешь, как делают многие “крутые” сайтостроители: “Сайт для просмотра в (список последних браузеров), всем поклонникам ie4,5,6 (иногда умудряются в список добавлять даже нетскейп) идти лесом”. Или нанимать отдельного человека, чтобы он сидел и тупо тестировал сайты на всех доступных браузерах…
Но как можно рекламировать то, для чего требуется держать в голове кучу особенностей и знать хаки для всех браузеров. ИМХО, всегда нудно стремиться к золотой середине. И стремление верстать только дивами так же попахивает в данной ситуации безумством, как и вертска таблицами без css (я таких идиотов еще не видел, чтобы не использовали стили).
Я больше программист чем верстальщик, но зачастую приходится и версткой шаблонов заниматься. Когда времени в обрез пользуюсь комбинированной версткой, при этом затрачивается минимум времени на приведение шаблона в рабочее состояние. Но если попадается слишком умный клиент которому вынь да положь макет в дивной верстки приходится из мудряться, выискивать хаки, а если совсем трудно применять яваскрипты.
Вот-вот. У меня в последнее время именно такие “умные” клиенты и попадаются. Причем считают верстку дивами “прогрессивной технологией” :). Особенно мне “нравится”, когда просят такую верстку, да чтоб работала на самых старых браузерах. Плюс учесть возможность того, что у юзверя могут быть отключены яваскрипты.
ну и где статья?
вы прям как К.О. рассказали самое очевидное и накидали непрямых ссылок(нетематических)
странно что вашу страницу выдало в гугле одной из первых =(
Все проще верстать таблицами, а дивами интереснее, интересно что нам приготовит HTML5
Html 5 вполне себе поддерживает таблицы, от них вряд ли откажутся. Лучше б пофиксили все чтоб все браузеры показывали сайты одинаково.
тем кто любит таблицы скажу: “div’овая вёрстка превосходит таблицы по многим параметрам, если у Вас, что-то расползается, не нужно грешить всё на div’ы . В первую очередь нужно иметь достаточно знаний и “прямые” руки. Кстати, div’ы применяются на сайте Консорциума Всемирной Паутины и на перечне других авторитетных сайтов!
В точку, согласен с вами, коллега.
Штука такая, что на приобретение знаний уходит время (невосполнимый ресурс), и, зачастую, средства. Книжку купить, интернет оплатить. А руки распрямляются от длительной работе на определённом поприще.
Я тоже программист, и надо понимать, что моё время и средства уходят на реализацию себя этом поприще.
Поэтому для меня вёрстка таблицами это времясберегающая технология, пусть фарисействующие гуру называют меня недоученным криворучкой. А где нужны нужны современные красоты, я вставлю div
Господа, всем реальное спасибо за мнения! Комменты меня очень просветили и порадовали. Я давно не занимался версткой, но назрел вопрос новой домашней странички, который хотел решить только новомодными технологиями, а именно – исключительно на дивах.
Прочитав весь тред, я передумал. Попытаюсь делать комбайн с моими любимыми таблицами.
Таблицы – проще некуда, любое выравнивание, позиционирование; а в дивы втыкаю третий день (4 способа раскладки) и все равно еще не до конца въехал :)
Интересно, а сайт на одних таблицах (с цсс, конечно) – это совсем вчерашний день? Домашка из 10-20 страничек.
Вот пример моего сайта про сноубординг, сверстанного исключительно таблицами, кроме разве некоторых скриптовых слайдеров и прочих извратов. Посещаемость – 2000, по тематическим запросам – процентов 80 на первой странице в гугле и яндексе. А что нам еще для счастья надо.
Такая вёрстка сайта, на мой взгляд, больше нравится ПС. Спасибо.
Да, на div код и кажется проше, но когда я в своем случае строел таблицы – насмучался. Проблема постояно с переносами на новые строки – то они сами сдвигаются то надо подгонять
Мы на бизнес сайтах используем только табличную верстку для нарезки дизайна. Дивы это всегда бессмысленный геморрой. Поисковики прекрасно работают с любой версткой, это 21 век. Вы не сделаете элементарное задание на дивах которое я сверстаю на таблице за 5 минут.
Задание в студию :)
имхо, верстка должна быть комбинированной.
Допустим менюшку сверстать проще дивами. А сайт на котором выдержана сетка, проще таблицами.
Тегов прибавится ровно на 2: открыть и закрыть таблицу. Зато, чтобы выровнять это все дивами, вы столько нагородите в ксс, что черт ногу сломит.
А те, кто достаточно хорошо владеет ксс, затолкает туда и все стили для таблиц. В итоге все сведется к такому виду:
дли дивов
и таблиц
Кто сомневается, попробуйте сверстать две строчки с пятью столбцами общей шириной в 800 пикселей с выравниванием в браузере по центру. И в каждую ячейку вставить по картинке, выдержав отступы между ячейками и внутри них в 5 пикселей и отцентрировать картинки в них по вертикали.
html код в студию(ксс не стОит, ибо div заведомо в проигрыше)
А ваши баллады с быстротой загрузки страниц – смех да и только.
Много ли людей, у которых сейчас dial-up?
какой смысл делать дивами когда сайт представляет собой таблицу.
таблицы и дивы это объекты с разными свойствами, поэтому разговоры о правильности или неправильности той или иной верстки сами по себе неправильны, потому что “правильно” – то что к месту и оптимально реализует решение задачи.