Если быть более точным, то блоки - это прямоугольные карточки, которые лежат на поверхности, перекрывая друг друга. Расстояние между ними задать нельзя, т.е. полноценного третьего измерения нет:
Рис. 27. Порядок наложения блоков. z-index
Порядок перекрытия блоков (слоев, в терминах Netscape) определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой:
Рис. 28. Порядок наложения блоков. z-index
Как мы видим, z-index может принимать и отрицательные значения.
При работе с этим атрибутом следует иметь в виду, что Netscape Navigator и Internet Explorer применяют разные модели описания "слойки". В Internet Explorer это просто числовой параметр, который закреплен за блоком и не влияет на значения данного параметра у других блоков. В Netscape Navigator изменение параметра z-index одного блока влияет на значения этого параметра у других блоков. Они, словно карточки на столе, перекладываются и получают новые номера.
Карточки перекрываются. Если нажать на гипертекстовую ссылку "Переложить", то голубая карточка поползет вниз и при обратном ходе ее положение относительно красной карточки изменится.
Рис. 29. Порядок наложения блоков. z-index
Рис. 30. Порядок наложения блоков. z-index
Область видимости блока. clip
Совершенно необязательно показывать весь блок целиком. Можно показать только часть блока. Управляется такое отображение параметром clip описания CSS:
<DIV STYLE="position:absolute;top:0;left:0;width:300;height:50;clip:rect(0,100,20,0);">...</DIV>
Порядок выполнения работы и индивидуальные задания
Содержание отчета
В отчете привести порядок выполнения работы, список использованных компонентов, экранные формы разработанного приложения и распечатку исходного кода.
Индивидуальные задания
Разработать дизайн главной страницы сайта в соответствии с выбранной предметной областью.
- Задание можно выполнять в Блокноте, Dreamweawer-е
- Создать новый проект (Dreamweawer) или папку MyProject, добавив файл index.html (текст приведен ниже) и папки css и image (для изображений, которые будут использованы при оформлении главной страницы сайта), в папку css поместить файл style.css
- В файл index.html записать следующий код:
Файл index.html
<html>
<head>
<title>my site</title>
<link href="css/style.css" type="text/css" media="all" rel="stylesheet" />
</head>
<body>
<div class="center">
<div class="header">
my site
</div>
<div class="header">
my div
</div>
my div
</div>
</body>
</html>
- В файл style.css записать код:
.header
{
border:1px solid #000000;
width:200px;
height:50px;
float:left;
}
.center
{
width:600px;
background:#ffffff;
margin:0px auto;
}
body
{
background:gray;
}
- Пройти все пункты лабораторной работы, добавляя блоки в файл index.html, а стили к ним – в файл style.css.
- Содержимое блоков должно соответствовать согласованной с преподавателем предметной области.
