В различных CMS сайтов встроенное редактирование имеет одни и те же функции. Различаются HTML-редакторы обычно только расположение элементов управления редактированием контента. Рассмотрим, что такое визуальный редактор на примере HTML-плагина TinyMCE, который написан на Java. Плагин используется в системах управления MODx, Wordpress и пр.
В режиме редактирования страницы открывается окно.
Как видно из скриншота, мы находимся в редактировании страницы под названием “Как писать продающие тексты”. Вверху слева находятся поля мета-тэгов (данную настройку должен произвести программист). Справа можно поменять дизайн-шаблон документа, URL и статус публикации. Внизу - большое контентное поле с кнопками управления. Это и есть подключенный визуальный HTML-редактор.
В целом, кнопки управления мало чем отличаются от привычных нам в Word. Верхний блок кнопок позволяет работать с изображениями, ссылками, видео, аудио-файлами, а также копировать и вставлять куски текста.
Остановимся подробнее на кнопке “редактирование HTML”. Она предназначена для продвинутых пользователей, которые знают язык разметки гипертекста. Во встроенном текстовом редакторе нет многих функций, которые можно реализовать “напрямую” посредством средств HTML. К примеру, можно на отдельное слово наложить тень, тем самым. выделив его. Или провести горизонтальную черту между абзацами. Так называемый “Ластик” очищает любое форматирование, но зачастую в HTML остаются лишние куски кода, которые необходимо убрать. И сделать это можно только напрямую в кодах.
Второй ряд кнопок отвечает за форматирование.
Можно делать текст жирным, наклонным, подчеркнутым. Выделять абзацы и выравнивать их, определять заголовки, а также работать со списками, маркированными и нумерованными.
Преимущества визуальных редакторов
Простота работы.
Увеличивается скорость редактирования сайта.
С контентом может работать любой пользователь.
Не обязательно знание программинга и HTML.
Недостатки HTML-редакторов
Для правильного отображения стилей через редактор необходима их предварительная грамотная настройка в CSS.
Не всегда сбрасываются стили скопированного документа (к примеру, если вы вставляете текст из Word).
Для изменения стилей необходимо менять их отдельно, в CSS. Во встроенном редакторе есть возможность работы со стилями, но в таком случае все стили “прописываются” в теле страницы и не выносятся в отдельный файл. Это плохо с точки зрения продвижения.
Контент-менеджер “заключен в рамки” визуального редактора. Для добавления “фишек”, интересного форматирования и т.п. необходима дополнительная работа программиста.
Какими бы не были недостатки визуальных редакторов - пользоваться их преимуществами можно и даже нужно. CMS сейчас нельзя представить без встроенного редактора, так же, как ни один уважающий себя сайт не обходится без CMS.
Верстка веб сайтов
Верстка веб сайтов - это создание полноценной html-страницы на основе созданного в графическом редакторе дизайна.
Например, редактору газеты журналист сдал статью на 3 страницы. Она не читабельная. Дизайнер думает, как расположить блоки текста и картинки, чтобы разместить статью на 3х страницах журнала. Он делает шапку, красочные заголовки, размещает блоки текста, выделяя значимые моменты другими шрифтами. Находит и размещает картинки, делает обтекание их текстом. А наборщик (как и html-верстальщик) работает непосредственно с оборудованием, при помощи которого создается страница журнала и выводится на печать. Наборщик превращает картинку в готовую страницу журнала.
Что нужно знать для верстки сайтов? Графические редакторы (Photoshop), язык HTML, CSS, библиотеки Java Script (JS).