Верстка с помощью слоев
Базовые понятия
Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем мы будем активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.
Особенности верстки слоями
Использование слоев накладывает свой отпечаток не только на код документа, но и на вид веб-страницы в браузере. Зная особенности верстки слоями, можно более эффективно разрабатывать сайт, получая в итоге быстрый и компактный код, который к тому же корректно отображается в браузерах.
Блочные элементы
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Встроенные элементы
Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном встроенные элементы используются для изменения вида текста или его логического выделения.
Плавающие элементы
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Такие элементы достаточно активно применяются при верстке и в основном служат для установки обтекания картинок текстом, создания врезок и расположения слоев по горизонтали.
Выравнивание слоя по центру
Для выравнивания слоя по центру веб-страницы имеется несколько способов — с помощью отступов, через позиционирование, а также используя параметр align тега DIV.
Фиксированный дизайн. Основы
Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. В статье описаны основные шаги для создания веб-страницы с применением слоев.
Фиксированный дизайн. Параметр float
В статье рассмотрено, как располагать по горизонтали два и более слоя заданной ширины с помощью параметра float, чтобы результат показывался корректно в разных браузерах.
Фиксированный дизайн. Позиционирование
Для размещения рядом по горизонтали двух и более слоев применяется параметр position, с помощью которого можно не только располагать слои рядом, но и накладывать их друг на друга. С помощью таких «перекрытий» можно создать выразительный дизайн веб-страниц простыми средствами.
Фиксированный дизайн. Наложение слоев
Основная особенность слоев и их основное отличие от других способов верстки — точное позиционирование и возможность накладывать один слой на другой. Благодаря этой способности с помощью слоев можно создавать разные эффекты на веб-странице и применять неожиданные приемы верстки.
Фиксированный дизайн. Макет из трех колонок
Наряду с использованием макета с двумя колонками, находит применение и верстка в три колонки. В этом случае одна из колонок обычно содержит навигацию — ссылки на разделы сайта, вторая — контент, информационное наполнение страницы, а третья отдается под небольшие тексты, формы, новости, рекламу и др.
Фиксированный дизайн. Размещение трех колонок
Альтернативный подход к созданию макета из трех колонок с помощью слоев состоит в использовании методов позиционирования. Аналогично верстке двумя колонками разделяют два подхода: с абсолютным и относительным позиционированием элементов.
Резиновый дизайн. Двухколонный макет
В статье описан способ создания двух колонок с помощью слоев, занимающих всю отведенную ширину окна браузера. Метод размещения слоев основан на использовании параметра float и абсолютного позиционирования.