Редактор страниц

Общая информация

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

Элементы панели редактора

HTML	Включение / Выключение режима HTML. Просмотр исходного текста разметки элементов страницы. Если Вы не знакомы с HTML, не пользуйтесь этим режимом.
	Сохранить.При нажатии данные сохраняются без перезагрузки страницы.
	Предварительный просмотр.При нажатии происходит сохранение данных и в новом окне появляется редактируемая страница в том виде, в котором её будут видеть посетители.
	Вырезать. Вырезание текста или других элементов страницы — это копирование с удалением. На практике вырезание делается для переноса части страницы в другое место. Чтобы вырезать необходимо сначала выделить необходимый текст, фотографию или другой элемент страницы. После вырезания необходимо поставить курсор в новое место, куда Вы хотите перенести вырезанное и нажать кнопку «Вставить». (См. ниже) Вместо нажатия кнопки, можно нажать на клавиатуре сочетание Ctrl+X.
	Копировать. Копирование текста похоже на вырезание, только без удаления. Используется для копирования однородных элементов (абзацев, изображений). Чтобы скопировать необходимо сначала выделить необходимый текст или элемент страницы. После копирования необходимо поставить курсор в то место, в котором Вы хотите видеть копию и нажать кнопку «Вставить». (См. ниже) Сочетание клавиш: Ctrl+С.
	Вставить. Вставка текста из буфера обмена. Сочетание клавиш: Ctrl+V. При вставке информации из других программ (Word, Excel, Internet Explorer) цвет и размер шрифта сбрасывается. Это сделано для обеспечения единого стиля на сайте и отсутствия беспорядка. Изображения при этом не вставляются. Для вставки изображений используйте инструмент «Изображение», описанный ниже.
	Отменить. Отмена последнего действия.
	Повторить. Повтор отменённого действия.
	Очистить форматирование. Эта кнопка стирает формат текста: цвет, размер, выравнивание, стиль. Выделите часть текста перед использованием этой функции.
	Жирный. Делает текст жирным. Выделите часть текста перед использованием этой функции.
	Курсив. Делает текст наклонным курсивом. Выделите часть текста перед использованием этой функции.
	Подчёркнутый. Делает текст подчёркнутым. Выделите часть текста перед использованием этой функции.
	Зачеркнутый. Зачеркивает текст. Пример: Старая цена: 150 руб.  Новая: 110 руб.
	Подстрочный индекс. Пример: H20.
	Надстрочный индекс. Пример: см2.
	Нумерованный список. Нажатие этой кнопки включает/выключает нумерованный список. Для того, чтобы сделать нумерованный список, выделите несколько абзацев и нажмите эту кнопку.
	Маркированный список. Нажатие этой кнопки включает/выключает маркированный список. Создание маркированного списка осуществляется аналогично.
	Увеличить отступ. Увеличивает отступ текста от левой границы, иными словами, сдвигает вправо.
	Уменьшить отступ. Уменьшает отступ текста от левой границы.
	По левому краю. Выравнивание текста и/или изображений по левому краю.
	По центру.
	По правому краю.
	По ширине.
	Ссылка. Делает часть текста или изображение ссылкой на другую страницу или файл. Для выбора страницы пользуйтесь кнопкой «Выбрать страницу», для ссылки на файл воспользуйтесь кнопкой «Выбрать файл на сервере». Подробное описание создания ссылки...
	Убрать ссылку. Убирает созданную ранее ссылку.
	Изображение. Используйте эту кнопку для вставки на страницу изображения и последующего его редактирования. Если изображение находится на вашем компьютере, в появившемся окне нажмите «Загрузить на сервер с компьютера». Подробное описание вставки и редактирования изображения...
	Flash. Вставка флэш-ролика на страницу с возможностью указания необходимых настроек.
	Таблица. При нажатии на кнопку откроется окно с различными свойствами будущей таблицы. Таблица используется не только для составления прайс-листов, в веб-дизайне таблицы используют для разнообразного размещения текста и других элементов страницы. К примеру, используя таблицу можно разместить текст в трёх одинаковых столбцах. Такая страница будет содержать одну строку и три столбца. В свойствах ячеек, вызываемых щелчком по ячейке правой кнопкой мыши, можно указывать их размеры, выравнивание содержимого в ней ( по вертикали и горизонтали), цвет фона и рамки и многие другие свойства.
	Линия. Вставить горизонтальную линию.
	Цвет текста. Выделите текст, который нужно выкрасить в другой цвет, перед использованием этой функции. Если нужный цвет отсутствует в представленной палитре, нажмите «Цвета...» и выберите из предложенной расширенной палитры или внесите вручную в соответствующую форму цвет в формате RGB (пример: 3399DD).
	Цвет фона. Выделите необходимую часть текста перед использованием этой функции. Выбор цвета фона идентичен выбору цвета текста.
	Развернуть окно редактора. Разворачивает на весь экран и сворачивает обратно окно редактора. Удобно при больших текстах.

Ссылка

В большинстве случаев для создания ссылки на страницу достаточно выбрать её из списка, появляющегося при нажатии кнопки «Выбрать страницу». Однако, если по каким-то причинам это сделать невозможно или просто в качестве ознакомления предлагаем усвоить то, как броузер понимает HTML-ссылки.

Рассмотрим сначала самый простой способ ссылки на другую страницу. Пусть адрес Вашей страницы будет такой: http://vash-site.ru/company/history. Чтобы сделать ссылку на эту страницу, наберите в редакторе ссылаемые слова, например, История компании (ссылкой также может быть изображение). Выделите мышью эти два слова и нажмите кнопку «Ссылка». В открывшемся диалоговом окне в поле адрес внесите /company/history если ссылка с того же сайта (обязательно в начале слэш / ) или http://vash-site.ru/company/history, если ссылка с другого сайта. В случае, если Вы хотите чтобы страница открывалась в новом окне (если это ссылка на другой сайт), выберите «Открыть в новом окне».

Ссылка на главную страницу Вашего сайта делается одним слэшем: /

Чтобы сделать ссылку на файл, в диалоговом окне нажмите «Выбрать файл на сервере».

Изображение. Управление и свойства

Для того, чтобы вставить изображение на страницу, установите в нужном месте курсор, нажмите кнопку «Изображение». В диалоговом окне, укажите адрес изображения или выберите его на сервере. Находясь на сервере, Вы можете создавать директории и загружать изображения со своего компьютера. Не пренебрегайте полем «Всплывающий текст». Этот текст виден в браузере с выключенным отображением картинок. Если изображение необходимо разместить с обтеканием текста справа или слева, укажите выравнивание.

Полезные советы

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

• Текст должен быть в первую очередь читаемым, не используйте много разных шрифтов и цветов, если того не требует дизайн;
• Старайтесь придерживаться единого стиля сайта.
• Не нажимайте подряд более одного пробела, т.к. в этом случае пробелы становятся неразрывными и могут растягивать страницу.
• Для создания информационной таблицы с красивой рамкой, установите галочку «Установить красивые рамки».
• Используйте автосохранение, чтобы набранный текст не потерялся в случае случайного закрытия страницы или внезапного выключения компьютера.
• Редактор настроен так, что нажатие клавиши Enter создаёт новый абзац с красной строкой, а нажатие клавиш Shift+Enter создаёт перенос строки.
• Проверяйте орфографию и грамматику текста
• Всегда смотрите как выглядит получившаяся страница после сохранения, т.к. в дизайне сайта она может выглядеть по-другому.
• Используйте таблицу с невидимыми рамками для разнообразоного размещения текста и картинок. Не задавайте фиксированной ширины и высоты ячеек, если это не является необходимым.
• В следствие того, что при вставке текста на редактор все стили принудительно стираются,  не имеет смысла размечать стили в Word'е перед вставкой.
• Храните изображения вашего сайта только на своём сервере. Изображения, расположенные на других серверах,  со временем могут быть удалены их хозяевами или переименованы,  в следствие чего они пропадут и на вашем сайте.
• Надеемся этих рекомендаций будет достаточно. Желаем удачи в освоении редактора!