%PDF-
%PDF-
Mini Shell
Mini Shell
<?xml version="1.0" encoding="UTF-8"?>
<content type="CHA"><lesson_id>656</lesson_id>
<was_chapter_id></was_chapter_id>
<keywords></keywords>
<childs_cnt>1</childs_cnt>
<is_childs>1</is_childs>
<sort>100</sort>
<timestamp_x>1374677072</timestamp_x>
<date_create>1374677072</date_create>
<created_user_name>(admin) Иван Иванов</created_user_name>
<created_by>1</created_by>
<active>Y</active>
<name>Внешний вид редактора</name>
<preview_picture></preview_picture>
<preview_text></preview_text>
<preview_text_type>text</preview_text_type>
<detail_text><![CDATA[<style>
div.warning, div.note {
font-family: Verdana, Arial;
font-size: 12px;
background:#f9fafe url('/bitrix/templates/learning/icons/imp.gif') no-repeat 0.5em 1em;
padding:1em 1em 1em 2em;
border: 1px solid #BCCCDC;
}
div.note {
background-image: url('/bitrix/templates/learning/icons/prim.gif');
}
span.path {
color:#4682B4;
font-style: italic;
}
span.link {
color:#03C;
}
code
{
font-family: Courier New, Verdana, Arial;
font-size: 13px;
font-weight: bold;
background-color:#eee;
padding:0 0.2em 0 0.2em;
}
table.learning-spoiler{
border: 1px solid #dddddd;
table-layout:fixed;
padding: 3px;
width: 100%;
background-color: #eeeeee
}
table.learning-spoiler td{
color: black;
}
table.learning-spoiler th {
font-size:12;
font-weight:bold;
text-align:left;
color: black;
}
</style>
<p>Рассмотрим внешний вид редактора и его панели подробнее. Визуальный редактор, открываемый из Публичной части и из Административного раздела несколько различается по функционалу. Будем описывать окно редактора в Административном разделе, т.к. в нем доступен несколько более широкий набор кнопок и возможностей, чем в Публичной части.</p>
<p><img src="cid:resources/res55/BrG7y.zGhdk.visual_editor_admin.png" border="0" width="776" height="577" /></p>
<h3>Панель инструментов</h3>
<p>Общая панель инструментов визуального редактора состоит из нескольких меньших панелей, в каждой из которых объединены кнопки по своему назначению. Детальное описание панелей приводится на страницах с описанием конкретных видов работ.</p>
<ul>
<li>Стандартные
<p><img src="cid:resources/res55/xCUBu.3Ej6R.standard_panel.png" border="0" width="513" height="26" /></p>
</li>
<li>Шаблон сайта
<p><img src="cid:resources/res55/iKTqs.WDMz3.template_panel.png" border="0" width="173" height="26" /></p>
</li>
<li>Управление и настройки
<p><img src="cid:resources/res55/v5ATl.Tu3WD.manage_panel.png" border="0" width="267" height="26" /></p>
</li>
<li>Стиль
<p><img src="cid:resources/res55/m5Jw0.qTxxW.style_panel.png" border="0" width="372" height="26" /></p>
</li>
<li>Форматирование
<br />
<br />
<img src="cid:resources/res55/NaWO3.CB3K0.format_panel.png" border="0" width="268" height="26" /> </li>
</ul>
<p>В административном разделе на каждой из этих панелек имеются специальные области для перемещения панели в любое место окна редактора.</p>
<p><img src="cid:resources/res55/jMD0J.pzVlF.move_panel_area.png" border="0" width="173" height="25" /></p>
<p>При наведении курсора на выделенную область курсор меняет внешний вид. </p>
<p><img src="cid:resources/res55/xstnN.0zj0b.move_panel.png" border="0" width="178" height="25" /> </p>
<p>Теперь вы можете перетаскивать панель в любую область редактора. После переноса вы можете ее закрыть, нажав на кнопку <b>Х</b> в правом верхнем углу панели.</p>
<p><img src="cid:resources/res55/TTnDq.3E99f.template_panel_2.png" height="38" width="174" /></p>
<p>Восстановить отображение панели можно с помощью кнопки <img src="cid:resources/res55/jOtPs.YML23.settings_button.png" border="0" height="22" width="22" /> <strong>Настройки</strong>.</p>
<div class="hint"><b>Примечание:</b> Подробнее о настройке внешнего вида смотрите в уроке <a href="https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=34&LESSON_ID=1834" >Настройка внешнего вида редактора</a>.</div>
<br>
<div class="warning"><b>Внимание!</b> Состав и набор кнопок на панели инструментов может отличаться, в зависимости от режима работы редактора и настроек администратора.</div>
<h3 class="hint">Панель задач</h3>
<p>Панель задач может состоять из нескольких закладок: <b>Компоненты</b> и <b>Сниппеты</b>. </p>
<p><img src="cid:resources/res55/Vk1wj.JJpwg.comp_tabs.png" height="46" width="206" /></p>
<div class="hint"><b>Примечание:</b> В версии продукта до 9.5 присутствует закладка <b>Компоненты 1.0</b>. Она позволяет добавлять на страницу компоненты 1.0, которые устарели и не рекомендуются к использованию.
<p><img src="cid:resources/res55/8mIie.S5kq8.comp_1.0_tab.png" height="36" width="270" /></p>
</div>
<a name="cache_update"></a><p>Отображать и скрывать панели <b>Компоненты</b> и <b>Сниппеты</b> можно с помощью соответствующих кнопок панели <b><font size="4" color="#00c0ff">6</font></b>. Доступны следующие действия управления панелью задач:</p>
<p><img src="cid:resources/res55/xgdV6.4lb7r.task_actions.png" height="132" width="274" /></p>
<ul>
<li>По кнопке <strong>Свернуть</strong> можно временно скрыть панель. Вернуть ее можно, используя кнопки панели <strong><font size="4" color="#00c0ff">6</font></strong>. </li>
<li>Кнопка <strong>Обновить закешированные данные</strong> позволяет сбросить кеш, например, если были добавлены собственные компоненты. </li>
<li>Кнопка <strong>Настроить</strong> вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке <img src="cid:resources/res55/h8vDb.LTGCK.settings_button.png" border="0" height="22" width="22" /> <strong>Настройки</strong> панели инструментов. </li>
<li>Кнопка <strong>Закрыть</strong> закрывает отображаемую панель. Восстановить ее отображение можно с помощью формы настройки редактора (кнопка <img src="cid:resources/res55/3vMWv.nKjsL.settings_button.png" border="0" height="22" width="22" />). </li>
</ul>
<p> Ниже вы можете познакомиться с видео-роликом, в котором подробно рассматриваются внешний вид редактора и его панели. (2 минуты 17 секунд, 7.86 Мб.)
<br />
</p>
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="bxid_960795" width="800" height="620" ><param name="movie" value="/bitrix/components/bitrix/player/mediaplayer/player"><param name="menu" value="true"><param name="wmode" value="transparent"><param name="width" value="800"><param name="height" value="620"><param name="flashvars" value="file=/download/files/video/learning/teachvideo/5-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res55/Tp2wu.1lgqr.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_960795" menu="true" wmode="transparent" width="800" height="620" flashvars="file=/download/files/video/learning/teachvideo/5-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object></p>
<p><a href="/download/files/video/learning/teachvideo/5-1.flv" >Загрузить</a> ролик.</p>
<h3>Панель переключения режимов редактирования</h3>
<p>Панель переключения режимов редактирования состоит из следующих кнопок: </p>
<p><img src="cid:resources/res55/I6Mxq.pHyGx.regimes.png" border="0" height="101" width="24" /> </p>
<p>Кнопка <img src="cid:resources/res55/q5Gyf.dLxfa.textrej.gif" border="0" /> служит для перехода от визуального режима к работе с исходным кодом. В режиме работы с исходным кодом не все кнопки панели редактирования доступны. Можно работать только с панелью <strong>Управление и настройки</strong> <img src="cid:resources/res55/OQwTS.3QtLs.manage_panel.png" border="0" height="26" width="267" />, а также доступными остаются кнопки <img src="cid:resources/res55/0vXdP.iB15I.fs.png" height="13" width="15" /> и <img src="cid:resources/res55/M2bO7.7zCf1.settings_button.png" border="0" height="22" width="22" />. Остальные кнопки панели редактирования заблокированы. </p>
<p>Кнопка <img src="cid:resources/res55/vampW.bKAjr.wysiwyg.gif" border="0" /> служит для перехода обратно к режиму визуального редактирования.</p>
<p>Кнопка <img src="cid:resources/res55/Pg6OF.4lrmB.split.gif" border="0" /> служит для перехода в совмещенный режим редактирования, при котором можно работать одновременно и с визуальной частью, и с исходным кодом: </p>
<p><img src="cid:resources/res55/QRfFJ.4tmDJ.combined_mode.png" border="0" height="353" width="551" /></p>
<p>При работе с исходным кодом и в совмещенном режиме редактирования становится доступной кнопка <img src="cid:resources/res55/54Vq0.b69wg.wrap.gif" border="0" />, которая служит для переноса не поместившейся на текущей строке части кода на следующие строки. Заметим, что эта кнопка присутствует и работает только в браузере <strong>Internet Explorer</strong>.</p>
<div class="warning"><b>Внимание!</b> Режим работы с исходным кодом рекомендуется использовать только подготовленным пользователям.</div>
<h3>Панель отображения свойств объектов (Свойства)</h3>
<p>В области <b>Свойства</b> отображаются свойства того объекта, на котором установлен курсор мыши в данный момент. Это может быть визуальный компонент, тогда в области <b>Свойства</b> можно будет настроить параметры этого компонента. Панель <b>Свойства</b> также является скрывающейся, что регулируется кнопкой панели <b><font size="4" color="#00c0ff">6</font></b>. Доступны следующие действия управления панелью <strong>Свойства</strong>:</p>
<p><img src="cid:resources/res55/d9tpe.yDWm4.properties_actions.png" height="91" width="136" /></p>
<ul>
<li>По кнопке <strong>Свернуть</strong> можно временно скрыть панель. Вернуть ее можно, используя кнопки панели <strong><font size="4" color="#00c0ff">6</font></strong>. </li>
<li>Кнопка <strong>Настроить</strong> вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке <img src="cid:resources/res55/yge2O.MVScv.settings_button.png" border="0" height="22" width="22" /> <strong>Настройки</strong> панели инструментов. </li>
</ul>
<p> Ниже вы можете познакомиться с видео-роликом, в котором подробно рассматриваются внешний вид редактора и его панели. (2 минуты 17 секунд, 7.86 Мб.)
<br />
</p>
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="bxid_804887" width="800" height="620" ><param name="movie" value="/bitrix/components/bitrix/player/mediaplayer/player"><param name="menu" value="true"><param name="wmode" value="transparent"><param name="width" value="800"><param name="height" value="620"><param name="flashvars" value="file=/download/files/video/learning/teachvideo/5-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res55/bXEJl.3vcIj.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_804887" menu="true" wmode="transparent" width="800" height="620" flashvars="file=/download/files/video/learning/teachvideo/5-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object></p>
<p><a href="/download/files/video/learning/teachvideo/5-2.flv" >Загрузить</a> ролик.</p>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Кнопки панели инструментов визуального HTML-редактора</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><table cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="white"> <td bgcolor="#8c8c8c">
<table cellpadding="5" cellspacing="1">
<tbody>
<tr><td bgcolor="white" width="20%">Кнопка</td> <td bgcolor="white"width="80%">Описание</td> </tr>
<tr><td bgcolor="silver" colspan="2">Стандартные</td></tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/NCRBH.zUO6Z.fullscreen_button.png" height="20" width="20"></td> <td>Переключение в полноэкранный режим.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/2Pv6k.TvOfk.settings_button.png" height="20" width="20"></td> <td>Изменение настроек визуального редактора.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/Q2ck0.XKwx6.word_button.png" height="20" width="20"></td> <td>Вставить из Word. Позволяет очистить добавляемый текст от дополнительных элементов форматирования (например, стилей).</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/3YC7u.Ph4g6.word_txt_button.png" height="20" width="20"></td> <td>Вставить фрагмент как текст.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/vtcpj.slQQY.select_all_button.png" height="20" width="20"></td> <td>Выделить все на странице.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/9vbeP.2HNzR.undo_button.png" height="20" width="20"></td> <td>Отменить выполненное действие.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/2Zqmb.0A9ZQ.redo_button.png" height="20" width="20"></td> <td>Вернуть отменённое действие.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/nIOnO.gITth.borders_button.png" height="20" width="20"></td> <td>Отобразить или скрыть границы таблиц.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/cOYyG.P0clz.instable_button.png" height="20" width="20"></td> <td>Создать таблицу.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/E2pQK.DLYW0.anchor_button.png" height="20" width="20"></td> <td>Добавить якорь.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/82A5e.Hz9M4.link_button.png" height="20" width="20"></td> <td>Вставить гиперссылку.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/qn4fS.0VTKk.delete_link_button.png" height="20" width="20"></td> <td>Удалить гиперссылку.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/3pBZF.2QbxX.image_button.png" height="20" width="20"></td> <td>Добавить изображение.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/y20wt.Nbirv.symbol_button.png" height="20" width="20"></td> <td>Вставить специальный символ.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/GIEg9.m5Y6s.page_break_button.png" height="20" width="20"></td> <td>Вставить разрыв страницы для печати.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/EJY0L.TG8A2.break_button.png" height="20" width="20"></td> <td>Вставить разделитель страниц <i><BREAK/></i>.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/wcips.PhJt6.flash_button.png" height="20" width="20"></td> <td>Вставить Flash-ролик.</td> </tr>
<tr><td bgcolor="silver" colspan="2">Стиль</td></tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/s1sLZ.lbvbV.style_button_1.png" height="20" width="77"></td> <td>Уровень (формат) текста. Например, <b>Normal</b>, <b>Heading1</b>, <b>Heading2</b>, ... .</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/2jI6n.qAz6G.style_button_2.png" height="20" width="77"></td> <td>Шрифт.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/p7jeu.pQbME.style_button_3.png" height="20" width="77"></td> <td>Размер шрифта.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/JKeGj.9ZAyN.style_button_4.png" height="20" width="20"></td> <td>Полужирный.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/IK1U7.gbPsf.style_button_5.png" height="20" width="20"></td> <td>Курсив.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/i2DD1.nBEfl.style_button_6.png" height="20" width="20"></td> <td>Подчёркнутый.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/SqHlv.Qz8pL.style_button_7.png" height="20" width="20"></td> <td>Удалить форматирование.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/8nN0g.H821v.style_button_8.png" height="20" width="20"></td> <td>Оптимизировать HTML-код.</td> </tr>
<tr><td bgcolor="silver" colspan="2">Форматирование</td></tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/BRMe8.Wg35a.format_button_1.png" height="20" width="20"></td> <td>Добавить горизонтальный разделитель.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/ClPQR.dp4K9.format_button_2.png" height="20" width="20"></td> <td>Выравнивание абзаца по левому краю.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/swCCL.Wt0vj.format_button_3.png" height="20" width="20"></td> <td>Выравнивание абзаца по центру.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/12Le6.fmvFm.format_button_4.png" height="20" width="20"></td> <td>Выравнивание абзаца по правому краю.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/wuXcy.6L64f.format_button_5.png" height="20" width="20"></td> <td>Выравнивание абзаца по ширине.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/2do1d.KrtUt.format_button_6.png" height="20" width="20"></td> <td>Нумерованный список.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/MQr3M.PzRqq.format_button_7.png" height="20" width="20"></td> <td>Маркированный список.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/29PJy.BLfch.format_button_8.png" height="20" width="20"></td> <td>Уменьшить отступ.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/7r9cG.mIwi8.format_button_9.png" height="20" width="20"></td> <td>Увеличить отступ.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/P6ouC.v9fN4.format_button_10.png" height="20" width="20"></td> <td>Цвет фона.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/21AWX.YLV0j.format_button_11.png" height="20" width="20"></td> <td>Цвет текста.</td> </tr>
<tr><td bgcolor="silver" colspan="2">Режимы редактирования</td></tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/z3nGM.u5sYr.edit_mode_1.png" height="20" width="20"></td> <td>Переключение в режим визуального редактирования.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/9ECkh.0SYIK.edit_mode_2.png" height="20" width="20"></td> <td>Переключение в режим редактирования исходного кода страницы.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/JSmdL.3kEIk.edit_mode_3.png" height="20" width="20"></td> <td>Переключение в совмещённый режим редактирования.</td> </tr>
<tr><td bgcolor="silver" colspan="2">Шаблон сайта</td></tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/RAQhR.sPV3W.template_button.png" height="20" width="152"></td> <td>Шаблон сайта.</td> </tr>
<tr><td bgcolor="silver" colspan="2">Управление и настройки</td></tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/G6rUt.ua3UA.manage_button_1.png" height="20" width="137"></td> <td>Сохранение изменений и выход из визуального редактора.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/ZtRRQ.fDqor.manage_button_2.png" height="20" width="20"></td> <td>Выход из редактора без сохранения.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/YAyym.2QEl0.manage_button_3.png" height="20" width="20"></td> <td>Создание новой страницы.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/52tJI.cqoYF.manage_button_4.png" height="20" width="20"></td> <td>Сохранить и продолжить редактирование.</td> </tr>
<tr bgcolor="white"> <td><img src="cid:resources/res55/m7ogy.1cWFj.manage_button_5.png" height="20" width="20"></td> <td>Сохранить под другим именем.</td> </tr>
<tr bgcolor="#eeeeee"> <td><img src="cid:resources/res55/wVg1y.cj9s2.manage_button_6.png" height="20" width="20"></td> <td>Переход к редактированию параметров страницы.</td> </tr>
</tbody>
</table>
</td></tr>
</tbody>
</table></td></tr>
</tbody>
</table></div>
]]></detail_text>
<detail_picture></detail_picture>
<detail_text_type>html</detail_text_type>
<launch></launch>
<code></code>
<active_from></active_from>
<active_to></active_to>
<rating></rating>
<rating_type></rating_type>
<scorm></scorm>
<linked_lesson_id></linked_lesson_id>
<course_id></course_id>
<course_sort></course_sort>
<edge_sort>100</edge_sort>
<id>656</id>
</content>
Zerion Mini Shell 1.0