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
|
---
title: Изображения
slug: orphaned/MDN/Editor/Images
tags:
- Изображение
- Работа с изображениями
- Рисунок
- Руководство
translation_of: MDN/Editor/Images
original_slug: MDN/Editor/Картинки
---
<div>{{MDNSidebar}}</div>
<p><span class="seoSummary">Изображения очень часто используются при оформлении статей. Они могут быть снимками экрана (screenshot), примерами того, как должно выглядеть произведение искусства, SVG-диаграммами. Данная статья описывает способы работы с изображениями в контенте сайта MDN.</span></p>
<div class="note"><strong>Замечание: </strong>При загрузке изображения, пожалуйста, убедитесь, что используете инструменты оптимизации, чтобы сделать файл маленьким, а загрузку возможной. Это сокращает время загрузки страницы и помогает производительности MDN в целом. Вы можете использовать свой любимый инструмент, если он у вас есть. Иначе, мы предлагаем <a href="https://tinypng.com/">TinyPNG</a> - удобный Веб инструмент.</div>
<p id="Adding_images_to_an_article">После добавления изображения на страницу (смотрите {{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Basics", "The attachments box")}}), его можно использовать в оформлении статьи. Также можно использовать любые уже загруженные изображения, размещенные на сайте MDN. Для добавления нажмите на кнопку "Изображение" на панели инструментов: <img alt="Toolbar icon for inserting image" src="https://mdn.mozillademos.org/files/12475/image_icon.png" style="height: 15px; width: 18px;"></p>
<p>Окно<strong> Свойства изображения</strong>:</p>
<p><img alt=""></p>
<p>Здесь присутствуют три вкладки: "<strong>Данные об изображении</strong>" (Image Info), "<strong>Ссылка</strong>" (Link), "<strong>Дополнительно</strong>" (Advanced).</p>
<h2 id="Вкладка_Данные_об_изображении"><strong>Вкладка "Данные об изображении"</strong></h2>
<dl>
<dt>Прикреплённые файлы (Attachments)</dt>
<dd>Этот выпадающий список содержит прикреплённые к странице элементы. Здесь перечислены только объекты, загруженные в текущем сеансе редактирования или те, которые уже используются на странице.</dd>
<dt>Ссылка (URL)</dt>
<dd>Если есть необходимость использовать рисунок, которого нет в прикреплённых файлах, например, файл загружен в прошлом сеансе редактирования или используется где-то на MDN, то можно указать URL рисунка.</dd>
<dt>Альтернативный текст (Alternative text)</dt>
<dd>Текст, который будет показываться вместо изображения, если оно не отображается (например, если пользователь выключил отображение картинок в браузере). Этот текст также используется программами чтения с экрана, поэтому, пожалуйста, поместите соответствующую заметку здесь для удобства доступа.</dd>
<dt>Ширина / Высота (Width / Height)</dt>
<dd>Вы можете настраивать ширину и высоту изображения, как указано в этой статье. По умолчанию эти поля заблокированы для сохранения пропорций изображения, но блокировку можно отключить нажатием на значок <img alt="">.</dd>
<dt>Граница (Border)</dt>
<dd>Дополнительно можно установить толщину границы вокруг изображения. Рекомендуется указывать 0 (ноль или оставить пустым) или 1. Используйте эту опцию только в том случае, если фон изображения светлый и его нужно дополнительно выделить на фоне веб-страницы.</dd>
<dt>Горизонтальный отступ / Вертикальный отступ (HSpace / VSpace)</dt>
<dd>Указывается число пикселей, которое нужно отступить от изображения по горизонтали или вертикали, например, чтобы отодвинуть текст. Обычно эта настройка используется вместе с выравниванием, описанным ниже.</dd>
<dt>Выравнивание (Alignment)</dt>
<dd>По умолчанию изображения отображаются по отдельности от текста или других изображений (текст и новые изображения обычно переносятся на новую строку). Но этой опцией можно указать, какой стороны листа (левой или правой) должно придерживаться изображение и с какой стороны (правой или левой соответственно) текст будет его обтекать. Так приходится оформлять статьи, если изображение маленькое (или, например, узкое и длинное), и тем самым можно сэкономить свободное пространство и повысить удобство чтения. Если используется эта опция, то, вероятно, нужно будет использовать опции горизонтального и вертикального отступа, чтобы немного отодвинуть текст от изображения. Например, для отступа может использоваться значение 6 или 8.</dd>
</dl>
<p>Область "Предпросмотр" показывает пример изображения, которое изменится, исходя из введённых параметров.</p>
<h2 id="Вкладка_Ссылка">Вкладка "Ссылка"</h2>
<p>Здесь настраивается ссылка, по которой произойдёт переход при клике на изображение. Часто используется ссылка на увеличенное изображение (можно использовать ту же ссылку, что и на вкладке "Данные об изображении"). Пример:</p>
<p><img alt=""></p>
<dl>
<dt>Ссылка (URL)</dt>
<dd>Ссылка для перехода при клике на изображение.</dd>
<dt>Цель (Target)</dt>
<dd>Вариант открытия страницы перехода. Значения аналогичные атрибуту {{htmlattrxref("target", "a")}} HTML-тега {{HTMLElement("a")}}. <strong>Не рекомендуется использовать это поле </strong>на MDN. На MDN отдаётся предпочтение открытию ссылок на текущей вкладке браузера.</dd>
</dl>
<h2 id="Поддерживаемые_типы_изображений">Поддерживаемые типы изображений</h2>
<p>Вы можете загружать изображения следующих типов: GIF, JPEG, PNG , а также SVG-диаграммы. Предпочитаемые типы на MDN:</p>
<ul>
<li>PNG для снимков экрана</li>
<li>SVG для диаграмм и графиков, потому что их проще перевести на другие языки, чем обычные картинки</li>
</ul>
<p>Можно загружать файлы из Photoshop. Но их нельзя будет использовать для оформления статей, а только выкладывать для загрузки пользователями.</p>
<h2 id="Удаление_и_изменение">Удаление и изменение</h2>
<p>Для удаление изображения из статьи кликните в изображение мышкой (или установите курсор непосредственно до изображения) и нажмите на клавиатуре клавишу "delete".</p>
<p>Можно изменить свойства изображения, кликнув на него дважды или кликнув правой кнопкой мыши и выбрав из выпадающего контекстного меню пункт "<strong>Свойства изображения</strong>". В обоих случаях откроется один и тот же диалог.</p>
<p>Удалять вложения могут только администраторы MDN. Обычно мы оставляем старые версии изображений, потому что на них могут оставаться ссылки из старых версий документов. В случае обнаружения недопустимых, неуместных или проприетарных изображений, пожалуйста, обратитесь к <a href="/en-US/docs/MDN/Community/Roles/Admins">администратору MDN</a> для удаления такого вложения или <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">заведите инцидент</a> для удаления.</p>
<p>{{EditorGuideQuicklinks}}</p>
|
