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-color:red – все четыре границы красного цвета

• 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=” “ – определяет дополнительные отступы от изображения по горизонтали

• alt=” “ – определяет альтернативный текст

Практическое занятие №12

Наименование: Создание анимации с помощью CSS

1. Цель: Научиться создавать правила при оформлении веб – страниц средствами CSS

Наименование: Создание динамического меню навигации при помощи списков и правил CSS

1. Цель: Научиться применять элементы HTML (списки и гиперссылки), а также свойства CSS для формирования системы навигации на веб странице

2. Подготовка к занятию: по предложенной литературе повторить тему «Введение в CSS3» и ответить на следующие вопросы:

2.1 Какие нововведения появились в CSS3?

2.2 Какие браузеры не поддерживают анимации?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Веб - дизайн», 2014

3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013

3.3 http://uroki-css.ru/ - уроки CSS3

3.4 http://habrahabr.ru/company/nordavind/blog/209462/ - Трюки с CSS - анимациями

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 Создать следующую анимацию: квадрат размерами 100х100 изменяет свой цвет (допустим с зеленого на желтый) в течении 3 секунд;

5.2 Переделать анимацию, чтобы смена цвета происходила по меньшей мере 4 раза;

5.3 Переделать анимацию таким образом, чтобы при каждом изменении цвета квадрат двигался по часовой стрелке;

5.4 Переделать анимацию, чтобы движение было осуществлено сначала по часовой стрелке, а потом против часовой стрелке, цвет при этом также должен меняться.