, прямое назначение которого заключается в выделении основных разделов документа и разбиение его на основные функциональные части. Этот блочный
структуры документа является универсальным контейнером и может содержать информацию, представленную в любом виде – текст, графика, форма или другие компоненты. Чего нельзя сказать об остальных блочных элементах, которые рекомендованы к применению в конкретных случаях и должны содержать соответствующий тип информации. Поэтому благодаря своей универсальности и удобству его форматирования именно
зачастую применяется для создания слоев документа.
Удобство и преимущество такого подхода к верстке документа заключается в том, что визуальная структура веб-страницы проектируется методом задания необходимых значений соответствующих CSS свойств элемента, позиционируя его и придавая ему различные визуальные эффекты. К стилевым свойствам, предназначенным для позиционирования элемента страницы, относятся:
- width
, height
–задающие размеры отображения элемента в теле документа;
- margin-left
, -top
, -right
и -bottom
– отступ между внешней границей форматируемого элемента и смежной границей соседнего элемента;
- padding-left
, -top
, -right
и -bottom
– внутренний отступ, аналогичен margin
, но определяет зазор между содержимым документа и его внутренней границей;
- top
, left
– указывают координаты позиционирования верхнего левого угла элемента;
- position
– это свойство позволяет указать способ позиционирования элемента (absolute
: относительно главного элемента предка, а в случае его отсутствия – относительно
; relative
: относительно позиции элемента, которую он должен занимать согласно порядку формирования кода документа (оригинальной позиции); fixed
: позволяет зафиксировать положение элемента относительно тела документа и других его элементов);
- z-index
– определяет позицию элемента относительно третьей оси координат (Z
) и позволяет визуально перемещать его на передний, задний либо промежуточный план;
- float
– свойство, позволяющее устанавливать расположение элемента относительно общего потока документа (сторону обтекания блочного элемента информационным содержанием страницы)
Помимо позиционных CSS
свойств, в процессе верстки слоями активно применяются свойства визуального оформления блочных элементов (слоев), позволяющие задать толщину, цвет, стиль границы (border
); цвет и/или текстуру фонового наполнения (background
, background-color
) и многие другие не менее важные свойства.
Чем же так хорош способ верстки слоями? Приведем некоторые его неоспоримые преимущества перед другими методами:
- Код становится удобочитаемым, что позволяет без затруднений проводить его отладку, оптимизацию, а также облегчает процесс обслуживания сайта и его редизайн.
- При грамотном подходе соблюдаются семантические требования, согласно которым обеспечивается разделение оформления (CSS
таблицы) и содержательной части (HTML
код) документа
- В результате получаются проекты, полностью отвечающие требованиям современных веб-стандартов, что является абсолютной гарантией безупречной работы ваших сайтов во всех браузерах.
- Значительно уменьшается объем веб-ресурсов, что существенно снижает время, требуемое для их загрузки, и как следствие — повышает производительность.
Несмотря на относительную сложность, верстка страниц слоями позволяет очень точно и гибко настраивать место размещения элементов и их внешнее оформление. Такой подход широко распространен среди профессиональных веб-разработчиков и позволяет создавать качественные и современные сайты, отвечающие последним требованиям веб-стандартов.
Несмотря на то, что термин?слой? дастаткова устойчиво используется при разработке с нашего сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем мы будем активно использовать термин?слой?, поэтому вначале необходимо определить, что же под ним подразумевается.
Особенности верстки слоями
Использование слоев накладывает свой отпечаток не только на код объекта, но и на вид web-страницы в браузере. Зная особенности верстки слоями, можно более эффективно разрабатывать сайт, получая в итоге быстрый и компактный код, который к тому же корректно отображается в браузерах.
Блочные элементы
Блочным имеется ввиду элемент, который отображается на web-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Встроенные элементы
Встроенными называются такие элементы web-страницы, которые являются непосредственной частью другого элемента, например, контентового абзаца. В основном встроенные элементы используются для изменения вида контента или его логического выделения.
Плавающие элементы
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами web-страницы, например, контентом. Такие элементы дастаткова активно применяются при верстке и в основном служат для установки обтекания картинок контентом, разработки врезок и расположения слоев по горизонтали.
Выравнивание слоя по центру
Для выравнивания слоя по центру web-страницы имеется несколько способов? с помощью отступов, через позиционирование, а также используя параметр align тега DIV.
Фиксированный дизайн. Основы
Термин?фиксированный дизайн? используется для обозначения макета страницы, который создается на основе слоев заданной ширины. В статье описаны основные шаги для разработки web-страницы с применением слоев.
Фиксированный дизайн. Параметр float
В статье рассмотрено, как располагать по горизонтали два и более слоя заданной ширины с помощью параметра float, чтобы результат показывался корректно в разных браузерах.
Фиксированный дизайн. Позиционирование
Для размещения рядом по горизонтали двух и более слоев применяется параметр position, с помощью которого можно не только располагать слои рядом, но и накладывать их друг на друга. С помощью таких?перекрытий? можно создать выразительный дизайн web-страниц простыми средствами.
Фиксированный дизайн. Наложение слоев
Основная особенность слоев и их основное отличие от других способов верстки? точное позиционирование и возможность накладывать один слой на другой. Благодаря этой способности с помощью слоев можно создавать разные эффекты на web-странице и применять неожиданные приемы верстки.
Фиксированный дизайн. Макет из трех колонок
Наряду с использованием макета с двумя колонками, находит применение и верстка в три колонки. В этом случае одна из колонок обычно содержит навигацию? ссылки на разделы с нашего сайта, вторая? контент, информационное наполнение страницы, а третья отдается под небольшие контенты, формы, новости, рекламу и др.
Фиксированный дизайн. Размещение трех колонок
Альтернативный подход к созданию макета из трех колонок с помощью слоев состоит в использовании методов позиционирования. Аналогично верстке двумя колонками разделяют два подхода: с абсолютным и относительным позиционированием элементов.
Резиновый дизайн. Двухколонный макет
В статье описан способ разработки двух колонок с помощью слоев, занимающих всю отведенную ширину окна браузера. Метод размещения слоев основан на использовании параметра float и абсолютного позиционирования.
Влад Мержевич
К сожалению, табличная верстка наложила довольно сильный отпечаток на манеру
верстки веб-страниц. И теперь, когда верстка с помощью слоев прочно входит в
моду и завоевывает множество поклонников, предыдущие стереотипы пытаются проявиться
с новой силой. Так что рассказ об особенностях верстки слоями придется начинать
не со слоев, а с таблиц и того багажа, что они с собой принесли.
Не секрет, что большинство сайтов в мире создано с помощью табличной технологии,
когда таблица с невидимой границей выступает в качестве опорной модульной сетки
документа. Вместе с тем разработчики постепенно переходят на верстку слоями —
это интересно, доступно и пользуется популярностью. Но в качестве образца для
подражания выбираются именно табличные сайты, поскольку они известны и на виду,
и уже их пытаются приспособить под верстку слоями.
Что же в итоге получается? А то, что из конструктора, предназначенного для
создания танка, пытаются сделать самолет. Думаете, это невозможно? Нет ничего
невозможного, когда под рукой есть напильник и прорва времени. Но с другой стороны,
может проще взять нужный конструктор...
Давайте для примера рассмотрим типичную и простую схему компоновки страницы
(рис. 1).
Рис. 1. Страница, созданная с помощью таблиц
В самом верху располагается «шапка» документа, где пишется заголовок сайта.
Далее идут две колонки одинаковой высоты, колонки при этом для наглядности выделяются
разным цветом. В самом низу располагается «подвал» страницы, куда помещают контактную
информацию и другие служебные данные. При этом высота всего макета занимает
всю доступную высоту окна браузера, т.е. «подвал» располагается у нижнего края
веб-страницы. Правда это происходит только в том случае, если текста в колонках
не так много. Когда объем текста превышает высоту веб-страницы, она отображается
с вертикальной полосой прокрутки.
Несмотря на указанные условия, код, сформированный с помощью таблиц, отличается
своей компактностью (пример 1). Для сокращения кода стили не применялись.
Пример 1. Использование таблиц
Сайт
Заголовок сайта |
| Левая колонка |
Правая колонка |
| Подвал страницы |
Высота таблицы определяется атрибутом height
тега
. Хотя этот атрибут отсутствует
в спецификации HTML, браузеры при отсутствии
его понимают, что и приводит к желаемому результату.
Значение 100% говорит, что таблица занимает всю доступную высоту веб-страницы.
Приведенный двухколонный макет достаточно популярен среди разработчиков, поэтому
у них возникает мысль реализовать его, но используя исключительно слои, без
всяких таблиц. При этом сформировалось два стиля работы или, можно даже сказать,
мышления.
- За основу берется табличная верстка и с помощью слоев она воплощается максимально
близко к оригиналу.
- Используются особенности слоев, сайт верстается с их учетом.
Сторонники первого метода работы забывают, что имеют дело с совершенно противоположными
инструментами, в итоге рождаются оригинальные схемы обхода тех или иных ограничений.
Код в подобных случаях разбухает в разы, усложняется работа с ним, а браузеры,
как правило, по-разному отображают документ. Приходится обращаться к хакам либо
обманывать браузеры другими способами так, чтобы сайт в итоге работал корректно.
Теперь переходим к особенностям слоев, чтобы понять, в чем же суть этого типа
верстки.
Слои не таблицы
Несмотря на банальность подобного утверждения, многие разработчики своим трудом
опровергают его вновь и вновь. Но стоит только осознать, что это разные инструменты
и элементы конструктора, как сразу станет легче и проще. Действительно, таблицы
и методы верстки с их помощью лучше применять в одном случае, а слои — в другом.
И четко разделять подходы и принципы верстки. Тогда нам не понадобится загонять
творческую мысль в прокрустово ложе антагонистичной технологии. Надо просто
пойти другим путем.
Высота слоев ограничена высотой контента
В таблице соседние ячейки взаимосвязаны, поэтому высота у них одна, независимо
от объема информации. Это хорошо видно, если залить фон ячеек разным цветом.
Слои же в каком-то смысле являются независимыми друг от друга, поэтому высота
слоя определяется его содержимым. Вид документа при этом будет отличаться от
его табличного собрата (рис. 2)
Рис. 2. Страница, созданная с помощью слоев
Высота разных колонок на данном рисунке различается, поскольку формируется
за счет их содержимого.
Когда требуется, высоту слоя можно установить через стили, используя для этого
разные единицы — проценты, пикселы, дюймы и т.д. Но если содержимое слоя
превышает его заданную высоту, то браузеры по-разному интерпретируют этот факт —
одни расширяют высоту слоя под новый контент, а другие браузеры, оставляя высоту
исходной, накладывают контент поверх слоя.
Блочная верстка
Уже упоминалось, что слои в большинстве случаев являются независимыми друг
от друга, за счет чего они как отдельные блоки могут добавляться или удаляться
в макете веб-страницы. За такое поведение верстка с помощью слоев получила название
«блочная верстка». Слои допустимо вкладывать один в другой для формирования
желаемого декоративного элемента. Поэтому под именем «блок» подразумевается
не столько отдельный слой, сколько их совокупность.
Расположение колонок
По умолчанию содержимое контейнеров
на
веб-странице располагаются по вертикали, вначале идет один слой, ниже располагается
следующий и т.д. При создании колонок требуется располагать слои рядом по горизонтали,
для чего применяется несколько методов. Одним из распространенных является использование
стилевого свойства float
. Хотя он предназначен
для создания обтекания вокруг элемента, с тем же успехом float
устанавливает и колонки. Но здесь следует учесть одну особенность. При уменьшении
окна браузера до некоторой критической ширины, колонки перестают располагаться
горизонтально и перестраиваются друг под другом по вертикали. С этим фактом
либо остается смириться, либо использовать другие методы формирования колонок
через слои.
Резюме
Вид страниц и их поведение в браузере различается от того, каким способом сверстан
документ — с помощью таблиц или слоев. Каждый из этих способов верстки
имеет свои особенности, которые влияют в итоге на отображение
веб-страницы. Что свойственно таблицам и документам, созданным на их основе,
не является признаком слоев, и наоборот. Если это понимать и четко разграничивать
сферы применения таблиц и слоев и не пытаться втиснуть одно в формат другого,
то верстка сайтов со слоями существенно упрощается и становится более эффективной.
Популярное в рубрике:
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Макбук не подключается к wifi Макбук не видит вай фай
читать
Top
