LAB7 Захаров А.Е. (Лабораторная работа 7)

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

ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ

КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ

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

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

Выполнил

студент группы А-13-08

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

Захаров Антон

Преподаватель

Куриленко Иван Евгеньевич

Москва, 2012

Цель работы

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

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

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

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

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

Порядок выполнения работы

1. Разработать страницу, содержащую слои

2. Реализовать наслоение изображений (по принципу колоды карт) с помощью слоёв и настройки Z-индексов (вариант 9).

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

Как известно, HTML – это язык разметки страниц. Возможности классического HTML (например, версии 3.2) по этой самой разметке сильно ограничены. Например, он не позволяет располагать элементы страницы (текст, картинки, таблицы и т.п.) в слоях.

Определение

Слой (layer) – это прямоугольный блок, который может содержать различные объекты: текст, графику, таблицы.

Допускается применение нескольких слоёв в пределах одного документа, которые могут взаимно перекрываться, с помощью чего можно добиваться различных интересных эффектов. Кроме того, содержимое слоя в любой момент можно отредактировать или вообще удалить, не трогая элементы других слоёв. Это гораздо удобнее, чем заново создавать картинку (что приходилось бы делать при невозможности использования слоёв). Слои давно уже стали привычной технологией для пользователей профессиональных графических и издательских пакетов.

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

Историческая справка

В 1997 году разработчики Netscape Navigator 4.0 ввели в этом браузере новый тег – таким образом, слои в HTML стали реальностью. Теперь стало возможным, например, расположение графики поверх таблицы или динамическое скрытие / отображение сразу нескольких элементов с помощью JavaScript.

Впрочем, расслабляться дизайнеры не спешили – Microsoft Internet Explorer не поддерживал тег . Тем не менее, слои с помощью небольшого финта ушами можно реализовать и там. «Финт ушами» заключается в комбинации тега и CSS. Интересно, что этот приём, с небольшими ограничениями, сработает и в Netscape Navigator, так как он поддерживает и HTML 3.2, и CSS.

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

Когда мы создаём блок в CSS, мы всегда чётко задаём его параметры, а также позиционируем его в определённое место на экране. Получается, что любой блок у нас имеет две координаты X и Y, определяющие положение блока на плоскости экрана. Но в CSS имеется ещё третья координата Z, она определяет номер слоя, на котором располагается объект. Выходит, что чем больше координата Z, тем выше этот слой находится по отношению к остальным. К примеру, слой с номером 2 будет ближе расположен к пользователю, который просмотрит вашу страницу, чем слой с номером 1. А слой с номером 1, будет расположен выше, чем основной код страницы.

За создание такого слоя в CSS отвечает свойство z-index, а принимаемые им значения, указывают номер слоя.

П ример

Давайте на примере попробуем создать комбинацию Royal Flash.

Когда каждая карта перекрывает другую, это будет выглядеть так:

.desatka_bubna

{

position: absolute;

left: 400px;

top: 400px;

z-index: 1;

}

.valet_bubna

{

position: absolute;

left: 415px;

top: 415px;

z-index: 2;

}

.dama_bubna

{

position: absolute;

left: 430px;

top: 430px;

z-index: 3;

}

.korol_bubna

{

position: absolute;

left: 445px;

top: 445px;

z-index: 4;

}

.tuz_bubna

{

position: absolute;

left: 460px;

top: 460px;

z-index: 5;

}

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

В данной лабораторной работе был модифицирован сайт, разработанный в лабораторных работах № 3 – 6. Была добавлена страница, содержащая слои.

Сайт доступен по адресу: http://a1308.ru/tmp/vmss/lab7

HTML [layers.html]

• Обо мне
• Бакалаврская работа
• Формула
• Таблицы
• Списки
• Слои

Преподаватель: Куриленко Иван Евгеньевич

Выполнил: Захаров Антон

CSS [css/layers.css]

#layers1

{

width: 300px;

height: 200px;

position: relative;

margin: 25px auto;

}

#layers1 img

{

display: block;

position: absolute;

border: 1px #ccc solid;

height: 153px;

width: 109px;

}

#layers1 .z1 { z-index: 3; left: 30px; top: 50px; }

#layers1 .z2 { z-index: 2; left: 70px; top: 30px; }

#layers1 .z3 { z-index: 1; left: 110px; top: 10px; }

#layers1 img:hover { z-index: 10 !important; }

#menu

{

position: fixed !important;

z-index: 11;

top: 150px;

left: 0;

right: 0;

}

.info

{

padding-top: 57px !important;

}

#content

{

background: #fff url('../images/trydown.jpg') no-repeat scroll top right;

height: 2000px;

}

Используемые источники.

1. Слои в CSS

[http://sitemaste.ru/sloi-css]

1. Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6_е издание. – Пер. с англ. – СПб: Символ_Плюс, 2008. – 752 с., ил.

1. Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0. – СПб.: БХВ-Петербург, 2003. – 672 с.: ил.

1. Шмитт К. CSS. Рецепты программирования. 2-е изд: Пер. с англ. – М.: Издательство «Русская Редакция»; СПб.: «БХВ-Петербург», 2009. – 592 с.: ил.

1. Мейер Э. CSS – каскадные таблицы стилей. Подробное руководство, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 576 с., ил.