Лабораторная работа 7 (LAB7 Степная Е. В.)

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

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








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

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



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

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Страница со слоямиtitle>

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

<meta content="лабораторная работа, слои" name="keywords" />

<meta content="laboratory work, layers" name="keywords" />

<link rel="Stylesheet" type="text/css" href="Style.css" />


head>

<body>

<table >

<tr class="bg"><td class="td_brown">td><td class="td_brown">Слои <img align="right" src="valid-xhtml11.png" alt=""/>td>tr>

<tr><td class="bg_brown"><a href="me.htm">Обо мнеa>td><td colspan="1" rowspan="6">

<div style="position:relative; left:50px; ">

<div class="leftl">div>

<div class="med">div>

<div class="rightl">div>

div>

td>tr>

<tr><td class="bg_brown"><a href="bakalavr.htm">Бакалаврская работаa>td>tr>

<tr><td class="bg_brown"><a href="formula.htm">Формулаa>td>tr>

<tr><td class="bg_brown"><a href="Layer.htm">Слоиa>td>tr>

<tr><td class="bg_brown"><a href="main.htm">На главнуюa>td>tr>

<tr><td class="bg_brown">td>tr>

table>



body>

html>


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

<div style="position:relative; left:50px; ">

<div class="leftl">div>

<div class="med">div>

<div class="rightl">div>

div>



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

.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;

}






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

Файл
147286.rtf
28723.rtf
62320.rtf
23664-1.rtf
37481.rtf




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