Изображения. Урок 6

Содержание

Слайд 2

Изображения

Изображения на web-странице играют как декоративную, так и информативную роль.

изображение

Изображения Изображения на web-странице играют как декоративную, так и информативную роль. изображение

Слайд 4

Практическая работа

Урок 6

Практическая работа Урок 6

Слайд 5

Практическая работа

В папке 2_lesson на рабочем столе (названа своей фамилией) открываем через

Практическая работа В папке 2_lesson на рабочем столе (названа своей фамилией) открываем через SublimeText файл photo.html:
SublimeText файл photo.html:

Слайд 6

Практическая работа

В папке images добавим изображения:

Практическая работа В папке images добавим изображения:

Слайд 7

Практическая работа

Работаем со страницей photo.html
Необходимо добавить изображения.

Практическая работа Работаем со страницей photo.html Необходимо добавить изображения.

Слайд 8

Практическая работа

Работаем со страницей photo.html

Посмотреть результат в браузере.

Практическая работа Работаем со страницей photo.html Посмотреть результат в браузере.

Слайд 9

Практическая работа

Добавим атрибут width=100%

Посмотреть результат в браузере.
Что изменилось?

Практическая работа Добавим атрибут width=100% Посмотреть результат в браузере. Что изменилось?

Слайд 10

Практическая работа

Добавим атрибут width=100%

Посмотреть результат в браузере.
Что изменилось?

Изменить значение на width=33%

Практическая работа Добавим атрибут width=100% Посмотреть результат в браузере. Что изменилось? Изменить значение на width=33%

Слайд 11

Практическая работа

Если необходимо выровнять изображения по высоте, то применяем атрибут width=500px

Посмотреть результат

Практическая работа Если необходимо выровнять изображения по высоте, то применяем атрибут width=500px
в браузере.
Что изменилось?

Слайд 12

Практическая работа

Создадим заготовку для слайдера, добавив еще несколько изображений.

Практическая работа Создадим заготовку для слайдера, добавив еще несколько изображений.

Слайд 13

Практическая работа

Создадим рамочки для изображений border=4

Практическая работа Создадим рамочки для изображений border=4

Слайд 14

Создадим подписи к изображениям


Трюк climb

Создадим подписи к изображениям Один из трюков в Паркуре
Один из трюков в Паркуре


Слайд 15

Самостоятельная работа

Самостоятельно создать гиперссылки изображений: щелчком по картинке осуществляется переход на новую

Самостоятельная работа Самостоятельно создать гиперссылки изображений: щелчком по картинке осуществляется переход на
страницу с большим изображением.
Должны быть созданы дополнительно несколько новых страниц.

Слайд 16

Видео

Урок 5

Видео Урок 5

Слайд 17

Вставка видео

Видео хранится на собственном сервере:

Вставка видео Видео хранится на собственном сервере:
Имя файла: Изображения.-Урок-6.pptx
Количество просмотров: 26
Количество скачиваний: 0