УДК 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