www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Верстка с помощью слоев

Верстка с помощью слоев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск по сайту


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

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект