Методы создания кроссбраузерной верстки

М.Е. КРАСАВИНА
Научный руководитель – Н.А. БОРСУК, к.т.н., доцент
Калужский филиал Московского государственного технического университета
им. Н.Э. Баумана
МЕТОДЫ СОЗДАНИЯ КРОССБРАУЗЕРНОЙ ВЕРСТКИ
ДЛЯ INTERNET-РЕСУРСОВ
Рассмотрены различные способы создания кроссбраузерных макетов Internetресурсов, выявлены их достоинства и недостатки.
Развитие Internet-технологий и средств web-дизайна приводит в
настоящее время к усложнению макетов Internet-ресурсов. На создание
качественного сайта уходит немалое количество времени. При этом может
возникнуть ситуация, когда сайт, корректно отображающийся в одном
браузере, будет выглядеть совершенно нечитабельным в другом. Поэтому
основной проблемой при разработке Internet-ресурсов является различие
их представления в разных браузерах. В последнее время большинство
разработчиков сайтов используют кроссбраузерную верстку, то есть
такую, при которой страница корректно отображается в наиболее часто
используемых браузерах (к таковым относятся Internet Explorer, Opera и
FireFox).
Кроссбаузерность обеспечивают следующие способы верстки
страницы сайта: табличная верстка и блочная верстка.
Наиболее часто в сети Internet можно встретить сайты, основанные на
табличной верстке. Таблицы обладают достаточной гибкостью. Это
обусловлено тем, что таблицы поддерживаются всеми популярными
браузерами и их поддержка идентична во всех браузерах. Для создания
табличной верстки достаточно создать таблицу и поместить в
определенные ячейки различные части страницы [1]. Но у таблиц есть
недостатки. Создание сложных макетов при помощи табличной верстки,
во-первых, приводит к большому количеству тегов, из-за которых
ухудшается восприятие кода документа, во-вторых, бывают ситуации,
когда макет невозможно создать, используя табличную верстку [2].
Поэтому в последнее время разработчики сайтов начали использовать
CSS-блоки (контейнеры).
При помощи блоков можно верстать относительно сложные макеты
страниц. Для реализации блочной верстки необходимо использовать CSS.
Можно разбить макет на блоки и разместить все блоки на странице. При
этом можно использовать следующие типы позиционирования блоков:
1. Вставка в код страницы блочных элементов <div> друг за
другом, не указывая методов их позиционирования и координат.
В этом случае будет иметь место нормальный поток, то есть
способ форматирования блоков браузером по умолчанию, и
блоки расположатся друг под другом.
2. Применение абсолютного позиционирования блоков. Для этого
необходимо указать свойство position равным absolute и значение
смещения относительно левого верхнего края страницы. В этом
случае блоки вырвутся из нормального потока и разместятся в
соответствии с указанными значениями смещений.
3. Использование плавающей модели. В этом случае блок
вырывается из нормального потока и смещается максимально
вверх и влево. Для объявления блока плавающим имеется
свойство float, принимающее значения left и right.
Но и у блочной верстки есть свои недостатки. Во-первых, при
использовании абсолютного позиционирования возникает ситуация,
когда браузеры по-разному считают координаты, и располагают
блоки не в тех местах. Для корректного отображения страницы во
всех браузерах, к блокам необходимо применить скрипт, который
будет определять тип браузера, и в зависимости от типа, данный
скрипт будет располагать блок в определенных координатах. Вовторых, при низких разрешениях экрана монитора пользователя,
может возникнуть ситуация, когда один блок увеличивает свою длину
за счет увеличения в нем к примеру, размера шрифта, и наплывает на
другой нижележащий блок. Для решения данной проблемы нужно
использовать плавающую модель. В плавающей модели есть свойство
clear, которое позволяет располагать блок ниже всех плавающих.
Способ верстки необходимо подбирать под соответствующий
макет, в зависимости от внешнего вида макета. Нет такого способа,
который обеспечивал бы одновременно простоту верстки и
кроссбраузерность. Опыт показал, что для верстки сложных макетов
часто используют смешанный способ верстки, где применяются и
таблицы, и CSS-блоки.
Список литературы
1. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. СПб: Символ-Плюс, 2004. 376 с.:
2. Дубаков М. Создание Web-страниц: искусство верстки. Новое знание, 2004. 287 с.