Страница о 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.png
  • firefox-addons.jpg
  • mozilla-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 - отличный сервис для этого.

Добавление логотипа в шапку

Добавьте внутрь элемента <header> элемент <img>, который вставит уменьшенную версию логотипа Firefox в шапку.

Добавление видео к основному содержанию статьи

Внутри элемента <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.

Искусственно изменённая красная панда

Внутри элемента <div> с классом red-panda, мы хотим поместить элемент <picture> , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.

Пример

Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.

A wide shot of our example splash page

A narrow shot of our example splash page

Заключение

Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку в ветке форума этого упражнения, либо в IRC канале #mdn на Mozilla IRC. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться!