MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Изображения

Изображения очень часто используются при оформлении статей. Они могут быть снимками экрана (screenshot), примерами чего-то, SVG-диаграммами. Данная статья описывает способы работы с изображениями в контенте сайта MDN.

Замечание: При загрузке изображения, пожалуйста, убедитесь, что используете инструменты оптимизации, чтобы сделать файл маленьким, а загрузку возможной. Это улучшает время загрузки страницы и помогает производительности MDN в целом. Вы можете использовать свой любимый инструмент, если он у вас есть. Иначе, мы предлагаем TinyPNG - удобный Веб инструмент.

После добавления изображения на страницу (смотрите "The attachments box" в Editor UI elements), его можно использовать в оформлении статьи. Также можно использовать любые уже загруженные изображения, размещенные на сайте MDN. Для добавления нажмите на кнопку "Изображение" на панели инструментов: Toolbar icon for inserting image

Окно Свойства изображения:

Здесь присутствуют три вкладки: "Данные об изображении" (Image Info), "Ссылка" (Link), "Дополнительно" (Advanced).

Вкладка "Данные об изображении"

Прикреплённые файлы (Attachments)
Этот выпадающий список содержит прикреплённые к странице элементы. Здесь перечислены только объекты, загруженные в текущем сеансе редактирования или те, которые уже используются на странице.
Ссылка (URL)
Если есть необходимость использовать рисунок ,которого нет в аттачментах, например, файл загружен в прошлом сеансе редактирования или используется где-то на MDN, то можно указать URL рисунка.
Альтернативный текст (Alternative text)
Текст, который будет отображаться вместо изображения, если оно не отображается, например, если пользователь выключил отображение картинок в браузере.
Ширина / Высота (Width / Height)
Ширина и высота изображения для отображения в статье. По умолчанию эти поля заблокированы для сохранения пропоций рисунка, но блокировку можно отключить по значку .
Граница (Border)
Дополнительно можно установить толщину границы вокруг изображения. Рекоммендуется указывать 0 (ноль или оставить пустым) или 1. Используйте эту опцию только в том случае, если фон изображения светлый и его нужно дополнительно выделить на фоне веб-страницы.
Горизонтальный отступ / Вертикальгый отступ (HSpace / VSpace)
Указывается число пикселей, которое нужно отступить от изображения по горизонтали или вертикали, например, чтобы отодвинуть текст. Обычно эта настройка используется вместе с выравниванием, описанным ниже.
Выравнивание (Alignment)
По умолчанию изображения отображаются по отдельности от текста или других изображений (текст и новые изображения обычно переносятся на новую строку). Но этой опцией можно указать, какой стороны листа (левой или правой) должно придерживаться изображение и с какой стороны (правой или левой соответстсвенно) текст будет его обтекать. Так приходится оформлять статьи, если изображение маленькое (или, например, узкое и длинное), и тем самым можно сэкономить свободное пространство и повысить удобство чтения. Если используется эта опция, то, вероятно, нужно будет использовать опции горизонтального и вертикального отступа, чтобы немного отодвинуть текст от изображения. Например, для отступа может использоваться значение 6 или 8.

Область "Предпросмотр" показывает пример изображения, которое изменится, исходя из введённых параметров.

Вкладка "Ссылка"

Здесь настраивается ссылка, по которой произойдёт переход при клике на изображение. Часто используется ссылка на увеличенное изображение (можно использовать ту же ссылку, что и на вкладке "Данные об изображении"). Пример:

Ссылка (URL)
Ссылка для перехода при клике на изображение.
Цель (Target)
Вариант открытия страницы перехода. Значения аналогичные атрибуту target HTML-тега <a>. Не рекоммендуется использовать это поле на MDN. На MDN отдаётся предпочтение открытию ссылок на текущей вкладке браузера.

Поддерживаемые типы изображений

Вы можете загружать изображения следующих типов: GIF, JPEG, PNG , а также SVG-диаграммы. Предпочитаемые типы на MDN:

  • PNG для снимков экрана
  • SVG для диаграмм и графиков, потому что их проще перевести на другие языки, чем обычные картинки

Можно загружать файлы из Photoshop. Но их нельзя будет использовать для оформления статей, а только выкладывать для загрузки пользователями.

Удаление и изменение

Для удаление изображения из статьи кликните в изображение мышкой (или установите курсор непосредственно до изображения) и нажмите на клавиатуре клавишу "delete".

Можно изменить свойства изображения, кликнув на него дважды или кликнув правой кнопкой мыши и выбрав из выпадающего контекстного меню пункт "Свойства изображения". В обоих случаях откроется один и тот же диалог.

Удалять вложения могут только администраторы MDN. Обычно мы оставляем старые версии изображений, потому что на них могут оставаться ссылки из старых версий документов. В случае обнаружения недопустимых, неуместных или проприетарных изображений, пожалуйста, обратитесь к администратору MDN для удаления такого вложения или заведите инцидент для удаления.

Метки документа и участники

 Внесли вклад в эту страницу: pk.prog
 Обновлялась последний раз: pk.prog,