Главная » MODx- профессиональный инструмент для разработки сайтов » Работа с визуальным редактором
    РейтингРейтингРейтингРейтингРейтинг

Работа с визуальным редактором

Страницы любого сайта закодированы на специальном компьютерном языке HTML. Для того, что бы пользователю системы управления не приходилось его изучать, в ней используется особый визуальный редактор (TinyMCE), который выступает посредником между пользователем и сайтом – он позволяет пользователю ввести текст, почти как в редакторе Microsoft Word, а затем автоматически (незаметно для пользователя) переводит введенный текст на язык HTML для размещения документа на сайте.

Cоздание содержимого документа во много напоминает создание текста в Microsoft Word. На панели инструментов присутствуют знакомые иконки (выравнивание абзаца по центру, левому или правому краю, ширине; стиль шрифта – жирный, наклонный, подчеркнутый; размер и семейство шрифта; маркированные и немаркированные списки; стиль абзаца: собственно абзац [нормальный размер], заголовок [увеличенный размер] и т.п.).

Рассмотрим наиболее распространенные операции в визуальном редакторе.

Размера текста. Есть два способа, как увеличить или уменьшить текст. Первый способ – применить к тексту стиль “Заголовок” или же стиль “Абзац”, что бы сделать текст нормального размера:

Работа с визуальным редактором

Затем выбираем размер в соответствующем выпадающем списке:

Работа с визуальным редактором

Выбор цвета текста. Предварительно выделяем нужный текст, затем раскрываем иконку-список выбора цветов и кликаем по нужному цвету.

Также можно выбирать подчеркивание цвета фона текста.

Вставка картинки. Каждая картинка должна быть размещена в конкретном абзаце. Более того, на один абзац должна приходиться только одна картинка. Она размещается слева или справа от текста и как бы обтекается им.

Вставка картинки начинается с выбора абзаца, которым она будет обтекаться. Устанавливаем курсор в этот абзац. Далее, нажимаем иконку и попадаем в диалоговое окно “Вставка картинки”:

Работа с визуальным редактором

Это окно состоит из трех вкладок. На вкладке “Общее” мы должны задать адрес картинки (остальные поля можете заполнять или не заполнять по своему усмотрению). Для выбора адреса картинки, нажимаем по иконке справа от поля ”Адрес”.

Работа с визуальным редактором

Нажимаем кнопку “ОТКРЫТЬ”, после чего картинка загрузится и появится во внутренней галерее. По ней можно будет кликнуть, что бы ее выбрать. (При загрузке картинок на сайт действуют определенные ограничения на размер загружаемого фото  3-5 мегабайт).

Далее переключаемся на вкладку “Положение”, что бы задать размер нашей картинки и ее местоположение относительно текста.

Указываем размер фотографии: убеждаемся, что стоит галочка “Сохранить пропорции”, указываем первое число (ширину) – обычно 200-300.  В выпадающем списке “Выравнивание” выбираем положение картинки относительно текста – обычно либо “по левому краю”, либо “по правому краю”.

Не бойтесь экспериментировать – нажмите и посмотрите, что будет. Даже если получится что-то не так,  можно не сохранять нажав отменить.

В заключении нажимаем кнопку “Обновить” и смотрим, что получилось. Если все в порядке, то не забудьте сразу же  нажать кнопку   , иначе изменения, внесенные документ не будут сохранены.

Вставка в текст документа ссылки на другую страницу сайта. Для вставки ссылки на внешний сайт или на внутреннюю страницу сайта, сначала выделите текст, который будет являться ссылкой (при клике по нему будет происходить переход по указанному адресу)

Нажмите на панели инструментов иконку после чего появится диалоговое окно “Параметры ссылки”

Если Вы хотите, что бы ссылка указывала на внешний сайт, то в поле Адрес напишите адрес этого сайта. Если же Вы хотите, что бы ссылка указывала на внутреннюю страницу Вашего сайта, то в выпадающем списке Список выберите нужную страницу. Так же Вы можете изменить значение поля Цель. По умолчанию в нем указано: Открыть в этом окне. Если Вы хотите, что бы ссылка открывалась в новом окне браузера, то выберите Открыть в новом окне.

Что бы убрать ссылку из текста установите на нее курсор (или выделите ее) и нажмите иконку

 

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!