HTML+CSS. Создание простых объектов презентация

Август 2, 2022

Главная
Информатика
HTML+CSS. Создание простых объектов

Содержание

2. 2 Знакомство с HTML и CSS
3. 3 Применение HTML и CSS
4. 4 Что мы сегодня сделаем?
5. 5 Открываем Sublime Text 3
6. Сохраняем документ 6
7. 7 Настраиваем рабочую среду
8. 8 Создаем основу документа
9. 9 Структура HTML страницы
10. Создаем CSS документ 10
11. Настраиваем рабочую среду 11
12. Работаем с CSS 12 getcolor.ru
13. Cохраняем документы 13
14. 14 Открываем веб страницу
15. Создаём анимацию 15
16. 16 Проверяем анимацию
17. 17 Дополнительные свойства анимации
18. 18 Дополнительные свойства анимации
19. 19 Дополнительные свойства анимации
20. 20 Задание Попробуйте сделать так, чтобы квадрат один цикл вращался по часовой, а затем против часовой
21. Решение 21
22. 22 Создаем класс
23. 23 Работаем с CSS
24. 24 Проверяем объект
25. 25 Задаем движение круга
26. 26 Меняем цвета круга
27. 27 Проверяем анимацию
28. 28 Задание Создайте новый круг. Попробуйте сделать анимацию прыгающего мяча (воспользуйтесь свойством transform: translateY). Добавьте изменение
29. Решение 29
30. Решение 30
31. 31 Создаем класс
32. 32 Работаем с CSS
33. 33 Проверяем объект
34. 34 Задаем траекторию движения
35. 35 Проверяем анимацию
36. 36 Создаем новый класс
37. 37 Работаем с CSS
38. 38 Создаем анимацию
39. 39 Проверяем анимацию
40. 40 Продолжаем урок
41. Создаем HTML документ 41
42. Создаем CSS документ 42
43. Настраиваем рабочую среду 43
44. 44 Создаем основу документа HTML
45. 45 Структура HTML страницы
46. Работа с CSS 46 getcolor.ru
47. Открываем web страницу 47
48. 48 Создаём анимацию
49. 49 Открываем web страницу
50. 50 Дополнительные свойства анимации
51. Открываем web страницу 51
52. 52 Дополнительные свойства анимации
53. Открываем web страницу 53
54. 54 Задание Попробуйте сделать так, чтобы квадрат один цикл вращался по часовой, а затем против часовой
55. 55 Решение
56. 56 Создаем класс
57. 57 Работаем с CSS
58. Открываем web страницу 58
59. 59 Задаем анимацию
60. Открываем web страницу 60
61. 61 Задание Сделайте так, чтобы на каждом ключевом кадре анимации круг менял цвет в процессе движения
62. 62 Решение
63. 63 Создаем класс
64. 64 Работаем с CSS
65. 65 Создаем анимацию
66. Открываем web страницу 66
67. 67 Создаем анимацию
69. Скачать презентацию

Слайд 2

2
Знакомство с HTML и CSS

Слайд 3

3
Применение HTML и CSS

Слайд 4

4
Что мы сегодня сделаем?

Слайд 5

5
Открываем Sublime Text 3

Слайд 6

Сохраняем документ
6

Слайд 7

7
Настраиваем рабочую среду

Слайд 8

8
Создаем основу документа

Слайд 9

9
Структура HTML страницы

Слайд 10

Создаем CSS документ
10

Слайд 11

Настраиваем рабочую среду
11

Слайд 12

Работаем с CSS
12
getcolor.ru

Слайд 13

Cохраняем документы
13

Слайд 14

14
Открываем веб страницу

Слайд 15

Создаём анимацию
15

Слайд 16

16
Проверяем анимацию

Слайд 17

17
Дополнительные свойства анимации

Слайд 18

18
Дополнительные свойства анимации

Слайд 19

19
Дополнительные свойства анимации

Слайд 20

20
Задание
Попробуйте сделать так, чтобы квадрат один цикл вращался по часовой, а

затем против часовой и т.д. (воспользуйтесь свойством animation-direction: alternate) Сделайте изменение цветов с желтого на красный.

Слайд 21

Решение
21

Слайд 22

22
Создаем класс

Слайд 23

23
Работаем с CSS

Слайд 24

24
Проверяем объект

Слайд 25

25
Задаем движение круга

Слайд 26

26
Меняем цвета круга

Слайд 27

27
Проверяем анимацию

Слайд 28

28
Задание
Создайте новый круг. Попробуйте сделать анимацию прыгающего мяча (воспользуйтесь свойством transform:

translateY). Добавьте изменение цвета. Анимация бесконечна.

Слайд 29

Решение
29

Слайд 30

Решение
30

Слайд 31

31
Создаем класс

Слайд 32

32
Работаем с CSS

Слайд 33

33
Проверяем объект

Слайд 34

34
Задаем траекторию движения

Слайд 35

35
Проверяем анимацию

Слайд 36

36
Создаем новый класс

Слайд 37

37
Работаем с CSS

Слайд 38

38
Создаем анимацию

Слайд 39

39
Проверяем анимацию

Слайд 40

40
Продолжаем урок

Слайд 41

Создаем HTML документ
41

Слайд 42

Создаем CSS документ
42

Слайд 43

Настраиваем рабочую среду
43

Слайд 44

44
Создаем основу документа HTML

Слайд 45

45
Структура HTML страницы

Слайд 46

Работа с CSS
46
getcolor.ru

Слайд 47

Открываем web страницу
47

Слайд 48

48
Создаём анимацию

Слайд 49

49
Открываем web страницу

Слайд 50

50
Дополнительные свойства анимации

Слайд 51

Открываем web страницу
51

Слайд 52

52
Дополнительные свойства анимации

Слайд 53

Открываем web страницу
53

Слайд 54

54
Задание
Попробуйте сделать так, чтобы квадрат один цикл вращался по часовой, а

затем против часовой и т.д. (воспользуйтесь свойством animation-direction: alternate) Сделайте изменение цветов с зеленого на желтый

Слайд 55

55
Решение

Слайд 56

56
Создаем класс

Слайд 57

57
Работаем с CSS

Слайд 58

Открываем web страницу
58

Слайд 59

59
Задаем анимацию

Слайд 60

Открываем web страницу
60

Слайд 61

61
Задание
Сделайте так, чтобы на каждом ключевом кадре анимации круг менял цвет

в процессе движения

Слайд 62

62
Решение

Слайд 63

63
Создаем класс

Слайд 64

64
Работаем с CSS

Слайд 65

65
Создаем анимацию

Слайд 66

Открываем web страницу
66

Слайд 67

67
Создаем анимацию