Способ верстки слоями.

Данный способ верстки документа основан на использовании блочных элементов HTML структуры. Эти элементы выполняют функцию контейнеров и изображаются в форме прямоугольника: заголовки(<h1> … <h6>); параграф(<p>); элемент предварительного форматирования (<pre>); и универсальный блочный элемент (<div>). Кроме того, к блочным, можно отнести еще вот эти элементы — <blockquote>, <hr>, <form>, <ol>, <ul>.

Но основной блочный элемент, применяемый для формирования структуры веб-страницы при верстке с использованием слоев – это <div>, прямое назначение которого заключается в выделении основных разделов документа и разбиение его на основные функциональные части. Этот блочный элемент HTML структуры документа является универсальным контейнером и может содержать информацию, представленную в любом виде – текст, графика, форма или другие компоненты. Чего нельзя сказать об остальных блочных элементах, которые рекомендованы к применению в конкретных случаях и должны содержать соответствующий тип информации. Поэтому благодаря своей универсальности и удобству его форматирования именно <div> зачастую применяется для создания слоев документа.

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

  • width, height –задающие размеры отображения элемента в теле документа;
  • margin-left, -top, -right и -bottom – отступ между внешней границей форматируемого элемента и смежной границей соседнего элемента;
  • padding-left, -top, -right и -bottom – внутренний отступ, аналогичен margin, но определяет зазор между содержимым документа и его внутренней границей;
  • top, left – указывают координаты позиционирования верхнего левого угла элемента;
  • position – это свойство позволяет указать способ позиционирования элемента (absolute: относительно главного элемента предка, а в случае его отсутствия – относительно <html>; relative : относительно позиции элемента, которую он должен занимать согласно порядку формирования кода документа (оригинальной позиции); fixed: позволяет зафиксировать положение элемента относительно тела документа и других его элементов);
  • z-index – определяет позицию элемента относительно третьей оси координат (Z) и позволяет визуально перемещать его на передний, задний либо промежуточный план;
  • float – свойство, позволяющее устанавливать расположение элемента относительно общего потока документа (сторону обтекания блочного элемента информационным содержанием страницы)

Помимо позиционных CSS свойств, в процессе верстки слоями активно применяются свойства визуального оформления блочных элементов (слоев), позволяющие задать толщину, цвет, стиль границы (border); цвет и/или текстуру фонового наполнения (background, background-color) и многие другие не менее важные свойства.

Чем же так хорош способ верстки слоями? Приведем некоторые его неоспоримые преимущества перед другими методами:

  • Код становится удобочитаемым, что позволяет без затруднений проводить его отладку, оптимизацию, а также облегчает процесс обслуживания сайта и его редизайн.
  • При грамотном подходе соблюдаются семантические требования, согласно которым обеспечивается разделение оформления (CSS таблицы) и содержательной части (HTML код) документа
  • В результате получаются проекты, полностью отвечающие требованиям современных веб-стандартов, что является абсолютной гарантией безупречной работы ваших сайтов во всех браузерах.
  • Значительно уменьшается объем веб-ресурсов, что существенно снижает время, требуемое для их загрузки, и как следствие — повышает производительность.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *