User`s Guide visual HTML editor

Visual HTML editor FCKEditor is the most convenient and functional for today means to free layout HTML-pages. However, to your content look attractive, you need to master a few simple rules for working with the editor and get at least a general idea of the layout of HTML-pages.

Вставить только текстHow to put text in the editor?

In Editor must be inserted only plain text without formatting defined in a source file (eg, MS Word). To properly insert the text in the editor from Word or from another site, you need to copy it (Ctrl + C), then create a blank document in Notepad, paste it there (Ctrl + V), then select all the text in Notepad (Ctrl + A), Again copy (Ctrl + C), go to the editor, there is clear the board and paste (Ctrl + V).

Another way - you can use the   Paste as Plain Text, in which case it will be open the Settings dialog box, where you want to paste the text from the source. As a result, in the editor will be inserted only text, stripped of unnecessary tags.

Text Formatting

To format the text, you can use the stylistic layout, choosing the desired style from the drop-Format. There are 4 main levels: Heading 1, Heading 2, Heading 3 and Normal.

Each style is applied to a paragraph. To make a new paragraph, press Enter, and to make a line break - Shift + Enter. In this case, the paragraph will be left alone, but the text will go to a new line.

You can also change the alignment of the text with four buttons , style (bold, italic, underline, and strikethrough)  and ask for the text-or superscripts . All formatting options can be combined, for example to set bold italic or strikethrough italics.

Вставить изображение на страницу сайтаHow to put in an image editor?

To insert any image editor, you must click the Insert / Edit Image dialog box, select the Download tab, click the Browse button, find the image you want on your computer and click the Send button on the server.

The caption should be given meaningful, so you do not get confused.

It is important that all uploaded photos are in JPG or GIF, have names in Latin letters with no spaces and not exceeding 500 KB. The size of the image on the site can not be more than 700 pixels wide, so do not need to fill the server images that contain 3000 points - they only delay the opening pages will irritate users!

Image size of 800 by 600 pixels is about 70KB in JPG format and is suitable for posting on the site.

If the picture is at least one time was pumped, no need to upload it to the server again. It can be found by clicking on the View server dialog box Insert / Edit Image.

Prepare images for the site

To prepare images for upload to site, you can use a free online image editor Sumopaint, has all the necessary functions (similar to Photoshop).

Consider a typical problem - change the image size to fit on the site. Let`s say we have an image size of 7066 x 4417 pixels in JPG.

To see how many points contains a picture and how much is enough to put the mouse pointer on it in Explorer.

It takes 2 MB, and it will be a time to load the site. Us enough 640 pixels wide - more still can not display on Clonks website which has a width of 990 full points.

Open the site Sumopaint, push the button Open from Computer, select the image you want and click Open. In future open files, you can use the menu item File / Open from My Computer.

When the image is opened, select the menu item Image / Image Size. A dialog box opens where you can see the current size of the image.

Check to check Constrain Proportions was established, to drive in the Width required width of 640, and click OK.

Now we must keep result image from your computer, then upload it to the site. Select the menu item File / Save to My Computer, and in the dialog box, specify a file name, size, and degree of compression (format JPG).

PNG format should be used if you want to save a transparent image. In all other cases it is better to use the JPG format with the compression of 70-80%.

Now our image instead of 2 MB will occupy only 150 KB. The higher the quality, the selected Shifting Quality (Quality), the greater the volume of the resulting image.

As a result, your sites will be loaded immediately, and the quality of the pictures did not hurt!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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