Визуальный HTML редактор. Руководство пользователя

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

Вставить только текстКак поместить текст в Редактор?

В Редактор необходимо вставлять только простой текст, без форматирования, заданного в исходном файле (например, MS Word). Чтобы правильно вставить текст в Редактор из Word или с другого сайта, нужно скопировать его (Ctrl+C), потом создать пустой документ в Блокноте, вставить его туда (Ctrl+V), потом выделить весь текст в Блокноте (Ctrl+A), опять скопировать (Ctrl+C), перейти в Редактор, там очистить поле и вставить (Ctrl+V).

Еще один способ - можно использовать кнопку Вставить только текст, в этом случае будет открыто одноименное диалоговое окно, куда нужно будет вставить скопированный из источника текст. В результате в Редактор будет вставлен только текст, очищенный от лишних тегов.

Форматирование текста

Для форматирования текста можно использовать стилевую разметку, выбирая нужный стиль из раскрывающегося списка Форматирование. Доступны 4 основных уровня: Заголовок 1, Заголовок 2, Заголовок 3 и Нормальный.

Каждый стиль применяется к абзацу. Чтобы сделать новый абзац, следует нажать Enter, а чтобы сделать перевод строки - Shift+Enter. В этом случае абзац останется один, но текст пойдет с новой строки.

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

Вставить изображение на страницу сайтаКак поместить в Редактор изображение?

Чтобы вставить в Редактор любое изображение, необходимо нажать кнопку Вставить/Редактировать изображение в диалоговом окне выбрать вкладку Закачать, нажать кнопку Обзор, найти нужное изображение на своем компьютере и нажать кнопку Послать на сервер.

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

Важно, чтобы все загружаемые фото были в формате JPG или GIF, имели названия латинскиими буквами без пробелов и не превышали по объему 500 Кб. Размер изображения на сайте не может быть более 700 точек по ширине, поэтому не нужно заливать на сервер картинки, содержащие 3000 точек - они только затормозят открытие страницы и будут вызывать раздражение пользователей!

Изображение размером 800 на 600 точек занимает около 70Кб в формате JPG и прекрасно подходит для размещения на сайте.

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

Подготовка изображений для сайта

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

Рассмотрим типичную задачу  —  изменение размеров изображения для размещения на сайте. Допустим, у нас есть изображение размером 7066 х 4417 точек в формате JPG.

Чтобы увидеть, сколько точек содержит картинка и какой объем занимает, достаточно навести на нее указатель мыши в Проводнике. 

Оно занимает 2 Мб, и будет очень долго загружаться на сайт. Нам вполне достаточно 640 точек по ширине — больше все равно нельзя отобразить в клонке сайта, который весь имеет ширину 990 точек.

Открываем сайт Sumopaint, нажимаем кнопку Open from Computer (Открыть с компьютера), выбираем нужное изображение и нажимаем Открыть. В дальнешем открывать файлы можно с помощью пункта меню File/Open from My Computer (Открыть с моего компьютера).

Когда изображение открылось, выбираем пункт меню Image/Image Size (Изображение/Размер изображения). Откроется диалоговое окно, в котором можно увидеть текущий размер изображения.

Проверяем, чтобы галочка Constrain Proportions (Сохранять пропорции) была установлена, вбиваем в поле Width (Ширина) требуемую ширину 640, и нажимаем ОК.

Теперь надо сохранить полчившееся изображение на своем компьютере, чтобы потом загружать его на сайт. Выбираем пункт меню File/Save to My Computer (Файл/Сохранить на моем компьютере), и в диалоговом окне задаем имя файла, формат и степень компрессии (для формата JPG).

Формат PNG следует использовать в том случае, если требуется сохранить прозрачность изображения. Во всех прочих случаях лучше использовать формат JPG с компрессией 70-80%.

Теперь наше изображение вместо 2 Мб будет занимать всего лишь 150 Кб. Чем выше качество, выбранное движом Quality (Качество), тем больше будет объем полученного изображения. Можно смело ставить 70-80%, качество будет отличным, но объем будет еще меньше (например, при качестве 70% та же картинка будет занимать всего 46Кб).

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

Верстка изображений

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

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

Работа с таблицами

Таблицы бывают нужны как для представления информации в табличном виде, так и в качетве инструмента позиционирования различных объектов на странице сайта.

Чтобы вставить таблицу, следует нажать кнопку Вставить/Редактировать таблицу, задать в диалоговом окне ее параметры и нажать Ок.

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

Выравнивание контента в ячейке таблицы

А вот для выравнивания контента в ячейке по горизонтали следует использовать кнопкки выравнивания текста в верхней панели меню Редактора. Если задавать выравнивание в диалоговом окне Свойства ячейки, оно не будет применяться на сайте из-за особенностей нового HTML-стандарта.

Как вставить ссылку?

Визуальный HTML-редактор позволяет вставлять любые ссылки как для текста, так и для изображений. Чтобы вставить ссылку, необходимо выделить текст или изображение, которые будут служить ссылкой, нажать кнопку  Вставить/Редактировать ссылку и в одноименном диалоговом окне указать нужную ссылку.

Если в качестве ссылки используется изображение, следует щелкнуть по нему правой кнопкой, выбрать Свойства изображения во всплывающем меню и задать в поле Бордюр 0, иначе картинка буудет обведена синим контуром.

Чтобы сделать ссылки на отдельные разделы в пределах страницы, как у них, надо поставить перед заголовками разделов якоря и на них поставить ссылки,  Вставить/Редактировать ссылку, и указать Тип ссылки Якорь на эту страницу.

Как вставить файл в формате Word, Excel, PDF и др?

Чтобы загрузить файл в формате doc, pdf или любом другом, надо выделить текст, который будет служить ссылкой для открытия данного файла (в качестве ссылки на закачанный файл может также служить любое изображениие), нажать кнопку  Вставить/Редактировать ссылку, в диалоговом окне выбрать вкладку Закачать, выбрать нужный файл и нажать кнопку Послать на сервер. В результате нужный файл будет закачан на сервер и будет загружаться при нажатии на ссылку.

Как вставить видео на сайт?

Чтобы вставить видео на сайт,  надо зайти на youtube.com, находим нужный ролик, нажать под роликом кнопку Отправить, в открывшйся вкладке нажать кнопку Встроить, скопировать код и разместить его в Редакторе в режиме Источник.

Как вставить видео на сайт через визуальный редактор 

Работа в режиме Источник с HTML-тегами

Для пользователей, имеющих представление об HTML-тегах Редактор предоставляет наиболее гибкие возможности по свободной верстке HTML-страниц. Для этого достаточно нажать самую первую кнопку Источник и перейти в режим форматирования HTML-тегов.

Подробнее о тегах разметки HTML можно почитать, вбив в Google запрос "HTML-теги, верстка".