diff options
Diffstat (limited to 'files/ru/orphaned/mdn/editor')
| -rw-r--r-- | files/ru/orphaned/mdn/editor/basics/index.html | 62 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/basics/page_controls/index.html | 37 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/basics/toolbar/index.html | 256 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/images/index.html | 78 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/index.html | 47 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/keyboard_shortcuts/index.html | 146 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/links/index.html | 187 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/redirects/index.html | 31 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/source_mode/index.html | 128 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/syntax_highlighting/index.html | 181 | ||||
| -rw-r--r-- | files/ru/orphaned/mdn/editor/tables/index.html | 162 |
11 files changed, 1315 insertions, 0 deletions
diff --git a/files/ru/orphaned/mdn/editor/basics/index.html b/files/ru/orphaned/mdn/editor/basics/index.html new file mode 100644 index 0000000000..10b5d91eb9 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/basics/index.html @@ -0,0 +1,62 @@ +--- +title: Редактор UI элементов +slug: MDN/Editor/Basics +translation_of: MDN/Editor/Basics +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">Встроенный WYSIWYG редактор на MDN разработан так, чтобы максимально упростить создание, редактирование и улучшение статей и других страниц практически на всем сайте. Окно редактора, как показано ниже, состоит из восьми блоков.<br> + Это руководство предоставляет информацию о каждом разделе, чтобы вы знали, как использовать все возможности нашего редактора.</span></p> + +<div class="note"> +<p><strong>Note:</strong> Мы постоянно работаем над улучшением MDN, так что может наступить такой момент, когда эта документация и скриншоты к ней окажутся немного устаревшими. Чтобы идти в ногу со временем - мы будем периодически обновлять документацию.</p> +</div> + +<p><img alt="Edit page with en/ru labels" src="https://mdn.mozillademos.org/files/16406/edit-page-with-labels-ru.png" style="height: 723px; width: 808px;"></p> + +<p>Интерфейс редактора содержит следующие разделы, как показано выше. Нажмите на ссылку ниже чтобы прочесть о конкретном разделе.</p> + +<ul> + <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Page_info">Информация о странице</a></li> + <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Page_controls">Управление страницей</a></li> + <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Toolbar">Панель инструментов</a></li> + <li>{{anch("Поле редактирования")}}</li> + <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Tags">Теги</a></li> + <li>{{anch("Примечание")}}</li> + <li>{{anch("Запрос проверки")}}</li> + <li><a href="/ru/docs/MDN/Contribute/Editor/Basics/Attachments">Прикрепленные файлы</a></li> +</ul> + +<h2 id="Поле_редактирования">Поле редактирования</h2> + +<p>Поле редактирования - это, конечно же. место где вы вводите текст.</p> + +<p>Нажатие правой кнопки мыши (ПКМ) в поле редактирования показывает дополнительные опции, в зависимости от контекста. Нажатие ПКМ на таблице, например, предлагает опции для работы с таблицами, а на списке, соответственно, опции для работы со списками. По умолчанию редактор использует свое собственное контекстное меню в поле редактирования. Чтобы открыть стандартное браузерное контекстное меню, при нажатии ПКМ зажмите <kbd>Shift</kbd> или <kbd>Control</kbd> (<kbd>Command</kbd> на Mac OS X).</p> + +<p>Во время работы в окне редактирования вы можете использовать специальные сочетания клавиш.</p> + +<h2 id="Примечание">Примечание</h2> + +<p>После того как вы закончили свою работу, настоятельно рекомендуется добавлять к своим изменениям примечание. Оно будет показано в истории изменений к этой странице, а также в обзорной панели изменений (<a href="/en-US/dashboards/revisions">Revision Dashboard</a>). Это поможет объяснить и донести смысл ваших изменений до тех, кто может просматривать их позже. Чтобы добавить свое примечание, просто заполните это поле перед нажатием на кнопку <strong>Сохранить</strong>/<strong>Опубликовать</strong>.</p> + +<p>Вот несколько причин почему это полезно:</p> + +<ul> + <li>Если причина ваших изменений не очевидна, ваш комментарий поможет её донести до других.</li> + <li>Если ваши правки технически сложные, примечание поможет в них разобраться. Оно может содержать номер ошибки, например, к которой редакторы смогут обратиться для более подробной информации.</li> + <li>Если ваши изменения содержат в себе удаление большого количества контента, вы можете объяснить свое решение (например: "Я переместил этот текст в статью N").</li> +</ul> + +<h2 id="Запрос_проверки">Запрос проверки</h2> + +<p>MDN сообщество использует проверки (reviews) для того чтобы следить за качеством контента и улучшать его. Это работает с помощью переключения флажка у нужного пункта. Вы можете узнать больше о технической проверке (technical review) и редакционной проверке (editorial review) в руководствах <a href="/ru/docs/MDN/Contribute/Howto">"Как сделать"</a>.</p> + +<p>Для запроса проверки статьи, над которой вы работали, переключите флажок возле нужного пункта. Техническую проверку следует запрашивать каждый раз, когда вы вносите изменения в технические детали работы чего-либо. Редакционная же проверка хороший выбор когда вы хотите посторонней оценки стиля или качества вашего текста.</p> + +<p>Несмотря на то что эти опции добавляют вашу работу в соответсвующие списки (<a href="/en-US/docs/needs-review/technical">needing technical review</a> или <a href="/en-US/docs/needs-review/editorial">needing editorial review</a>), это не означает что она будет проверена немедленно. Для технической проверки хорошей идеей будет прямо обратиться к специалистам в этой области (см. <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Roles/Subject-matter_experts">subject-matter expert</a>). Для редакционной проверки вы можете написать на форуме MDN (см. <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a>) с просьбой проверить вашу работу.</p> + +<p>Будьте внимательны, убедитесь что установили нужные флажки перед нажатием кнопки <strong>Сохранить</strong>/<strong>Опубликовать</strong>.</p> + +<p> </p> + +<p id="Блок_управления">{{EditorGuideQuicklinks}}</p> diff --git a/files/ru/orphaned/mdn/editor/basics/page_controls/index.html b/files/ru/orphaned/mdn/editor/basics/page_controls/index.html new file mode 100644 index 0000000000..3f49c886b4 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/basics/page_controls/index.html @@ -0,0 +1,37 @@ +--- +title: Элементы управления страницей в редакторе MDN +slug: MDN/Editor/Basics/Page_controls +tags: + - Beginner + - Guide + - editor +translation_of: MDN/Editor/Basics/Page_controls +--- +<div>{{MDNSidebar}}</div> + +<p>Элементы управления состоят из кнопок, затрагивающих страницу в целом. Они расположены наверху и внизу страницы, для удобства прокрутки страницы. Здесь расположены четыре кнопки:</p> + +<div class="note"> +<p>Если вы пытаетесь сохранить вашу работу и ваши изменения отклоняются как некорректные, но вы уверены, что ваш контент подходит для MDN, вам следует связаться с <a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">командой редакторов</a> для разрешения проблемы.</p> +</div> + +<dl> + <dt>Сохранить и продолжить редактирование</dt> + <dd>Эта кнопка сохраняет и публикует страницу, не закрывая редактор. Это позволяет периодически сохранять вашу работу, оставляя запись в истории. Благодаря этому вы сможете при необходимости откатить изменения, или приостановить работу и продолжить в удобное время. Эта функция недоступна при создании новых страниц. Смотрите также раздел о <a href="/ru/docs/MDN/Contribute/Editor/Basics#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5">примечании</a>, чтобы узнать как оставить комментарий к вашим изменениям и зачем это делать. </dd> + <dt>Опубликовать</dt> + <dd>Эта кнопка сохраняет и публикует изменения, а также закрывает редактор и возвращает вас на страницу в обычном режиме.</dd> + <dt>Предварительный просмотр</dt> + <dd>Эта кнопка открывает новую вкладку или окно, в котором показано как будут выглядить ваши изменения после публикации. Это подразумевает, что все ваши <a href="/ru/docs/MDN/Contribute/Content/Macros">макросы</a> и <a href="/ru/docs/MDN/Kuma/Introduction_to_KumaScript#Template_Syntax">шаблоны</a> будут показаны как уже обработанные. Обратите внимание, что ваша работа не будет сохранена при использовании этой опции. Эта возомжность позволяет вам проверить, до того как вы сделали свои изменения публичными, не допустили ли вы ошибок в своих шаблонах, макросах, или при оформлении текста. Если вы столкнулись с ошибками выполнения скриптов, смотрите <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Troubleshooting#Scripting_error_while_previewing_a_page">Troubleshooting scripting error while previewing a page</a>.</dd> + <dd> + <div class="warning" style="font-size: 14px;"> + <p><strong>Внимание:</strong> В настоящее время некоторые шамблоны и макросы не выполняются корректно при предварительном просмотре, оставляя страницу без части контента (таких как боковые меню), и, следовательно, частично искажая страницу. Кроме того, если <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#scayt"><abbr title="Spell-Check As You Type">SCAYT</abbr> включен</a> (и если страница содержит определенные рабочие макросы или шаблоны), режим предварительного просмотра может выдавать ошибку выполнения скриптов.</p> + </div> + </dd> + <dt>Отменить</dt> + <dd>Эта кнопка отменяет все ваши несохраненные изменения. Вы будете возвращены на страницу в обычном режиме чтения.</dd> + <dd> + <div class="warning" style="font-size: 14px;"> + <p><strong>Warning:</strong> Occasionally <strong>Discard</strong> can malfunction and start acting more like a partial "discard," undoing many of your changes without exiting the editor. If this happens to you, you should save, exit, and re-enter the editor.</p> + </div> + </dd> +</dl> diff --git a/files/ru/orphaned/mdn/editor/basics/toolbar/index.html b/files/ru/orphaned/mdn/editor/basics/toolbar/index.html new file mode 100644 index 0000000000..8a01621158 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/basics/toolbar/index.html @@ -0,0 +1,256 @@ +--- +title: Панель инструментов редактора MDN +slug: MDN/Editor/Basics/Toolbar +tags: + - Beginner + - editor +translation_of: MDN/Editor/Basics/Toolbar +--- +<div>{{MDNSidebar}}</div> + +<p class="summary">Панель инструментов редактора предоставляет вам возможность менять внешний вид и структуру документов во время работы. Эта статья описывает назначение кнопок в панели инструментов. </p> + +<p>На панели расположено три ряда. На первых двух - кнопки, а на третьем HTML контекст, который показывает вам какой элемент вы редактируете в данный момент. На скриншоте ниже, например, редактирование происходит в {{htmlelement("p")}} элементе. </p> + +<p><img alt="Screenshot of the toolbar, with labels for the button groups" src="https://mdn.mozillademos.org/files/15269/toolbar-labeled.png" style="border-style: solid; border-width: 2px; float: right; height: 142px; width: 725px;">Кнопки на панели инструментов разделены на девять групп. Давайте взглянем на все. Мы будем изучать кнопки в каждой группе по порядку, слева направо.</p> + +<ul> + <li><a href="#Документ">Документ</a></li> + <li><a href="#Правка">Правка</a></li> + <li><a href="#Работа_с_текстом">Работа с текстом</a></li> + <li><a href="#Вид">Вид</a></li> + <li><a href="#Строковые_стили">Строковые стили</a></li> + <li><a href="#Работа_со_ссылками">Работа со ссылками</a></li> + <li><a href="#Специальные_стили">Специальные стили</a></li> + <li><a href="#Блоки">Блоки</a></li> + <li><a href="#Списки_и_поток_текста">Списки и поток текста</a></li> + <li><a href="#Медиа">Медиа</a></li> +</ul> + +<h2 id="Документ">Документ</h2> + +<p>Кнопки из этой группы используются для управления на уровне всего документа.</p> + +<dl> + <dt>Source</dt> + <dd>Кнопка <strong>Source</strong> позволяет переключаться между редактированием в режиме WYSIWYG и редактированием разметки HTML. Мы просим вас избегать редактирования разметки, т.к. в таком случае очень легко неправильно оформить статью или вовсе столкнуться с ошибками. Правда в настоящее время у редактора могут встречаться некоторые причуды в работе, из-за которых сделать некоторые вещи не удастся, не отредактировав разметку напрямую. Смотрите <a href="https://developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Source_mode">Режим разметки в редакторе MDN</a> чтобы более подробно изучить этот режим и понять что в разметке писать можно, а чего писать не следует.</dd> + <dt>Publish</dt> + <dd>То же что и кнопка <strong>Опубликовать</strong>.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Если вы пытаетесь сохранить вашу работу и ваши изменения отклоняются как некорректные, но вы уверены, что ваш контент подходит для MDN, вам следует связаться с <a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">командой редакторов</a> для разрешения проблемы.</p> +</div> + +<dl> + <dt>Preview</dt> + <dd>Аналог кнопки <strong>Предварительный просмотр</strong>.</dd> +</dl> + +<h2 id="Правка">Правка</h2> + +<p>Функции этих кнопок очень схожи с соответствующими из меню <strong>Правка </strong>в любом другом редакторе.</p> + +<dl> + <dt>Paste / Вставить</dt> + <dd>Вставить контент из буфера обмена в поле редактора.</dd> + <dt>Paste as plain text / Вставить как обычный текст</dt> + <dd>Открывает диалоговое окно в которое вы можете вставить текст. Этот текст будет отделен от всего лишнего, так что вы не вставите случайно текст с лишними стилями или ссылками. После вставки текста, вы можете его отредактировать, если нужно, а затем, кликнув на кнопку <strong>OK</strong>, вставить на страницу.</dd> + <dd> + <div class="note"> + <p><strong>Примечание:</strong> Обратите внимание, что во время вставки контента в редактор, если вы копировали стилизованный контент (например, скопированный с другого сайта код с подсветкой синтаксиса), вы можете случайно вставить вместе с ним стили или посторонние классы. Пожалуйста, будьте внимательны и не допускайте этого. Проверяйте свои изменения в режиме разметки, если требуется, чтобы удалить лишние стили и классы (или позаботьтесь об этом заранее, воспользовавшись кнопкой "Paste as plain text").</p> + </div> + </dd> + <dt>Undo</dt> + <dd>Отменить последнее изменение.</dd> + <dt>Redo</dt> + <dd>Применить последнее отмененное изменение.</dd> +</dl> + +<h2 id="Работа_с_текстом">Работа с текстом</h2> + +<dl> + <dt>Find / Найти</dt> + <dd>Открывает диалоговое окно <strong>Find and Replace</strong> в режиме "Find", который позволяет найти в вашем документе определенную строку.</dd> + <dt>Replace / Заменить</dt> + <dd>Открывает диалоговое окно <strong>Find and Replace</strong> в режиме "Replace", с помощью которого можно найти нужную строку и заменить на новую.</dd> +</dl> + +<p>Кнопки <strong>Find</strong> и <strong>Replace</strong> открывают одно и то же диалоговое окно, которое имеет несколько опций для поиска и, опционально, замены текста.</p> + +<dl> + <dt>Spell Checker / Проверка правописания</dt> + <dd>Эта кнопка открывает меню с несколькими пунктами: + <dl> + <dt>Enable SCAYT/Disable SCAYT</dt> + <dd>Включает или отключает Spell Check As You Type (SCAYT)</dd> + <dt>Options</dt> + <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке с опциями для настройки SCAYT.</dd> + <dt>Languages</dt> + <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "Languages", где вы можете выбрать язык для проверки правописания.</dd> + <dt>Dictionaries</dt> + <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "Dictionaries", где вы можете сами выбрать словарь, который SCAYT будет использовать.</dd> + <dt>About SCAYT</dt> + <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "About", в которой написано о SCAYT.</dd> + <dt>Check Spelling</dt> + <dd>Этот пункт открывает диалоговое окно Spell Checker, в котором вы можете проверить правописание в пакетном режиме (batch mode) для всего документа. Вы можете воспользоваться вкладкой Grammar для проверки грамматических ошибок, или воспользоваться вкладкой Thesaurus для поиска синонимов для слов в документе.</dd> + </dl> + </dd> +</dl> + +<h2 id="Вид">Вид</h2> + +<p>Эта группа позволяет настроить вид отображения интерфейса редактора. </p> + +<dl> + <dt>Maximize</dt> + <dd>Эта кнопка разворачивает интерфейс редактора (то есть панель инструментов и поле редактирования) во всё окно браузера, предоставляя вам как можно больше места для работы.</dd> + <dt>Show blocks</dt> + <dd>Эта кнопка отображает контуры вокруг блочных элементов в вашем документе. Это может быть удобным для проверки структуры документа без необходимости заглядывать в разметку.</dd> +</dl> + +<h2 id="Строковые_стили">Строковые стили</h2> + +<p>Строковые стили содержат распространенные стили, которые могут вам пригодиться при оформлении текста.</p> + +<dl> + <dt>Bold</dt> + <dd>Переключает <strong>жирный</strong> стиль текста, создавая при этом в разметке элемент {{htmlelement("strong")}}.</dd> + <dt>Italic</dt> + <dd>Переключает <em>курсив</em>. Создает {{htmlelement("em")}} элемент.</dd> + <dt>Underline</dt> + <dd>Переключает <u>нижнее подчеркивание</u>. Создает {{htmlelement("u")}} элемент.</dd> + <dt>Strike through</dt> + <dd>Переключает <s>перечеркивание</s>. Создает {{htmlelement("s")}} элемент.</dd> + <dt>Subscript</dt> + <dd>Переключает <sub>нижний индекс</sub>. Создает {{htmlelement("sub")}} элемент.</dd> + <dt>Superscript</dt> + <dd>Переключает <sup>верхний индекс</sup>. Создает {{htmlelement("sup")}} элемент. Заметьте, что такой строковый стиль не используется на MDN, так что вам вряд ли когда-нибудь пригодится эта кнопка.</dd> + <dt>Remove format</dt> + <dd>Удаляет текущий строковый стиль в выделенном тексте.</dd> + <dt>Code</dt> + <dd>Переключает стиль для <code>кода</code>. Создает {{htmlelement("code")}} элемент. Это используется для представления в тексте имен переменных, функций, объектов, файлов и т.п.</dd> +</dl> + +<h2 id="Работа_со_ссылками">Работа со ссылками</h2> + +<p>Данная группа предоставляет инструменты для работы со ссылками.</p> + +<dl> + <dt>Link</dt> + <dd>Создает новую ссылку. При нажатии вызывается окно создания ссылки, работа с которым подробна описана в <a href="/ru/docs/MDN/Contribute/Editor/Links#Using_the_toolbar">Ссылки с помощью панели инструментов</a>.</dd> + <dt>Unlink</dt> + <dd>Удаляет ссылку в месте, где расположен курсор.</dd> + <dt>Anchor</dt> + <dd>Создает якорь в месте, где расположен курсор. Заметьте, что вам не нужно создавать якорь для заголовков, редактор автоматически создает <code>{{htmlattrxref("id")}}</code> для каждого заголовка, заменяя пробелы в названии на нижние подчеркивания. Например, заголовок этой секции имеет <code>id</code>, значение которого <code>Работа_со_ссылками</code>.</dd> + <dt>Create a redirect</dt> + <dd>Встраивает переадресацию на другую страницу. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Redirects#Creating_redirects">Создание переадресаций</a> для подробной информации.</dd> +</dl> + +<h2 id="Специальные_стили">Специальные стили</h2> + +<p>Кнопка <strong>Styles</strong> - это выпадающее меню, предлагающее на выбор специальные стили форматирования текста.</p> + +<h3 id="Блочные_стили">Блочные стили</h3> + +<dl> + <dt>None</dt> + <dd>Удаляет стиль с выбранного блока.</dd> + <dt>Note box</dt> + <dd>Создает блок с примечание, как показано ниже. Вы должны всегда начинать примечание со слова <strong>"Примечание:"</strong> жирными буквами.</dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Это поле с примечанием.</p> +</div> + +<dl> + <dt>Warning box</dt> + <dd>Создает блок с предупреждением, как показано ниже. Блок должен всегда начинаться со слова <strong>"Внимание:"</strong> жирными буквами.</dd> +</dl> + +<div class="warning"> +<p><strong>Внимание:</strong> Это поле с предупреждением.</p> +</div> + +<dl> + <dt>Two columns</dt> + <dd>Делает выделенный текст или блок двухколоночным на браузерах, которые это поддерживают.</dd> + <dt>Three columns</dt> + <dd>Делает выделенный текст или блок трехколоночным на браузерах, которые это поддерживают.</dd> + <dt>Syntax box</dt> + <dd>Создает поле для синтаксиса, как показано ниже. Это создает {{htmlelement("pre")}}. Вы можете также использовать кнопку "PRE".</dd> + <dt> + <pre class="syntaxbox notranslate">Это поле для синтаксиса</pre> + </dt> + <dt>Hidden when reading</dt> + <dd>Создает блок, который видно только в режиме редактирования. Это не то же, что и HTML-комментарий, который виден только в режиме разметки.</dd> +</dl> + +<h3 id="Строковые_стили_2">Строковые стили</h3> + +<dl> + <dt>SEO summary</dt> + <dd>Этот специальный стиль используется чтобы выделить предложение или два, которые будут использованы как краткое описание для поисковой оптимизации. Он также используется макросами для автоматического создания посадочных страниц. Если вы не воспользуетесь этим стилем, MDN автоматически использует первый абзац вашей статьи. Но иногда это не самый лучший вариант и лучше воспользоваться предложенным стилем.</dd> +</dl> + +<h2 id="Блоки">Блоки</h2> + +<p>Эта группа включает опции для прочих стилей блоков. Некоторые из них относятся к стандартному HTML, а другие - уникальны, т.к. относятся к Kuma.</p> + +<dl> + <dt>Blockquote</dt> + <dd>Вставляет блок для цитаты. <strong>Пожалуйста, не используйте это</strong>. Блоки с цитатами не являются частью нашего стайлгайда, и эта кнопка будет удалена в ближайшем будущем.</dd> + <dt>Preformatted Text</dt> + <dd>Вставляет {{htmlelement("pre")}} блок, или превращает в него текущий. Все примеры кода должны быть оформлены в такой блок.</dd> + <dt>Headings</dt> + <dd>Кнопки заголовков позволяют вам вставить нужный заголовок. Нажмите на одну из этих кнопок для создания нового заголовка соответственной глубины. По умолчанию заголовки с H2 по H4 включаются в оглавление, но вы можете изменить это, как описано в разделе <a href="/ru/docs/MDN/Contribute/Editor/Basics/Page_info">Информация о странице</a>.</dd> + <dt>Syntax highlighter</dt> + <dd>Подсветка синтаксиса позволяет вам выбрать язык, синтаксис которого будет подсвечиваться в {{htmlelement("pre")}} блоке. Если такой блок не был выбран изначально, он будет создан. Выберите язык используемый в блоке, и блок будет подсвечен соответствующим образом.</dd> + <dt>Insert Code Sample Template</dt> + <dd>Эта кнопка используется системой живых примеров (the live sample system), чтобы помочь вам быстро вставить новый живой пример (live sample). Смотрите <a href="/ru/docs/MDN/Contribute/Structures/Live_samples#Using_the_live_sample_system">Пользование системой живых примеров</a> чтобы узнать подробнее.</dd> + <dt>Insert Code Sample iFrame</dt> + <dd>Вставляет в документ подходящий макрос для отображения нужного живого примера. Смотрите <a href="/ru/docs/MDN/Contribute/Structures/Live_samples#Using_the_live_sample_system">Пользование системой живых примеров</a> для деталей использования и информации о других функциях живых примеров.</dd> +</dl> + +<h2 id="Списки_и_поток_текста">Списки и поток текста</h2> + +<p>Эта группа предоставляет инструменты для создания списков и изменения поведения текста в блоках.</p> + +<dl> + <dt>Insert/remove numbered list</dt> + <dd>Создает или удаляет нумерованный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> может быть использована для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd>, соответсвенно, для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Numbered list properties, в которой можно выбрать стиль маркера.</dd> + <dt>Insert/remove bulleted list</dt> + <dd>Создает или удаляет маркированный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> используется для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd> для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Bulleted list properties, в которой можно выбрать стиль нумерации (числа, буквы, римские цифры и пр., а также с какой цифры начинать).</dd> + <dt>Definition List</dt> + <dd>Создает новый список с определениями (definition list). Этот список состоит из серии терминов и определений (именно такой список вы сейчас читаете).</dd> + <dt>Definition Term</dt> + <dd>Создает новый блок с термином в списке. Если в данный момент вы не редактируете список, он будет создан. Нажатие на <kbd>Enter</kbd> автоматически переключается на редактирование нового определения.</dd> + <dt>Definition Value</dt> + <dd>Создает новый блок с определением в списке. Нажатие на <kbd>Enter</kbd> создает новый термин. Нажав дважды, вы покинете список.</dd> + <dt>Decrease indent</dt> + <dd>Уменьшает вложенность. Того же эффекта можно добиться нажав <kbd>Shift</kbd> + <kbd>Tab</kbd> в списке.</dd> + <dt>Increase indent</dt> + <dd>Увеличивает вложенность. То же самое, что и нажатие <kbd>Tab</kbd> в списке.</dd> + <dt>Text direction left-to-right</dt> + <dd>Переключает текущее направление текста на слева направо. Используется при работе с другими языками. Например, при работе с английским текстом в арабском.</dd> + <dt>Text direction right-to-left</dt> + <dd>Переключает текущее направление текста на справа налево. Используется при работе с другими языками. Например, при работе с арабским текстом в английском.</dd> +</dl> + +<h2 id="Медиа">Медиа</h2> + +<p>Данная группа предоставляет инструменты для работы с медиафайлами.</p> + +<dl> + <dt>Image</dt> + <dd>Вставляет новое изображение в статью. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Images">Изображения</a> для подробностей.</dd> + <dt>Table</dt> + <dd>Вставляет таблицу в статью. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Tables">Таблицы</a> для подробной информации о таблицах в статьях.</dd> + <dt>Embed YouTube Video</dt> + <dd>Открывает диалоговое окно, в котором вы можете ввести URL для видео YouTube. С этой информацией создается вызов макроса EmbedYouTube. Это безопасный способ встроить видеоконтент.</dd> + <dt>Insert MathML based on (La)TeX</dt> + <dd>Открывает диалоговое окно, в которое вы можете вставить свой код TeX или LaTeX. Этот код будет конвертирован в <a href="/ru/docs/Web/MathML">MathML</a> вставлен в документ в {{htmlelement("math")}} блоке.</dd> +</dl> + +<p> </p> 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> diff --git a/files/ru/orphaned/mdn/editor/index.html b/files/ru/orphaned/mdn/editor/index.html new file mode 100644 index 0000000000..df98522e38 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/index.html @@ -0,0 +1,47 @@ +--- +title: Руководство по MDN редактору +slug: MDN/Editor +tags: + - Landing + - MDN + - Редактор MDN +translation_of: MDN/Editor +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/ru/docs/MDN")}}</div> + +<p><span class="seoSummary">WYSIWYG ("<em>what-you-see-is-what-you-get"</em> в переводе "<em>что видишь, то и получишь</em>") — редактор для веб-документов MDN, который позволяет легко делать вклад в новый контент. Это руководство показывает, как использовать редактор и улучшить вашу продуктивность. Пожалуйста, убедитесь в том, что прочитали <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Условия использования Mozilla</a> и согласны с ними перед тем, как начать редактировать или создавать новые страницы.</span></p> + +<p><a href="/ru/docs/Project:Writer's_guide" title="/en-US/docs/Project:MDN/Style_guide">Руководство по оформлению MDN</a> предлагает информацию о том, как оформлять и стилизовать контент, включая предпочтительные грамматические и орфографические правила.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Basics">Редактор UI элементов</a></dt> + <dd class="landingPageList">Встроенный WYSIWYG редактор на MDN разработан так, чтобы максимально упростить создание, редактирование и улучшение статей и других страниц практически на всем сайте. Окно редактора, как показано ниже, состоит из восьми блоков.<br> + Это руководство предоставляет информацию о каждом разделе, чтобы вы знали, как использовать все возможности нашего редактора.</dd> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/%D0%9A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8">Изображения</a></dt> + <dd class="landingPageList">Изображения очень часто используются при оформлении статей. Они могут быть снимками экрана, примерами того, как должен выглядеть результат, SVG-диаграммами. Данная статья описывает способы работы с изображениями в контенте сайта MDN.</dd> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/%D0%93%D0%BE%D1%80%D1%8F%D1%87%D0%B8%D0%B5_%D0%BA%D0%BB%D0%B0%D0%B2%D0%B8%D1%88%D0%B8">Горячие клавиши в редакторе MDN</a></dt> + <dd class="landingPageList">Существует ряд удобных горячих клавиш, позволяющих вам не отрывать руки от клавиатуры во время работы в UI редактора MDN. Они перечислены в этой статье.</dd> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8">Ссылки</a></dt> + <dd class="landingPageList">Ссылки — это ключевой компонент любой вики не только среди множества документов, но и в пределах одного. К счастью, ссылки очень легко создавать, даже несмотря на то, что есть <em>очень много</em> способов сделать их! В статье рассказывается всё о ссылках в редакторе MDN.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/%D0%9F%D0%B5%D1%80%D0%B5%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5">Перенаправление</a></dt> + <dd class="landingPageList">Иногда вам понадобится создать страницу, которая просто перенаправляет на другую страницу. В этой статье рассказывается, как сделать переадресацию.</dd> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Source_mode">Режим источника</a></dt> + <dd class="landingPageList">В редакторе MDN есть особая кнопка, позволяющая вам включать режим источника. В этом режиме вы можете видеть HTML-код тела статьи, которую вы пишете. Это руководство поможет вам понять, что вы <strong>можете</strong> делать в режиме источника, что вам <strong>следует</strong> с ним делать и, самое важное, чего вам делать <strong>не следует</strong>.</dd> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%B2%D1%8B%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F">Синтаксические выделения</a></dt> + <dd class="landingPageList">Синтаксическое выделение кода крайне полезно в статьях. Режим синтаксического выделения также используется в нашей системе шаблонов, чтобы определять, как использовать каждый отрывок кода при сборке в готовый экземпляр.</dd> + <dt class="landingPageList"><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Tables">Таблицы</a></dt> + <dd class="landingPageList">Таблицы полезны для представления информации. В этой статье описано, как создавать и обслуживать таблицы на MDN и когда стоит и не стоит использовать их.</dd> +</dl> +</div> +</div> + +<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/ru/orphaned/mdn/editor/keyboard_shortcuts/index.html b/files/ru/orphaned/mdn/editor/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..7a697614df --- /dev/null +++ b/files/ru/orphaned/mdn/editor/keyboard_shortcuts/index.html @@ -0,0 +1,146 @@ +--- +title: Горячие клавиши в редакторе MDN +slug: MDN/Editor/Горячие_клавиши +tags: + - MDN + - MDN Meta + - Reference + - Горячие клавиши + - Клавиши + - Редактор +translation_of: MDN/Editor/Keyboard_shortcuts +--- +<p><span class="seoSummary">Существует ряд удобных горячих клавиш, позволяющих вам не отрывать руки от клавиатуры во время работы в UI редактора MDN.</span></p> + +<p>Горячие клавиши перечислены для Windows и Linux; для Mac вместо ключа <kbd>Control</kbd> используйте <kbd>Command</kbd>.</p> + +<table class="standard-table"> + <colgroup> + <col style="width: 15em;"> + </colgroup> + <tbody> + <tr> + <th>Сочетание клавиш</th> + <th>Описание</th> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td>Выделить всё</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td>Копировать</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td>Вставить</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td> + <td>Вставить без форматирования</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td>Вырезать</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td>Отменить</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td>Повторить</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>K</kbd></td> + <td>Открыть редактор ссылок/добавить новую ссылку</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td>Удалить ссылку в текущем положении курсора</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td><strong>Полужирный текст</strong></td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td><em>Курсив</em></td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td>Включить стилизацию <code><code></code></td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td> + <p>Включить режим просмотра источника</p> + + <div class="note">Будьте внимательны при работе в режиме источника: вы должны придерживаться наших стандартов заполнения содержимого. Ознакомьтесь с нашим <a href="/en-US/docs/MDN/Contribute/Editor/Source_mode">гайдом по режиму источника</a>, чтобы узнать, как использовать режим источника и что вам следует и не следует делать в нём.</div> + </td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td> + <pre class="notranslate"> +Включить или отключить стилизацию <code><pre></code> в текущем блоке.</pre> + </td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>U</kbd></td> + <td><u>Подчёркивание</u></td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td>Опубликовать изменения, не закрывая редактор</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td>Опубликовать изменения и закрыть редактор</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td>Удалить форматирование в выделенной области (Это ноль, а не буква "О")</td> + </tr> + <tr> + <td>От <kbd>Ctrl</kbd> + <kbd>2</kbd> до <kbd>Ctrl</kbd> + <kbd>5</kbd></td> + <td>Выбор уровней заголовков от 2 до 5. Уровень 1 предназначен для заголовка страницы, расположенного в верху статьи</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></td> + <td>Преобразование выделенного текста (по порядку): в нумерованный список — в маркированный список — удалить список</td> + </tr> + <tr> + <td><kbd>Tab</kbd></td> + <td>Увеличивает отступ или же вставляет два пробела. В таблицах перемещает курсор в следующую ячейку или вставляет новый ряд, если следующей клетки нет. Курсор перемещается на следующий абзац, если находится на заголовке страницы</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td>Уменьшает отступ. В таблицах перемещает курсор в предыдущую ячейку или вставляет новый ряд, если предыдущей клетки нет. Курсор перемещается на следующий абзац, если находится на заголовке страницы</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td>Вставляет неразрывный пробел(<code>&nbsp;</code>)</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td> + <p>Выводит из блока. К примеру, если вы редактируете блок <code><pre></code>, <kbd>Shift</kbd> + <kbd>Enter</kbd> выводит курсор из блока, помещая его обратно в тело статьи</p> + + <div class="blockIndicator note"> + <p>На данный момент не поддерживается: {{bug('780055')}}.</p> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Basics">Редактор UI элементов</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/MDN/Contribute">Cотрудничество с MDN</a></li> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Getting_started">Mozilla - быстрый старт!</a></li> +</ul> + +<div>{{MDNSidebar}}</div> diff --git a/files/ru/orphaned/mdn/editor/links/index.html b/files/ru/orphaned/mdn/editor/links/index.html new file mode 100644 index 0000000000..459a965172 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/links/index.html @@ -0,0 +1,187 @@ +--- +title: Создание ссылок в статьях MDN +slug: MDN/Editor/Ссылки +tags: + - Guide + - MDN + - MDN Meta + - Документация + - Редактор + - Руководство +translation_of: MDN/Editor/Links +--- +<div>{{MDNSidebar}}</div> + +<p id="Creating_and_editing_links"><span class="seoSummary">Ссылки — это ключевой компонент любой вики не только среди множества документов, но и в пределах одного. К счастью, ссылки очень легко создавать, даже несмотря на то, что есть <em>очень много</em> способов сделать их!</span></p> + +<div class="note"> +<p><strong>Обратите внимание</strong>, что у нас есть <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide#Links">особые правила применения ссылок</a>: они описаны в <a href="https://developer.mozilla.org/ru/docs/Project:Writer's_guide">руководстве по оформлению материалов MDN</a>.</p> +</div> + +<h2 id="Использование_панели_инструментов">Использование панели инструментов</h2> + +<p>Самый очевидный способ создать ссылку — нажать на кнопку <kbd>Вставить/Редактировать ссылку</kbd> на панели инструментов или нажать сочетание <kbd>Ctl</kbd>+<kbd>K</kbd> (<kbd>Command</kbd>-<kbd>K</kbd> для Mac). Кнопка ссылки вглядит так: <img alt="The link button (as of 2015-12-04)" src="https://mdn.mozillademos.org/files/12003/link-button.png" style="height: 16px; width: 16px;">. Вы можете добавлять текст к выделенному тексту.</p> + +<h3 id="Создание_ссылки">Создание ссылки</h3> + +<p>После нажатия на кнопку ссылки появится диалоговое окно для работы с ссылками:</p> + +<p><img alt="Окно для работы с ссылками" src="https://mdn.mozillademos.org/files/15289/link-info.png" style="height: 320px; width: 335px;"></p> + +<p>Здесь вы можете создать новую ссылку. Параметры окна:</p> + +<dl> + <dt>Ссылка (Link Type)</dt> + <dd>Это тип создаваемой вами ссылки. Тип по умолчанию, URL, используется в сети — или в MDN, или вне его. Вы также можете выбрать "Link to anchor in the text" или "Email". Ссылка-якорь позволяет вам привязать её к якорю, созданному вами ранее с помощью кнопки <kbd>Вставить / редактировать якорь</kbd> на панели инструментов. Опция email позволяет вам настрить: URL-адрес получателя, получателя и сообщение. Чаще всего вы будете использовать тип URL.</dd> + <dt>Поиск ссылки по заголовку / Текст ссылки (Article Title Lookup / Link Text)</dt> + <dd>У этого поля есть две цели: во-первых, вы обозначаете текст, который будет использован как указатель ссылки (или, если вы выделили текст до открытия окна, он будет отображён как указатель ссылки), во-вторых, текст, введённый в это поле, используется для поиска статей на MDN, чтобы найти возможное направление ссылки. К примеру, если вы введёте "Array" в поле, вы увидите что-то наподобие этого:<br> + <img alt='Screenshot of the Link dialog box, showing a lookup menu for the text "Array"' src="https://mdn.mozillademos.org/files/15291/link%20dialog%20with%20lookup%20menu.png" style="border-style: solid; border-width: 1px; height: 388px; width: 496px;"></dd> +</dl> + +<dl> + <dd>На картинке вы можете видеть все страницы MDN, чьи заголовки содержат текст, напечатанный вами. Вы можете прокрутить список и выбрать одну из страниц или продолжить набирать текст, сужая список. Заметьте, у названий страниц отображается их язык (в нашем примере это "[en-US]"). Это не отображается в указателе ссылки; так сделано для того, чтобы вы убедились, что вы ссылаетесь на статью того же языка, на котором пишете вы.</dd> + <dt>Прикрепление ссылки (Attachments)</dt> + <dd>В качестве альтернативы вы можете сделать так, чтобы ссылка была привязана к одному из файлов, прикрпеплённому к этой странице. Это отличный способ предоставить ссылку для скачивания примера кода и тому подобное.</dd> + <dt>URL</dt> + <dd>Наконец, поле для URL-адреса позволяет вам ввести URL; в поле также выводятся URL выбранных вами элементов из меню <strong>Article Title Lookup</strong> или <strong>Attachments</strong>, если вы их использовали. Нередко используют URL-адреса страниц MDN, поэтому, если вы ссылаетесь на другую страницу MDN, удалите доменное имя ("https://developer.mozilla.org") из начала URL.</dd> +</dl> + +<p>Как только завершите настройку ссылки, нажмите <kbd><strong>OK</strong></kbd><strong>.</strong></p> + +<div class="note"> +<p>В верху окна также есть вкладка <strong>Advanced</strong>. Нет опций, которые мы советуем вам использовать регулярно, по крайней мере, сейчас. Можете быть, в будущем появятся новые стили для ссылок, но мы, вероятно, добавим новую панель инструментов для этих опций.</p> +</div> + +<h3 id="Ссылки">Ссылки</h3> + +<p>Если у вас есть текст, который вы хотели бы превратить в ссылку, вы можете слегка упростить процесс. Выделите нужный вам текст, затем откройте окно для работы с сылками; поле <strong>Article Title / Lookup Text </strong>будет заполнено выделенным текстом. К примеру, есть у нас, скажем, следующий текст:</p> + +<blockquote> +<p>You may find it useful to use JavaScript arrays when working on this project.</p> +</blockquote> + +<p>Нам хотелось бы преобразовать <em>arrays</em> в ссылку на файл с соответствующим содержанием. Просто выделите слово и включите окно для работы с ссылками; у вас появится заполненное окно, похожее на изображение выше. Наводя мышь на поле-подсказку, вы можете видеть её относительный путь (его URL относится к <code>developer.mozilla.org</code>), благодаря чему вы можете лучше узнать, где находится статья и о чём она.</p> + +<p><img alt="Screenshot of the Link dialog box, showing a lookup menu and a URL tooltip" src="https://mdn.mozillademos.org/files/15293/Rollover%20of%20lookup%20menu.png" style="border-style: solid; border-width: 1px; height: 387px; width: 493px;"></p> + +<p>На примере: подсказки — это возможные совпадения. Кажется, <em>arrays</em> было выбрано удачно; выберем этот вариант. Поле сразу заполняется URL-адресом, поэтому мы просто жмём <kbd><strong>OK</strong></kbd>, и цитата будет выглядеть так:</p> + +<blockquote> +<p>You may find it useful to use JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays">arrays</a> when working on this project.</p> +</blockquote> + +<h2 id="Использование_макросов">Использование макросов</h2> + +<p>MDN часто использует <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#Using_macros">макросы</a>, чтобы автоматически создавать термины-ссылки с соответствующим содержанием, стилизуя их как ссылки в сответствии с нашими <a href="https://wiki.developer.mozilla.org/ru/docs/Project:Writer's_guide">правилами оформления элементов</a>. Учтите: наше <a href="https://wiki.developer.mozilla.org/ru/docs/Project:Writer's_guide">руководство</a> отмечает, что API-термины, элементы и атрибуты HTML, свойства, имена функций CSS и тому подобное,— должны быть стилизованы с помощью элемента {{HTMLElement("code")}}. Также должны быть ссылки на другие страницы MDN.</p> + +<p>К использованию макросов для создания ссылок легко привыкнуть, и это предоставляет множество плюсов:</p> + +<ul> + <li>Стили добавлены для вас.</li> + <li>Ссылка создана для вас — и она не подвергается изменениям, если структура MDN меняется.</li> + <li>Соответствующие подсказки также созданы для вас.</li> +</ul> + +<p>Есть очень много таких макросов, и мы не будем останавливаться на них подробно здесь. Вместо этого мы разберём несколько самых часто употребляемых. Если интересно, ознакомьтесь с разделом "<a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros#Linking">Создание гиперссылок</a>" в нашей статье <a href="/en-US/docs/Project:MDN/Contributing/Custom_macros">Пользовательский макрос для MDN</a>.</p> + +<div class="blockIndicator note"> +<p>Ещё проще посетить <a href="/en-US/docs/Project:Introduction_to_KumaScript">KumaScript</a>, где есть любой из этих макросов; ко многим макросам есть комментарии вверху, объясняющие, как макрос работает и какие у него переменные.</p> +</div> + +<h3 id="Ссылка_на_документацию_для_API">Ссылка на документацию для API</h3> + +<p>У нас есть есколько невероятно полезных макросов для создания стилизованных ссылок для API. В этом подразделе перечислены самые удобные; в каждый блок могут быть добавлены доступные параметры, чтобы предоставить больший контроль над выводом. На название каждого макроса можно кликнуть, чтобы увидеть сам код макроса; у каждого макроса есть комментарии вверху, объясняющие, как макрос работает и какие у него переменные.</p> + +<dl> + <dt>{{TemplateLink("HTMLElement")}}</dt> + <dd>Вставляет в HTML-код название элемента с необходимыми стилизацией и ссылками. К примеру: <code>\{{HTMLElement("table")}}</code> даёт {{HTMLElement("table")}}.</dd> + <dt>{{TemplateLink("cssxref")}}</dt> + <dd>Вставляет в CSS-код документацию свойства, правила или селектора. Например: <code>\{{cssxref("background-color")}}</code> в результате выводит {{cssxref("background-color")}}.</dd> + <dt>{{TemplateLink("domxref")}}</dt> + <dd>Вставляет данный термин API. Пример: <code>\{{domxref("window")}}</code> даёт в результате {{domxref("window")}}, и <code>\{{domxref("window.scrollBy()")}}</code> вставляет {{domxref("window.scrollBy()")}}. Вы также можете вставить дополнительный параметр, чтобы заменить текст: <code>\{{domxref("window.scrollBy", "scrollBy()")}}</code> заменяет <code>{{domxref("window.scrollBy")}}</code> на {{domxref("window.scrollBy", "scrollBy()")}}.</dd> + <dt>{{TemplateLink("SVGElement")}}</dt> + <dd>Вставляет название SVG-элемента с необходимыми стилизацией и ссылками. К примеру: <code>\{{SVGElement("circle")}}</code> даёт {{SVGElement("circle")}}.</dd> +</dl> + +<h3 id="Добавление_якорей">Добавление якорей</h3> + +<p>Чтобы применить ссылку к области с таким же названием, следует использовать макрос {{TemplateLink("anch")}}. Синтаксис — проще некуда: <code>\{{anch("Name of destination section")}}</code>. По умолчанию текст ссылки — это название области, но вы можете добавить второй, необязательный, параметр, обозначающий альтернативный текст. Несколько примеров:</p> + +<ul> + <li><code>\{{anch("Использование панели инструментов</code><code>")}}</code> будет выглядеть так: {{anch("Использование панели инструментов")}}</li> + <li><code>\{{anch("Использование панели инструментов</code><code>", "Ранее в этой статье")}}</code> выведет: {{anch("Использование панели инструментов", "Ранее в этой статье")}}</li> +</ul> + +<h3 id="Ссылки_к_багам">Ссылки к багам</h3> + +<p>Вы можете создать ссылку на базу данных Mozilla's Bugzilla с макросом {{TemplateLink("bug")}}. У этого макроса всего один параметр: номер бага, на который ссылаются. К примеру, <code>\{{bug(765642)}}</code> покажет: {{bug(765642)}}.</p> + +<p>Таким же образом вы можете создавать ссылки к багам на других брузерах и брузерных движках:</p> + +<dl> + <dt>WebKit (Safari и т.д.)</dt> + <dd>{{TemplateLink("WebkitBug")}}: <code>\{{webkitbug(31277)}}</code> даёт {{webkitbug(31277)}}.</dd> +</dl> + +<h3 id="Ссылки_к_RFC">Ссылки к RFC</h3> + +<p>Суть работы Интернета изложена в RFC. Вы можете с лёгкостью обратиться к RFCs с помощью {{TemplateLink("RFC")}}. Для примера, \{{RFC(2616)}} станет {{RFC(2616)}}. Вы можете при желании снабдить макрос альтернативной ссылкой, чтобы использовать вместо выделенного участка текста или нескольких участков, с описанием, к какой ссылке привязать их.</p> + +<p><span style="">Ссылки к информации о XPCOM-интерфейсах</span></p> + +<div class="note"> +<p>MDN больше не поддерживает XPCOM-документацию, но внесение вклада приветствуется!</p> +</div> + +<p>Если вы документируете свойства Mozilla, способность быстро создать ссылку к документации XPCOM очень полезна. Здесь несколько макросов для этого.</p> + +<p>Синтаксис: <code>\{{interface("interfacename")}}</code>. К примеру, вы написали:</p> + +<blockquote> +<p>When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.</p> +</blockquote> + +<p>В результате получится</p> + +<blockquote> +<p>When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.</p> +</blockquote> + +<p>Если вам нужна ссылка к информации о методе или атрибуте XPCOM-интерфейса, макросы {{TemplateLink("ifmethod")}} и {{TemplateLink("ifattribute")}} точно для вас. Названия интерфейса и метода или атрибута, к которым вы ссылаетесь, принимаются за параметры. Макрос {{TemplateLink("ifmethod")}} особенно интересен, т.к. он по-особому форматирует элемент при добавлении стиля родителя после названия метода. Например, <code>\{{ifmethod("nsIIOService", "newURI")}}</code> выводит {{ifmethod("nsIIOService", "newURI")}}. Это контейнер, в котором вы защищены от стилевых изменений MDN в будущем!</p> + +<h3 id="Ссылка_к_привилегированной_документации_Mozilla">Ссылка к привилегированной документации Mozilla</h3> + +<p>Для вставки Mozilla preference и для того, чтобы привязать её к соответствующей странице в <a href="/en-US/docs/Mozilla/Preferences/Preference_reference">Preference reference</a>, используйте макрос {{TemplateLink("pref")}} . У него всего один параметр: полное название привилегерованного элемента. Например, <code>\{{pref("javascript.options.showInConsole")}}</code> преобразуется в: {{pref("javascript.options.showInConsole")}}.</p> + +<h3 id="Ссылка_к_ресурсам_Mozilla">Ссылка к ресурсам Mozilla</h3> + +<p>Вы можете ссылаться на дерево ресурсов Mozilla's (хотя не стоит делать это часто), используя макрос {{TemplateLink("source")}}. Вместо указания абсолютного пути вам достаточно указать путь относительно директории <code>/source/</code>. Для примера: \{{source("browser/Makefile.in")}} создаёт эту ссылку: {{source("browser/Makefile.in")}}.</p> + +<p>Вы можете при желании снабдить ссылку альтернативным тектсом. Например, как видите, \{{source("browser/Makefile.in", "the browser's makefile")}} преобразуется в: {{source("browser/Makefile.in", "the browser's makefile")}}.</p> + +<div class="note"> +<p>Обратите внимание на документацию {{anch("Использование макросов")}}, если вы заинтересованы в более подробном изучении макросов и посетите <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>, чтобы больше узнать о системе макросов.</p> +</div> + +<h2 id="Ссылки_на_рекомендованные_статьи">Ссылки на рекомендованные статьи</h2> + +<p>Если вы хотите создать список связанных страниц или другого рекомендованного материала к прочтению, вам следует делать это с помощью создания контейнера быстрых ссылок в боковой панели. Такой подход заменяет наши старые <em>Смотрите также</em> в конце статей. О том, как создавать контейнер с быстрыми ссылками, читайте в статье <a href="/en-US/docs/MDN/Contribute/Structures/Quicklinks">Быстрые ссылки</a>.</p> + +<h2 id="Схемы_URL-адресов">Схемы URL-адресов</h2> + +<p>В целях безопасности создавайте ссылки, имеющие следующие схемы:</p> + +<ul> + <li><code>http://</code></li> + <li><code>https://</code></li> + <li><code>ftp://</code></li> + <li><code>mailto:</code></li> +</ul> + +<p>Дргуие схемы просто-напросто будут удалены.</p> + +<div class="note"> +<p>Особые URL-схемы, такие как <code>about:</code> и <code>chrome:</code> используются Firefox, Google Chrome и некоторыми другими браузерами, чтобы предоставить доступ к особым опциям, таким как привилегерованные элементы, отладочная информация и так далее. Эти ссылки не работают в содержимом статьи, поэтому не создавайте ссылки, используя эти схемы в MDN. То же относится и к схемам <code>javascript:</code> и <code>jar:</code>, которые блокируются большинством браузеров в целях безопасности.</p> +</div> + +<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/ru/orphaned/mdn/editor/redirects/index.html b/files/ru/orphaned/mdn/editor/redirects/index.html new file mode 100644 index 0000000000..dade13fb99 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/redirects/index.html @@ -0,0 +1,31 @@ +--- +title: Перенаправление +slug: MDN/Editor/Перенаправление +tags: + - Гайд + - Переадресация + - Перенаправление + - Удаление +translation_of: MDN/Editor/Redirects +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">Иногда вам понадобится создать страницу, которая просто перенаправляет на другую страницу. В этой статье рассказывается, как сделать переадресацию.</span></p> + +<h2 id="Создание_перенаправления">Создание перенаправления</h2> + +<p>Перенаправление необходимо, к примеру, когда страница слилась с другой. Чтобы создать перенаправление, просто нажмите эту кнопку в панели инструментов: <img alt="" src="https://mdn.mozillademos.org/files/5131/redirect.png" style="height: 17px; width: 17px;">.</p> + +<p>Она откроет диалоговое окно, в котором запрашивается имя документа и его URL-адрес. Вообще, имя не так важно; оно больше нужно, если вы сами ищете страницу, и вам нужно знать, куда вы перенаправляете. В поле <em>URL</em> должен быть указан абсолютный (полный) путь, например, "/en-US/docs/foo". Относительные ссылки не сработают. Вы можете перенаправить на раздел страницы, используя хэштэг ("#"), например: "/destination/url/here#название_раздела". Таким образом вы перенапривите пользователя прямиком в раздел страницы.</p> + +<p>На странице должно быть только перенаправление; перед его созданием переместите всё содержимое в его новый "дом". Удалите также ревизионные флаги с этой страницы.</p> + +<div class="note"> +<p><strong>Замечание:</strong> Обязательно удалите все теги со страницы: если вы это не сделаете, страница с перенаправлением будет рядом со страницей, на которую перенаправили (теги-то одинаковые), смущая людей и занимая свободное место на странице результатоыв поиска. Ещё это плохо скажется на поисковой оптимизации.</p> +</div> + +<h2 id="При_удалении_страницы">При удалении страницы</h2> + +<p>Перед удалением страницы подумайте: а не будет ли лучше перенаправить посетителя на другую страницу MDN? Ведь, если он попадёт на страницу по старой ссылке, лучше отправить его на правильную страницу, чем если бы ему выдали ошибку 404 ("страница не найдена"). Удалять страницу стоит только в крйнем случае: если она забита спамом и прочим неуместным контентом.</p> + +<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/ru/orphaned/mdn/editor/source_mode/index.html b/files/ru/orphaned/mdn/editor/source_mode/index.html new file mode 100644 index 0000000000..af5d7b5535 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/source_mode/index.html @@ -0,0 +1,128 @@ +--- +title: Режим источника +slug: MDN/Editor/Source_mode +tags: + - Guide + - MDN Meta + - NeedsContent + - editor + - Редактор MDN + - Руководство +translation_of: MDN/Editor/Source_mode +--- +<div>{{MDNSidebar}}</div> + +<p class="summary"> В редакторе MDN есть особая кнопка, позволяющая вам включать режим источника. В этом режиме вы можете видеть HTML-код тела статьи, которую вы пишите. <span class="seoSummary">Это руководство поможет вам понять, что вы <strong>можете</strong> делать в режиме источника, что вам <strong>следует</strong> с ним делать и, самое важное, чего вам делать <strong>не следует</strong>.</span></p> + +<div class="blockIndicator warning"> +<p>Перед тем как использовать режим источника, примите во внимание, что мы <em>крайне</em> <strong>не</strong> рекомендуем использовать режим источника. За исключением случаев, когда то, что вы делаете в режиме источника, соответствует нашему руководству по оформлению кода (мы нуждаемся в опциях, которые, к сожалению, пока что не могут быть созданы без режима источника), вам нет необходимости в использовании этого режима. Смотрите {{anch("Предостережения")}} ниже.</p> +</div> + +<h2 id="Включение_режима_источника">Включение режима источника</h2> + +<p>Включить режим источника очень легко. В левом верхнем углу нажмите кнопку <strong>Источник</strong>.</p> + +<p><img alt="Partial screenshot of the editor toolbar, with the Source mode button highlighted" src="https://mdn.mozillademos.org/files/15295/Source%20mode%20button.png" style="height: 98px; width: 267px;"></p> + +<h2 id="Предостережения">Предостережения</h2> + +<p>Как упомянуто ранее, вам редко понадобится режим источника. Немного вы сможете сделать в этом режиме. Со временем мы обновим интерфейс редактора, чтобы настроить это <em>немного</em> для вас.</p> + +<p>Всего того, что неявно описано где-то в <a href="https://developer.mozilla.org/ru/docs/MDN/Contribute">руководстве по сотрудничеству с MDN</a>, <strong>не</strong> должно быть в источнике. Это значит, что:</p> + +<ul> + <li>Никаких пользовательских шрифтов и стилей</li> + <li>Никаких других цветов. Используйте только те цвета, которые являются частью нашего оформления, задаваемого нашими стилями</li> +</ul> + +<h2 id="Работа_в_режиме_источника">Работа в режиме источника</h2> + +<p>В режиме источника вы работаете с HTML-кодом, который составляет контент страницы вики. Если вы не ограничиваетесь обычным редактором, вы должны убедиться в том, что ваша работа соответствует <a href="https://developer.mozilla.org//en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">оформлению</a> и что она работает надёжно и безопасно.</p> + +<p>К сожалению, клавиша <kbd>Tab</kbd> пока что не работает в режиме источника. Используйте два пробела там, где обычно используете <kbd>Tab</kbd>.</p> + +<p>Элементы и атрибуты, которые MDN не поддерживает, будут удалены после сохранения документа. Вдобавок HTML документа преобразован, чтобы он был более читаемым и совместимым.</p> + +<h2 id="Использование_режима_источника">Использование режима источника</h2> + +<p>Здесь описано несколько случаев, когда единственный способ соответствовать оформлению статей MDN — использовать режим источника. Этот раздел описывает эти ситуации и как правильно выполнять данные функции, чтобы не испортить остальное.</p> + +<h3 id="Выделение_строк_в_примерах_кода">Выделение строк в примерах кода</h3> + +<p>Блоки примеров кода устанавливаются кнопками <strong>PRE</strong> или <strong>Syntax Highlighter</strong> в <a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Basics/Toolbar#%D0%91%D0%BB%D0%BE%D0%BA%D0%B8" rel="noopener">блоках панели инструментов</a>, но вы, возможно, захотите обратить внимание читателей на определённые строки кода. Единственный способ сделать это — открыть режим источника, найти там блок <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" rel="noopener" title="The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file."><code><pre></code></a>, содержащий код, и добавить в атрибут <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class" rel="noopener">class</a></code> тега <code><pre></code> компонент <code>highlight</code>, отформатированный следующим образом:</p> + +<ul> + <li><code>highlight[<em>НомерСтроки1</em>, <em>НомерСтроки2</em>, ..., <em>НомерСтрокиN</em>]</code></li> + <li><code>highlight[<em>НомерСтрокиНачальной</em>-<em>НомерСтрокиКонечной</em>, ..., <em>НомерСтрокиN</em>]</code></li> +</ul> + +<pre class="syntaxbox notranslate">"hightlight[" <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number-list"><список-номеров-строк></a> "]" + +<strong>Где:</strong> +<a id="highlight-line-number-list" name="highlight-line-number-list"><список-номеров-строк></a> = <a href="/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">[</a> <a href="#highlight-line-number"><номер-строки></a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#highlight-line-range"><диапазон-строк></a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark">#</a> +<a id="highlight-line-range" name="highlight-line-range"><диапазон-строк></a> = <a href="#highlight-line-number"><номер-строки></a> - <a href="#highlight-line-number"><номер-строки></a> +<a id="highlight-line-number" name="highlight-line-number"><номер-строки></a> = <число-токен></pre> + +<div class="blockIndicator note"> +<p>Выделенные строки не отображаются в редакторе MDN.</p> +</div> + +<p>К примеру, если есть тег <code><pre class="brush: js;"></code>, и вы хотите выделить строки 4 и 7, то вы меняете тег: <code><pre class="brush: js; highlight[4, 7]"></code>.</p> + +<p>Давайте взглянем на более полный пример:</p> + +<div style="overflow: auto;"> +<table class="fullwidth-table"> + <thead> + <tr> + <th scope="col">До выделения</th> + <th scope="col">С выделением</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js; notranslate"> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var path1 = new Path2D(); +path1.rect(10, 10, 100, 100); + +var path2 = new Path2D(path1); +path2.moveTo(220, 60); +path2.arc(170, 60, 50, 0, 2 * Math.PI); + +ctx.stroke(path2); +</pre> + + <p>Здесь тег {{HTMLElement("pre")}} равен: <code><pre class="brush: js;"></code></p> + </td> + <td> + <pre class="brush: js; highlight[4, 7] notranslate"> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var path1 = new Path2D(); +path1.rect(10, 10, 100, 100); + +var path2 = new Path2D(path1); +path2.moveTo(220, 60); +path2.arc(170, 60, 50, 0, 2 * Math.PI); + +ctx.stroke(path2);</pre> + + <p>А здесь тег <code><pre></code> изменён на: <code><pre class="brush: js; highlight[4, 7]"></code></p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Стили_которых_нет_в_панели_инструментов">Стили, которых нет в панели инструментов</h3> + +<p>У нас есть несколько стилей, которые нельзя применить, не используя режим источника. К счастью, их редко когда используют. Например:</p> + +<ul> + <li>Некоторые особые стили, применяемые на специальных страницах, необходимо добавлять с помощью кода, например, секции с группами. Вот почему у нас есть макросы для составления компонентов целевых страниц автоматически.</li> +</ul> diff --git a/files/ru/orphaned/mdn/editor/syntax_highlighting/index.html b/files/ru/orphaned/mdn/editor/syntax_highlighting/index.html new file mode 100644 index 0000000000..f959ae7809 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/syntax_highlighting/index.html @@ -0,0 +1,181 @@ +--- +title: Синтаксические выделения +slug: MDN/Editor/Синтаксические_выделения +tags: + - Guide + - Howto + - MDN + - MDN Meta + - Редактор + - Руководство + - выделение +translation_of: MDN/Editor/Syntax_highlighting +--- +<div>{{MDNSidebar}}</div> + +<p class="summary"><span class="seoSummary">Синтаксическое выделение кода крайне полезно в статьях. Режим синтаксичесого выделения также используется в нашей системе шаблонов, чтобы определять, как использовать каждый отрывок кода при сборке в готовый экземпляр.</span></p> + +<h2 id="Поддержка_синтаксических_выделений">Поддержка синтаксических выделений</h2> + +<p>MDN поддерживает все переодически используемые нами на MDN языки (так же, как и те, что используются лишь иногда):</p> + +<div class="threecolumns"> +<ul> + <li>Bash shell</li> + <li> + <p>C/C++</p> + </li> + <li> + <p>CSS</p> + </li> + <li>HTML</li> + <li>XML</li> + <li> + <p>Java</p> + </li> + <li> + <p>JavaScript</p> + </li> + <li> + <p>JSON</p> + </li> + <li> + <p>PHP</p> + </li> + <li> + <p>Python</p> + </li> + <li> + <p>SQL </p> + </li> +</ul> +</div> + +<p>Синтаксические выделения делают код удобнее в прочтении, особенно когда статья переполнена другими видами текста. Выделения также помогают выделить ошибки в примерах и отрывках кода.</p> + +<h2 id="Добавление_выделения">Добавление выделения</h2> + +<p>Как правило, следует выделять любой блок {{HTMLElement("pre")}}, который представляет код, состоящий из более чем одной строчки; выделение однострочного кода будет зависеть от контекста.</p> + +<p>Синтаксические выделения в примерах кода:</p> + +<ol> + <li> + <p>Наберите или вставьте код в статью. Например:</p> + + <p>void main(int argc, char **argv) {</p> + + <p>printf("Привет, мир!\n");</p> + + <p>}</p> + </li> + <li> + <p>Выделите текст и нажмите кнопку <strong>PRE</strong> в панели инструментов. Результат:</p> + + <pre class="notranslate">void main(int argc, char **argv) { + +printf("Hello world\n"); + +} +</pre> + </li> + <li> + <p class="brush: cpp">Нажмите кнопку <strong>Syntax Highlighter</strong> и выберите название соответстующего коду языка программирования. В нашем примере это C/C++:</p> + + <pre class="brush: cpp; notranslate">void main(int argc, char **argv) { + +printf("Hello world\n"); + +}</pre> + </li> +</ol> + +<p>Вы можете немного упростить процесс, не нажимая кнопку <strong>PRE</strong> и сразу выбрав нужный вам язык. Добавление выделения автоматически вставит необходимый блок {{HTMLElement("pre")}}, если он ещё не на месте.</p> + +<p>Далее представлен перевод раздела {{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Source_mode", "Выделение строк в режиме источника")}}:</p> + +<h3 id="Выделение_линий_в_примере">Выделение линий в примере</h3> + +<p>Блоки примеров кода устанавливаются кнопками <strong>PRE</strong> или <strong>Syntax Highlighter</strong> в <a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Basics/Toolbar#%D0%91%D0%BB%D0%BE%D0%BA%D0%B8">блоках панели инструментов</a>, но вы, возможно, захотите обратить внимание читателей на определённые строки кода. Единственный способ сделать это — открыть режим источника, найти там блок <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" title="The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file."><code><pre></code></a>, содержащий код, и добавить в атрибут <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class">class</a></code> тега <code><pre></code> компонент <code>highlight</code>, отформатированный следующим образом:</p> + +<ul> + <li> + <p><code>highlight[<em>НомерСтроки1</em>, <em>НомерСтроки2</em>, ..., <em>НомерСтрокиN</em>]</code></p> + </li> + <li> + <p><code>highlight[<em>НомерСтрокиНачальной</em>-<em>НомерСтрокиКонечной</em>, ..., <em>НомерСтрокиN</em>]</code></p> + </li> +</ul> + +<pre class="notranslate">"hightlight[" <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number-list"><список-номеров-строк></a> "]" + +<strong>Где:</strong> +<a id="highlight-line-number-list" name="highlight-line-number-list"><список-номеров-строк></a> = <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">[</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number"><номер-строки></a> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Single_bar">|</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-range"><диапазон-строк></a> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">]</a><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark">#</a> +<a id="highlight-line-range" name="highlight-line-range"><диапазон-строк></a> = <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number"><номер-строки></a> - <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number"><line-number></a> +<a id="highlight-line-number" name="highlight-line-number"><номер-строки></a> = <токен></pre> + +<p>К примеру, если есть тег <code><pre class="brush: js;"></code>, и вы хотите выделить строки 4 и 7, то вы меняете тег: <code><pre class="brush: js; highlight[4, 7]"></code>.</p> + +<p>Давайте взглянем на более полный пример:</p> + +<div style="overflow: auto;"> +<table class="fullwidth-table"> + <thead> + <tr> + <th scope="col">До выделения</th> + <th scope="col">С выделением</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js; notranslate"> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var path1 = new Path2D(); +path1.rect(10, 10, 100, 100); + +var path2 = new Path2D(path1); +path2.moveTo(220, 60); +path2.arc(170, 60, 50, 0, 2 * Math.PI); + +ctx.stroke(path2); +</pre> + + <p>Здесь тег {{HTMLElement("pre")}} равен: <code><pre class="brush: js;"></code></p> + </td> + <td> + <pre class="brush: js; highlight[4, 7] notranslate"> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var path1 = new Path2D(); +path1.rect(10, 10, 100, 100); + +var path2 = new Path2D(path1); +path2.moveTo(220, 60); +path2.arc(170, 60, 50, 0, 2 * Math.PI); + +ctx.stroke(path2);</pre> + + <p>А здесь тег <code><pre></code> был изменён на: <code><pre class="brush: js; highlight[4, 7]"></code></p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="blockIndicator note"> +<p>Выделенные строки не отображаются в редакторе MDN.</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/MDN/Contribute/Structures/Live_samples">Шаблоны</a></li> + <li><a href="/ru/docs/MDN/Contribute/Editor">Руководство по MDN редактору</a></li> + <li><a href="/ru/docs/MDN/Getting_started">Mozilla - Быстрый старт!</a></li> +</ul> + +<div>{{EditorGuideQuicklinks}}</div> diff --git a/files/ru/orphaned/mdn/editor/tables/index.html b/files/ru/orphaned/mdn/editor/tables/index.html new file mode 100644 index 0000000000..1f6f988d6a --- /dev/null +++ b/files/ru/orphaned/mdn/editor/tables/index.html @@ -0,0 +1,162 @@ +--- +title: Таблицы +slug: MDN/Editor/Tables +tags: + - Guide + - MDN + - MDN Meta + - Редактор + - Руководство +translation_of: MDN/Editor/Tables +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">Таблицы полезны для представления информации; в этой статье описано, как создавать и обслуживать таблицы на MDN и когда стоит и не стоит использовать их.</span></p> + +<p>В MDN, в основном, мы используем таблицы для представления перечня информации из более чем двух участков информации, приходящихся на один пункт. Если вы создаёте лист из названия элементов и их значений, то лучше создать список описаний вместо таблицы; это потому что мы стараемся по возможности реже использовать таблицы из двух колонок, так как возникают трудности их отображения при чтении на мобильных устройствах.</p> + +<p>Пожалуйста, прочтите <a href="https://developer.mozilla.org/ru/docs/Project:Writer's_guide">Руководство по оформлению материалов MDN</a>, чтобы лучше узнать об использовании таблиц и их правильном оформлении; всё же давайте посмотрим, как вставлять и редактировать таблицы.</p> + +<h2 id="Создание_таблицы">Создание таблицы</h2> + +<p>Чтобы вставить таблицу, нажмите кнопку <strong>Таблица</strong> на панели инструментов, которая выглядит так: <img alt="as of Aug-2017" src="https://mdn.mozillademos.org/files/15297/table%20icon.png" style="height: 14px; width: 15px;"></p> + +<p>Откроется окно <strong>Свойства таблицы</strong>:</p> + +<p><img alt='Скриншот окна "Свойства таблицы"' src="https://mdn.mozillademos.org/files/17047/Table_properties_dialog_box_-_ru.JPG" style="border-style: solid; border-width: 1px; height: 402px; width: 332px;"></p> + +<p>В окне две вкладки: <strong>Свойства таблицы</strong> и <strong>Дополнительно</strong>.</p> + +<h3 id="Вкладка_Свойства_таблицы">Вкладка <strong>Свойства таблицы</strong></h3> + +<p>В этой вкладке вы будете выполнять бо́льшую часть настроек, потому что во вкладке <strong>Дополнительно</strong> гораздо меньше настроек, которые мы рекомендуем использовать. Опции:</p> + +<dl> + <dt>Строки</dt> + <dd>Число строк в вашей таблице. Вы также можете добавить строки непосредственно в редакторе, но так будет быстрее.</dd> + <dt>Колонки</dt> + <dd>Число колонок в таблице.</dd> + <dt>Заголовки</dt> + <dd>Позволяет вам обозначить заголовки, если это необходимо. По умолчанию в таблице нет заголовков; однако мы предпочитаем использовать заголовки, поэтому советуем вам использовать их в большинстве случаев. Возможные значения: <strong>Без заголовков</strong>, <strong>Первая строка</strong>, <strong>Левая колонка</strong> и <strong>Сверху и слева</strong>.</dd> + <dt>Выравнивание</dt> + <dd>Позволяет выравнивать таблицу в левой, правой или центральной части страницы. <strong>Пожалуйста, не используйте эту опцию.</strong> В нашем руководстве по оформлению указано, что таблицы всегда должны нахадиться слева. (Из этого правила есть исключения.)</dd> + <dt>Заголовок</dt> + <dd>Вы можете выбрать заголовок к таблице; однако мы редко делаем это в MDN, поэтому лучше не использовать эту опцию.</dd> + <dt>Итоги</dt> + <dd>Просто пропустите этот пункт, потому что рядом с таблицей вам придётся писать объяснение.</dd> +</dl> + +<h3 id="Вкладка_Дополнительно">Вкладка <strong>Дополнительно</strong></h3> + +<p>Вкладка <strong>Дополнительно</strong> предоставляет несколько возможностей, большую часть которых мы не используем на MDN и в будущем уберём.</p> + +<p><img alt='Скриншот вкладки "Дополнительно"' src="https://mdn.mozillademos.org/files/17048/Table_proprties_Advanced_tab_-_ru.JPG" style="border-style: solid; border-width: 1px; height: 405px; width: 334px;"></p> + +<p>Как видите, тут немного опций:</p> + +<dl> + <dt>Идентификатор</dt> + <dd>Идентификатор (<code>id</code>) элемента {{HTMLElement("table")}}. Мы в принципе не используем идентификаторы в таблицах на MDN.</dd> + <dt>Направление текста</dt> + <dd>Позволяет настроить направление текста в таблице. Используется только при локализации контента.</dd> + <dt>Стиль</dt> + <dd>В этом поле вы можете применить собственный стиль CSS к таблице. <strong>Вообще не используйте это поле! В таком случае мы просто удалим вашу таблицу. </strong>Мы стараемся избавляться от пользовательских стилей там, где применяются наши.</dd> + <dt>CSS классы</dt> + <dd>Добавляет класс к стилю таблицы. Значение всегда должно быть <em>standard-table</em>, явдяющееся нашим стандартным классом для таблиц.</dd> +</dl> + +<p>Как только вы завершите настройку, нажмите кнопку <strong>OK</strong> для создания таблицы.</p> + +<h2 id="Обслуживание_таблиц">Обслуживание таблиц</h2> + +<p>Работа с таблицей очень похожа на работу в любом редакторе таблиц — надо просто заполнить ячейки. Клавиша <kbd>Tab</kbd> переместит вас на следующую ячейку таблицы или создаст новую строку, если следующей клетки нет.</p> + +<p><span style="">Кликните правой кнопкой мыши по таблице, чтобы появился ряд опций для регулировки самих ячеек, строчек и колонок таблицы, а ткаже самой таблицы:</span></p> + +<p><img alt="Скриншот контекстного меню" src="https://mdn.mozillademos.org/files/17049/Table_context_menu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 199px; width: 166px;"></p> + +<dl> + <dt>Вставить</dt> + <dd>В браузерах поддерживается вставка через скрипт (в некоторых браузерах, в том числе в Firefox, это не поддерживается из соображений безопасности). Эта опция вставляет содержимое буфера обмена в текущую ячейку таблицы.</dd> + <dt>Ячейка</dt> + <dd>Открывает подменю для работы с ячейками.</dd> + <dt>Строка</dt> + <dd>Открывает подменю для работы со строками.</dd> + <dt>Колонка</dt> + <dd>Открывает подменю для работы с колонками.</dd> + <dt>Удалить таблицу</dt> + <dd>Удаляет текущую таблицу.</dd> + <dt>Сортировка (Sort Table)</dt> + <dd>Открывает диалоговое окно для сортировки данных в таблице.</dd> + <dt>Свойства таблицы</dt> + <dd>Открывает то же окно для создания таблицы.</dd> +</dl> + +<h3 id="Подменю_Ячейка">Подменю <strong>Ячейка</strong></h3> + +<p>Подменю предоставляет опции для манипуляций с ячейками вашей таблицы, и оно выглядит так:</p> + +<p><img alt='Скриншот подменю "Ячейка" в контекстном меню' src="https://mdn.mozillademos.org/files/17050/Table_context_menu_-_cell_submenu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 252px; width: 378px;"></p> + +<p>Названия опций говорят сами за себя, но стоит оговориться, что <strong>Объединить ячейки</strong> доступно, только если вы выбрали несколько ячеек. Опции <strong>Объединить с правой</strong> и <strong>Объединить с нижней</strong> объединяют текущую ячейку с той, что находится справа или снизу соответственно.</p> + +<h3 id="Окно_Свойства_ячейки">Окно <strong>Свойства ячейки</strong></h3> + +<p>Опция <strong>Свойства ячейки</strong> открывает диалоговое окно для детальной настройки ячейки. Окно выглядит вот так:</p> + +<p><img alt='Скриншот окна "Свойства ячейки"' src="https://mdn.mozillademos.org/files/17051/Cell_Properties_dialog_box_-_ru.JPG" style="border-style: solid; border-width: 1px; height: 333px; width: 432px;"></p> + +<p>Опции:</p> + +<dl> + <dt>Ширина</dt> + <dd>Изменяет ширину клетки; вы можете выбрать единицу изменения в выпадающем меню рядом. <strong>Пожалуйста, не используете эту опцию.</strong> Вам не понадобится изменять ширину клетки, за исключением случаев, когда надо вставить изображение или пример кода в таблицу.</dd> + <dt>Высота</dt> + <dd>Устанавливает высоту клетки (всегда в пикселах). <strong>Пожалуйста, не используете эту опцию.</strong> Высота клетки определяется автоматически.</dd> + <dt>Перенос по словам</dt> + <dd>Определяет, будет переноситься содержимое ячейки или нет. Всегда должно быть установлено значение по умолчанию, <em>Да</em>.</dd> + <dt>Горизонтальное выравнивание</dt> + <dd>Позволяет устанавливать выравнивание текста по горизонтали. Следует всегда оставлять значение по умолчанию, <em>По левому краю</em>.</dd> + <dt>Вертикальное выравнивание</dt> + <dd>Позволяет устанавливать выравнивание текста по вертикали.</dd> + <dt>Тип ячейки</dt> + <dd>Позволяет вам определить, какой тип у ячейки — <em>Заголовок</em> или <em>Данные</em>. Если установлено значение <em>Заголовок</em>, то будет применена соответствующая стилизация.</dd> + <dt>Объединяет строк</dt> + <dd>Позволяет определить, сколько строк необходимо объединить. Используется редко, но в некоторых таблицах очень полезно.</dd> + <dt>Объединяет колонок</dt> + <dd>Определяет, сколько колонок необходимо объединить.</dd> + <dt>Цвет фона</dt> + <dd>Определяет цвет фона ячейки. Старайтесь не использовать эту фунцию; редкие случаи, когда смена цвета ячейки приемлема, прописаны в классах CSS.</dd> + <dt>Цвет границ</dt> + <dd>Определяет цвет границы ячейки. Старайтесь не использовать эту фунцию; редкие случаи, когда смена цвета границы ячейки приемлема, прописаны в классах CSS.</dd> +</dl> + +<h3 id="Подменю_Строка">Подменю <strong>Строка</strong></h3> + +<p>Подменю <strong>Строка</strong> предоставляет опции, используя которые вы можете корректировать строки:</p> + +<p><img alt='Скриншот подменю "Строка" в контекстном меню' src="https://mdn.mozillademos.org/files/17052/Table_context_menu_-_row_submenu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 181px; width: 326px;"></p> + +<p>Опции подменю по порядку:</p> + +<ul> + <li><strong>Вставить строку сверху</strong> добавляет новую строку перед той, в которой находится курсор</li> + <li><strong>Вставить строку снизу</strong> добавляет строку ниже текущей</li> + <li><strong>Удалить строки</strong> удаляет текущую строку или выделенные строки</li> +</ul> + +<h3 id="Подменю_Колонка">Подменю <strong>Колонка</strong></h3> + +<p>Подменю позволяет вам изменять колонки в вашей таблице:</p> + +<p><img alt='Скриншот подменю "Колонка" в контекстном меню' src="https://mdn.mozillademos.org/files/17053/Table_context_menu_-_column_submenu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 180px; width: 333px;"></p> + +<p>Опции похожи на опции подменю <strong>Строка</strong>:</p> + +<ul> + <li><strong>Вставить колонку слева</strong> вставляет новую колонку слева</li> + <li><strong>Вставить колонку справа</strong> вставляет новую колонку справа</li> + <li><strong>Удалить колонки</strong> удаляет текущую колонку или выделенные колонки</li> +</ul> + +<p>{{EditorGuideQuicklinks}}</p> |