%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>