2020-09-26
72
Наименование: Оформление документа средствами CSS (часть 1)
1. Цель: Научиться создавать правила при оформлении веб – страниц средствами CSS. Формировать компетенции ОК 1, ОК 2, ОК 4, ОК 8, ОК 9; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5
2. Подготовка к занятию: по предложенной литературе повторить тему «Оформление HTML – документа средствами CSS» и ответить на следующие вопросы:
2.1 Какие свойства можно применить для фона веб – страницы?
2.2 Как можно сделать изображение прозрачным?
2.1 Какие списки можно организовать с помощью CSS?
3. Литература:
3.1 Шомас Е.А. Веб – дизайн, учебное пособие. Самара, КС ПГУТИ, 2014
3.2 https://html5book.ru/osnovy-html/ - Основы HTML
4. Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
5. Задание:
5.1 Создайте CSS – таблицу, в которой задайте фоновое изображение для своей страницы, установите положение картинки на странице (слева или справа), запретите повтор изображения.
5.2 Поместите на страницу маркированный список, в качестве маркера использовать изображение.
5.3 Вокруг любого абзаца на своей страницы установите границу любого цвета, вид границы выберите самостоятельно.
5.4 Вставьте изображение, пропишите для него код, который позволит нам менять прозрачность изображения при наведении на него указателя мыши. Пример кода можно просмотреть в пункте порядок выполнения
6. Порядок выполнения работы:
6.1 Вывод изображения один единственный раз (без повторения) устанавливается с помощью свойства background-repeat. Положение картинки указывается с помощью свойства background-position. Отступы устанавливаются с помощью свойства margin-right.
6.2 Чтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image
6.3 Свойство border-style указывает, какой тип границы отображать:
- dotted – точечная граница
- dashed – штриховая граница
- solid – сплошная граница
- double – двойная сплошная
6.4 Эффект при перемещении мыши над изображением можно выполнить с использованием следующего кода:
<img src="*.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
В коде присутствуют атрибут onmouseover и атрибут onmouseout. Атрибут onmouseover определяет, что должно произойти, когда указатель мыши находится над изображением. В этом случае мы хотим, чтобы изображение НЕ БЫЛО прозрачным, когда мы перемещаем указатель мыши над ним.
7. Содержание отчета:
7.1 Наименование и цель работы
7.2 Код таблицы CSS
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Какие средства по оформлению HTML – документов предлагает нам CSS?
8.2 Как установить цвет только верхней границы элемента?
8.3 Какие свойства для списков вам известны?
ПРИЛОЖЕНИЕ:
В качестве фона любого элемента страницы вы можете задать либо цвет, либо изображение. Список всех возможных свойств фона:
- background-color – устанавливает цвет фона элемента, значение можно задавать шестнадцатеричным кодом или названием цвета, либо ключевым словом transparent.
- background-image – задает графический объект в качестве фона элемента
- background-repeat – определяет, будет ли дублироваться фоновое изображение и, если да, то каким образом. Данное свойство может принимать следующие значения:
- repeat - дублируется как по вертикали, так и по горизонтали;
- repeat-x – дублируется только по горизонтали;
- repeat-y - дублируется только по вертикали;
- no-repeat – не дублируется: отображается только одна копия изображения.
Границы элементов
Рассмотрим свойства элемента border.
- border – width – ширина границы, измеряется в px.
- border-color – определяет цвет границ. border-top-color – цвет верхней границы
- border-bottom-color – цвет нижней границы
- border- left/right- color – цвет левой/правой границы
- border-style – вид границы
- dotted – точечная граница
- dashed – штриховая граница
- solid – сплошная граница
- double – двойная сплошная
Списки
Стилизация списка задается с помощью свойства list –style –type. Это свойство задает вид маркера элемента списка, если для свойства list –style –image задано значение none или изображение, на которое указывает URL, недоступно.
Рассмотрим свойство list –style –image, которое определяет файл с картинкой, используемой в качестве маркера элемента списка. Синтаксис:
UL {list-style-image: url(“http:// my_site.com/my_marker.jpg”)}
Изображения
CSS дает возможность регулировать прозрачность изображения
Атрибуты и значения
- opacity:- определяет прозрачность изображения (от 0 до 1)
- filter:alpha – параметр для Internet Explorer. Значение от 0 до 100
- hspace =” “ – определяет дополнительные отступы от изображения по горизонтали
