Текст. Знакомство с WYSIWYG-редактором

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

Визуальные редакторы

не требуют от вас знаний html, css и прочих технологий для разметки веб-страниц. В визуальном редакторе вы располагаете различные элементы на странице, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь.

Текстовые редакторы

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

Мы будем наполнять сайт с помощью визуального редактора.

Их достаточно много, принцип работы достаточно типичен, различия таятся в функционале, но уверяю Вас, научившись пользоваться одним - Вы легко сумеете работать и с его собратьями. Однако, настоятельно Вас прошу, постарайтесь прислушиваться к нашим рекомендациям. Уметь Вы будете все, а вот какими инструментами пользоваться, а уж тем более не пользоваться мы и постараемся Вам объяснить.

Редактирование текста мало отличается от работы в привычных редакторах (Word)

Хотя есть небольшие нюансы, которые необходимо помнить:

1. Нажатие клавиши ENTER не просто обеспечит переход на другую строку, а заставит Вас «перепрыгнуть» ЧЕРЕЗ строку.
   Поэтому если необходимо начать писать с новой строки ОБЯЗАТЕЛЬНО нажимайте сочетание клавиш SHIFT + ENTER.
2. Для организации текстов на страницах сайта НЕ ПРИНЯТО обозначать АБЗАЦ привычным для нас образом - ОТСТУПОМ. Как правило, абзацы имеющие стандартный вид по разному смотрятся в разных браузерах. Причем во всех недостаточно аккуратно.
   Именно в целях аккуратного и хорошо читаемого вида, настоятельно рекомендую обозначать абзац простым переводом строки – нажатием клавиши ENTER.
   Таким образом каждый абзац будет выделен пропущенной строкой снизу и сверху.
   А теперь выделим текст мышкой и отформатируем его нажав кнопочку «выровнять по ширине». В результате этих несложных операций получаем стройный текстовый ряд с хорошо обозначенными абзацами.
3. Старайтесь не использовать нумерованные списки и прочие сложные способы форматирования. Не всякий браузер сможет их корректно отобразить и Ваш материал покажется кому-то неупорядоченным набором строк.

- В адресной строке набираем адрес сайта или адрес админпанели…

- Обязательно авторизуемся либо в административной части сайта либо в пользовательской.

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

Теперь один клик мышки делает из читателя – писателя… в меню непременно окажется кнопочка (а то и не одна), ведущая к инструментам наполнения сайта материалами.

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

Если Вы корреспондент новостей, то Вам в Добавить новость

Если Вы уполномочены быть автором других разделов сайта, то Вам в Добавить статью

Ну а если Вы администратор - заходите в раздел для работы с материалами сайта...

Наконец-то перед вами поле для деятельности!

- Заполните поле Заголовок (Название Вашего материала)

- Заполните поле Псевдоним заголовка. Причем последний должен быть максимально лаконичным. Для чего? Это тема для отдельной беседы.

Определите Раздел и Категорию для размещения Вашего материала

Ниже Вы видите два одинаковых поля.

Верхнее – для Вводного текста

Нижнее – для Основного текста.

Вводный текст
- это то, что отображается на страницах сайта в режиме предпросмотра (в блогах, на главной странице и т.д.)

Для того, что бы материалы на сайте были не только информативными, но и эстетично представленными. (Непременно вернемся к рассуждениям об этой необходимости, но позже, в дополнительных материалах). Пока просто давайте следовать правилам:

1. Длина текста пусть будет в пределах 50-70 слов. Если ипользуете изображение то меньше, если без изображения – больше. Что это нам даст? То, что в этом случае материалы в разделах сайта будут представлены корректным, элегантным списком.

2. Если вставляете изображение, то располагайте его слева от текста. Подробнее о том, как это сделать ниже. Главное – характеристики изображений в Вводном тексте должны быть следующими –

- желательно использовать файлы с расширением *.gif на худой конец *.jpg или *.jpeg
- 72 точки (пиксел) на дюйм
- ширина - 120 точек (пиксел)
- высота - 90 точек (пиксел)
- вес - 5 килобайт

ПОМНИТЕ! Называть изображение необходимо ЛАТИНИЦЕЙ!
Вот так: miting.jpg, miting.gif.... А вот так: митинг.jpg.... НЕЛЬЗЯ!

Урок по масштабированию и оптимизации изображений будет доступен здесь

Основной текст - это материал в развернутом виде.

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

ПОМНИТЕ! Называть изображение необходимо ЛАТИНИЦЕЙ! Вот так: miting.jpg, miting.gif.... А вот так: митинг.jpg.... НЕЛЬЗЯ!

Если Вы публикуете, допустим, закон, то В качестве Вводного текста нормально будет смотреться его шапка.

Теперь перейдем к инструментарию визуального редактора. Присмотритесь, каждая кнопочка имеет подпись. Кнопочек много. Те которые могут ввести Вас в заблуждение, убираем в настройках сайта. Рассмотрим основные:

Вставить из Word…
- очень полезный инструмент. Он очищает текст от ненужной в Интернет шелухи, адаптирует текст для его правильного отображения. Не забывайте, то, что для Вас всего лишь экран компьютера – имеет свои технические особенности. Просто копируйте содержимое страницы в документе Word и вставляйте в появившееся окошко.

!!! поставьте галочку в окошке Очистить стили! Вот теперь Ваш текст будет отображаться в соответствии со стилями сайта, а не документа Word. !!!

Нажимайте Вставить – вот и все дела, текст в редакторе! Не удивляйтесь, что куда-то исчезли все признаки форматирования, которые Вы задавали в документе Word. Придется навести лоск заново.Помните, я советовал сначала копировать в окно редактора сверстанный в Блокноте текст, а уж потом его шлифовать? Нет? Тогда читайте статью заново.

ВНИМАНИЕ!!! УЧИМСЯ ВСТАВЛЯТЬ ГИПЕРССЫЛКИ!!! Добавить/изменить ссылку Очень важный инструмент! Тот случай, когда необходимо в материале разместить ссылки на статьи сайта, или ссылку на сторонний сайт.

Вставить гиперссылку

- Например Вы пишите текст: «Подробнее о проекте читайте здесь».

Просто выделите слово здесь и нажмите вышеуказанную кнопочку.

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

- в поле Адрес появится адрес материала на сайте в том случае, если Вы делаете ссылку на материал сайта. Для этого в списке материалов выберите необходимый, либо вставьте в это поле адрес ссылки на сторонний сайт. - ниже напишите Заголовок ссылки. Например – Посетить сайт, Прочитать статью… Пользователь будет видеть эту подсказку при наведении курсора мышки на сформированную ссылку.

- Еще ниже поле, значение которого определяет в каком окне откроется ссылка. По умолчанию и Открыть в этом окне – открывают в том же окне где просматривается Ваша статья. Открыть в новом окне – ссылка будет открываться в новом окне. Например материалы Вашего сайта открываем в том же окне, а все сторонние – в новом. Остальные параметры не используем.

- Нажимаем ОК… ссылка сформирована!

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

Теперь обратимся к нижней части страницы. К вкладке Изображение – мы еще вернемся... Это альтернативный способ вставки изображения, более всего подходящий для администратора.

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

- Состояние – функция доступна лишь пользователям с высоким уровнем доступа. Определяет допущен материал к публикации или нет.

- Уровень доступа – определяет группы пользователей допущенных к просмотру материала.
Общий – для всех,
Участники – зарегистрированные пользователи,
Специальный – для пользователей группы Автор и выше. Можно сказать – служебный.

- Псевдоним автора заполнять не стоит. Разве, что Вы выручили товарища и опубликовали материал вместо него.

- Дата начала публикации – если публикуете новость, оставьте без изменений. Если публикуете документ. лучше укажите дату создания документа. - Дата окончания публикации – оставляем без изменений.

- Показывать на главной странице – оставляем без изменений.

Вкладка Мета-теги

Заполняя эти поля, Вы даете установку поисковым машинам индексировать наиболее важные фразы и слова в Вашем материале. Ведь Вы хотите, что бы Ваш материал легко находился в поисковиках? Хотите облегчить Вашим потенциальным читателям задачу поиска Вашей статьи? Поэтому постарайтесь ограничиться 10-ю фразами и от 10 до 20 ключевых слов. В качестве примера приведем Мета-теги для нашего урока.

Описание – ключевые фразы:

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

Ключевые слова:

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

Осталось сделать главное – нажать на иконку с изображением дискеты. Попросту – сохранить материал.

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

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