1
00:00:03,780 --> 00:00:07,090
Время перейти к следующему упражнению.

2
00:00:07,090 --> 00:00:10,005
В этом упражнении мы будем иметь дело с изображениями,

3
00:00:10,005 --> 00:00:13,660
как мы можем включать изображения в наши веб-страницы,

4
00:00:13,660 --> 00:00:21,030
и как мы можем использовать медиа-объект на нашей веб-странице.

5
00:00:21,040 --> 00:00:23,240
В качестве первого шага

6
00:00:23,240 --> 00:00:27,890
перейдите к инструкциям по упражнению и загрузите файл image.zip,

7
00:00:27,890 --> 00:00:34,550
а затем сохраните его в папке с путаницей.

8
00:00:35,890 --> 00:00:42,360
А затем разархивируйте файл, чтобы получить папку с именем, img,

9
00:00:42,360 --> 00:00:44,210
и внутри,

10
00:00:44,210 --> 00:00:49,175
что вы найдете несколько изображений, которые мы собираемся использовать в этом упражнении.

11
00:00:49,175 --> 00:00:53,115
Все изображения находятся в формате png в этой папке.

12
00:00:53,115 --> 00:00:58,785
Теперь мы будем работать над тем, чтобы добавить некоторые изображения на страницу.

13
00:00:58,785 --> 00:01:02,310
Сначала добавим логотип для нашего ресторана.

14
00:01:02,310 --> 00:01:06,360
Итак, перейдя на страницу index.html, в Jumbotron,

15
00:01:06,360 --> 00:01:11,130
вы увидите, что второй div здесь получил col-sm.

16
00:01:11,130 --> 00:01:17,295
Итак, мы собираемся исправить это, добавив в этот div

17
00:01:17,295 --> 00:01:24,030
и выровнять центр себя к этому div.

18
00:01:24,030 --> 00:01:26,620
Теперь, к этому div,

19
00:01:26,620 --> 00:01:28,515
мы собираемся добавить изображение.

20
00:01:28,515 --> 00:01:33,790
Итак, позвольте мне использовать изображение с источником, img.

21
00:01:33,790 --> 00:01:40,710
Мы уже поместили папку с изображениями в наш проект.

22
00:01:40,710 --> 00:01:49,150
Итак, оттуда я добавлю файл logo.png в качестве изображения здесь.

23
00:01:49,150 --> 00:01:58,140
Кроме того, я собираюсь добавить класс в качестве жидкости для изображения,

24
00:01:58,140 --> 00:02:06,410
так что это изображение будет автоматически реагировать и адаптироваться к размеру экрана.

25
00:02:07,160 --> 00:02:09,634
Давайте сохраним изменения.

26
00:02:09,634 --> 00:02:14,810
Мы собираемся применить одно и то же изменение как к странице aboutus.html, так

27
00:02:14,810 --> 00:02:19,855
и к странице contactus.html в Jumbotron.

28
00:02:19,855 --> 00:02:23,350
Теперь, когда вы посмотрите на свою веб-страницу,

29
00:02:23,350 --> 00:02:26,350
вы увидите, что в Jumbotron,

30
00:02:26,350 --> 00:02:29,210
сразу после этих слов,

31
00:02:29,210 --> 00:02:34,120
вы увидите изображение нашего ресторана, вставленное там.

32
00:02:34,120 --> 00:02:36,905
Затем мы зайдем в навигатор,

33
00:02:36,905 --> 00:02:41,750
а затем, где у нас есть это для бренда Navbar,

34
00:02:41,750 --> 00:02:47,915
я собираюсь заменить эти слова для ресторана с соответствующим логотипом.

35
00:02:47,915 --> 00:02:57,650
Итак, эти слова я собираюсь заменить это на img,

36
00:02:57,650 --> 00:03:03,280
а источник - logo.png.

37
00:03:03,280 --> 00:03:13,750
Кроме того, я собираюсь указать атрибут высоты 30

38
00:03:14,310 --> 00:03:20,950
и атрибут ширины 41 для этого логотипа.

39
00:03:20,950 --> 00:03:28,530
Этот размер подходит для бренда Navbar там.

40
00:03:28,530 --> 00:03:30,330
Итак, давайте сохраним изменения.

41
00:03:30,330 --> 00:03:35,895
Я собираюсь пойти и сделать то же самое изменение на странице aboutus.html,

42
00:03:35,895 --> 00:03:39,745
а также на странице contactus.html.

43
00:03:39,745 --> 00:03:41,790
Взглянув на веб-страницу,

44
00:03:41,790 --> 00:03:44,900
вы увидите, что название ресторана теперь заменено

45
00:03:44,900 --> 00:03:49,835
логотипом ресторана небольшого размера.

46
00:03:49,835 --> 00:03:53,280
Теперь вы увидите, что при переходе на страницу «О программе»

47
00:03:53,280 --> 00:03:56,720
вы увидите изображение, включенное туда,

48
00:03:56,720 --> 00:03:59,700
и аналогично на странице «Контакты»

49
00:03:59,700 --> 00:04:04,995
вы увидите, что изображение было обновлено, возвращаясь к главной странице.

50
00:04:04,995 --> 00:04:07,080
Теперь, что мы собираемся сделать,

51
00:04:07,080 --> 00:04:13,980
это использовать медиа-объект вместо этих описаний, которые мы имеем здесь,

52
00:04:13,980 --> 00:04:19,095
а затем использовать медиа-объект, чтобы заменить

53
00:04:19,095 --> 00:04:25,370
их описанием, а также изображение, которое должно быть включено.

54
00:04:25,370 --> 00:04:29,890
Это дает лучшее представление о нашей веб-странице.

55
00:04:29,890 --> 00:04:32,725
Итак, давайте продолжим и внесем изменения.

56
00:04:32,725 --> 00:04:37,695
Чтобы использовать медиаобъект на нашей странице index.html,

57
00:04:37,695 --> 00:04:40,555
мы перейдем к первой строке контента здесь.

58
00:04:40,555 --> 00:04:44,930
И затем прямо там, во втором div,

59
00:04:44,930 --> 00:04:51,380
я собираюсь представить новый dev с классным медиа

60
00:04:51,380 --> 00:04:57,500
и заключить содержимое внутри этого div там,

61
00:04:57,500 --> 00:05:01,245
закрывая div.

62
00:05:01,245 --> 00:05:04,940
Теперь, внутри этого div,

63
00:05:04,940 --> 00:05:10,820
я собираюсь представить изображение, которое будет использоваться там.

64
00:05:10,820 --> 00:05:14,840
Здесь я вхожу и говорю класс изображения,

65
00:05:14,840 --> 00:05:20,120
и для того, чтобы использовать изображение в медиа-объекте,

66
00:05:20,120 --> 00:05:26,820
нам нужно применить некоторые дополнительные классы, связанные с гибкостью,

67
00:05:26,820 --> 00:05:31,545
поэтому я применяю d-flex, а затем mr-3.

68
00:05:31,545 --> 00:05:40,035
Итак, M означает маржу справа с номером 3.

69
00:05:40,035 --> 00:05:43,625
Это дает достаточное поле справа от этого изображения,

70
00:05:43,625 --> 00:05:53,205
так что описание немного отличается от изображения на веб-странице.

71
00:05:53,205 --> 00:05:59,370
И тогда я буду использовать миниатюру изображения для этого изображения,

72
00:05:59,370 --> 00:06:08,650
а затем также использовать align-self-center для

73
00:06:08,650 --> 00:06:16,350
изображения, а затем введите источник изображения, который является img,

74
00:06:16,350 --> 00:06:23,570
и вы можете найти

75
00:06:23,570 --> 00:06:30,680
имя изображения в папке img,

76
00:06:30,680 --> 00:06:34,340
и позвольте мне дать ему альтернативу

77
00:06:36,240 --> 00:06:39,005
и закрыть изображение.

78
00:06:39,005 --> 00:06:43,465
Теперь это будет включать изображение в мой миди объект.

79
00:06:43,465 --> 00:06:49,830
Кроме того, я собираюсь создать медиа-тело для этого изображения,

80
00:06:49,830 --> 00:06:56,840
сказав тело div класса media,

81
00:06:56,840 --> 00:07:06,055
а затем заключил этот h2 и p, который содержит описание внутри этого div.

82
00:07:06,055 --> 00:07:10,365
Итак, позвольте мне отстукнуть содержимое там,

83
00:07:10,365 --> 00:07:16,395
а затем закрыть этот div здесь.

84
00:07:16,395 --> 00:07:23,395
При этом мое описание заключено в тело носителя.

85
00:07:23,395 --> 00:07:25,430
В дополнение к этому h2,

86
00:07:25,430 --> 00:07:30,955
я собираюсь ввести класс как mt-0.

87
00:07:30,955 --> 00:07:37,785
При этом этот класс говорит, что маржа верхний ноль.

88
00:07:37,785 --> 00:07:44,940
Этот заголовок будет выровнен в верхней части этого конкретного медиа-объекта здесь.

89
00:07:44,940 --> 00:07:48,120
С этими изменениями, давайте сохраним изменения, а

90
00:07:48,120 --> 00:07:51,705
затем перейти и быстро взглянуть на нашу веб-страницу.

91
00:07:51,705 --> 00:07:53,930
Перейдя на нашу веб-страницу,

92
00:07:53,930 --> 00:07:56,980
вы сразу заметите изменения на веб-странице.

93
00:07:56,980 --> 00:08:00,115
Теперь вы можете видеть, что здесь есть позиция изображения,

94
00:08:00,115 --> 00:08:03,650
а затем описание,

95
00:08:03,650 --> 00:08:08,375
которое было ранее в этом месте, было правильно позиционировано здесь.

96
00:08:08,375 --> 00:08:13,280
Сравните это с оставшимися двумя строками,

97
00:08:13,280 --> 00:08:17,290
и теперь вы начинаете видеть, как медиа-объект помогает

98
00:08:17,290 --> 00:08:23,545
нам превратить это в нечто более яркое.

99
00:08:23,545 --> 00:08:30,270
Я собираюсь сделать то же самое с третьей строкой здесь.

100
00:08:30,270 --> 00:08:38,155
Вторая строка будет оставлена в качестве упражнения для вас в задании.

101
00:08:38,155 --> 00:08:40,680
Перейдя к третьему

102
00:08:40,680 --> 00:08:48,730
упражнению, я собираюсь применить аналогичное изменение к этой третьей строке, чтобы ввести медиа-объект здесь.

103
00:08:48,730 --> 00:08:51,595
Позвольте мне представить медиа-объект там,

104
00:08:51,595 --> 00:08:54,240
а затем к этому div,

105
00:08:54,240 --> 00:08:57,115
перейти в медиа-объект,

106
00:08:57,115 --> 00:09:01,290
а затем представить изображение, которое я собираюсь использовать здесь.

107
00:09:01,290 --> 00:09:05,410
Я использую класс как d-flex mr-3.

108
00:09:05,410 --> 00:09:08,830
Если вы позиционируете изображение справа,

109
00:09:08,830 --> 00:09:14,060
вам нужно дать поле как ml-3 для него.

110
00:09:14,060 --> 00:09:20,560
Кроме того, я собираюсь добавить в класс миниатюр изображения к этому,

111
00:09:20,560 --> 00:09:26,005
а затем также сказать, align-self-center.

112
00:09:26,005 --> 00:09:31,010
Это классы, которые я собираюсь добавить к этому изображению.

113
00:09:31,010 --> 00:09:35,670
А затем, давайте указам источник этого изображения,

114
00:09:35,760 --> 00:09:46,880
img и alberto.png, а затем я укажу альтернативу.

115
00:09:52,060 --> 00:09:57,400
И после этого, эти h2 и h4 и p,

116
00:09:57,400 --> 00:10:07,140
я собираюсь закрыть их внутри div media-body здесь,

117
00:10:07,760 --> 00:10:11,845
закрывая медиатело div.

118
00:10:11,845 --> 00:10:17,845
Теперь мы завершили медиаобъект в третьей строке.

119
00:10:17,845 --> 00:10:19,230
Давайте сохраним изменения,

120
00:10:19,230 --> 00:10:22,700
а затем пойдем и взглянем на нашу веб-страницу далее.

121
00:10:22,700 --> 00:10:25,480
Теперь, взглянув на нашу веб-страницу,

122
00:10:25,480 --> 00:10:30,685
вы заметите, что у нас есть описание блюда там.

123
00:10:30,685 --> 00:10:32,760
Теперь, если вы перейдете к третьей строке,

124
00:10:32,760 --> 00:10:37,705
вы увидите, как третья строка также была переопределена.

125
00:10:37,705 --> 00:10:40,425
Обратите внимание на использование левого носителя,

126
00:10:40,425 --> 00:10:45,210
что означает, что изображение размещается слева в этом медиа-объекте,

127
00:10:45,210 --> 00:10:52,230
а затем на средней странице носителя изображение размещается в середине описания.

128
00:10:52,230 --> 00:10:55,760
Для

129
00:10:55,760 --> 00:11:01,970
выравнивания изображения по верхнему и нижнему частям описания можно также использовать мультимедиа сверху и снизу.

130
00:11:01,970 --> 00:11:05,185
С этим мы завершаем это упражнение.

131
00:11:05,185 --> 00:11:12,970
В этом упражнении мы рассмотрели использование изображений и медиа-объектов на нашей веб-странице.

132
00:11:12,970 --> 00:11:14,535
Это хорошее время, опять же,

133
00:11:14,535 --> 00:11:16,365
чтобы сделать хороший комментарий,

134
00:11:16,365 --> 00:11:19,960
с сообщением, изображениями и средствами массовой информации.