Редакторы для создания веб-страниц бывают двух типов - визуальные и текстовые.
Визуальные редакторы
не требуют от вас знаний html, css и прочих технологий для разметки веб-страниц. В визуальном редакторе вы располагаете различные элементы на странице, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь.
Текстовые редакторы
Следует заметить, что ни один визуальный редактор не совершенен и все они так или иначе ограничены в своих возможностях, а от профессиональных кодеров требуется умение писать код руками, именно поэтому профессиональным кодерам часто нужны небольшие текстовые редакторы. В текстовых редакторах, как правило, бывают разные функции облегчающие кодеру написание кода, такие, как подсветка кода (так легче видеть, где в коде вставлены стили, или скрипты, а где просто текст), различные горячие кнопки и клавиши, которые вставляют уже готовые конструкции (куски кода, спецсимволы) в код, и т.д.
Мы будем наполнять сайт с помощью визуального редактора.
Их достаточно много, принцип работы достаточно типичен, различия таятся в функционале, но уверяю Вас, научившись пользоваться одним - Вы легко сумеете работать и с его собратьями. Однако, настоятельно Вас прошу, постарайтесь прислушиваться к нашим рекомендациям. Уметь Вы будете все, а вот какими инструментами пользоваться, а уж тем более не пользоваться мы и постараемся Вам объяснить.
Редактирование текста мало отличается от работы в привычных редакторах (Word)
Хотя есть небольшие нюансы, которые необходимо помнить:
- Нажатие клавиши ENTER не просто обеспечит переход на другую строку, а заставит Вас «перепрыгнуть» ЧЕРЕЗ строку.
Поэтому если необходимо начать писать с новой строки ОБЯЗАТЕЛЬНО нажимайте сочетание клавиш SHIFT + ENTER. - Для организации текстов на страницах сайта НЕ ПРИНЯТО обозначать АБЗАЦ привычным для нас образом - ОТСТУПОМ. Как правило, абзацы имеющие стандартный вид по разному смотрятся в разных браузерах. Причем во всех недостаточно аккуратно.
Именно в целях аккуратного и хорошо читаемого вида, настоятельно рекомендую обозначать абзац простым переводом строки – нажатием клавиши ENTER.
Таким образом каждый абзац будет выделен пропущенной строкой снизу и сверху.
А теперь выделим текст мышкой и отформатируем его нажав кнопочку «выровнять по ширине». В результате этих несложных операций получаем стройный текстовый ряд с хорошо обозначенными абзацами. - Старайтесь не использовать нумерованные списки и прочие сложные способы форматирования. Не всякий браузер сможет их корректно отобразить и Ваш материал покажется кому-то неупорядоченным набором строк.
Очень советую поступать следующим образом:
Набирайте текст в простых редакторах, которые непременно установлены на Вашем компьютере. Подойдет и Блокнот и WordPad. Потом копируйте текст в окно редактора сайта, обязательно сохраняйте материал, а уж потом открывайте его и форматируйте.
- Теперь загружаем любимый браузер Mozilla FireFox…
- В адресной строке набираем адрес сайта или адрес админпанели…
- Обязательно авторизуемся либо в административной части сайта либо в пользовательской.
После чего Вам становятся доступны как меню пользователя - Ваш виртуальный кабинет, так и целый виртуальный офис, в случае работы через административный интерфейс.
Теперь один клик мышки делает из читателя – писателя… в меню непременно окажется кнопочка (а то и не одна), ведущая к инструментам наполнения сайта материалами.
Просто воспользуйтесь той, которая приведет Вас в требуемый раздел.
Если Вы корреспондент новостей, то Вам в Добавить новость
Если Вы уполномочены быть автором других разделов сайта, то Вам в Добавить статью
Ну а если Вы администратор - заходите в раздел для работы с материалами сайта...
Наконец-то перед вами поле для деятельности!
- Заполните поле Заголовок (Название Вашего материала)
- Заполните поле Псевдоним заголовка. Причем последний должен быть максимально лаконичным. Для чего? Это тема для отдельной беседы.
Определите Раздел и Категорию для размещения Вашего материала
Ниже Вы видите два одинаковых поля.
Верхнее – для Вводного текста
Нижнее – для Основного текста.
Вводный текст
- это то, что отображается на страницах сайта в режиме предпросмотра (в блогах, на главной странице и т.д.)
Для того, что бы материалы на сайте были не только информативными, но и эстетично представленными. (Непременно вернемся к рассуждениям об этой необходимости, но позже, в дополнительных материалах). Пока просто давайте следовать правилам:
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 ключевых слов. В качестве примера приведем Мета-теги для нашего урока.
Описание – ключевые фразы:
визуальный редактор, текстовый редактор, публикация материала, создание веб-страницы, содержимое сайта, публикация на сайте, вставка изображения, вставка ссылки, параметры отображения, редактирование материалов
Ключевые слова:
визуальный, текстовый, редактор, публикация, материал, создание, веб-страница, содержимое, сайта, вставка, изображение, ссылки, параметры, отображения, редактирование
Осталось сделать главное – нажать на иконку с изображением дискеты. Попросту – сохранить материал.
Запомните! Во избежание ошибок, не уходите с редактируемой страницы иначе как сохранив материал, или отменив его сохранение. При попытке выйти посредством иных инструментов (закрыть браузер, нажатие кнопки возврата в браузере…) материал окажется в подвешенном состоянии и автоматически будет заблокирован для любых действий. Исправить ситуацию можно, нажав в Вашем кабинете пункт меню Разблокировать.
Теперь остается ждать одобрения Вашей публикации Главным Редактором (если Вы не администратор сайта разумеется), после которого Вы сможете вносить изменения в Вашу статью, если будет в этом необходимость.