Время перейти к следующему упражнению.
В этом упражнении мы будем иметь дело с изображениями,
как мы можем включать изображения в наши веб-страницы,
и как мы можем использовать медиа-объект на нашей веб-странице.
В качестве первого шага
перейдите к инструкциям по упражнению и загрузите файл image.zip,
а затем сохраните его в папке с путаницей.
А затем разархивируйте файл, чтобы получить папку с именем, img,
и внутри,
что вы найдете несколько изображений, которые мы собираемся использовать в этом упражнении.
Все изображения находятся в формате png в этой папке.
Теперь мы будем работать над тем, чтобы добавить некоторые изображения на страницу.
Сначала добавим логотип для нашего ресторана.
Итак, перейдя на страницу index.html, в Jumbotron,
вы увидите, что второй div здесь получил col-sm.
Итак, мы собираемся исправить это, добавив в этот div
и выровнять центр себя к этому div.
Теперь, к этому div,
мы собираемся добавить изображение.
Итак, позвольте мне использовать изображение с источником, img.
Мы уже поместили папку с изображениями в наш проект.
Итак, оттуда я добавлю файл logo.png в качестве изображения здесь.
Кроме того, я собираюсь добавить класс в качестве жидкости для изображения,
так что это изображение будет автоматически реагировать и адаптироваться к размеру экрана.
Давайте сохраним изменения.
Мы собираемся применить одно и то же изменение как к странице aboutus.html, так
и к странице contactus.html в Jumbotron.
Теперь, когда вы посмотрите на свою веб-страницу,
вы увидите, что в Jumbotron,
сразу после этих слов,
вы увидите изображение нашего ресторана, вставленное там.
Затем мы зайдем в навигатор,
а затем, где у нас есть это для бренда Navbar,
я собираюсь заменить эти слова для ресторана с соответствующим логотипом.
Итак, эти слова я собираюсь заменить это на img,
а источник - logo.png.
Кроме того, я собираюсь указать атрибут высоты 30
и атрибут ширины 41 для этого логотипа.
Этот размер подходит для бренда Navbar там.
Итак, давайте сохраним изменения.
Я собираюсь пойти и сделать то же самое изменение на странице aboutus.html,
а также на странице contactus.html.
Взглянув на веб-страницу,
вы увидите, что название ресторана теперь заменено
логотипом ресторана небольшого размера.
Теперь вы увидите, что при переходе на страницу «О программе»
вы увидите изображение, включенное туда,
и аналогично на странице «Контакты»
вы увидите, что изображение было обновлено, возвращаясь к главной странице.
Теперь, что мы собираемся сделать,
это использовать медиа-объект вместо этих описаний, которые мы имеем здесь,
а затем использовать медиа-объект, чтобы заменить
их описанием, а также изображение, которое должно быть включено.
Это дает лучшее представление о нашей веб-странице.
Итак, давайте продолжим и внесем изменения.
Чтобы использовать медиаобъект на нашей странице index.html,
мы перейдем к первой строке контента здесь.
И затем прямо там, во втором div,
я собираюсь представить новый dev с классным медиа
и заключить содержимое внутри этого div там,
закрывая div.
Теперь, внутри этого div,
я собираюсь представить изображение, которое будет использоваться там.
Здесь я вхожу и говорю класс изображения,
и для того, чтобы использовать изображение в медиа-объекте,
нам нужно применить некоторые дополнительные классы, связанные с гибкостью,
поэтому я применяю d-flex, а затем mr-3.
Итак, M означает маржу справа с номером 3.
Это дает достаточное поле справа от этого изображения,
так что описание немного отличается от изображения на веб-странице.
И тогда я буду использовать миниатюру изображения для этого изображения,
а затем также использовать align-self-center для
изображения, а затем введите источник изображения, который является img,
и вы можете найти
имя изображения в папке img,
и позвольте мне дать ему альтернативу
и закрыть изображение.
Теперь это будет включать изображение в мой миди объект.
Кроме того, я собираюсь создать медиа-тело для этого изображения,
сказав тело div класса media,
а затем заключил этот h2 и p, который содержит описание внутри этого div.
Итак, позвольте мне отстукнуть содержимое там,
а затем закрыть этот div здесь.
При этом мое описание заключено в тело носителя.
В дополнение к этому h2,
я собираюсь ввести класс как mt-0.
При этом этот класс говорит, что маржа верхний ноль.
Этот заголовок будет выровнен в верхней части этого конкретного медиа-объекта здесь.
С этими изменениями, давайте сохраним изменения, а
затем перейти и быстро взглянуть на нашу веб-страницу.
Перейдя на нашу веб-страницу,
вы сразу заметите изменения на веб-странице.
Теперь вы можете видеть, что здесь есть позиция изображения,
а затем описание,
которое было ранее в этом месте, было правильно позиционировано здесь.
Сравните это с оставшимися двумя строками,
и теперь вы начинаете видеть, как медиа-объект помогает
нам превратить это в нечто более яркое.
Я собираюсь сделать то же самое с третьей строкой здесь.
Вторая строка будет оставлена в качестве упражнения для вас в задании.
Перейдя к третьему
упражнению, я собираюсь применить аналогичное изменение к этой третьей строке, чтобы ввести медиа-объект здесь.
Позвольте мне представить медиа-объект там,
а затем к этому div,
перейти в медиа-объект,
а затем представить изображение, которое я собираюсь использовать здесь.
Я использую класс как d-flex mr-3.
Если вы позиционируете изображение справа,
вам нужно дать поле как ml-3 для него.
Кроме того, я собираюсь добавить в класс миниатюр изображения к этому,
а затем также сказать, align-self-center.
Это классы, которые я собираюсь добавить к этому изображению.
А затем, давайте указам источник этого изображения,
img и alberto.png, а затем я укажу альтернативу.
И после этого, эти h2 и h4 и p,
я собираюсь закрыть их внутри div media-body здесь,
закрывая медиатело div.
Теперь мы завершили медиаобъект в третьей строке.
Давайте сохраним изменения,
а затем пойдем и взглянем на нашу веб-страницу далее.
Теперь, взглянув на нашу веб-страницу,
вы заметите, что у нас есть описание блюда там.
Теперь, если вы перейдете к третьей строке,
вы увидите, как третья строка также была переопределена.
Обратите внимание на использование левого носителя,
что означает, что изображение размещается слева в этом медиа-объекте,
а затем на средней странице носителя изображение размещается в середине описания.
Для
выравнивания изображения по верхнему и нижнему частям описания можно также использовать мультимедиа сверху и снизу.
С этим мы завершаем это упражнение.
В этом упражнении мы рассмотрели использование изображений и медиа-объектов на нашей веб-странице.
Это хорошее время, опять же,
чтобы сделать хороший комментарий,
с сообщением, изображениями и средствами массовой информации.