%PDF- %PDF-
| Direktori : /proc/self/root/home/bitrix/www/bitrix/wizards/bitrix/demo/modules/learning/ru/course/ |
| Current File : //proc/self/root/home/bitrix/www/bitrix/wizards/bitrix/demo/modules/learning/ru/course/res61.xml |
<?xml version="1.0" encoding="UTF-8"?>
<content type="LES"><lesson_id>662</lesson_id>
<was_chapter_id></was_chapter_id>
<keywords></keywords>
<childs_cnt>0</childs_cnt>
<is_childs>0</is_childs>
<sort>100</sort>
<timestamp_x>1374677073</timestamp_x>
<date_create>1374677073</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/res61/UF9RI.HaCX8.format_panel.png" height="51" width="445" /></p>
<h4>Стили шаблонов сайта</h4>
<p>При переходе к редактированию страницы из административного раздела в списке шаблонов <img src="cid:resources/res61/S0F0p.TUFqw.templates_panel.png" border="0" height="26" width="173" /> будет выбран шаблон по умолчанию. Его таблица стилей (файл <b>styles.css</b>) будет подключена для использования для данной страницы. </p>
<p>Для каждого шаблона задается своя таблица стилей (файл <b>styles.css</b>). При смене шаблона в этом окне визуальный редактор подгрузит стили выбранного шаблона.</p>
<p>Для каждого из стилей шаблона может быть задано название. В визуальном редакторе описанные стили могут выводится как с названиями, так и без них в зависимости от настроек <b>Визуального редактора</b> в модуле <b>Управление структурой</b>. </p>
<div class="hint"><strong>Примечание:</strong> Все стили шаблона разделены на две таблицы стилей, хранящиеся в двух разных файлах. Один из них носит название <b>styles.css</b> и содержит стили для представления внутреннего содержания страниц на сайте. Во втором – с именем <b>template_styles.css</b> – описаны стили для представления шаблона дизайна. Эти стили отображаются при редактировании шаблона сайта с помощью визуального редактора. </div>
<br />
<div class="warning"> <strong>Внимание!</strong> Выпадающий список шаблонов <strong>не предназначен</strong> для подключения шаблона дизайна к текущей странице. Условия для использования шаблонов задаются в настройках сайта. Указанный выпадающий список используется только для переключения таблиц стилей и шаблонов визуальных компонентов при редактировании содержания страницы.
<p><img src="cid:resources/res61/vDsfQ.JepfO.templates.png" height="142" width="244" /></p>
</div>
<h4>Работа со стилями</h4>
<p>Для каждого шаблона задается своя таблица стилей (файл <b>styles.css</b>), которые можно использовать для оформления текста. В визуальном редакторе описанные стили могут выводится как с названиями, так и без них в зависимости от настроек модуля <b>Управление структурой</b>. </p>
<p><img src="cid:resources/res61/aoiO9.oqwDU.styles.png" height="241" width="227" /> </p>
<p>В выпадающем списке можно выбрать необходимый стиль для текста или другого элемента страницы. </p>
<p>Разработчики и администраторы сайтов, как люди технические, используют технически верные названия стилей на латинице. Такие названия стилей для контент-менеджеров могут быть не совсем удобны и понятны. Визуальный редактор допускает изменение названий стилей на кириллические. Если у вас недостаточно прав, обратитесь за помощью к администратору сайта.</p>
<p>Для изменения названий стилей:</p>
<ul>
<li>Откройте для редактирования используемый шаблон сайта.</li>
<li>Перейдите на вкладку <b>Стили сайта</b>.</li>
<li>В нижней части вкладки в области <b>Описания стилей</b> в поле <b>Имя стиля</b> введите действующее имя стиля. В поле <b>Название стиля</b> введите название стиля под которым вы хотите его видеть в визуальном редакторе.</li>
<li>Нажмите кнопку <b>Еще</b>. Откроется еще одна строка в этой области.</li>
<li>Повторите описанные выше действия для каждого из стилей, которые нуждаются в переименовании.
<p><img height="451" border="0" width="658" src="cid:resources/res61/lPD7c.oYzm7.styles_edit_11.png" /></p>
</li>
<li>Сохраните внесенные изменения.</li>
</ul>
<p>Теперь стили будут отображаться под выбранными вами названиями.</p>
<h4>Работа с заголовками</h4>
<p>В визуальном редакторе есть возможность управлять заголовками в тексте. Для этого существует выпадающий список, в котором можно выбрать нужное выделение заголовка: </p>
<p><img src="cid:resources/res61/hmj4O.nW0iI.headings.png" border="0" height="281" width="173" /></p>
<p>Значение <b>Normal</b> из списка выбрано по умолчанию, оно соответствует отсутствию заголовка.</p>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Таблица соответствий внешнего вида заголовка и его кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr><td bgcolor="#000000">
<table cellspacing="1" cellpadding="5" border="0">
<tbody>
<tr><td bgcolor="#ffffff">
<h1>Heading 1</h1>
</td><td bgcolor="#ffffff"><code><h1>Heading 1</h1></code></td></tr>
<tr><td bgcolor="#ffffff">
<h2>Heading 2</h2>
</td><td bgcolor="#ffffff"><code><h2>Heading 2</h2></code></td></tr>
<tr><td bgcolor="#ffffff">
<h3>Heading 3</h3>
</td><td bgcolor="#ffffff"><code><h3>Heading 3</h3></code></td></tr>
<tr><td bgcolor="#ffffff">
<h4>Heading 4</h4>
</td><td bgcolor="#ffffff"><code><h4>Heading 4</h4></code></td></tr>
<tr><td bgcolor="#ffffff">
<h5>Heading 5</h5>
</td><td bgcolor="#ffffff"><code><h5>Heading 5</h5></code></td></tr>
<tr><td bgcolor="#ffffff">
<h6>Heading 6</h6>
</td><td bgcolor="#ffffff"><code><h6>Heading 6</h6></code></td></tr>
<tr><td bgcolor="#ffffff">
<pre>Preformatted</pre>
</td><td bgcolor="#ffffff"><code><pre>Preformatted</pre></code></td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table></td></tr>
</tbody>
</table></div>
<h4>Шрифты</h4>
<p>В визуальном редакторе доступны следующие шрифты:</p>
<p><img src="cid:resources/res61/LjSW8.OopbI.fonts.png" border="0" height="185" width="170" /> </p>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание шрифта при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td>
<pre class="syntax"><font face="font_name"> TEXT </font></pre>
<p>где <b>font_name</b> заменяется на название выбранного шрифта из списка доступных: <b>Times New Roman</b>, <b>Courier</b>, <b>Arial</b>, <b>Tahoma</b>, <b>Verdana</b> или <b>Georgia</b>.</p></td></tr>
</tbody>
</table></div>
<p>Цвет фона текста задается по кнопке <img src="cid:resources/res61/CbR5Z.stYZP.bgcolor.gif" border="0" height="20" width="20" />.</p>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание цвета фона текста при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><p>Выполнение действия происходит с использованием стиля для тега <b><font></b>. Например, при редактировании в режиме кода при выделении фона текста желтым цветом код будет выглядеть так:</p>
<pre class="syntax"><font style="BACKGROUND-COLOR: #ffff00">ТЕКСТ</font><br /></pre></td></tr>
</tbody>
</table></div>
<p>Цвет самого текста задается по кнопке <img src="cid:resources/res61/vwQrc.Xf80v.fgcolor.gif" border="0" height="20" width="20" />.</p>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание цвета текста при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><p>Это действие выполняется помощью атрибута color тега <b><font></b>. Например, при редактировании в режиме кода при выделении текста желтым цветом код будет выглядеть так:</p>
<pre class="syntax"><font color="#3366ff">ТЕКСТ</font><br /></pre></td></tr>
</tbody>
</table></div>
<h4>Размер шрифта</h4>
<p>В редакторе могут быть использованы следующие размеры шрифтов:</p>
<p><img src="cid:resources/res61/FpggE.mOcDZ.fontsize.png" border="0" height="296" width="271" /> </p>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание размера шрифта при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><pre class="syntax"><font size="size_number">TEXT</font></pre>
<p>где size_number заменяется на размер шрифта от 1 до 7. Например, в визуальной части текст <font size="4">medium</font> соответствует коду: <code><font size="4">medium</font></code></p></td></tr>
</tbody>
</table></div>
<h4>Кнопки форматирования</h4>
<p>Рассмотрим, с помощью каких тегов реализуется различное написание текста.</p>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr><td bgcolor="#000000">
<table cellspacing="1" cellpadding="6" border="0">
<tbody>
<tr><td bgcolor="#ffffff" align="center" colspan="2"><b>Кнопка</b></td><td bgcolor="#ffffff" align="center"><b>Текст</b></td><td bgcolor="#ffffff" align="center"><b>Теги</b></td></tr>
<tr><td bgcolor="#ffffff" align="center" colspan="2"><img src="cid:resources/res61/5RF8i.V5EX7.bold.gif" border="0" height="22" width="23" /></td><td bgcolor="#ffffff"><strong>Жирный</strong></td><td bgcolor="#ffffff"><code><strong>Жирный</strong></code></td></tr>
<tr><td bgcolor="#ffffff" align="center" colspan="2"><img src="cid:resources/res61/a9TAq.ejksB.italic.gif" border="0" height="20" width="20" /></td><td bgcolor="#ffffff"><em>Курсив</em></td><td bgcolor="#ffffff"><code><em>Курсив</em></code></td></tr>
<tr><td bgcolor="#ffffff" align="center" colspan="2"><img src="cid:resources/res61/ZxxsG.qMwpy.under.gif" border="0" height="20" width="20" /></td><td bgcolor="#ffffff"><u>Подчеркнутый</u></td><td bgcolor="#ffffff"><code><u>Подчеркнутый</u></code></td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
<p>Кнопка <img src="cid:resources/res61/tgb1F.80KLJ.removeformat.gif" border="0" height="20" width="20" /> удаляет текстовое форматирование, т.е. удаляет тег <b><font></b> со всеми его атрибутами, отменяет выделение жирным, курсивом, подчеркивание.</p>
<p>Кнопка <img src="cid:resources/res61/2w92W.wXT9z.hr.gif" border="0" height="20" width="20" /> позволяет вставить горизонтальный разделитель. В коде это действие выполняется с помощью тега <b><hr></b></p>
<p>Кнопка <img src="cid:resources/res61/bcLXs.G8JYg.optimize_html.png" border="0" height="22" width="22" /> <b>Оптимизировать HTML-код</b> убирает пустые HTML-теги.
<br />
Список убираемых пустых тегов: <b>b</b>, <b>em</b>, <b>font</b>, <b>h1</b>, <b>h2</b>, <b>h3</b>, <b>i</b>, <b>li</b>, <b>ol</b>, <b>p</b>, <b>small</b>, <b>span</b>, <b>strong</b>, <b>u</b>, <b>ul</b> и т.д.
</p>
<h4>Выравнивание текста</h4>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr><td bgcolor="#000000">
<table cellspacing="1" cellpadding="6" border="0">
<tbody>
<tr><td bgcolor="#ffffff" align="center"><b>Кнопка</b></td><td bgcolor="#ffffff" align="center"><b>Текст</b></td><td bgcolor="#ffffff" align="center"><b>Теги</b></td></tr>
<tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res61/nmu8k.gwa1e.left.gif" border="0" height="20" width="20" /></td><td bgcolor="#ffffff">
<p align="left">По левому краю</p>
</td><td bgcolor="#ffffff"><code><p align="left">По левому краю</p></code></td></tr>
<tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res61/Z2oet.fztdD.right.gif" border="0" height="20" width="20" /></td><td bgcolor="#ffffff">
<p align="right">По правому краю</p>
</td><td bgcolor="#ffffff"><code><p align="right">По правому краю</p></code></td></tr>
<tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res61/h7wgR.xaO1g.center.gif" border="0" height="20" width="20" /></td><td bgcolor="#ffffff">
<p align="center">По центру</p>
</td><td bgcolor="#ffffff"><code><p align="center">По центру</p></code></td></tr>
<tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res61/GvlqE.5gKA9.justify.gif" border="0" height="20" width="20" /></td><td bgcolor="#ffffff">
<p align="justify">Выравниваем по ширине</p>
</td><td bgcolor="#ffffff"><code><p align="justify">Выравниваем по ширине</p></code></td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
<h4>Списки элементов</h4>
<p>В визуальном редакторе есть возможность создать два вида списков: нумерованный и маркированный. Первый вариант создается с помощью кнопки <img src="cid:resources/res61/PrrTW.5hNR6.numlist.gif" border="0" height="22" width="23" /> и выглядит так:</p>
<ol>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ol>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Нумерованный список при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><pre class="syntax"><ol><br /> <li>первый </li><br /> <li>второй </li><br /> <li>третий </li><br /></ol><br /></pre></td></tr>
</tbody>
</table></div>
<p>Второй вид, маркированный список, создается с помощью кнопки <img src="cid:resources/res61/XPfjd.BwXhx.bullist.gif" border="0" height="20" width="20" /> и выглядит так:</p>
<ul>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ul>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Маркированный список при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td>
<pre class="syntax"><ul><br /> <li>первый </li><br /> <li>второй </li><br /> <li>третий </li><br /></ul><br /></pre></td></tr>
</tbody>
</table></div>
<h4>Сдвиг текста</h4>
<p>В редакторе есть возможность увеличить отступ от края с помощью кнопки <img src="cid:resources/res61/hN0LP.jXSdx.inindent.gif" border="0" height="22" width="23" />, а затем его можно уменьшить с помощью кнопки <img src="cid:resources/res61/VQgsv.RR1uN.deindent.gif" border="0" height="22" width="23" />. </p>
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Сдвиг текста вправо при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><pre class="syntax"><blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><br /> <p>ТЕКСТ</p><br /></blockquote><br /></pre></td></tr>
</tbody>
</table></div>
<p>Кнопка <img src="cid:resources/res61/lRDYN.N5Twr.deindent.gif" border="0" height="22" width="23" /> сдвигает текст влево и убирает из кода тег <code><blockquote></code></p>
<div class="hint"><b>Примечание</b>: в визуальном редакторе в области <b>Свойства</b> есть возможность просматривать и редактировать свойства того объекта, на котором установлен курсор мыши в данный момент. Для разных объектов набор свойств не одинаков. Например, для текста в панели <b>Свойства</b> представлены такие параметры:
<p><img src="cid:resources/res61/wLAKa.4VniX.text_props.png" border="0" height="135" width="584" alt="Свойства текста" /></p>
<br />
Если выделено изображение, то:
<br />
<p><img src="cid:resources/res61/FaufN.1t4e8.img_props.png" border="0" height="148" width="596" alt="Свойства изображения" /></p>
<br />
А если выделить ссылку в рабочей области, то в <b>Свойствах</b> отобразится следующее:
<br />
<p><img src="cid:resources/res61/FmbwM.gEe0S.link_props.png" border="0" height="140" width="595" alt="Свойства ссылки" /></p>
</div>
<p> Ниже вы можете познакомиться с видео-роликами, наглядно показывающим различные средства форматирования текста.</p>
<p>1. (3 минуты 24 секунды, 15.45 Мб.) </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_109821" 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/6-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res61/WCEFo.8JYTu.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_109821" menu="true" wmode="transparent" width="800" height="620" flashvars="file=/download/files/video/learning/teachvideo/6-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object>
<p><a href="/download/files/video/learning/teachvideo/6-1.flv" >Загрузить</a> ролик.</p>
<br />
<p>2. (3 минуты 14 секунд, 9.78 Мб.) </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_33986" 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/6-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res61/Ti0Zk.S7Rbc.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_33986" menu="true" wmode="transparent" width="800" height="620" flashvars="file=/download/files/video/learning/teachvideo/6-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object>
<p><a href="/download/files/video/learning/teachvideo/6-2.flv" >Загрузить</a> ролик.</p>
]]></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>662</id>
</content>