aboutsummaryrefslogtreecommitdiff
path: root/files/ru/orphaned/mdn/editor/images/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ru/orphaned/mdn/editor/images/index.html')
-rw-r--r--files/ru/orphaned/mdn/editor/images/index.html78
1 files changed, 78 insertions, 0 deletions
diff --git a/files/ru/orphaned/mdn/editor/images/index.html b/files/ru/orphaned/mdn/editor/images/index.html
new file mode 100644
index 0000000000..f095489297
--- /dev/null
+++ b/files/ru/orphaned/mdn/editor/images/index.html
@@ -0,0 +1,78 @@
+---
+title: Изображения
+slug: MDN/Editor/Картинки
+tags:
+ - Изображение
+ - Работа с изображениями
+ - Рисунок
+ - Руководство
+translation_of: MDN/Editor/Images
+---
+<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>