Базовые понятия

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

Особенности верстки слоями

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

Блочные элементы

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

Встроенные элементы

Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном встроенные элементы используются для изменения вида текста или его логического выделения.

Плавающие элементы

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

Выравнивание слоя по центру

Для выравнивания слоя по центру веб-страницы имеется несколько способов — с помощью отступов, через позиционирование, а также используя параметр align тега DIV.

Фиксированный дизайн. Основы

Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. В статье описаны основные шаги для создания веб-страницы с применением слоев.

Фиксированный дизайн. Параметр float

В статье рассмотрено, как располагать по горизонтали два и более слоя заданной ширины с помощью параметра float, чтобы результат показывался корректно в разных браузерах.

Фиксированный дизайн. Позиционирование

Для размещения рядом по горизонтали двух и более слоев применяется параметр position, с помощью которого можно не только располагать слои рядом, но и накладывать их друг на друга. С помощью таких «перекрытий» можно создать выразительный дизайн веб-страниц простыми средствами.

Фиксированный дизайн. Наложение слоев

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

Фиксированный дизайн. Макет из трех колонок

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

Фиксированный дизайн. Размещение трех колонок

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

Резиновый дизайн. Двухколонный макет

В статье описан способ создания двух колонок с помощью слоев, занимающих всю отведенную ширину окна браузера. Метод размещения слоев основан на использовании параметра float и абсолютного позиционирования.

На главную

При использовании материалов сайта ссылка на comnew.ru обязательна!