Лабораторная работа №11. Визуальное форматирование Цель работы Основные понятия

Лабораторная работа №11. Визуальное форматирование
Цель работы: Познакомиться с возможностями каскадных таблицей стилей
по компоновке элементов HTML на странице.
Основные понятия.
Каскадные таблицы стилей предоставляют разработчику webдокументов мощные средства компоновки элементов HTML на странице документа, определяющие внешний вид страницы HTML в окне браузера.
Свойство position элемента позволяет определить способ его позиционирования на странице:
1. absolute – указывает, что элемент абсолютно позиционирован, при
этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет
значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчёт координат
ведётся от края родительского элемента;
2. fixed – по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и
bottom точке на экране и не меняет своего положения при прокрутке
веб-страницы;
3. relative – положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет
позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения;
4. static – элементы отображаются как обычно. Использование свойств
left, top, right и bottom не приводит к каким-либо результатам;
5. inherit – наследует значение родителя.
Свойства left, top, right и bottom определяют расстояние, соответственно,
от левого, верхнего, правого и нижнего края родительского элемента, не
включая отступ, поле и ширину рамки, до соответствующего края дочернего
элемента.
Еще два параметра, влияющие на отображение позиционированного
элемента, – это свойства width и height элемента, задающие ширину и высоту
блока. Если они не заданы, то по горизонтали блок распространяется до правого края окна браузера, а по вертикали – на столько, на сколько необходимо
для отображения содержимого элемента.
Несколько свойств каскадных таблиц стилей позволяют организовать,
совместно со встроенными сценариями, динамическое отображение и скрытие элементов страницы HTML.
Свойство visibility управляет отображением элемента. Если его значение
равно visible (значение по умолчанию), то элемент отображается, если оно
Создание веб-страниц
установлено равным hidden, то элемент не отображается. Когда для скрытия
элемента используется его свойство visibility, то элемент не изымается из потока отображения. Это означает, что соответствующий ему блок занимает
надлежащее положение на странице, но содержимое этого блока (элемент) не
отображается.
Подобное поведение отличается от поведения объекта со свойством
display равным none. В последнем случае элемент не только не отображается,
но и изымается из потока отображения, и на странице нет пустого блока, соответствующего этому элементу.
Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определённой ширины и высоты. Блок отображения не обязательно должен соответствовать размерам самого элемента: он может вмещать весь элемент, а может вмещать только его часть. Свойство clip воздействует только на блок отображения элемента. Его значением может быть auto
(никакого отсечения не производится) или границы прямоугольника видимого изображения элемента, которые задаются с помощью следующего параметра rect (top right bottom left). Величины top, right, bottom и left определяют,
соответственно, верхнюю, правую, нижнюю и левую границы видимого
изображения элемента относительно блока отображения.
Свойство overflow определяет поведение элемента, когда размеры его
содержимого не соответствуют размерам блока отображения, установленного
свойствами top, left, width и height. Существует четыре значения этого свойства, определяющие поведение элемента:
 visible – заставляет элемент сжаться или увеличиться, чтобы полностью отобразиться в заданном блоке (для графического содержимого
элемента) или увеличивает размеры блока отображения (для текстового содержимого);
 hidden – обрезает элемент в соответствии с размерами блока;
 auto – добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения;
 scroll – добавляет полосы прокрутки к блоку отображения в любом
случае.
Тэг <DIV> является блочным элементом и предназначен для выделения
фрагмента документа с целью изменения вида содержимого. Как правило,
вид блока управляется с помощью стилей. Чтобы не описывать каждый раз
стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для
тега добавить атрибут class или id с именем селектора.
<div class="content">
Информация.
</div>
2
Создание веб-страниц
Порядок выполнения работы
1. Откройте Paint.
2. В Paint создайте рисунок размером 150х300 точек и сохраните его в папку
D:\Users\...\Web\ Lab11\ в формате JPG под именем pic.
3. Откройте Блокнот.
4. Создайте файл каскадной таблицы стилей, в которой сделайте, чтобы:
 фон имел цвет lightsteelblue;
 заголовки первого уровня выводился шрифтом Arial, разряженным,
синего цвета;
 заголовки второго уровня выводился шрифтом Courier New, разряженным, зелённого цвета;
5. В каскадную таблицу стилей добавьте следующий код:
.mmm {
position: absolute;
left: 400px;
top: 50px;
width: 150px;
background: #e0e0e0;
border: 2px solid #000;
padding: 5px;
}
.nnn {
position: absolute;
left: 0;
top: 0;
width: 380px;
background: #00a5b6;
color: white;
padding: 5px;
padding-right: 90px;
text-align: justify;
}
.ppp {
position: relative;
left: 50;
top: 200;
width: 200px;
background: #efe68d;
color: blue;
padding: 20px;
}
6. Сохраните файл в папку D:\Users\...\Web\ Lab11\ с именем mycss.css.
7. Создайте HTML-документ. Сохраните файл в папку D:\Users\...\Web\
Lab11\ с именем index11.html.
8. Подключите к HTML-документу созданную таблицу стилей.
9. В HTML-документ используя тэг <DIV> создайте три блока:
 1-ый использующий стиль nnn;
3
Создание веб-страниц
2-ой использующий стиль mmm;
 3-ий использующий стиль ppp.
Для подключения стиля используйте атрибут class.
10. В первом блоке создайте:
 заголовок первого уровня "Лабораторная работа №11";
 надпись, содержащую название дисциплины;
 горизонтальную линию;
 текущую дату.
11. Во втором блоке создайте:
 заголовок второго уровня "Разработчик";
 надпись, содержащую Ваше Ф.И.О., название факультета, группу.
12. В третьем блоке:
 создайте заголовок второго уровня "Фото";
 вставьте рисунок pic, сделайте, чтобы рисунок не выходил за рамки
блока.

4