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