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

Автор: http://suprabiz.com/

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

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

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

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

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

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

  1. <table>
  2.   <tr>
  3.     <td>текст</td>
  4.   </tr>
  5. </table>

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

  1. <div>текст</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • http://blog.html.it/layoutgala/ – примеры вариантов верстки дивами. Есть множество решений, как для страниц с фиксированной шириной блоков, так и для процентной.
  • http://www.dynamicdrive.com/style/layouts/ – также несколько примеров.

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

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

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

Поскольку я в своей работе всегда использую только три браузера: Opera, Mozilla FireFox и Internet Explorer, напишу хаки, которые распознаются в отдельности каждым из них.

  1. .foo {color: gray} /* для всех браузеров */
  2.  
  3. *html .foo {color: yellow} /* только Internet Explorer <= 6.0 */
  4.  
  5. html>body .foo {color: red} /* Opera & FireFox & Internet Explorer 7.0 */
  6.  
  7. html:root .foo {color: green} /* только FireFox */
  8.  
  9. @media all and (min-width: 0px) { /* только Opera */
  10.   body .foo {color: blue}
  11. }

И парочка ссылок на страницы с хаками для различных браузеров:

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

  1. #wrapper {
  2.   width: expression((documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':''); /* Internet Explorer <= 6.0 */
  3.   min-width: 1000px; /* Opera & FireFox & Internet Explorer 7.0 */
  4. }

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

P.S. Если у Вас найдутся ссылки на другие сайты по теме, которых я здесь не указал, но которым здесь место, прошу писать в комменты. Тем более, что мне самому очень интересна такая инфа.



Опубликовал admin
18 Ноя, Воскресенье 2007г.



Программирование для чайников.