initial commit

1 files changed, 96 insertions, 0 deletions

diff --git a/files/ru/tools/page_inspector/ui_tour/index.html b/files/ru/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..467b4a8edc
--- /dev/null
+++ b/files/ru/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,96 @@
+---
+title: Обзор интерфейса
+slug: Tools/Page_Inspector/UI_Tour
+tags:
+  - Guide
+  - Инспектор
+  - инструменты
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.</p>
+
+<p>Она охватывает три основных компонента интерфейса Инспектора:</p>
+
+<ul>
+ <li>кнопка выбора элемента</li>
+ <li>панель HTML</li>
+ <li>панель CSS</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10029/inspector-ui.png" style="display: block; margin-left: auto; margin-right: auto; width: 918px;">Это руководство нарочно как можно более короткое.  В нём ссылки на другие руководства, с подробностями об использовании Инспектора.</p>
+
+<h2 id="Select_element_button" name="Select_element_button">Кнопка выбора элемента</h2>
+
+<p>Инспектор даёт вам подробную информацию о выбранном сейчас элементе.  Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10031/select-button.png" style="display: block; height: 640px; margin-left: auto; margin-right: auto; width: 1674px;"></p>
+
+<p>Заметьте: она на <a href="/ru/docs/Tools/Tools_Toolbox#Панель инструментов">главной панели инструментов веб-разработчика</a>, так что быстро доступна из любого инструмента, не только Инспектора.</p>
+
+<p>Чтобы научиться выбирать элемент, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Vybor_elementa">выбору элемента</a>.</p>
+
+<h2 id="HTML_pane" name="HTML_pane">Панель HTML</h2>
+
+<p>Инспектор разделён на две половины.  Левую половину занимает панель HTML:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10033/html-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>Чтобы узнать больше о структуре панели HTML, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">исследованию и редактированию</a>.</p>
+
+<h2 id="CSS_pane" name="CSS_pane">Панель CSS</h2>
+
+<p>Правую сторону Инспектора занимает панель CSS:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10035/css-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;">Панель CSS имеет 5 режимов для просмотра различных данных:</p>
+
+<ul>
+ <li>Правила</li>
+ <li>Вычислено</li>
+ <li>Шрифты</li>
+ <li>Блоковая модель</li>
+ <li>Анимации</li>
+</ul>
+
+<p>Переключаться между этими режимами можно с помощью вкладок наверху панели.</p>
+
+<h3 id="Rules_view" name="Rules_view">Просмотр правил</h3>
+
+<p>Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:</p>
+
+<p><img alt="Вкладка Правила Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10555/css-rules-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p>
+
+<h3 id="Computed_view" name="Computed_view">Просмотр вычисленного</h3>
+
+<p>Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.</p>
+
+<p><img alt="Вкладка Вычислено Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10553/css-computed-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p>
+
+<h3 id="Fonts_view" name="Fonts_view">Просмотр шрифтов</h3>
+
+<p>Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1158634">которые до Firefox 36 можно было редактировать</a>).</p>
+
+<p><img alt="Вкладка Шрифты Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10549/css-fonts-ru-20150426-2.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/View_fonts">Просмотр шрифтов</a>.</p>
+
+<h3 id="Box_Model_view" name="Box_Model_view">Вкладка «Блоковая модель»</h3>
+
+<p>Вкладка "Блоковая модель" отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.</p>
+
+<p><img alt="Вкладка Блоковая модель Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10551/css-box-model-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>.</p>
+
+<h3 id="Animations_view" name="Animations_view">Вкладка «Анимации»</h3>
+
+<p>Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10009/css-animations.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a>.</p>