1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
---
title: Заставка Mozilla
slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
<p class="summary">В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Предпосылки:</th>
<td>Прежде чем приступить к этому заданию, вы должны проработать остальную часть <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">модуля мультимедиа и встраивания.</a></td>
</tr>
<tr>
<th scope="row">Задача:</th>
<td>Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML.</td>
</tr>
</tbody>
</table>
<h2 id="Отправная_точка">Отправная точка</h2>
<p>Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a>). Сохраните содержимое <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> в файле с именем <code>index.html</code> на вашем диске в новой папке. Затем сохраните <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> в той же папке (правый клик на изображении для выбора опции сохранения).</p>
<p>Сохраните изображения из папки <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.</p>
<div class="note">
<p><strong>Note</strong>: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p>
</div>
<h2 id="Описание_проекта">Описание проекта</h2>
<p>В этом задании мы представляем вам почти законченый сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p>
<h3 id="Подготовка_изображений">Подготовка изображений</h3>
<p>Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:</p>
<ul>
<li><code>firefox_logo-only_RGB.png</code></li>
<li><code>firefox-addons.jpg</code></li>
<li><code>mozilla-dinosaur-head.png</code></li>
</ul>
<p>Назовите их как-нибудь разумно, например <code>firefoxlogo400.png</code>и <code>firefoxlogo120.png</code>.</p>
<p>Вместе с <code>mdn.svg</code>, эти изображения будут иконками для ссылок на другие ресурсы внутри секции <code>further-info</code>. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и <code>index.html</code>.</p>
<p>Затем создайте фоновую версию <code>red-panda.jpg </code>шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распозновать их. Сохраните обе копии внутри той же папки, что и <code>index.html</code>.</p>
<div class="note">
<p><strong>Note</strong>: Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. <a href="https://tinypng.com/">tinypng.com</a> - отличный сервис для этого.</p>
</div>
<h3 id="Добавление_логотипа_в_шапку">Добавление логотипа в шапку</h3>
<p>Добавьте внутрь элемента {{htmlelement("header")}} элемент {{htmlelement("img")}}, который вставит уменьшенную версию логотипа Firefox в шапку.</p>
<h3 id="Добавление_видео_к_основному_содержанию_статьи">Добавление видео к основному содержанию статьи</h3>
<p>Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.</p>
<h3 id="Добавление_отзывчивых_изображений_к_ссылкам_с_доп._информацей">Добавление отзывчивых изображений к ссылкам с доп. информацей</h3>
<p>Внутри {{htmlelement("div")}} с классом <code>further-info</code> вы найдёте четыре элемента {{htmlelement("a")}} — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.</p>
<p>В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.</p>
<p>Убедитесь, что вы использовали изображения, соответствующие ссылкам.</p>
<div class="note">
<p><strong>Note</strong>: Для проверки правильности работы <code>srcset</code>/<code>sizes</code> , вам нужно загрузить ваш сайт на сервер (используйте <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p>
</div>
<h3 id="Искусственно_измененная_красная_панда">Искусственно измененная красная панда</h3>
<p>Внутри элемента {{htmlelement("div")}} с классом <code>red-panda</code>, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.</p>
<h2 id="Пример">Пример</h2>
<p>Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.</p>
<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
<h2 id="Заключение">Заключение</h2>
<p>Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assessment/24679">в ветке форума этого упражнения</a>, либо в IRC канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться! </p>
<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ul>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> до <iframe> — другие технологии встраивания</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Добавление векторной графики в Web</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Отзывчивые изображения</a></li>
<li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Сайт-визитка Mozilla</a></li>
</ul>
|
