Categories: Создание сайта

Как вставить картинку (изображение) на сайт

Любой сайт невозможен без художественного оформления. Поэтому прежде всего необходимо знать как вставить картинку (изображение) на сайт.

HTML

Я уже писала, что один из основных языков, с помощью которого написаны веб-страницы, – HTML. Соответственно начнем с самых азов. Тег HTML с помощью которого вставляется картинка на сайт – это <img> и выглядит это так:

<img src="ссылка_ на_изображение.jpg">

Вместо “ссылка_на_изображение.jpg” Вам просто нужно вставить путь к необходимой картинке. Естественно, что языком HTML нужно пользоваться в HTML редакторах.

Самый необходимый атрибут, на мой взгляд, который вы будете употреблять, это ширина картинки – width=””, которая задается в пикселях. Очень часто, когда задана ширина, высоту изображения уже задавать необязательно. Она будет задана автоматически относительной указанной ширины.

<img src="ссылка_ на_изображение.jpg" width="100">

Как вставить изображение на сайте uCoz

Зарегистрируйтесь в системе uCoz, чтобы создать полноценный сайт всего за несколько кликов.

Способ 1

Практически во всех текстовых модулях Вы можете добавить картинку на сайт с помощью кнопочки .
Она находится в меню сверху окна наполнения страницы.
В модуле “Редактор страниц” Вам доступен только этот способ или же добавления в Панели HTML кодов с помощью тегов HTML, о которых я писала выше.
После нажатия кнопки перед вами открывается следующее окно.

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

Первое и самое главное, без чего Вы никак не обойдетесь, это сама ссылка на изображение – путь к файлу. Если Вы его знаете просто вставляйте в строку, а если нет нажмите на значок папки справа и попадете в файловый менеджер, где Вы сможете выбрать уже имеющее изображение или загрузить новое.
Название. Тут Вы пишите название картинки. По этому названию поисковые системы будут индексировать это изображение.
Выравнивание. Где будет размещен рисунок: влево, вправо, середина и др. значения.
Отступ. Тут имеется ввиду отступ от текста. Величина задается в пикселях.

Больше статей: Пошаговая инструкция с картинками для сайта

После того, как Вы все заполнили нажимайте кнопку вставить.

Способ 2

В модуле “Каталог сайтов” есть еще одна возможность добавления изображений, кроме вышеупомянутой. Добавляя картинки таким образом появляется дополнительная функция: при нажатии на картинку она открывается в увеличенном размере – эффект “lightbox” (автоматически установлен на всех сайтах uCoz с 12..06.2012). Этим способом хорошо делать скриншоты в статье, статьи с иллюстрациями. Плюсы этого способа в том, что все картинки будут одинакового размера. Это очень удобно, так как сама картинка добавляется в два шага, быстро и прямо в визуальном редакторе.

Для того чтобы добавить изображение просто нажмите на “Выберите файл” и в диалоговом окне выберите нужную картинку на Вашем компьютере. Далее система сама сгенерирует системный код ucoz для этой картинки и только для этой страницы.

Этот системный код, например $IMAGE1$, вы копируете и вставляете в любое место Вашей статьи прямо в визуальном редакторе. Справа от системного кода Вы можете задать размер изображения.

Способ 3. Lightbox на uCoz

2.06.2012 – на uCoz внедрили использование эффекта для изображений fancyBox v2.0.5 он же ulightbox (название юкоза). По умолчанию (это значит, что скрипт встроен по умолчанию и есть на каждой странице) появился рабочий скрипт fancyBox v2.0.5 со своими стилями оформления.
Fancybox – это инструмент для отображения картинок, html контента и мульти-медиа в стиле “lightbox”, при котором картинка накрывает основную страницу сайта. Как использовать эту функцию в два клика описано выше, в Способе №2.
Но, если Вы хотите поэкспериментировать с этой возможностью в ручном режиме (в тегах HTML) читайте дальше.
Функция “lightbox” в модулях встроена автоматически. но если Вы хотите внести в нее какие-то свои небольшие изменения, тогда третий способ для Вас:

Открываете файловый менеджер и добавляете новое изображение (или находите необходимое). Копируете ссылку на это изображение куда-нибудь.

Открываете “Панель HTML кодов” и в нужное место вставляете следующий код:

<div> 
<a href="ссылка_ на_изображение.jpg" class="ulightbox" data-fancybox-group="ultbx" title="Нажмите для просмотра"><img alt="" style="margin:0;padding:0;border:0; width:600;" src="ссылка_ на_изображение.jpg" title="Название изображения"></a> 
</div>

Вместо “ссылка_на_изображение.jpg” вставляете ссылку на на ранее скопированное изображение. Обратите внимание что данная ссылка встречается в этом коде 2 раза!!!
Вместо “width:600” можете поставить свою ширину картинки.
Вместо “Название изображения” напишите свое название картинки.
Также в теги style, который описывает стили картинки, Вы можете дополнять и менять стили по своему усмотрению.

Больше статей: Как поменять дизайн сайта uCoz

И Вы получите прекрасный эффект lightbox в нужном Вам модуле. К сожалению этот код нельзя использовать на других сайтах.

Картинка из текстовой ссылки

С помощью lightbox на uCoz можно сделать так, чтобы при клике на ссылку появлялась картинка. Получается как вариант всплывающего окна, только само окно – всегда картинка.

<div><a href="ссылка_ на_изображение.jpg" class="ulightbox" data-fancybox-group="ultbx" title="Нажмите для просмотра">Анкор ссылки</a></div>

вместо “Анкор ссылки” – вставляете описание своей ссылки
вместо “ссылка_на_изображение.jpg” вставляете ссылку на на ранее скопированное изображение.
Пример ссылки