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

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

HTML

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

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

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

Как вставить изображение на сайте 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>

  1 2 3

  <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, который описывает стили картинки, Вы можете дополнять и менять стили по своему усмотрению.

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

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

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

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