Национальный исследовательский институт

Московский Энергетический Институт (Технический Университет)

Институт автоматики и вычислительной техники

Кафедра Прикладной математики

Лабораторная работа №7

по дисциплине:

ВМСС

тема работы:

Использование слоев

Выполнил:

Бочаров Иван Андреевич

Проверил:

к.т.н., доц. Куриленко Иван Евгеньевич

Москва

2012 г.

Цель работы

Научиться использовать слои при форматировании текста.

Подготовка к работе

1. Ознакомиться с способом организации и отображения слоев в HTML

2. Ознакомиться с стилями, применимыми к слоям

3. Ознакомиться с моделью позиционирования слоев

Выполнение подготовки

Способ организации и отображения слоев

CSS дает возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Синтаксис для работы со слоями разработан и одобрен в конце 1996 года в рабочем проекте консорциума "CSS Positioning (CSS-P)" Данный проект для позиционирования элементов практически одинаково поддерживается браузерами за исключением ряда мелких отличий.

Для создания слоев следует использовать тег DIV или SPAN. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент DIV. При размещении текста внутри параграфа применяется тег SPAN.

Тип позиционирования определяется параметром position, положение элемента двумя координатами top и left, а порядок слоя значением z-index.

Позиционирование слоев

Свойство position может принимать одно из трех значений: static (статическое), absolute (абсолютное) и relative(относительное). Параметр static по умолчанию не оказывает никакого влияния на расположение слоев.

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

Параметр position: relative используется для смещения слоя относительно родительского элемента. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.

Положение слоя

В то время как свойство position указывает тип системы координат, параметры top и left определяют точную позицию слоя. Значения этих параметров могут определяться в процентном отношении или пикселах, принимать положительные и отрицательные величины. Это дает возможность размещать контент выше или ниже на странице независимо от физической позиции кода HTML. То есть, в верхней части страницы можно поместить слой, который описан внизу HTML-документа.

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

z-index

Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index. Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.

Свойство visibility

Для отображения или скрытия слоя используется параметр visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет.

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

Выполнение работы

Разместим на одной из страниц сайта изображения в соответствии с номером варианта:

Код страниц

layers.css

.top{

display:inline;

position: relative;

right: 110px;

top: 110px;

z-index: 2;

}

.bottomleft{

display:inline;

position: relative;

left: 10px;

top: 10px;

z-index: 1;

}

.bottomright{

display:inline;

position: relative;

left: 380px;

bottom: 240px;

z-index: 1;

}

layers.html