Страница о Mozilla
В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!
| Предпосылки: | Прежде чем приступить к этому заданию, вы должны проработать остальную часть модуля мультимедиа и встраивания. |
|---|---|
| Задача: | Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML. |
Отправная точка
Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(mdn-splash-page-start). Сохраните содержимое index.html в файле с именем index.html на вашем диске в новой папке. Затем сохраните pattern.png в той же папке (правый клик на изображении для выбора опции сохранения).
Сохраните изображения из папки originals тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.
Примечание: Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри <body> элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.
Описание проекта
В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:
Подготовка изображений
Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:
firefox_logo-only_RGB.pngfirefox-addons.jpgmozilla-dinosaur-head.png
Назовите их как-нибудь разумно, например firefoxlogo400.png и firefoxlogo120.png.
Вместе с mdn.svg, эти изображения будут иконками для ссылок на другие ресурсы внутри секции further-info. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и index.html.
Затем создайте фоновую версию red-panda.jpg шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и index.html.
Примечание: Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. tinypng.com - отличный сервис для этого.
Добавление логотипа в шапку
Добавление видео к основному содержанию статьи
Внутри элемента <article> (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке https://www.youtube.com/watch?v=ojcNcvb1olg, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.
Добавление отзывчивых изображений к ссылкам с доп. информацией
Внутри <div> с классом further-info вы найдёте четыре элемента <a> — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент <img> внутрь каждого элемента <a> дополнив подходящими атрибутами src, alt, srcset и sizes.
В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.
Убедитесь, что вы использовали изображения, соответствующие ссылкам.
Примечание: Для проверки правильности работы srcset/sizes , вам нужно загрузить ваш сайт на сервер (используйте Github pages - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в Responsive images: useful developer tools.
Искусственно изменённая красная панда
Пример
Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.
Заключение
Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку в ветке форума этого упражнения, либо в IRC канале #mdn на Mozilla IRC. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться!