Лабораторная работа 7 (LAB7 Бочаров И.А.)

Посмотреть архив целиком

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

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

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

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





Лабораторная работа №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

<html>

<head>

<title>Лабораторные работы по ВМССtitle>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="keywords" content="vmss, lab">

<link rel="stylesheet" type="text/css" href="styles.css">

<link rel="stylesheet" type="text/css" href="tablestyles.css">

head>

<body>


<div class="headerone">Использование слоевdiv>


<table>

<tr>

<td class="menu">

<ul id="menu">

<li><a href="main.html">Главнаяa>li>

<li><a href="classification.html">Постановка задачи классификацииa>li>

<li><a href="algorithms.html">Алгоритмы решения задачиa>li>

<li><a href="formula.xhtml">Формулаa>li><li><a href="lists.html">Спискиa>li>

<li><a href="tables.html">Таблицаa>li>

<li><a href="layers.html">Слоиa>li>

ul>

td>

<td valign="top" class="bordered">

<img src="oasis4.jpg" alt="Oasis4" class="bottomleft" width="350">

<img src="oasis2.jpg" alt="Oasis2" class="top" width="350">

<img src="oasis3.jpg" alt="Oasis3" class="bottomright" width="350">

td>

tr>

<tr>

<td colspan="2" align="right">

<div class="info">Выполнил: Бочаров Иван, А-13-08div>td>

tr>

table>

body>

html>




Случайные файлы

Файл
144086.rtf
143973.rtf
24343-1.rtf
7977-1.rtf
138093.rtf




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