LAB7 Степная Е. В. (544757)
Текст из файла
МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ
Лабораторная работа №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;
}
Характеристики
Тип файла документ
Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.
Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.
Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
