На что первым делом обращает внимание читатель текста? На вставленные в текст картинки! Поэтому на странице обязательно должны быть красивые фотографии и иллюстрации.

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

Когда картинка готова, добавим ее к тексту. Это делается и при создании новой страницы, и при редактировании уже созданной.

Найдите в тексте место, в которое хотите поместить изображение, и кликните там мышкой.

Затем на панели инструментов нажмите кнопку «Вставить/редактировать изображение»:

У вас появится окно, через которое вы будете вставлять картинку. Найдите в нем кнопку «Загрузить» и нажмите на нее.

 

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

 

В окне в поле Источник появится временный путь к вашей картинке:

Осталось настроить для нее оформление. Оно указывается в специальных полях:

Выравнивание позволяет выбрать, как текст будет обтекать вашу картинку — справа или слева. Если вы хотите, чтобы ваша картинка не обрамлялась текстом, а стояла отдельно от него, то оставьте в этом поле значение «нет». Остальные варианты значений позволяют установить картинку именно так, как надо, и именно там, где надо.

---

Горизонтальное выравнивание изображения:

• нет – картинка будет находится слева, а нижняя часть изображения напротив первой строки текста, это значение задано по умолчанию;

• слева – изображение будет расположено по левому краю, а текст будет обтекать его справа;

• справа – изображение расположится справа, а текст будет обтекать его слева.

  

---

Вертикальное выравнивание:

• по нижней границе – картинка будет находится слева, а нижняя часть изображения напротив первой строки текста, это значение задано по умолчанию.

• по верхней границе – картинка будет находится слева и строчка текста будет располагаться по верхней границе изображения;

• по базовой линии – картинка будет находится слева и при этом происходит выравнивание середины изображения по базовой линии строки;

---

Описание изображения устанавливает альтернативный текст для изображений — оно подскажет поисковым системам, что именно на ней изображено. Кроме того, это описание помогает индексации сайта в целом. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше.

Размер позволяет откорректировать линейные размеры изображения в пикселях по ширине и высоте (сделать изображение меньше или больше)

Также можно настроить дополнительные параметры для вставленного изображения, для этого нужно выбрать вкладку Расширенные:

Вертикальный и горизонтальный интервалы — расстояние в пикселях, на которое текст будет удален от картинки. Если для вертикального интервала указано 5, то по вертикали между картинкой и текстом будет 5 пикселей. Если для горизонтального интервала указано 10, то по горизонтали между картинкой и текстом будет 10 пикселей. Если ничего не указывать, то картинка «прилипнет» к тексту вплотную.

Boder width показывает в пикселях толщину рамки, в которой будет опубликовано ваше изображение. Если в этом поле ничего не писать, то рамка показываться не будет. Если написать 3 — то рамка будет в три пикселя толщиной.
PS. На современных веб-сайтах не принято устанавливать рамку для обычных изображений, не являющихся гиперссылками! 

Boder style представляет собой выпадающий список, состоящий из различных вариантов стиля оформления границ:

Значение	Описание	Пример
Solid	Сплошная рамка
Dotted	Точечная рамка
Dashed	Пунктирная рамка
Double	Двойная рамка.
Groove	Объемная рифленая вдавленная рамка.
Ridge	Объемная рифленая выпуклая рамка.
Inset	Объемная вдавленная рамка.
Outset	Объемная выпуклая рамка.
Нет	Указывает, что рамка отсутствует
Hidden	Тоже самое, что и значение "Нет", за исключением разрешения пограничного конфликта для элементов таблицы (при применении border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще)

 

Стиль заполняется автоматически системой при явном указании какого-либо из свойств: Вертикальные и горизонтальные интервалы, Boder width, Boder style. Также можно самостоятельно указать ряд CSS свойств и их значений, отделяя их символом ";"

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

Когда оформление завершено, нажмите кнопку «ОК».

Изображение будет добавлено в текст в указанной вами позиции размещения курсора.

Теперь сохраните страницу с картинкой, нажав на кнопку «Сохранить и выйти» внизу.

После этого в тексте на сайте появится добавленная картинка или фотография. Для добавления ещё одной картинки снова щелкните мышью в нужном месте текста и повторите шаги данной инструкции.