Производственная компания Сонар
Охота без границ. Питерский Охотник. Сайт для всех любителей охоты и рыбалки

Вход

Верхнее меню

Теги

Как вставить картинки в текст?

 

Перед публикацией ВСЕГДА пользуйтесь предпросмотром!!!! 

 

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

Полное описание кнопок редактора приведено на этой странице.

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

Каждому пользователю сейчас доступно 30 мб. места под файлы. В дальнейшем этот лимит будет расширен

Загружаемый файл должен быть  не больше 3-х Мб. С любым разрешением. Сохраняется только уменьшенная копия изображения.

Сохраненный файл не будет превышать 540х800 пикс (ШхВ).

 Рекомендуется все картинки с других серверов по ширине ограничивать 540 пикс.!!!!!

ВНИМАНИЕ!!  НАЗВАНИЯ ФАЙЛОВ И ПАПОК МОГУТ СОДЕРЖАТЬ ТОЛЬКО БУКВЫ АНГЛИЙСКОГО АЛФАВИТА И ЦИФРЫ, А ТАК ЖЕ ЗНАК ПОДЧЕРКИВАНИЯ И ТИРЕ!!

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

Почему картинки д. б. обязательно внутри таблиц? Так гораздо проще их привлекательно оформить и сделать, при необходимости обтекание картинок текстом и сделать подпись к картинке.

Как работать с таблицами рассказывается очень подробно здесь

Расположим картинку по центру страницы

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

В этом случае таблицу лучше всего размещать с новой  строки т. е. между абзацами текста.  Для перехода на новую строку (ввода пустой строки) используйте клавишу «Enter» на клавиатуре.

Например:

Абзац 1 Текст................. «Enter»

 Сюда будем вставлять таблицу  «Enter»

Абзац 2 Текст.................

Так сделать очень просто, если в конце текста первого абзаца дважды нажать «Enter» и потом на клаве, стрелку вверх ↑

Вставляем таблицу с такими параметрами:

Поле "Ширина" оставляем пустым, картинка сама растянет таблицу, как надо.

Вот такая белая таблица у нас получилась

 
 

Теперь устанавливаем курсор в верхнюю ячейку таблицы и жмем клавишу вставки/редактирования изображений

Если картинка находится на другом сервере, то в поле "Адрес изображения" вводите ее URL (интернет-адрес). То же самое, если картинка находится у нас, но у Вас к ней есть только интернет адрес. В поле "Предварительный просмотр" появится нужное изображение

Если картинка загружена в вашу папку на сайте или Вы хотите ее загрузить и вставить, то жмите кнопку, обведенную кружком. Загрузите картинку на сайт или выберите из спсика загруженных Вами и ее адрес появится в поле  "Адрес изображения" В поле "Предварительный просмотр" появится нужное изображение.

Загрузка картинки с домашнего компьютера на сервер 

После нажатия на кнопочку в кружке, на которую указывает стрелка, откроется окно файл браузера:

 

Здесь стрелкой указана выделенная черным папка, это текущая папка, в которой Вы находитесь (номер Вашей конкретной папки будет отличаться). В данном случае это корневая папка пользователя, здесь пользователь может создавать подпапки (названия д. б. только латиницей!!) и загружать в любые из них картинки и файлы. Все делается при помощи четырех кнопок вверху "Закачать" "Удалить"(файл), "Новая папка", "Отправить в редактор".

Для загрузки картинки жмем "Закачать"

 

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

 

Когда картинка закачается, она появится внизу в окошке предпросмотра (стрелка), красным прямоугольником выделены сведения о том сколько закачано и сколько у Вас осталось свободного места для закачки на сервере. Сейчас в списке файлов только один. Файлы в списке можно сортировать по имени, размеру, дате. Чтобы отправить файл в редактор, нужно кликнуть по файлу в списке, строчка с ним выделиться желтым, как на рисунке и нажать "Отправить в редактор". Вот, что получится:

 

Поля "Описание изображения" и "Название" не обязательны, но очень желательны, обычно туда записывается то, что написано в подписи к картинке. Если Вы не заполните эти поля, то по окончании вставки выскочит окошко с предупреждением. Его можно спокойно закрыть.

Теперь перейдем к вкладке "Внешний вид" этого окошка.

Установите значение поля "Граница" равным 1. Так изображение будет лучше смотреться.

Очень важный параметр "Размеры". Здесь они записаны, как Ширина х Высота (342х493).

Если Вы размещаете изображение из интернет обратите внимание на ширину!!! Она не должна превышать 540 пикселей!!!!!!!!! Если она больше, то при включенной опции "Сохранять пропорции" (включена по умолчанию) впишите в левое поле "540" . Высота изображения изменится автоматически. Внимание!!! В Opere не работает!! Если Вы хотите чтобы полноразмерное изображение все же было доступно, то потом, после вставки изображения надо будет кликнуть на нем и вставить, с помощью кнопки "Вставить/редактировать ссылку", ссылку на полноразмерное изображение, которое будет открываться в новом окне.

Все сделали - жмем "Обновить". Вот, что у нас получилось. Вписываем в нижнюю ячейку описание к картинке и все.

Чудо уточницы
Чудо уточницы

Подпись выравнивается соответствующими кнопками.

А вот это картинка из интернет со ссылкой на полноразмерное изображение.

Фото с Фото ру
Фото с Фото ру

Обтекание текстом

Для того, чтоб текст обтекал таблицы с картинками, в таблице выравнивание далается влево или вправо

 

Чудо уточницы
Чудо уточницы

Фото с Фото ру
Фото с Фото ру

Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения.

 Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения.

 

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

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

Чудо уточницы

Фото с Фото ру

Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения.

 Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения. Какой-то текст, который будет обтекать изображения.