М.Е. КРАСАВИНА Научный руководитель – Н.А. БОРСУК, к.т.н., доцент ДЛЯ INTERNET-РЕСУРСОВ

УДК 004 (06) Информационные технологии
М.Е. КРАСАВИНА
Научный руководитель – Н.А. БОРСУК, к.т.н., доцент
Калужский филиал Московского государственного технического университета им. Н.Э. Баумана
МЕТОДЫ СОЗДАНИЯ КРОССБРАУЗЕРНОЙ ВЕРСТКИ
ДЛЯ 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.
2.
Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. СПб: Символ-Плюс, 2004. 376 с.
Дубаков М. Создание Web-страниц: искусство верстки. Новое знание, 2004. 287 с.
_______________________________________________________________________
ISBN 5-7262-0710-6. НАУЧНАЯ СЕССИЯ МИФИ-2007. Том 16
1