Вставить картинку на сайт достаточно просто. Но здесь есть несколько моментов, не учитывая, которые можно получить ошибку, при открытии вставленной картинки или фото.
Основное правило – картинка или фото, которые вы хотите вставить на сайт, должны находиться в той же папке, где расположены файлы сайта. Что это значит?
Это значит, что если ваша картинка расположена на локальном компьютере, то перед тем как вставлять на сайт, ее нужно скопировать на сервер провайдера (хостинг, где расположен ваш сайт).
Местом размещения выбрать коренную папку вашего сайта. Точнее одну из вложенных папок, по умолчанию предназначенных для хранения изображений, размещаемых на сайте.
Учитывая, что в настоящее время большинство сайтов сделаны с использованием различных систем управления сайтом (CMS – системы или «движки»), вставлять картинки на сайт проще всего с использованием визуального редактора.
Как вставить картинку на сайт, используя визуальный редактор?
Визуальный редактор предназначен для создания, форматирования и размещения статьи на сайте. Это очень удобно. Одновременно мы можем разместить картинку на сайте, например, в этой же статье.
Работа с визуальными редакторами разных CMS-систем практически идентична.
Для примера рассмотрим, как вставлять картинку или фото на сайт joomla. Имеется ввиду, что сайт построен с использованием системы управления Joomla!
Для того, чтобы разместить фото или картинку на сайт, нужно сделать следующее:
-- Установить курсор в то место статьи, где вы хотите вставить фото или любое другое изображение на сайт. Этим самым вы выбираете местоположение вставляемой фотографии непосредственно в вашей статье.
-- Затем щелкнуть кнопку с изображением на панели инструментов визуального редактора. При наведении курсора на эту кнопку у вас высветится фраза Вставить/Редактировать изображение (рис.1).
Рис.1 Как вставить картинку на сайт
Появится диалоговое окно Менеджер изображений (рис.2).
Рис.2 Вставить картинку на сайт используя Менеджер изображений.
Менеджер изображений значительно упрощает процесс размещения фотографии или картинки на сайте.
Слева в углу, в разделе Папки, расположены папки, в которых находятся вставляемые на сайт фото и изображения. Но для того чтобы папка с картинками появились в Менеджере, на предварительном этапе ее нужно создать и разместить там фото или картинки, которые предполагается вставлять на сайт. И еще одно. Оригинальные файлы изображений обычно имеют большой размер и будут долго грузиться. Поэтому перед загрузкой рекомендуется уменьшить вес картинки.
О том, как это сделать смотрите ниже.
Итак, щелкаем на папке, в которой размещены наши изображения или фотографии.
Рядом, в среднем столбце, появится список файлов картинок. Здесь можно настроить количество одновременно показываемых файлов (рис.2). Вместо цифр, конечно, могут быть названия файлов изображений, которые вы будете давать им при сохранении.
Если теперь щелкнуть на выбранном файле картинки, то справа, в разделе Подробности, появится информация о размещаемом изображении и ее миниатюра. Это очень удобно. Позволяет быть уверенным, что это именно нужная вставляемая фотография, не только по названию, но и визуально.
Одновременно вверху в строке URL появится адрес вставляемого изображения. Вручную вводить его не придется, что исключает возможность ошибки.
Ниже, в строке Альт. текст можно ввести поясняющий текст. Этот текст будет автоматически включен в свойство alt тега <img> и будет виден в HTML-коде вашей страницы.
Далее нужно будет указать размеры вставляемого фото или изображения. По умолчанию там будет указан реальный размер изображения, но он может быть слишком велик и не будет помещаться на странице сайта. Поэтому лучше размер картинки или фотографии подогнать под размер страницы.
Подгонять лучше по ширине (первое число), а высота изображения будет изменена автоматически. Но это если будет стоять галочка в окошке Пропорциональный. Это значит, что при изменении одного размера фотографии, второй будет изменен с сохранением пропорции и картинка, которую вы собираетесь вставить на сайт, не будет искажена.
В следующей строке можно указать расположение вставляемого фото на странице, хотя это можно сделать и потом в визуальном редакторе.
Если вы хотите на сайт вставить фото в рамку, то это можно сделать здесь же, задав в Менеджере границы рамки, их ширину. Выбрать стиль и цвет вставляемой рамки. В зависимости от выбранного стиля рамки и дизайна сайта, можно придать вставляемому фото дополнительную выразительность.
Затем можно щелкнуть вкладку Дополнительно и в строку Заглавие также ввести поясняющий текст. Этот текст будет высвечиваться при наведении курсора на картинку размещенную на сайте.
Как уже говорилось, чтобы разместить фото на сайт, предварительно его нужно скопировать на сервер провайдера. Сделать это проще всего с помощью файлового менеджера Total Commander.
На сервере провайдера файлы сайта находятся в коренной папке, обычно имеющей имя сайта. Внутри этой папки есть вложенная папка, по умолчанию предназначенная для хранения фото и изображений, которые затем можно будет разместить на сайте, используя визуальный редактор.
Для сайтов, созданных на основе CMS-системы Joomla, такая папка называется images. В эту папку вложена папка stories.
Именно в папку stories нужно скопировать свои фото и картинки, для того, чтобы потом разместить их на сайте.
Все фото и изображения, помещенные в эту папку будут доступны для размещения на сайт через Менеджер изображений визуального редактора так, как описано выше.
