МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ

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

По дисциплине: «Вычислительные машины, системы и сети»

На тему: «Использование слоев»

Выполнила:

Степная Е. В.

А-13-08

Вариант 17

Проверил:

Куриленко И. Е.

2012 г.

Цель работы

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

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

CSS оперирует в трёх измерениях - высота, ширина и глубина. Слои/layers – способ упорядочивать элементы так, чтобы они перекрывались.

Для этого можно присвоить каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.

Div

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

В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера.

Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.

Атрибуты

id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!

style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.

left - расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.

top - расстояние от верха.

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

Положительные стороны использования слоев:

• Удобство для дизайнера – большая свобода и больше эффектов

• Быстрее загрузка и не надо ждать закрытия замыкающего тега

• Удобнее манипулировать содержимым

Отрицательные стороны:

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

• поисковики... многие последовательности тегов, как ни вопят владельцы поисковых машин - а находятся хуже! Вывод - будь проще, и к тебе потянутся.

Модель позиционирования слоев

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

CSS позволяет определить точное положения HTML-элементов.

С помощью CSS программист может размещать содержимое двумя способами:

1. абсолютное позиционирование позволяет указывать положение содержимого по отношению окна браузера.

2. относительное позиционирование по отношению к элементу, внутри которого это содержимое находится.

position

Определяет используемый метод позиционирования.

Значение:

static - обычный элемент, использующий установленную по умолчанию HTML-структуру (по умолчанию).

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

absolute - позиционирование элемента определяется смещением по отношению к положению содержащего его элемента, и они не влияют на общую структуру.

fixed - позиционирование элемента является смещением, как и в случае со значением absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается.

inherit - принимается значение родительского элемента.

p {position: absolute}

top, right, bottom, left

Определяет величину смещения от определенного края (соответственно верхнего, правого, нижнего и левого).

Значение:

- auto - величина смещения выбирается браузером так, чтобы можно было разместить все элементы (по умолчанию).

- любая соответствующая стандарту длина - число, представляющее величину смещения от края.

- любое соответствующее стандарту процентное значение - отношение в процентах длины смещения к ширине элемента (для левого и правого края) или его высоте (для верхнего и нижнего края).

inherit - принимается значение родительского элемента.

p {top: 20px; right: 40px}

z-index

Определяет порядок расположения элементов в стеке (slacking order).

Значение:

- auto - элемент располагается на том же месте, что и его родительский элемент (по умолчанию).

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

- inherit - принимается значение родительского элемента.

img {z-index: 3}

Практическая часть

Исходный код страницы

	Слои
Обо мне
Бакалаврская работа
Формула
Слои
На главную

Исходный код слоев

/*Стили для слоев*/

.leftl {

float:left; position:absolute; width:100px; height:100px; left:0px; top:0px;

background-color:white; border:solid 1px;

z-index:2;

}

.med {

float:left; position:absolute; width:100px; height:100px; left:75px; top:10px;

background-color:white; border:solid 1px;

z-index:2;

}

.rightl {

float:left; position:absolute; width:100px; height:100px; left:150px; top:0px;

background-color:white; border:solid 1px;

z-index:1;

}